/* =============================================
   B21 SHOEMAKER - MINI CRM v3.0
   Professional Light Theme — Green Accent
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-body: var(--bg-body, var(--bg-body));
    --bg-white: var(--bg-white);
    --bg-card: var(--bg-white);
    --bg-sidebar: var(--bg-white);
    --bg-hover: #f8f9fb;
    --bg-input: var(--bg-body, var(--bg-body));

    --text-primary: var(--text-primary, var(--text-primary));
    --text-secondary: var(--text-secondary, var(--text-secondary));
    --text-muted: var(--text-muted, var(--text-muted));
    --text-label: #7c8491;

    --green: var(--green);
    --green-dark: var(--green-dark);
    --green-light: var(--green-light);
    --green-bg: var(--green-bg);
    --red: var(--red);
    --red-light: var(--red-light);
    --blue: var(--blue);
    --blue-light: var(--blue-light);
    --purple: var(--purple);
    --purple-light: var(--purple-light);
    --amber: var(--amber);
    --amber-light: var(--amber-light);
    --orange: var(--orange);
    --teal: var(--teal);

    --border: var(--border, var(--border));
    --border-light: var(--border-light);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 4px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    --sidebar-width: 240px;
    --transition: all 0.2s ease;
    --transition-fast: all 0.15s ease;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* === SIDEBAR === */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.brand-icon {
    font-size: 20px;
}

.sidebar-brand h1 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    line-height: 1;
}

.brand-sub {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    line-height: 1;
}

.sidebar-section-label {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    padding: 8px 14px 1px;
    margin: 0;
    flex-shrink: 0;
}

.sidebar-nav {
    padding: 1px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8rem;
    transition: var(--transition);
    cursor: pointer;
    line-height: 1.3;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--green-light);
    color: var(--green-dark);
    font-weight: 600;
}

.nav-item.active .nav-icon {
    color: var(--green);
}

.nav-icon {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}

.sidebar-footer {
    padding: 6px 14px;
    border-top: 1px solid var(--border-light);
    margin-top: auto;
    flex-shrink: 0;
}

.sidebar-badge {
    font-size: 0.6rem;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 500;
}

/* === MAIN CONTENT === */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 28px 32px;
    min-width: 0;
}

.page {
    display: none;
}

.page.active {
    display: block;
    animation: pageIn 0.3s ease;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page Header */
.page-header {
    margin-bottom: 24px;
}

.page-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.page-header-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* === SECTION HEADER === */
.section-header {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 24px 0 12px;
}

/* === KPI CARDS - ROW 1 (Big Cards) === */
.kpi-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.kpi-main-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    position: relative;
}

.kpi-main-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-bottom: 8px;
}

.kpi-main-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.kpi-main-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.kpi-main-unit {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.kpi-main-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Progress bar */
.progress-bar-wrapper {
    background: var(--border, var(--border));
    border-radius: 20px;
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 20px;
    background: var(--green);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Change badge */
.change-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.change-badge.positive {
    background: var(--green-light);
    color: var(--green-dark);
}

.change-badge.negative {
    background: var(--red-light);
    color: var(--red);
}

/* Highlight text */
.text-green {
    color: var(--green-dark);
}

.text-red {
    color: var(--red);
}

.kpi-highlight-card {
    background: var(--green-bg);
    border-color: #bbf7d0;
}

.kpi-highlight-card .kpi-main-value {
    color: var(--green-dark);
}

/* === KPI CARDS - ROW 2 (Detail Cards) === */
.kpi-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.kpi-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.kpi-detail-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 10px;
}

.kpi-detail-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.kpi-detail-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
}

.kpi-detail-unit {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* === CHART SECTIONS === */
.chart-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    margin-bottom: 16px;
}

.chart-row-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.chart-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.chart-card-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.chart-mini-kpis {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.chart-mini-kpi {
    display: flex;
    flex-direction: column;
}

.chart-mini-kpi-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.chart-mini-kpi-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.chart-container {
    position: relative;
}

.chart-container-sm {
    height: 220px;
}

.chart-container-md {
    height: 280px;
}

.chart-container-lg {
    height: 320px;
}

/* Campaign status card */
.status-message {
    background: var(--bg-body);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-message-icon {
    font-size: 2rem;
}

.status-message-text h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.status-message-text p {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* === HEATMAP TABLE === */
.heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.heatmap-table th {
    text-align: center;
    padding: 8px 6px;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.heatmap-table th:first-child {
    text-align: left;
    min-width: 130px;
}

.heatmap-table td {
    text-align: center;
    padding: 6px;
    border-radius: var(--radius-xs);
}

.heatmap-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    padding-left: 0;
}

.heatmap-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 4px;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.heatmap-cell:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.heat-0 {
    background: var(--green-bg);
    color: var(--text-muted);
}

.heat-1 {
    background: var(--green-light);
}

.heat-2 {
    background: #bbf7d0;
}

.heat-3 {
    background: #86efac;
}

.heat-4 {
    background: #4ade80;
    color: var(--bg-white);
}

.heat-5 {
    background: var(--green);
    color: var(--bg-white);
}

.heat-6 {
    background: var(--green-dark);
    color: var(--bg-white);
}

/* === DATA TABLES === */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table th {
    text-align: left;
    padding: 12px 16px;
    background: var(--bg-body);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.data-table tbody tr {
    transition: var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--bg-hover);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table .text-right {
    text-align: right;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: var(--green-bg) !important;
}

/* Segment badges */
.seg-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.seg-badge[data-seg="VIP"] {
    background: var(--amber-light);
    color: #92400e;
}

.seg-badge[data-seg="Loyal"] {
    background: var(--purple-light);
    color: var(--purple);
}

.seg-badge[data-seg="Regular"] {
    background: var(--green-light);
    color: var(--green-dark);
}

.seg-badge[data-seg="New"] {
    background: var(--blue-light);
    color: var(--blue);
}

/* === Membership Tier Badges (B21 chính thức) === */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.tier-diamond {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0369a1;
    border: 1px solid #7dd3fc;
    text-shadow: 0 0 8px rgba(3, 105, 161, 0.15);
}
.tier-platinum {
    background: linear-gradient(135deg, #f3f4f6, #d1d5db);
    color: #1f2937;
    border: 1px solid #9ca3af;
}
.tier-gold {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}
.tier-silver {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border: 1px solid #86efac;
}
.tier-member {
    background: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.cat-badge {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-body);
    color: var(--text-secondary);
}

.margin-positive {
    color: var(--green-dark);
    font-weight: 600;
}

.margin-negative {
    color: var(--red);
    font-weight: 600;
}

/* === FILTERS === */
.filter-bar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.filter-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    min-width: 280px;
    outline: none;
    transition: var(--transition);
}

.filter-input::placeholder {
    color: var(--text-muted);
}

.filter-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    background: var(--bg-white);
}

.filter-select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    transition: var(--transition);
}

.filter-select:focus {
    border-color: var(--green);
}

.segment-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-body);
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.seg-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.seg-btn:hover {
    color: var(--text-primary);
    background: var(--bg-white);
}

.seg-btn.active {
    background: var(--green);
    color: var(--bg-white);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.3);
}

.btn-primary {
    background: var(--green);
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 24px;
    color: var(--bg-white);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary:hover {
    background: var(--green-dark);
}

/* === PAGINATION === */
.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
}

.pagination button {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.pagination button:hover:not(:disabled) {
    border-color: var(--green);
    color: var(--green-dark);
}

.pagination button.active {
    background: var(--green);
    color: var(--bg-white);
    border-color: var(--green);
    font-weight: 600;
}

.pagination button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* === MODAL === */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.modal-overlay.show {
    display: flex;
    animation: overlayIn 0.2s ease;
}

@keyframes overlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 92%;
    max-width: 1280px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--red);
    background: var(--red-light);
}

.modal-body {
    padding: 24px;
}

.modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.modal-info-item {
    background: var(--bg-body);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.modal-info-item label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    font-weight: 600;
}

.modal-info-item span {
    font-size: 0.92rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* === EMPTY STATE === */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 0.88rem;
    font-weight: 500;
}

/* === TOAST === */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    z-index: 300;
    animation: toastIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast.toast-success {
    border-left: 3px solid var(--green);
}

.toast.toast-error {
    border-left: 3px solid var(--red);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* === CUSTOMER TABLE COMPACT === */
.data-table-highlight {
    font-size: 0.82rem;
}

.data-table-highlight th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, var(--text-muted));
    font-weight: 600;
    padding: 8px 10px;
    white-space: nowrap;
}

.data-table-highlight td {
    padding: 8px 10px;
}

.col-id {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.col-mono {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.78rem;
}

.col-date {
    font-size: 0.8rem;
    white-space: nowrap;
}

.col-revenue {
    color: var(--green-dark);
    font-weight: 600;
}

.col-avg {
    font-size: 0.78rem;
    color: var(--text-muted, var(--text-muted));
}

.col-time {
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-muted));
    white-space: nowrap;
}

/* === KPI GRID (8 cards) === */
.m-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.m-kpi-card {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 10px 12px;
    text-align: center;
}

.m-kpi-card-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.m-kpi-card-val small {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-muted, var(--text-muted));
    margin-left: 2px;
}

.m-kpi-card-val.accent {
    color: var(--green-dark);
}

.m-kpi-card-val.warn {
    color: #d97706;
}

.m-kpi-card-val.danger {
    color: var(--red);
}

.m-kpi-card-lbl {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, var(--text-muted));
    margin-top: 4px;
    font-weight: 600;
}

/* === GIFT ROW (Tất tặng kèm) === */
.gift-row {
    background: #fef9e7 !important;
    font-style: italic;
}

.gift-row:hover {
    background: var(--amber-light) !important;
}

.gift-tag {
    font-size: 0.7rem;
    vertical-align: middle;
}

/* === CATEGORY BADGE SMALL === */
.cat-badge-sm {
    display: inline-block;
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* === DISCOUNT BADGE === */
.discount-badge {
    color: #d97706;
    font-weight: 500;
}

.discount-badge.zero {
    color: #d1d5db;
}

/* === CLICKABLE ROW === */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: var(--green-bg) !important;
}

/* === ORDER KPI DASHBOARD === */
.order-kpi-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .order-kpi-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
}

.okpi-card {
    background: var(--bg-white);
    border: 1px solid var(--border, var(--border));
    border-radius: 10px;
    padding: 14px 18px;
    transition: box-shadow 0.2s;
}

.okpi-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.okpi-label {
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-muted));
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.okpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, var(--text-primary));
    line-height: 1.2;
}

.okpi-value.accent {
    color: var(--blue);
}

.okpi-value.warn {
    color: #d97706;
}

.okpi-value.green {
    color: var(--green-dark);
}

.okpi-sub {
    font-size: 0.72rem;
    color: var(--text-muted, var(--text-muted));
    margin-top: 4px;
}

.okpi-sub strong {
    color: var(--text-secondary, var(--text-secondary));
}

/* === COL SHIFT/COST TAG === */
.col-shift {
    font-size: 0.78rem;
    white-space: nowrap;
}

.cost-tag {
    color: #9333ea;
    font-weight: 500;
}

small.muted {
    color: var(--text-muted, var(--text-muted));
    font-size: 0.7rem;
}

.margin-positive {
    color: var(--green-dark);
    font-weight: 600;
}

.margin-negative {
    color: var(--red);
    font-weight: 600;
}

/* === FILTER PANEL (ORDERS) === */
.filter-panel {
    background: var(--bg-white);
    border: 1px solid var(--border, var(--border));
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border, var(--border));
    cursor: pointer;
    user-select: none;
}

.filter-panel-header span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.btn-collapse {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-muted));
    cursor: pointer;
    transition: all 0.2s;
}

.btn-collapse:hover {
    background: var(--bg-input);
    color: var(--text-primary, var(--text-primary));
}

.filter-panel-body {
    padding: 14px 16px;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    max-height: 300px;
    opacity: 1;
}

.filter-panel-body.collapsed {
    max-height: 0;
    padding: 0 16px;
    opacity: 0;
    overflow: hidden;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.filter-row-main {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.filter-row-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 10px;
}

@media (max-width: 768px) {

    .filter-row,
    .filter-row-main,
    .filter-row-sub {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group-actions {
        margin-left: 0;
        justify-content: flex-end;
    }
}

.filter-group-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-left: auto;
}

.filter-badge {
    display: inline-block;
    background: #2e7d32;
    color: var(--bg-white);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 10px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}

.member-active {
    color: #2e7d32;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Tier badges */
.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.tier-vip {
    background: var(--amber-light);
    color: #92400e;
    border: 1px solid var(--amber);
}

.tier-loyal {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid var(--purple);
}

.tier-regular {
    background: var(--green-light);
    color: #166534;
    border: 1px solid var(--green);
}

.tier-new {
    background: #dbeafe;
    color: var(--blue);
    border: 1px solid var(--blue);
}

.col-member-exp {
    font-size: 0.78rem;
    white-space: nowrap;
}

.filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

/* === NOTE WARNING === */
.note-warn {
    display: inline-block;
    background: var(--amber-light);
    color: #92400e;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* === PAYMENT METHOD BADGE === */
.pay-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.7rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
}

.pay-cash {
    background: var(--green-light);
    color: #166534;
}

.pay-transfer {
    background: #dbeafe;
    color: var(--blue);
}

.pay-card {
    background: #f3e8ff;
    color: #6b21a8;
}

.pay-other {
    background: var(--bg-input);
    color: var(--text-secondary);
}

/* === SESSION (BUỔI) BADGE === */
.session-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.session-sang {
    background: #FEF3C7;
    color: #92400e;
}

.session-trua {
    background: #FFEDD5;
    color: #9a3412;
}

.session-chieu {
    background: #DBEAFE;
    color: #1e40af;
}

.session-toi {
    background: #E5E7EB;
    color: #374151;
}

.session-khac {
    background: #F3F4F6;
    color: #6b7280;
}

/* === SESSION KPI CARD === */
.okpi-session-card {
    grid-column: span 1;
}

.session-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2px;
}

.session-kpi-item {
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--bg-body, #f9fafb);
    line-height: 1.35;
}

.session-kpi-item.best {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.session-kpi-rev {
    font-size: 0.72rem;
    color: var(--green-dark, #166534);
    font-weight: 600;
}

.session-kpi-pct {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 4px;
}

/* === ORDER NOTE COLUMN === */
.col-note {
    max-width: 180px;
    font-size: 0.75rem;
}

.note-text {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, var(--text-muted));
    font-style: italic;
    cursor: help;
}

/* === DISCOUNT BADGE === */
.discount-badge {
    color: var(--red);
    font-weight: 500;
}

.discount-badge.zero {
    color: var(--text-muted, var(--text-muted));
    font-weight: 400;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, var(--text-muted));
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .kpi-main-grid {
        grid-template-columns: 1fr;
    }

    .kpi-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-row,
    .chart-row-equal {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .kpi-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-input {
        min-width: 100%;
    }

    .modal {
        width: 96%;
    }

    .modal-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Count animation */
.count-up {
    animation: pop 0.3s ease;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* === ZALO TOOLTIP (hover popup) === */
.zalo-cell {
    position: relative;
    cursor: default;
    display: inline-block;
}

.zalo-trigger {
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.78rem;
    font-weight: 600;
}

.zalo-trigger.badge-connected {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zalo-trigger.badge-conflict {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zalo-trigger.badge-unmatched-customer {
    background: #fef9c3;
    color: #a16207;
    border: 1px solid #fef08a;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zalo-uid-sub {
    font-size: 0.7rem;
    color: #4b5563;
    font-weight: normal;
}

.zalo-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 0;
    min-width: 280px;
    max-width: 380px;
}

.zalo-cell:hover .zalo-tooltip {
    display: none !important;
}

.zalo-tooltip-header {
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--bg-hover, #f9fafb);
    position: sticky;
    top: 0;
}

.zalo-tooltip-body {
    padding: 10px 14px;
    font-size: 0.8rem;
    color: var(--text-primary, #111827);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

/* === PRODUCT TOOLTIP (hover popup) === */
.product-cell {
    position: relative;
    cursor: default;
}

.product-trigger {
    color: var(--blue);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline dotted var(--blue);
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.product-trigger:hover {
    color: var(--green-dark);
}

.product-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 0;
    min-width: 260px;
    max-width: 360px;
    max-height: 250px;
    overflow-y: auto;
}

.product-cell:hover .product-tooltip {
    display: block;
}

.product-tooltip-header {
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg-hover);
    position: sticky;
    top: 0;
}

.product-tooltip-item {
    padding: 8px 14px;
    font-size: 0.82rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-tooltip-item:last-child {
    border-bottom: none;
}

.product-tooltip-item:hover {
    background: var(--green-bg);
}

.product-tooltip-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

/* === ADVANCED FILTER BAR === */
.filter-bar-advanced {
    padding: 10px 16px;
    margin-top: -8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.filter-group-sm {
    min-width: auto;
    gap: 2px;
}

.filter-group-sm label {
    font-size: 0.72rem;
}

.filter-group-sm .filter-input {
    min-width: 0;
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.filter-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 6px;
    align-self: flex-end;
    margin-bottom: 4px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.78rem;
    border-radius: 6px;
    height: 32px;
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-ghost:hover {
    background: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* === HIGHLIGHT TABLE === */
.data-table-highlight tbody tr:nth-child(even) {
    background: var(--bg-hover);
}

.data-table-highlight tbody tr:hover {
    background: var(--green-bg) !important;
    box-shadow: inset 3px 0 0 var(--green);
}

.data-table-highlight tbody tr:hover td:first-child {
    border-left: 3px solid var(--green);
    padding-left: 9px;
}

.data-table-highlight thead th {
    background: linear-gradient(180deg, #f8fafb 0%, #f0f2f5 100%);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

/* Birthday styling */
.birthday-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.age-badge {
    display: inline-block;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 600;
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 32px;
    text-align: center;
}

/* Discount styling */
.discount-badge {
    color: var(--red);
    font-weight: 600;
    font-size: 0.82rem;
}

.discount-badge.zero {
    color: var(--text-muted);
    font-weight: 400;
}

/* === SEGMENT COUNT BADGES === */
.seg-count {
    display: inline-block;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    min-width: 20px;
    text-align: center;
    vertical-align: middle;
}

.seg-btn.active .seg-count {
    background: rgba(255, 255, 255, 0.28);
    color: var(--bg-white);
}

/* === COUNT BADGE (filtered / total) === */
.count-filtered {
    color: var(--green-dark);
    font-weight: 800;
    font-size: 1rem;
}

.count-sep {
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 2px;
}

.count-total {
    color: var(--text-secondary);
    font-weight: 500;
}

.count-total-main {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
}

.count-flash {
    animation: countFlash 0.4s ease;
}

@keyframes countFlash {
    0% {
        opacity: 0.5;
        transform: translateY(-2px);
    }

    50% {
        opacity: 1;
        transform: translateY(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === PRODUCT TABLE TAGS === */
.cat-badge-sub {
    background: #e8f0fe;
    color: #1967d2;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.color-tag {
    background: #fef3e2;
    color: #b45309;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.staff-tag {
    background: var(--green-bg);
    color: #166534;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* === MINIMALISM MODAL === */

/* Profile row */
.m-profile {
    margin-bottom: 16px;
}

.m-profile-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--border, var(--border));
    padding-bottom: 14px;
}

.m-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, var(--text-muted));
    font-weight: 500;
}

.m-value {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1f2937;
}

.m-value.mono {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8rem;
}

.m-value.accent {
    color: var(--green-dark);
    font-weight: 700;
}

/* KPI row */
.m-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin: 14px 0 18px;
    padding: 12px 0;
    border-top: 1px solid var(--bg-input);
    border-bottom: 1px solid var(--bg-input);
}

@media (max-width: 768px) {
    .m-kpi-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 0;
    }
}

.m-kpi {
    text-align: center;
}

.m-kpi+.m-kpi {
    border-left: 1px solid var(--bg-input);
}

.m-kpi-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, var(--text-primary));
    line-height: 1.2;
}

.m-kpi-val small {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-muted, var(--text-muted));
    margin-left: 2px;
}

.m-kpi-val.warn {
    color: #d97706;
}

.m-kpi-val.danger {
    color: var(--red);
}

.m-kpi-lbl {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted, var(--text-muted));
    font-weight: 500;
    margin-top: 3px;
}

/* Analysis grid */
.m-analysis-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

/* Panel */
.m-panel {
    background: #fafafa;
    border-radius: 6px;
    padding: 10px 12px;
}

.m-panel-title {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted, var(--text-muted));
    margin-bottom: 8px;
}

.m-muted {
    font-weight: 400;
    color: var(--text-muted, var(--text-muted));
    font-size: 0.62rem;
}

/* Stat rows (shared) */
.staff-stat-row,
.cat-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.72rem;
}

.staff-stat-row+.staff-stat-row,
.cat-stat-row+.cat-stat-row {
    border-top: 1px solid var(--bg-input);
}

.staff-stat-name,
.cat-stat-name {
    min-width: 72px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
}

.staff-stat-bar-wrap {
    flex: 1;
    height: 4px;
    background: var(--bg-input);
    border-radius: 10px;
    overflow: hidden;
}

.staff-stat-bar {
    height: 100%;
    background: var(--text-muted, var(--text-muted));
    border-radius: 10px;
    transition: width 0.5s ease;
}

.staff-stat-count {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted, var(--text-muted));
    min-width: 30px;
    text-align: right;
}

.staff-stat-pct {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 28px;
    text-align: right;
}

/* Color breakdown */
.color-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.color-stat-item+.color-stat-item {
    border-top: 1px solid var(--bg-input);
}

.color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.color-stat-name {
    flex: 1;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.color-stat-pct {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Period tags */
.period-tag {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}

.period-đầu {
    background: #ecfdf5;
    color: var(--green-dark);
}

.period-giữa {
    background: var(--blue-light);
    color: var(--blue);
}

.period-cuối {
    background: #faf5ff;
    color: #7c3aed;
}

/* Table minimal */
.m-table {
    font-size: 0.76rem;
}

.m-table th {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, var(--text-muted));
    font-weight: 600;
    border-bottom: 1px solid var(--border, var(--border));
    padding: 6px 8px;
}

.m-table td {
    padding: 5px 8px;
    color: var(--text-secondary);
}

.m-table tbody tr:hover {
    background: #fafafa;
}

.accent-text {
    font-weight: 600;
    color: var(--green-dark);
}

.m-empty {
    text-align: center;
    color: var(--text-muted, var(--text-muted));
    padding: 20px;
}

/* === PRODUCT PAGE === */
.product-thumb {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border, var(--border));
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-thumb-placeholder {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 1rem;
    border: 1px solid var(--border, var(--border));
}

.col-img {
    width: 44px;
    padding: 4px 6px !important;
    position: relative;
}

/* Hover zoom preview */
.col-img .product-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.product-thumb-wrap {
    position: relative;
    display: inline-block;
}

.product-thumb-wrap:hover .product-zoom-preview {
    display: block;
    animation: zoomFadeIn 0.2s ease forwards;
}

.product-zoom-preview {
    display: none;
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border, var(--border));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    background: var(--bg-white);
    pointer-events: none;
}

@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.85);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.col-sku {
    white-space: nowrap;
    font-size: 0.78rem;
}

.col-sku .mono {
    color: var(--text-muted);
    font-family: 'SF Mono', monospace;
}

.col-size {
    white-space: nowrap;
}

.col-date-sm {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.variant-badge {
    display: inline-block;
    background: #dbeafe;
    color: var(--blue);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-right: 4px;
}

/* ===== Product KPI Dashboard ===== */
.product-kpi-dashboard {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.pkpi-section {
    flex: 1;
    min-width: 280px;
    background: var(--bg-white);
    border: 1px solid var(--border, var(--border));
    border-radius: 12px;
    padding: 16px 20px;
}

.pkpi-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.pkpi-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pkpi-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg-body);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: left;
}

.pkpi-label {
    font-size: 0.73rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.pkpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* % bán tag */
.pct-sold-tag {
    display: inline-block;
    background: var(--amber-light);
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 4px;
}

.size-range-tag {
    display: inline-block;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

/* Expand / Collapse button */
.expand-btn {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    background: var(--border-light);
    border-radius: 4px;
    font-size: 0.65rem;
    cursor: pointer;
    color: var(--text-muted, var(--text-muted));
    margin-right: 4px;
    transition: all 0.15s ease;
    user-select: none;
    vertical-align: middle;
}

.expand-btn:hover {
    background: #dbeafe;
    color: var(--blue);
}

/* Parent row with variants */
.product-parent-row.has-variants {
    cursor: pointer;
}

.product-parent-row.variant-expanded {
    background: #f8faff !important;
    border-bottom: none;
}

/* Child variant rows */
.variant-row {
    background: #fafbfd;
    border-left: 3px solid var(--blue-light);
}

.variant-row:hover {
    background: var(--blue-light) !important;
}

.variant-row td {
    font-size: 0.78rem;
    color: var(--text-muted, var(--text-muted));
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.variant-indent {
    padding-left: 28px !important;
}

.variant-name {
    font-weight: 500;
    color: var(--text-secondary, var(--text-secondary));
}

.product-thumb-sm {
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

/* Filter panel container */
.filter-panel-container {
    background: var(--bg-white);
    border: 1px solid var(--border, var(--border));
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.btn-collapse {
    background: none;
    border: 1px solid var(--border, var(--border));
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
}

.btn-collapse:hover {
    background: #f8f9fb;
}

.filter-panel-body {
    padding: 12px 16px 16px;
}

.filter-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 10px;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-row .filter-group {
    flex: 1;
    min-width: 140px;
}

.filter-row .filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding-bottom: 2px;
}

/* ========================================
   ORDER FILTER PANEL — KiotViet Style
   ======================================== */
.ofilter-panel {
    background: var(--bg-white);
    border: 1px solid var(--border, var(--border));
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Header */
.ofilter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}

.ofilter-header:hover {
    background: #fafbfc;
}

.ofilter-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.ofilter-icon {
    font-size: 1rem;
}

.ofilter-result-badge {
    display: inline-block;
    background: var(--green-light);
    color: #166534;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: 6px;
}

.ofilter-collapse-btn {
    background: var(--bg-input);
    border: 1px solid var(--border, var(--border));
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--text-muted, var(--text-muted));
    font-weight: 500;
    transition: all 0.15s;
}

.ofilter-collapse-btn:hover {
    background: var(--border, var(--border));
    color: var(--text-secondary);
}

/* Body */
.ofilter-body {
    padding: 16px 20px 18px;
    max-height: 800px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.3s ease;
    overflow: hidden;
}

.ofilter-body.collapsed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .ofilter-body {
        padding: 10px 14px 12px;
    }
}

/* Filter rows */
.ofilter-row {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ofilter-row+.ofilter-row {
    margin-top: 12px;
}

.ofilter-row-sub {
    padding-top: 12px;
    border-top: 1px solid var(--bg-input);
}

@media (max-width: 768px) {
    .ofilter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .ofilter-row+.ofilter-row {
        margin-top: 6px;
    }

    .ofilter-field {
        width: 100%;
        gap: 2px;
    }

    .ofilter-label {
        font-size: 0.62rem;
        letter-spacing: 0.4px;
    }

    .ofilter-input {
        height: 36px;
        padding: 6px 10px;
        font-size: 0.82rem;
    }

    /* Date fields side-by-side */
    .ofilter-row .ofilter-field-date {
        width: 48%;
        flex: 1 1 48%;
        display: inline-flex;
    }

    /* Actions row compact */
    .ofilter-actions {
        flex-direction: row;
        margin-top: 4px;
    }

    .ofilter-btn-apply,
    .ofilter-btn-clear {
        height: 36px;
        font-size: 0.78rem;
    }

    /* Period picker compact */
    .operiod-picker {
        padding: 10px 0 4px;
        margin-top: 8px;
        gap: 16px;
    }
}

/* Fields */
.ofilter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 120px;
}

/* Specific field sizes for Row 1 */
.ofilter-field-period {
    flex: 0 0 200px;
    min-width: 200px;
}

.ofilter-field-search {
    flex: 1 1 200px;
    min-width: 160px;
}

.ofilter-field-date {
    flex: 0 0 155px;
    min-width: 140px;
}

.ofilter-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted, var(--text-muted));
}

.ofilter-input {
    padding: 8px 12px;
    border: 1px solid var(--border, var(--border));
    border-radius: 8px;
    font-size: 0.84rem;
    background: var(--bg-white);
    color: var(--text-secondary);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
}

.ofilter-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ofilter-input::placeholder {
    color: #b0b7bf;
}

/* Period field wrap (select + expand button) */
.ofilter-period-wrap {
    display: flex;
    gap: 0;
    width: 100%;
}

.ofilter-period-wrap .ofilter-input {
    border-radius: 8px 0 0 8px;
    border-right: none;
    flex: 1;
    min-width: 0;
    width: auto;
}

.ofilter-period-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 38px;
    border: 1px solid var(--border, var(--border));
    border-radius: 0 8px 8px 0;
    background: #f9fafb;
    color: var(--text-muted, var(--text-muted));
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.ofilter-period-expand-btn:hover {
    background: var(--border, var(--border));
    color: var(--text-secondary);
}

.ofilter-period-expand-btn.active {
    background: var(--blue);
    color: var(--bg-white);
    border-color: var(--blue);
}

/* Action buttons */
.ofilter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding-bottom: 0;
    flex-shrink: 0;
}

.ofilter-btn-apply {
    height: 38px;
    padding: 0 20px;
    background: var(--green);
    color: var(--bg-white);
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ofilter-btn-apply:hover {
    background: var(--green-dark);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.ofilter-btn-clear {
    height: 38px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-muted, var(--text-muted));
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ofilter-btn-clear:hover {
    color: var(--red);
    text-decoration: underline;
}

/* ========================================
   PERIOD PICKER PANEL (Expandable Chips)
   ======================================== */
.operiod-picker {
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
    padding: 16px 0 8px;
    margin-top: 14px;
    border-top: 1px solid var(--border-light);
    animation: periodSlideDown 0.25s ease forwards;
    overflow-x: auto;
}

@keyframes periodSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.operiod-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.operiod-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.operiod-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.operiod-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    min-height: 44px;
    border: 1px solid var(--border, var(--border));
    border-radius: 18px;
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
}

.operiod-chip:hover {
    background: #f0f7ff;
    border-color: var(--blue-light);
    color: var(--blue);
}

.operiod-chip.active {
    background: var(--blue);
    color: var(--bg-white);
    border-color: var(--blue);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* =============================================
   QUICK FILTER BAR (Mobile Sticky, now Desktop too)
   ============================================= */
.quick-filter-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 12px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.order-filter-desktop-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-filter-desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

@media (min-width: 769px) {
    .order-filter-desktop-layout {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        align-items: center;
    }

    .order-filter-desktop-layout .ofilter-field-period {
        grid-column: span 1;
    }

    .order-filter-desktop-layout .ofilter-field-search {
        grid-column: span 3;
    }

    .order-filter-desktop-layout .ofilter-field {
        margin-bottom: 0 !important;
    }

    .order-filter-desktop-grid {
        display: contents;
        /* Make inner inputs participate in 4-col grid */
    }
}

/* =============================================
   SMART SUMMARY ROW (Option F)
   ============================================= */
.smart-summary-row {
    display: none;
    /* Mobile only, handled by media query below */
}

@media (max-width: 768px) {
    .smart-summary-row {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background: var(--bg-white);
        padding: 8px 12px;
        border-bottom: 1px solid var(--border-light);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .ssr-item {
        font-size: 0.75rem;
        color: var(--text-secondary, var(--text-secondary));
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .ssr-item strong {
        font-size: 0.85rem;
        color: var(--text-primary, var(--text-primary));
    }

    .ssr-divider {
        width: 1px;
        height: 16px;
        background: var(--border, var(--border));
    }
}

/* =============================================
   AVATAR BADGE (Option E) & REVENUE GLOW (Option A)
   ============================================= */
.avatar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bg-white);
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

.avatar-badge.bg-new {
    background-color: var(--blue);
}

.avatar-badge.bg-regular {
    background-color: var(--purple);
}

.avatar-badge.bg-loyal {
    background-color: var(--amber);
}

.avatar-badge.bg-guest {
    background-color: var(--text-muted, var(--text-muted));
}

.revenue-glow-high {
    border-left: 4px solid var(--red) !important;
}

.revenue-glow-mid {
    border-left: 4px solid var(--orange) !important;
}

.revenue-glow-low {
    border-left: 4px solid var(--blue) !important;
}


@media (max-width: 768px) {
    .quick-filter-bar {
        display: flex;
        gap: 8px;
        padding: 10px 12px;
        background: linear-gradient(135deg, var(--bg-body) 0%, #f0f4ff 100%);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        scrollbar-width: none;
        position: sticky;
        top: 0;
        z-index: 50;
        -webkit-overflow-scrolling: touch;
    }

    .quick-filter-bar::-webkit-scrollbar {
        display: none;
    }
}

.qf-chip {
    flex-shrink: 0;
    padding: 8px 16px;
    min-height: 36px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.qf-chip:active {
    transform: scale(0.95);
}

.qf-chip.active {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue) 100%);
    color: var(--bg-white);
    border-color: var(--blue);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.qf-chip-expand {
    background: var(--bg-input);
    border-color: var(--border);
    font-size: 1rem;
    padding: 8px 12px;
}

/* =============================================
   PULL-TO-REFRESH Indicator
   ============================================= */
.pull-indicator {
    display: none;
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    transition: opacity 0.3s;
}

.pull-indicator.visible {
    display: block;
}

.pull-indicator .pull-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: ptr-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes ptr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   INFINITE SCROLL + Mobile Pagination Hide
   ============================================= */
.scroll-sentinel {
    height: 1px;
    width: 100%;
}

.infinite-loader {
    display: none;
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.infinite-loader.loading {
    display: block;
}

.infinite-loader .loader-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: dot-pulse 1.2s ease-in-out infinite;
}

.infinite-loader .loader-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.infinite-loader .loader-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dot-pulse {

    0%,
    80%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@media (max-width: 1023px) {
    #orders-pagination {
        display: none !important;
    }
}

/* =============================================
   SWIPE-TO-ACTION on Order Cards
   ============================================= */
.swipe-card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius, 10px);
    margin-bottom: 0;
}

.swipe-actions-left,
.swipe-actions-right {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
}

.swipe-actions-right {
    right: 0;
    justify-content: flex-end;
}

.swipe-actions-left {
    left: 0;
    justify-content: flex-start;
}

.swipe-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 100%;
    border: none;
    cursor: pointer;
    color: var(--bg-white);
    font-size: 0.7rem;
    font-weight: 600;
    gap: 4px;
    transition: opacity 0.2s;
}

.swipe-action-btn .swipe-icon {
    font-size: 1.3rem;
}

.swipe-action-btn.action-detail {
    background: linear-gradient(135deg, var(--blue), var(--blue));
}

.swipe-action-btn.action-call {
    background: linear-gradient(135deg, #10b981, var(--green-dark));
}

.swipe-action-btn.action-bookmark {
    background: linear-gradient(135deg, var(--amber), #d97706);
}

.swipe-card-inner {
    position: relative;
    z-index: 2;
    background: var(--bg-card, var(--bg-white));
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.swipe-card-inner.swiping {
    transition: none;
}

/* Swipe hint animation on first load */
@keyframes swipe-hint {
    0% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(-30px);
    }

    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0);
    }
}

.swipe-hint-animate .swipe-card-inner {
    animation: swipe-hint 1.5s ease-in-out 0.5s 1;
}

/* =============================================
   AI ENGINE COMPONENTS
   ============================================= */

/* --- AI Segments Grid --- */
.ai-segments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.ai-segment-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ai-segment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ai-segment-card .seg-name {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.ai-segment-card .seg-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.ai-segment-card .seg-row span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* --- AI Card List (Risks / Opportunities) --- */
.ai-card-list {
    display: grid;
    gap: 10px;
    margin-bottom: 28px;
}

.ai-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    gap: 16px;
}

.ai-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border-color: var(--green);
}

.ai-card.risk {
    border-left: 3px solid var(--red);
}

.ai-card.opportunity {
    border-left: 3px solid var(--green);
}

.ai-card-info {
    flex: 1;
}

.ai-card-info .card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ai-card-info .card-detail {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.ai-card-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.ai-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.ai-badge.churn {
    background: var(--red-light);
    color: var(--red);
}

.ai-badge.revenue {
    background: var(--green-bg);
    color: var(--green-dark);
}

.ai-badge.reorder {
    background: var(--blue-light);
    color: var(--blue);
}

/* --- AI Actions --- */
.ai-actions-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ai-filter-btn {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-filter-btn:hover {
    border-color: var(--green);
    color: var(--green-dark);
}

.ai-filter-btn.active {
    background: var(--green);
    color: white;
    border-color: var(--green);
}

.ai-actions-list {
    display: grid;
    gap: 10px;
}

.ai-action-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    transition: all 0.2s;
}

.ai-action-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ai-action-card .action-priority {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.ai-action-card .action-priority.high {
    background: var(--red-light);
    color: var(--red);
}

.ai-action-card .action-priority.medium {
    background: #fff7ed;
    color: #ea580c;
}

.ai-action-card .action-priority.low {
    background: var(--green-bg);
    color: var(--green-dark);
}

.ai-action-card .action-info {
    flex: 1;
}

.ai-action-card .action-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.ai-action-card .action-reason {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ai-action-card .action-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.ai-action-card .action-expected {
    background: var(--green-bg);
    color: var(--green-dark);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.ai-action-card .action-type-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.action-type-badge.retention {
    background: var(--red-light);
    color: var(--red);
}

.action-type-badge.reorder {
    background: var(--blue-light);
    color: var(--blue);
}

.action-type-badge.loyalty {
    background: #fefce8;
    color: #ca8a04;
}

.ai-action-btns {
    display: flex;
    gap: 6px;
}

.ai-action-btns button {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-white);
}

.ai-action-btns .btn-done {
    background: var(--green);
    color: white;
    border-color: var(--green);
}

.ai-action-btns .btn-done:hover {
    background: var(--green-dark);
}

.ai-action-btns .btn-skip {
    color: var(--text-secondary);
}

.ai-action-btns .btn-skip:hover {
    border-color: var(--red);
    color: var(--red);
}

/* --- AI Chat Floating --- */
.ai-chat-toggle {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green), #0ea5e9);
    color: white;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
    transition: transform 0.2s;
}

.ai-chat-toggle:hover {
    transform: scale(1.1);
}

.ai-chat-panel {
    position: fixed;
    bottom: 96px;
    right: 28px;
    width: 380px;
    max-height: 520px;
    background: var(--text-primary, var(--text-primary));
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.ai-chat-panel.hidden {
    display: none;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ai-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--green), #0ea5e9);
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.ai-chat-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.8;
}

.ai-chat-close:hover {
    opacity: 1;
}

.ai-chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-msg {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    max-width: 90%;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.ai-msg-bot {
    background: #2a2e37;
    color: var(--border);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.ai-msg-user {
    background: var(--green);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.ai-msg small {
    opacity: 0.7;
    display: block;
    margin-top: 4px;
}

.ai-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #2a2e37;
    background: var(--text-primary, var(--text-primary));
}

.ai-chat-input input {
    flex: 1;
    background: #2a2e37;
    border: 1px solid #3a3f4a;
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--border);
    font-size: 13px;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.ai-chat-input input::placeholder {
    color: var(--text-muted, var(--text-muted));
}

.ai-chat-input input:focus {
    border-color: var(--green);
}

.ai-chat-input button {
    background: var(--green);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-chat-input button:hover {
    background: var(--green-dark);
}

/* === Smart Action Card enhancements === */
.action-product {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 6px;
    display: inline-block;
}

.action-product b {
    color: var(--text-secondary);
}

.action-stats {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* =============================================
   DASHBOARD TABS — 6 Sales Dashboards
   ============================================= */

/* Tab Bar */
.dash-tab-bar {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border-radius: 14px;
    margin-bottom: 24px;
    overflow-x: auto;
    border: 1px solid #dce3f0;
    scrollbar-width: none;
    /* Firefox */
}

.dash-tab-bar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.dash-tab-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-tab-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--blue);
}

.dash-tab-btn.active {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue) 100%);
    color: var(--bg-white);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    font-weight: 600;
}

.dash-tab-icon {
    font-size: 15px;
}

/* Tab Content */
.dash-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.dash-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dashboard Grid Layouts */
.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.dash-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .dash-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Dashboard KPI Row */
.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* === Overview Extra Stats Row === */
.ov-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.ov-stat-card {
    background: var(--bg-white);
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border, var(--border));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ov-stat-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.ov-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}

.ov-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ov-stat-name {
    flex: 1;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ov-stat-bar-wrap {
    flex: 1.2;
    height: 6px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.ov-stat-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.ov-stat-right {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 70px;
    justify-content: flex-end;
}

.ov-stat-cnt {
    color: var(--text-muted);
    font-size: 11px;
}

.ov-stat-pct {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .ov-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ov-stats-row {
        grid-template-columns: 1fr;
    }
}

.dash-kpi {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid var(--border, var(--border));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.dash-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.dash-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.dash-kpi-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.dash-kpi-change {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.dash-kpi-change.up {
    color: var(--green-dark);
}

.dash-kpi-change.down {
    color: var(--red);
}

/* Dashboard Cards */
.dash-card {
    background: var(--bg-white);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border, var(--border));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.dash-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Chart containers */
.dash-chart-container {
    position: relative;
    height: 280px;
}

.dash-chart-sm {
    height: 200px;
}

.dash-chart-lg {
    height: 360px;
}

/* Stats Table */
.dash-table-wrapper {
    overflow-x: auto;
    max-height: 380px;
    overflow-y: auto;
}

.dash-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.dash-stats-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-body);
    border-bottom: 2px solid var(--border, var(--border));
    position: sticky;
    top: 0;
    z-index: 1;
}

.dash-stats-table td {
    padding: 8px 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--bg-input);
}

.dash-stats-table tr:hover td {
    background: var(--bg-body);
}

.dash-stats-table .text-right {
    text-align: right;
}

/* Loading & Error */
.dash-loading,
.dash-error {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: var(--text-muted);
}

.dash-error {
    color: var(--red);
}

/* Filter Bar */
.dash-filter-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--bg-body);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.dash-filter-bar::-webkit-scrollbar {
    display: none;
}

.dash-filter-bar .filter-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 4px;
}

.dash-filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.dash-filter-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.dash-filter-btn.active {
    background: var(--blue);
    color: var(--bg-white);
    border-color: var(--blue);
}

/* KPI Change Badges */
.dash-kpi-changes {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.dash-kpi-delta {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dash-kpi-delta .delta-label {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 2px;
}

.dash-kpi-delta.up {
    color: var(--green-dark);
}

.dash-kpi-delta.down {
    color: var(--red);
}

/* Channel Progress Bars */
.ov-channel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ov-channel-name {
    width: 90px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
}

.ov-channel-bar-wrap {
    flex: 1;
    height: 24px;
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.ov-channel-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s ease;
    background: linear-gradient(90deg, #1e3a5f, var(--blue));
}

.ov-channel-value {
    font-size: 12px;
    font-weight: 700;
    color: #1e3a5f;
    width: 70px;
    text-align: right;
    flex-shrink: 0;
}

/* Tag Dropdown Popup */
.tag-dropdown-popup {
    z-index: 9999;
    width: 220px;
    max-height: 340px;
    background: var(--bg-white);
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tagDdSlideIn 0.15s ease-out;
}

@keyframes tagDdSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tag-dd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.tag-dd-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 4px;
}

.tag-dd-close:hover {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.tag-dd-search-wrap {
    padding: 6px 8px;
    border-bottom: 1px solid var(--bg-input);
}

.tag-dd-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
}

.tag-dd-search:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.tag-dd-list {
    overflow-y: auto;
    max-height: 200px;
    padding: 4px 0;
}

.tag-dd-item {
    padding: 7px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.1s;
}

.tag-dd-item:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.tag-dd-count {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: 10px;
}

.tag-dd-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.tag-dd-footer {
    padding: 6px 8px;
    border-top: 1px solid var(--bg-input);
}

.tag-dd-add-new {
    width: 100%;
    padding: 7px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: #fefce8;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.tag-dd-add-new:hover {
    background: var(--amber-light);
    border-color: var(--amber);
}

/* Top products year tabs */
.top-prod-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.top-prod-tab {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.top-prod-tab:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.top-prod-tab.active {
    background: var(--blue);
    color: var(--bg-white);
    border-color: var(--blue);
}

/* =============================================
   DASHBOARD FILTER PANEL — Kiểu hiển thị + Thời gian
   ============================================= */
.dash-filter-panel {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--bg-body) 0%, #f0f4ff 100%);
    border: 1px solid #dce3f0;
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dash-fp-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-fp-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Toggle Biểu đồ / Báo cáo */
.dash-fp-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-white);
}

.dash-fp-toggle-btn {
    padding: 7px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.dash-fp-toggle-btn:hover {
    background: #f0f4ff;
    color: var(--blue);
}

.dash-fp-toggle-btn.active {
    background: linear-gradient(135deg, var(--blue), var(--blue));
    color: var(--bg-white);
}

.dash-fp-toggle-btn+.dash-fp-toggle-btn {
    border-left: 1px solid var(--border);
}

/* Time filter wrapper */
.dash-fp-time-wrapper {
    position: relative;
}

.dash-fp-time-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.dash-fp-time-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.dash-fp-caret {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.dash-fp-time-btn.open .dash-fp-caret {
    transform: rotate(180deg);
}

/* Dropdown popup */
.dash-fp-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 9999;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 16px;
    min-width: 520px;
    animation: ddSlideIn 0.18s ease-out;
}

.dash-fp-dropdown.open {
    display: block;
}

@keyframes ddSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dash-fp-dd-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--bg-input);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.dash-fp-dd-col {
    padding: 0 8px;
}

.dash-fp-dd-col:not(:last-child) {
    border-right: 1px solid var(--bg-input);
}

.dash-fp-dd-heading {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.dash-fp-dd-item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    text-align: left;
    font-weight: 500;
}

.dash-fp-dd-item:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.dash-fp-dd-item.active {
    background: var(--blue);
    color: var(--bg-white);
    font-weight: 600;
}

/* Custom date range */
.dash-fp-dd-custom {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-input);
    margin-bottom: 8px;
}

.dash-fp-dd-daterow {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}

.dash-fp-dd-daterow label {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.dash-fp-dd-date {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    outline: none;
}

.dash-fp-dd-date:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.dash-fp-dd-apply {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    background: var(--blue);
    color: var(--bg-white);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}

.dash-fp-dd-apply:hover {
    background: var(--blue);
}

/* Footer */
.dash-fp-dd-footer {
    text-align: center;
    padding-top: 4px;
}

.dash-fp-dd-reset {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.dash-fp-dd-reset:hover {
    background: var(--blue-light);
    color: var(--blue);
    border-color: var(--blue);
}

/* === Chart Inline Filters === */
.chart-inline-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0 8px;
    flex-wrap: wrap;
}

.cif-btn {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.cif-btn:hover {
    border-color: var(--blue-light);
    color: var(--blue);
    background: var(--blue-light);
}

.cif-btn.active {
    background: var(--blue);
    color: var(--bg-white);
    border-color: var(--blue);
}

.cif-sep {
    color: var(--border);
    font-size: 11px;
    margin: 0 2px;
}

.cif-select {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.cif-select:focus {
    border-color: var(--blue);
}

/* =============================================
   PRODUCT DETAIL MODAL
   ============================================= */
.modal-product-info {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--bg-body), #f0f4ff);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.modal-product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.modal-product-info strong {
    font-size: 16px;
    color: var(--text-primary);
}

.modal-product-info small {
    color: var(--text-muted);
    font-size: 12px;
}

/* KPI Cards in modal */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--bg-white);
    border: 1px solid var(--border, var(--border));
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s, box-shadow 0.15s;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* Breakdown Panels */
.detail-panels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.detail-breakdown-panel {
    background: var(--bg-white);
    border: 1px solid var(--border, var(--border));
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.detail-breakdown-panel h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--bg-input);
}

/* Mini table inside panels */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.mini-table td {
    padding: 4px 6px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--bg-body);
}

.mini-table tr:last-child td {
    border-bottom: none;
}

.mini-table tr:hover td {
    background: var(--bg-body);
}

/* Table scroll container */
.table-scroll {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border, var(--border));
    border-radius: 10px;
}

/* === PRODUCT IMAGE PREVIEW ON HOVER (Mã SP) === */
.product-img-preview-trigger {
    cursor: pointer;
    color: var(--blue);
    font-weight: 600;
    border-bottom: 1.5px dashed var(--blue-light);
    padding-bottom: 1px;
    transition: all 0.2s ease;
    position: relative;
}

.product-img-preview-trigger:hover {
    color: var(--blue);
    border-bottom-color: var(--blue);
    border-bottom-style: solid;
}

/* Floating preview popup (appended to body via JS) */
#product-img-float-preview {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 8px 20px rgba(0, 0, 0, 0.12);
    border: 3px solid var(--bg-white);
    background: var(--bg-white);
}

#product-img-float-preview.visible {
    opacity: 1;
    transform: scale(1);
}

#product-img-float-preview img {
    display: block;
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 11px;
}

#product-img-float-preview .preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: var(--bg-white);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3px;
    border-radius: 0 0 11px 11px;
}

/* === TOUCH TARGET OPTIMIZATION FOR MOBILE === */
@media (max-width: 768px) {

    /* Pagination buttons touch targets */
    .pagination button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Segment control touch targets */
    .seg-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Order filter buttons */
    .ofilter-collapse-btn {
        min-height: 44px;
    }

    .ofilter-period-expand-btn {
        min-height: 44px;
        min-width: 44px;
        width: 44px;
    }

    /* Hide Desktop Product KPI on mobile */
    #product-kpi-dashboard {
        display: none !important;
    }

    /* Show Smart Summary Row instead */
    #product-smart-summary-row {
        display: flex !important;
    }

    /* Prevent iOS auto-zoom by enforcing 16px font size on form controls */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* =============================================
   ORDER SYNC BUTTONS (Compact Header Buttons)
   ============================================= */
.btn-sync-compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    white-space: nowrap;
    line-height: 1;
}

.btn-sync-incr {
    background: var(--green);
    color: var(--bg-white);
    border-color: var(--green);
}

.btn-sync-incr:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.btn-sync-full {
    background: var(--bg-white);
    color: var(--text-secondary);
    border-color: var(--border);
}

.btn-sync-full:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.btn-sync-compact:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-sync-compact.syncing svg {
    animation: sync-spin 0.8s linear infinite;
}

@keyframes sync-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Toast notification for sync results */
.sync-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    animation: toast-in 0.3s ease;
    max-width: 380px;
}

.sync-toast.success {
    background: var(--green-bg);
    border: 1px solid #86efac;
    color: #15803d;
}

.sync-toast.error {
    background: var(--red-light);
    border: 1px solid #fca5a5;
    color: var(--red);
}

.sync-toast.info {
    background: var(--blue-light);
    border: 1px solid var(--blue-light);
    color: var(--blue);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile: hide text labels, show only icons */
@media (max-width: 600px) {
    .btn-sync-compact .sync-btn-label {
        display: none;
    }

    .btn-sync-compact {
        padding: 8px 10px;
    }

    .order-sync-btns {
        gap: 6px;
    }
}