/* TVS GENUINE PARTS LIGHT THEME DESIGN SYSTEM - OFFICIAL TVS MOTOR PALETTE */
:root {
    --primary: #253C80;            /* TVS Motor Official Corporate Blue */
    --primary-hover: #1b2d63;
    --primary-light: #e8ecf8;
    --primary-subtle: #f4f6fc;
    --accent-red: #b91c1c;         /* High-contrast WCAG AA accessible dark red (6.47:1 on white) */
    --accent-red-hover: #991b1b;
    --accent-red-light: #fdf1ef;
    --accent-orange: #b45309;      /* Accessible amber/orange */
    --accent-orange-hover: #92400e;
    --accent-orange-light: #fef3c7;
    --secondary: #64748b;
    --secondary-hover: #475569;
    --success: #047857;            /* High-contrast accessible emerald (7.1:1 on white) */
    --success-light: #d1fae5;
    --warning: #b45309;            /* High-contrast accessible amber (5.2:1 on white) */
    --warning-light: #fef3c7;
    --danger: #b91c1c;             /* High-contrast accessible dark red (7.2:1 on white) */
    --danger-light: #fee2e2;
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;      /* Slate-600 (5.8:1 on white) */
    --text-muted: #64748b;          /* Slate-500 (4.6:1 on white) */
    --border: #cbd5e1;
    --border-subtle: #e2e8f0;

    /* WCAG AA / AAA Accessible Color Tokens */
    --slate-accessible: #64748b;        /* Slate-500: 4.76:1 on white (WCAG AA) */
    --slate-high-contrast: #475569;     /* Slate-600: 7.58:1 on white (WCAG AAA) */
    --text-muted-on-light: #334155;     /* Slate-700: 9.45:1 on slate-100 (WCAG AAA) */
    --danger-text: #991b1b;             /* Red-800: 6.80:1 on red-100, 7.60:1 on red-50 */
    --warning-text: #92400e;            /* Amber-800: 6.37:1 on amber-100 */
    --info-text: #0369a1;               /* Sky-700: 5.93:1 on white, 5.57:1 on sky-50 */
    --success-text: #065f46;            /* Emerald-800: 6.94:1 on emerald-100 */

    /* Calibrated Typography Scale Tokens (Strictly >= 0.85rem / 13.6px Floor) */
    --text-kpi-headline: 1.65rem;       /* 26.4px - Bold KPI headlines, tabular-nums (1.5rem–1.85rem) */
    --text-section-header: 1.25rem;     /* 20px - Section headers, bold (1.1rem–1.25rem) */
    --text-subsection-header: 1.10rem;  /* 17.6px - Sub-section headers, bold */
    --text-base: 0.95rem;               /* 15.2px - Standard body text & inputs */
    --text-table-data: 0.90rem;         /* 14.4px - Table data cells, tabular-nums (0.875rem–0.95rem) */
    --text-submetric: 0.875rem;         /* 14px - Sub-metrics & financial labels, 600 wt (0.85rem–0.9rem) */
    --text-table-header: 0.85rem;       /* 13.6px - Table th headers, uppercase, 700 wt */
    --text-badge: 0.85rem;              /* 13.6px - Badges, pills, chips, 700 wt */
    --text-micro: 0.85rem;              /* 13.6px - Absolute floor for copyright, tooltips, hints */
    
    /* Premium Light Sidebar Palette */
    --sidebar-width: 275px;
    --sidebar-collapsed-width: 72px;
    --sidebar-bg: #ffffff;
    --sidebar-text: #475569;
    --sidebar-text-active: #253C80;
    --sidebar-hover: #f8fafc;
    --sidebar-active-bg: #f0f3fa;
    --sidebar-border: #e2e8f0;

    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(37, 60, 128, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px -4px rgba(37, 60, 128, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

    /* 8pt Spatial Rhythm Scale & Calibrated Gutter Tokens (M4.3) */
    --space-1: 0.25rem;  /* 4px  - Micro element spacing */
    --space-2: 0.5rem;   /* 8px  - Icon gaps, compact pills */
    --space-3: 0.75rem;  /* 12px - Form input gaps, card sub-items */
    --space-4: 1.0rem;   /* 16px - Standard gutter, card padding */
    --space-5: 1.25rem;  /* 20px - Panel gaps, modal header spacing */
    --space-6: 1.5rem;   /* 24px - Section margins, container padding */
    --space-8: 2.0rem;   /* 32px - Major section dividers */

    /* Calibrated Gutter Scale (1rem to 1.5rem) */
    --gutter-xs: var(--space-2); /* 8px */
    --gutter-sm: var(--space-3); /* 12px */
    --gutter-md: var(--space-4); /* 16px (Base) */
    --gutter-lg: var(--space-5); /* 20px */
    --gutter-xl: var(--space-6); /* 24px (Desktop max) */
}

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================================= */
/* ENTERPRISE TYPOGRAPHY & NUMERIC UTILITY CLASSES              */
/* ============================================================= */
.text-kpi-headline {
    font-size: var(--text-kpi-headline) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.text-section-header {
    font-size: var(--text-section-header) !important;
    font-weight: 700 !important;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.text-submetric {
    font-size: var(--text-submetric) !important;
    font-weight: 600 !important;
    color: var(--text-secondary);
    line-height: 1.35;
}

.text-table-data {
    font-size: var(--text-table-data) !important;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Strict Currency & Numeric Formatting Class */
.currency-val {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    font-family: inherit;
}
span.currency-val {
    display: inline-block;
}
td.currency-val,
th.currency-val,
td.num-cell,
td.currency-cell,
td.tabular-cell,
#reportCreditTableBody td,
#reportCustomerTableBody td,
#custStatementTableBody td {
    display: table-cell !important;
    vertical-align: middle !important;
}
td.currency-val,
th.currency-val,
td.num-cell,
td.currency-cell,
td.tabular-cell {
    text-align: center !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   ENTERPRISE SVG ICON SYSTEM (R3 COMPLIANCE)
   Zero emojis, uniform 1.75px stroke geometry, crisp SVG rendering
   ========================================================================== */
.pf-icon {
    display: inline-block;
    vertical-align: -0.125em;
    stroke-width: 1.75px;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.pf-icon-sm { width: 14px; height: 14px; }
.pf-icon-md { width: 18px; height: 18px; }
.pf-icon-lg { width: 22px; height: 22px; }

/* Status Indicator Dots (Replaces emojis) */
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}
.status-dot-success { background-color: #10b981; }
.status-dot-warning { background-color: #f59e0b; }
.status-dot-danger  { background-color: #ef4444; }
.status-dot-info    { background-color: #0ea5e9; }
.status-dot-purple  { background-color: #8b5cf6; }
.status-dot-neutral { background-color: #94a3b8; }

/* Spinning animation for in-flight requests */
@keyframes pf-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.pf-spin {
    animation: pf-spin 1s linear infinite;
}

/* ============================================================= */
/* ULTRA-PREMIUM LIGHT SIDEBAR STYLES                            */
/* ============================================================= */
.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--text-primary);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: width 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    contain: layout paint;
    will-change: width;
}

.app-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-top-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.15rem 0.85rem 0.5rem 0.85rem;
    overflow: hidden;
}

.app-sidebar.collapsed .sidebar-top-container {
    padding: 1.15rem 0.5rem 0.5rem 0.5rem;
}

.sidebar-bottom-container {
    flex-shrink: 0;
    padding: 0.65rem 0.85rem 0.85rem 0.85rem;
    background: #ffffff;
    border-top: 1px solid var(--border);
}

.app-sidebar.collapsed .sidebar-bottom-container {
    padding: 0.65rem 0.4rem 0.85rem 0.4rem;
}

.sidebar-copyright-footer {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.35;
    font-weight: 500;
}

.app-sidebar.collapsed .sidebar-copyright-footer {
    font-size: 0.85rem;
    padding: 0.35rem 0 0 0;
}

.app-sidebar.collapsed .sidebar-copyright-footer .copyright-full-text {
    display: none;
}

.app-sidebar.collapsed .sidebar-copyright-footer .copyright-mini-text {
    display: block !important;
}

.copyright-mini-text {
    display: none;
    font-weight: 700;
    color: var(--primary);
    cursor: default;
}

/* Brand Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.4rem 1.15rem 0.4rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    overflow: hidden;
    white-space: nowrap;
}

.brand-logo-wrapper {
    position: relative;
    flex-shrink: 0;
}

.brand-logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid var(--accent-red);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.22);
    transition: transform 0.2s ease;
}

.brand-logo-wrapper:hover .brand-logo-img {
    transform: scale(1.05);
}

.brand-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--primary);
    line-height: 1.1;
}

.brand-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.brand-badge {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

/* Sidebar Toggle Collapse Button */
.sidebar-toggle-btn {
    background: #f8fafc;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}

.sidebar-toggle-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: scale(1.05);
}

/* Sidebar Menu Container */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.sidebar-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* Sidebar Group Label Header */
.sidebar-group-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-high-contrast);
    padding: 0.85rem 0.6rem 0.35rem 0.6rem;
    margin-top: 0.25rem;
}

/* Sidebar Navigation Items (Normal Expanded View) */
.sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    color: #334155;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    text-align: left;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
}

.sidebar-btn-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}

.sidebar-btn .icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: all 0.18s ease;
    color: #64748b;
}

.sidebar-btn:hover {
    background-color: var(--sidebar-hover);
    color: var(--primary);
    border-color: #e2e8f0;
}

.sidebar-btn:hover .icon-box {
    background: #ffffff;
    color: var(--primary);
    border-color: #cbd5e1;
}

.sidebar-btn.active {
    background: var(--sidebar-active-bg);
    color: var(--primary);
    border-color: #c7d2fe;
    font-weight: 700;
}

.sidebar-btn.active .icon-box {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(37, 60, 128, 0.3);
}

.sidebar-btn.active::before {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: 20%;
    height: 60%;
    width: 4px;
    background-color: var(--accent-red);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* User Profile Footer Card (Modern Enterprise View) */
.sidebar-user-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
    margin-top: 0.5rem;
}

.sidebar-user-card:hover {
    background-color: #f8fafc;
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.user-card-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    overflow: hidden;
}

.user-avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #0f172a;
    color: #38bdf8;
    border: 1px solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.user-info-box {
    overflow: hidden;
}

.user-info-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.user-info-role {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.user-auth-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: var(--primary);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.sidebar-user-card:hover .user-auth-btn {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* ============================================================= */
/* COLLAPSED SIDEBAR RULES (ULTRA-CLEAN SLICK COMPACT MODE)     */
/* ============================================================= */
.app-sidebar.collapsed {
    width: 70px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.app-sidebar.collapsed .sidebar-top-container {
    padding: 0.85rem 0.4rem 0.5rem 0.4rem !important;
    overflow: visible !important;
}

.app-sidebar.collapsed .sidebar-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0 0.75rem 0 !important;
    margin-bottom: 0.65rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    position: relative !important;
    gap: 6px !important;
}

.app-sidebar.collapsed .sidebar-brand {
    justify-content: center !important;
    margin: 0 auto !important;
    cursor: pointer !important;
}

.app-sidebar.collapsed .brand-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-sidebar.collapsed .brand-logo-img {
    width: 38px !important;
    height: 38px !important;
    border: 2px solid var(--accent-red) !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2) !important;
}

.app-sidebar.collapsed .sidebar-brand-text {
    display: none !important;
}

.app-sidebar.collapsed .sidebar-toggle-btn {
    position: static !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--primary) !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin: 4px auto !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.app-sidebar.collapsed .sidebar-toggle-btn:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

.app-sidebar.collapsed .sidebar-menu {
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding: 0 !important;
    gap: 0.45rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.app-sidebar.collapsed .sidebar-group-label {
    display: none !important;
}

.app-sidebar.collapsed .sidebar-btn {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 10px !important;
    position: relative !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Strictly ensure role-restricted buttons hidden by JS remain hidden in collapsed mode */
.app-sidebar.collapsed .sidebar-btn[style*="display: none"],
.app-sidebar.collapsed .sidebar-btn[style*="display:none"],
.app-sidebar.collapsed .sidebar-btn.hidden,
.app-sidebar.collapsed .sidebar-btn[hidden] {
    display: none !important;
}

.app-sidebar.collapsed .sidebar-btn-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    overflow: visible !important;
}

.app-sidebar.collapsed .sidebar-btn .icon-box {
    margin: 0 auto !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 1.1rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #475569 !important;
    transition: color 0.15s ease !important;
}

.app-sidebar.collapsed .sidebar-btn:hover {
    background-color: #eff6ff !important;
    border-color: #93c5fd !important;
}

.app-sidebar.collapsed .sidebar-btn:hover .icon-box {
    color: var(--primary) !important;
}

.app-sidebar.collapsed .sidebar-btn.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 3px 10px rgba(37, 60, 128, 0.3) !important;
}

.app-sidebar.collapsed .sidebar-btn.active .icon-box {
    color: #ffffff !important;
}

.app-sidebar.collapsed .sidebar-btn.active::before {
    display: none !important;
}

.sidebar-brand-text,
.sidebar-btn-text,
.sidebar-nav-badge,
.sidebar-group-label,
.user-info-box,
.user-auth-btn,
.copyright-full-text {
    transition: opacity 0.12s ease;
    white-space: nowrap;
}

.app-sidebar.collapsed .sidebar-brand-text,
.app-sidebar.collapsed .sidebar-btn-text,
.app-sidebar.collapsed .sidebar-nav-badge,
.app-sidebar.collapsed .sidebar-group-label,
.app-sidebar.collapsed .user-info-box,
.app-sidebar.collapsed .user-auth-btn,
.app-sidebar.collapsed .copyright-full-text {
    display: none !important;
    opacity: 0;
}

/* Slick Hover Tooltips in Collapsed Mode */
.app-sidebar.collapsed .sidebar-btn:hover::after {
    content: attr(data-tooltip);
    position: fixed;
    left: 82px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    animation: tooltipFadeIn 0.12s ease;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

/* User Card in Collapsed Mode */
.app-sidebar.collapsed .sidebar-bottom-container {
    padding: 0.65rem 0.4rem 0.65rem 0.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-sidebar.collapsed .sidebar-user-card {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

.app-sidebar.collapsed .sidebar-user-card .user-card-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.app-sidebar.collapsed .sidebar-user-card .user-info-box,
.app-sidebar.collapsed .sidebar-user-card .user-auth-btn {
    display: none !important;
}

.app-sidebar.collapsed .user-avatar-circle {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

.app-sidebar.collapsed .sidebar-user-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(37, 60, 128, 0.15) !important;
}

/* Collapsed Copyright */
.app-sidebar.collapsed .sidebar-copyright-footer {
    margin-top: 0.35rem !important;
    padding-top: 0.25rem !important;
    border-top: 1px dashed var(--border) !important;
    width: 100% !important;
    text-align: center !important;
}

.app-sidebar.collapsed .sidebar-copyright-footer .copyright-full-text {
    display: none !important;
}

.app-sidebar.collapsed .sidebar-copyright-footer .copyright-mini-text {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--slate-high-contrast) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
}

/* ============================================================= */
/* MAIN CONTENT WRAPPER & TOP CONTROL HEADER                     */
/* ============================================================= */
.main-wrapper {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: calc(100vw - var(--sidebar-width));
    overflow-x: hidden;
    transition: margin-left 0.2s cubic-bezier(0.2, 0, 0, 1);
    will-change: margin-left;
}

.main-wrapper.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
    max-width: calc(100vw - var(--sidebar-collapsed-width));
}

.top-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: var(--shadow-xs);
    min-width: 0;
    max-width: 100%;
}

.top-header-left, .top-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.header-control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.header-select, .header-input {
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.header-select:focus, .header-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 60, 128, 0.12);
}

/* BUTTONS */
button {
    font-family: var(--font-main);
    font-size: 0.85rem;
}

.btn {
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--text-badge);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.35;
    white-space: nowrap;
    user-select: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 1px 2px rgba(37, 60, 128, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(37, 60, 128, 0.3);
}

.btn-primary:active {
    background-color: #15244e !important;
    border-color: #15244e !important;
}

.btn-secondary {
    background-color: #ffffff;
    border: 1px solid var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    background-color: #f8fafc;
    border-color: var(--slate-accessible);
    color: var(--text-primary);
}

.btn-secondary:active {
    background-color: #f1f5f9;
}

.btn-success {
    background-color: var(--success);
    color: #ffffff;
    border-color: var(--success);
}

.btn-success:hover {
    background-color: var(--success-text);
    border-color: var(--success-text);
}

.btn-danger {
    background-color: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.2);
}

.btn-danger:hover {
    background-color: var(--danger-text);
    border-color: var(--danger-text);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(185, 28, 28, 0.3);
}

.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}

.btn-ghost:hover {
    background-color: #f1f5f9;
    color: var(--text-primary);
    border-color: transparent;
}

.btn-ghost:active {
    background-color: #e2e8f0;
}

.btn-pill {
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background-color: #ffffff;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.15s ease-in-out;
}

.btn-pill:hover {
    background-color: #f8fafc;
    color: var(--text-primary);
    border-color: var(--slate-accessible);
}

.btn-pill.active,
.btn-pill.btn-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 1px 3px rgba(37, 60, 128, 0.25);
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    gap: 0.35rem;
}

.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 4px;
    gap: 0.25rem;
}

.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border-radius: 10px;
    font-weight: 700;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-secondary);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.date-preset-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.35rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.date-preset-btn {
    min-height: 30px;
    padding: 0.25rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
}

.date-preset-btn:hover {
    background: #f1f5f9;
    color: var(--primary);
    border-color: var(--slate-accessible);
}

.date-preset-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.date-preset-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 1px 2px rgba(37, 60, 128, 0.2);
}

/* User Role & Settings Badges - Guaranteed Single-Line Pill with zero text overlap */
[class^="badge-role-"], [class*=" badge-role-"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0.26rem 0.65rem !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.badge-role-admin { background: #0f172a !important; color: #38bdf8 !important; border: 1px solid #334155 !important; }
.badge-role-subadmin { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.badge-role-warehouse { background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fed7aa !important; }
.badge-role-store { background: #ecfdf5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
.badge-role-sales { background: #fefce8 !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
.badge-role-reports { background: #faf5ff !important; color: #7e22ce !important; border: 1px solid #e9d5ff !important; }
.badge-role-auditor { background: #e0e7ff !important; color: #3730a3 !important; border: 1px solid #c7d2fe !important; }

/* Store Outlet Pills */
.badge-store-pill {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 0.22rem 0.6rem !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
.badge-store-all {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}
.badge-store-assigned {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

/* Category Pills */
.badge-category-pill {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 0.22rem 0.6rem !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
.badge-category-all {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}
.badge-category-assigned {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

/* Metadata & Policy Pills */
.badge-meta-pill {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 0.22rem 0.6rem !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
.badge-history-restricted {
    background: #fff1f2 !important;
    color: #be123c !important;
    border: 1px solid #fecdd3 !important;
}
.badge-history-unlocked {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}
.badge-cost-allowed {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}
.badge-cost-hidden {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

/* Users Table Action Buttons */
.table-btn-danger {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.table-btn-danger:hover {
    background: #b91c1c;
    color: #ffffff;
    border-color: #991b1b;
}

/* PAGE CONTAINER & SECTIONS (CALIBRATED RESPONSIVE GUTTERS M4.3) */
.page-container {
    padding: var(--gutter-xl); /* 1.5rem (24px) on Desktop */
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 1280px) {
    .page-container {
        padding: var(--gutter-lg); /* 1.25rem (20px) on Small Laptop */
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: var(--gutter-md); /* 1.0rem (16px) on Tablet & Mobile */
    }
}

@media (max-width: 390px) {
    .page-container {
        padding: var(--gutter-sm); /* 0.75rem (12px) on Compact Mobile */
    }
}

.page-section {
    display: none;
    min-width: 0;
    max-width: 100%;
}

.page-section.active {
    display: block;
}

.pos-billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
    gap: 1.25rem;
    min-width: 0;
}
.pos-billing-grid > div {
    min-width: 0;
}

@media (max-width: 860px) {
    .pos-billing-grid {
        grid-template-columns: 1fr;
    }
}

/* UNIFIED ENTERPRISE PAGE HEADER SYSTEM */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.panel-left h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

.panel-subtitle {
    font-size: 0.90rem;
    color: var(--text-secondary);
}

.panel-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ============================================================= */
/* WORLD-CLASS ENTERPRISE KPI CARDS & BENTO GRID SYSTEM          */
/* ============================================================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

/* BALANCED 4-COLUMN GRID (Dashboard, Reports 3/4/5, Credit Ledger, Price Approvals) */
.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

/* 12-COLUMN ENTERPRISE BENTO GRID (Report 1 Overhaul) */
.kpi-grid-report1 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Hero Anchor Card: Net Closing Stock Valuation & Health */
.kpi-grid-report1 > .kpi-hero-cell {
    grid-column: span 4;
    grid-row: span 2;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px -2px rgba(37, 60, 128, 0.08) !important;
}

/* Inflow, Transfers, Returns Cells */
.kpi-grid-report1 > .kpi-flow-cell {
    grid-column: span 4;
}

/* Commercial Outflow & Spotlight Cells */
.kpi-grid-report1 > .kpi-outflow-cell,
.kpi-grid-report1 > .kpi-spotlight-cell {
    grid-column: span 4;
}

/* 4-COLUMN BALANCED DUAL-ROW GRID (Report 2: 8 Financial Cards in 2x4 symmetry) */
.kpi-grid-report2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* 4-COLUMN AR CREDIT AGING SCHEDULE GRID (Report 3) */
.kpi-grid-aging {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.aging-card-current { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.aging-card-overdue { background: #fffbeb !important; border-color: #fde68a !important; }
.aging-card-delinquent { background: #fff7ed !important; border-color: #fed7aa !important; }
.aging-card-critical { background: #fff1f2 !important; border-color: #fecdd3 !important; }

/* ========================================================================= */
/* ENTERPRISE SEMANTIC RESPONSIVE GRID SYSTEM (M4.3 INLINE GRIDS REFACTOR)   */
/* ========================================================================= */

/* 1. Standard 2-Column Form / Action Pair */
.grid-2col,
.grid-form-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter-md); /* 1rem (16px) */
    align-items: start;
}

/* 2. Asymmetric Form Pair */
.grid-form-pair-asym {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--gutter-sm); /* 0.75rem (12px) */
    align-items: center;
}

/* 3. Standard 3-Column Uniform Grid */
.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter-md); /* 1rem (16px) */
    align-items: start;
}

/* 4. Standard 4-Column Uniform Grid */
.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-sm); /* 0.75rem (12px) */
    align-items: center;
}

/* 5. Auto-Fitting Fluid KPI Cards */
.grid-kpi-autofit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--gutter-sm); /* 0.75rem (12px) */
    align-items: stretch;
}

/* 6. Quick-Entry 3-Element Toolbar (Input, Qty, Action) */
.grid-quick-entry {
    display: grid;
    grid-template-columns: 1fr 140px auto;
    gap: var(--gutter-sm);
    align-items: flex-end;
}

/* 7. Multi-Field Filter Bar */
.grid-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-sm);
    align-items: center;
}
.grid-filter-bar > * {
    flex: 1 1 180px;
    min-width: 160px;
}
.grid-filter-bar > *:first-child {
    flex: 2 1 240px;
    min-width: 220px;
}

/* 8. Settings Split View */
.grid-settings-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--gutter-xl); /* 1.5rem (24px) */
    align-items: start;
}

/* 9. Key-Value Compact Row */
.grid-key-value-compact {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--gutter-sm);
    align-items: center;
}

/* 10. Asymmetric Custom Row */
.grid-asym-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--gutter-sm);
}

/* Grid Child Spanning Helpers */
.grid-col-span-2 { grid-column: span 2; }
.grid-col-span-3 { grid-column: span 3; }
.grid-col-span-4 { grid-column: span 4; }
.grid-col-span-full { grid-column: 1 / -1; }

@media (max-width: 1280px) {
    .grid-settings-split {
        gap: var(--gutter-lg);
    }
}

@media (max-width: 1200px) {
    .kpi-grid-4,
    .kpi-grid-report2,
    .kpi-grid-aging {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-grid-report1 {
        grid-template-columns: repeat(6, 1fr);
    }
    .kpi-grid-report1 > .kpi-hero-cell {
        grid-column: span 6;
        grid-row: auto;
    }
    .kpi-grid-report1 > .kpi-flow-cell,
    .kpi-grid-report1 > .kpi-outflow-cell,
    .kpi-grid-report1 > .kpi-spotlight-cell {
        grid-column: span 3;
    }
}

@media (max-width: 1024px) {
    .grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-filter-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-settings-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .kpi-grid-report1 {
        grid-template-columns: 1fr;
    }
    .kpi-grid-report1 > * {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }

    .grid-2col,
    .grid-form-pair,
    .grid-3col,
    .grid-form-pair-asym,
    .grid-quick-entry,
    .grid-asym-row {
        grid-template-columns: 1fr !important;
        gap: var(--gutter-sm);
    }

    /* Reset grid child spans on single-column layouts */
    .grid-col-span-2,
    .grid-col-span-3,
    .grid-col-span-4 {
        grid-column: span 1 !important;
    }

    .grid-quick-entry {
        align-items: stretch;
    }
}

@media (max-width: 680px) {
    .kpi-grid-4,
    .kpi-grid-report2,
    .kpi-grid-aging {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .grid-4col,
    .grid-filter-bar,
    .grid-key-value-compact,
    .grid-kpi-autofit {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================================================= */
/* ACCESSIBLE COLOR TOKENS & CONTRAST SAFETY NETS (WCAG AA COMPLIANCE)       */
/* ========================================================================= */
.text-muted-accessible {
    color: var(--slate-accessible, #64748b) !important;
}
.text-discount-accessible {
    color: var(--danger-text, #991b1b) !important;
}
span[style*="color:#94a3b8"], span[style*="color: #94a3b8"],
div[style*="color:#94a3b8"], div[style*="color: #94a3b8"],
td[style*="color:#94a3b8"], td[style*="color: #94a3b8"],
p[style*="color:#94a3b8"], p[style*="color: #94a3b8"] {
    color: #64748b !important;
}

.kpi-card {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px -1px rgba(15, 23, 42, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
    transform: translateY(-1px);
}

.kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.kpi-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.045em;
    line-height: 1.25;
}

.kpi-icon-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease;
}

.kpi-card:hover .kpi-icon-badge {
    background: var(--primary-light);
    color: var(--primary);
    border-color: #bfdbfe;
}

.kpi-value {
    font-family: var(--font-main);
    font-size: var(--text-kpi-headline); /* 1.65rem */
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin: 0.1rem 0 0.35rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
    word-break: break-word;
    white-space: nowrap;
}

.kpi-value .kpi-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kpi-value .kpi-unit {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.025em;
    text-transform: uppercase;
    font-family: var(--font-main);
}

.kpi-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: auto;
}

/* Micro-metrics Structured Rows */
.kpi-meta-box {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding-top: 0.35rem;
    margin-top: 0.25rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

.kpi-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.35;
    white-space: nowrap;
}

.kpi-meta-label {
    color: var(--text-muted-on-light); /* #334155: 9.45:1 on slate-100 */
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.kpi-meta-val {
    font-weight: 600;
    color: #334155;
    font-family: var(--font-main);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.kpi-meta-val.primary { color: var(--primary); font-weight: 700; }
.kpi-meta-val.success { color: #047857; font-weight: 700; }
.kpi-meta-val.danger  { color: #b91c1c; font-weight: 700; }
.kpi-meta-val.warning { color: #b45309; font-weight: 700; }
.kpi-meta-val.info    { color: #0369a1; font-weight: 700; }

.kpi-meta-row.highlight {
    padding-top: 0.22rem;
    margin-top: 0.12rem;
    border-top: 1px dashed #e2e8f0;
}

.kpi-meta-pills {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.32rem;
    padding-top: 0.32rem;
    border-top: 1px dashed #e2e8f0;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.kpi-meta-pills::-webkit-scrollbar {
    display: none;
}

.kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.kpi-pill.danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.kpi-pill.info {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.kpi-pill.neutral {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.kpi-pill.success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* MODERN ENTERPRISE REPORT SUB-NAV SEGMENTED CONTROL */
.report-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0.45rem 0.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-xs);
    flex-wrap: nowrap;
}

.report-segmented-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.report-segmented-group::-webkit-scrollbar {
    display: none;
}

.report-tab-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.42rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.report-tab-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.report-tab-btn.active {
    background: #ffffff !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    border: 1px solid #cbd5e1 !important;
}

.report-tab-btn.btn-secondary {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.report-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 700;
}

.report-tab-btn.active .report-tab-num {
    background: var(--primary-light);
    color: var(--primary);
}

.report-tab-num.highlight {
    background: #fef3c7;
    color: #d97706;
}

.report-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.report-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* UNIFIED MODERN SUB-TAB NAVIGATION SYSTEM (Catalog, Transfers, History, Trash) */
.subtab-nav-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 3px;
    margin-bottom: 1rem;
}

.subtab-nav-btn {
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.42rem 0.95rem;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.subtab-nav-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.subtab-nav-btn.active {
    background: #ffffff !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.parts-sub-tab-btn,
.transfer-sub-tab-btn,
.sales-sub-tab-btn,
.stream-sub-tab-btn {
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.42rem 0.95rem !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.parts-sub-tab-btn.active,
.transfer-sub-tab-btn.active,
.sales-sub-tab-btn.active,
.stream-sub-tab-btn.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(37, 60, 128, 0.25) !important;
}

.parts-sub-tab-btn.btn-secondary,
.transfer-sub-tab-btn.btn-secondary,
.sales-sub-tab-btn.btn-secondary,
.stream-sub-tab-btn.btn-secondary {
    background-color: #ffffff !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

.parts-sub-tab-btn.btn-secondary:hover,
.transfer-sub-tab-btn.btn-secondary:hover,
.sales-sub-tab-btn.btn-secondary:hover,
.stream-sub-tab-btn.btn-secondary:hover {
    background-color: #f8fafc !important;
    color: var(--text-primary) !important;
    border-color: #cbd5e1 !important;
}


/* CARD PANELS & TABLES */
.card-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.table-wrapper {
    overflow-x: auto;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.custom-table th {
    background-color: #f8fafc;
    color: var(--text-secondary);
    font-weight: 700;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    word-break: normal;
    vertical-align: bottom;
    text-transform: uppercase;
    font-size: var(--text-table-header); /* 0.85rem */
    letter-spacing: 0.03em;
    line-height: 1.35;
    user-select: none;
}

/* Typography Scale Safeguard: Ensure no table header or cell subtitles render below 0.85rem (13.6px) */
.custom-table th small {
    font-size: 0.85rem !important;
    font-weight: 600;
    display: block;
}

.custom-table td small {
    font-size: 0.85rem !important;
    font-weight: 600;
}

.custom-table th.sortable-th {
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
}

.custom-table th.sortable-th:hover {
    background-color: #f1f5f9;
    color: var(--primary);
}

.custom-table th.sortable-th.sorted-asc {
    background-color: #e0f2fe;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.custom-table th.sortable-th.sorted-desc {
    background-color: #e0f2fe;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.sort-icon-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--slate-high-contrast);
    vertical-align: middle;
    transition: transform 0.15s ease, color 0.15s ease;
}

.sortable-th:hover .sort-icon-indicator {
    color: var(--primary);
}

.sortable-th.sorted-asc .sort-icon-indicator {
    color: var(--primary);
    font-weight: 900;
}

.sortable-th.sorted-desc .sort-icon-indicator {
    color: var(--primary);
    font-weight: 900;
}

.custom-table td {
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.custom-table td.num-cell,
.custom-table th.num-cell,
.num-cell,
.currency-cell,
.tabular-cell {
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.currency-val {
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

.custom-table td.text-right,
.custom-table th.text-right,
.text-right {
    text-align: right !important;
}

.custom-table td.text-center,
.custom-table th.text-center,
.text-center {
    text-align: center !important;
}

.nowrap,
.no-wrap,
td.nowrap {
    white-space: nowrap !important;
}

.custom-table tbody tr:hover,
.hover-highlight-row:hover {
    background-color: #f1f5f9 !important;
}

tr[onclick] {
    cursor: pointer;
}

/* TYPEAHEAD SEARCH POPUP STYLES (5,000+ SKUs) */
.typeahead-container {
    position: relative;
    width: 100%;
}

.typeahead-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: #ffffff;
    outline: none;
    transition: all 0.2s;
}

.typeahead-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 60, 128, 0.15);
}

.typeahead-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 340px;
    background: #ffffff;
    border: 1.5px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.22), 0 8px 10px -6px rgba(0, 0, 0, 0.12);
    z-index: 999999;
    max-height: 260px;
    overflow-y: auto;
    display: none;
}

.typeahead-popup.active {
    display: block;
}

.typeahead-item {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
}

.typeahead-item:hover {
    background: #f1f5f9;
}

.typeahead-item-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
}

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

.typeahead-add-new-btn {
    padding: 0.75rem 0.85rem;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}

.typeahead-add-new-btn:hover {
    background: #bae6fd;
}

.category-badge {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: var(--primary);
    border: 1px solid #cbd5e1;
    display: inline-block;
}

/* BADGES */
.badge {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.badge-success { background-color: var(--success-light); color: var(--success); border: 1px solid #a7f3d0; }
.badge-warning { background-color: var(--warning-light); color: var(--warning); border: 1px solid #fde68a; }
.badge-danger { background-color: var(--danger-light); color: var(--danger); border: 1px solid #fecaca; }
.badge-info { background-color: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* STOCK PROGRESS BAR */
.stock-bar-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.stock-bar-track {
    flex: 1;
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
}

.stock-bar-fill {
    height: 100%;
    border-radius: 9999px;
}

/* MODALS - OPTIMIZED FOR ZERO-LAG TYPING & INSTANT RENDERING */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000000;
}

.modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   ENTERPRISE STANDARDIZED MODAL SYSTEM (M4.2 UNIFIED SPECIFICATION)
   ========================================================================== */
.modal-box {
    background-color: #ffffff;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 2.5rem);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateZ(0);
    will-change: transform;
    box-sizing: border-box;
    margin: auto;
}

.modal-box:has(.modal-body) {
    padding: 0 !important;
}

#modalConfirmDialog .modal-box {
    padding: 1.5rem !important;
    text-align: center;
}

/* Modal Width Modifiers */
.modal-box.modal-sm { max-width: 460px !important; }
.modal-box.modal-md { max-width: 600px !important; }
.modal-box.modal-lg { max-width: 800px !important; }
.modal-box.modal-xl { max-width: 1080px !important; }

.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.15rem 1.5rem !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-sizing: border-box;
    color: #0f172a !important;
}

.modal-header .modal-title,
.modal-header [id*="Title"],
.modal-header [id*="title"],
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4 {
    color: #0f172a !important;
}

.modal-header .modal-subtitle,
.modal-header > div > div:not(.modal-title),
.modal-header [id*="Subtitle"],
.modal-header [id*="subtitle"],
.modal-header [class*="subtitle"],
.modal-header [style*="color:#e0e7ff"],
.modal-header [style*="color: #e0e7ff"],
.modal-header [style*="color:#f0f9ff"],
.modal-header [style*="color: #f0f9ff"],
.modal-header [style*="opacity:0.9"],
.modal-header [style*="opacity: 0.9"],
.modal-header [style*="opacity:0.85"],
.modal-header [style*="opacity: 0.85"] {
    color: #64748b !important;
    opacity: 1 !important;
}

.modal-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-subtitle {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin-top: 2px;
    font-weight: 500;
    line-height: 1.4;
}

.modal-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.modal-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.modal-close:focus-visible {
    outline: 2px solid var(--primary, #2563eb) !important;
    outline-offset: 2px !important;
}

.modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding: 1.25rem 1.5rem !important;
    box-sizing: border-box;
}

.modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 0 0 16px 16px !important;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .modal-box {
        max-width: 95vw !important;
        max-height: calc(100vh - 1.5rem) !important;
    }
    .modal-header,
    .modal-footer {
        padding: 1rem 1.25rem !important;
    }
    .modal-body {
        padding: 1rem 1.25rem !important;
    }
}

@media (max-width: 768px) {
    .modal-box {
        width: 96% !important;
        border-radius: 12px !important;
        max-height: 94vh !important;
    }
    .modal-header {
        border-radius: 12px 12px 0 0 !important;
    }
    .modal-footer {
        border-radius: 0 0 12px 12px !important;
    }
}

@media (max-width: 390px) {
    .modal-box {
        width: 98% !important;
        border-radius: 10px !important;
    }
    .modal-header {
        border-radius: 10px 10px 0 0 !important;
    }
    .modal-footer {
        border-radius: 0 0 10px 10px !important;
    }
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-control {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-family: var(--font-main);
    font-size: 0.85rem;
    outline: none;
}

.form-control:focus {
    border-color: var(--primary);
}

.search-box, .search-input {
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-family: var(--font-main);
    font-size: 0.85rem;
    outline: none;
    width: 240px;
}

/* TYPEAHEAD SEARCH POPUP ENGINE */
.typeahead-wrapper {
    position: relative;
    width: 100%;
}

.typeahead-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 340px;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1.5px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.22), 0 8px 10px -6px rgba(0, 0, 0, 0.12);
    z-index: 999999;
    display: none;
}

.typeahead-popup.active {
    display: block !important;
}

.typeahead-item {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease;
}

.typeahead-item:hover {
    background-color: #f0f7ff;
}

.typeahead-item-title {
    font-weight: 700;
    font-size: 0.90rem;
    color: var(--primary);
}

.typeahead-item-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.typeahead-add-new-btn {
    padding: 0.65rem;
    background: #eff6ff;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
    border-top: 1px dashed #bfdbfe;
}

.typeahead-add-new-btn:hover {
    background: #dbeafe;
}

/* UNIFIED TABLE ACTION BUTTONS */
.table-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.table-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 32px;
    padding: 0 0.65rem;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: #ffffff;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.table-btn:active {
    transform: scale(0.97);
}

/* History / Info */
.table-btn-info {
    background-color: #f0f9ff;
    color: #0369a1;
    border-color: #bae6fd;
}
.table-btn-info:hover {
    background-color: #e0f2fe;
    color: #0c4a6e;
    border-color: #7dd3fc;
}

/* Subtle / POS Quick Add */
.table-btn-subtle {
    background-color: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}
.table-btn-subtle:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* View / Receipt */
.table-btn-view {
    background-color: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.table-btn-view:hover {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

/* Edit Button */
.table-btn-edit {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.table-btn-edit:hover {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* Delete / Void Button */
.table-btn-delete {
    background-color: #fef2f2;
    color: var(--danger); /* #b91c1c: 5.30:1 on #fef2f2 */
    border-color: #fecaca;
}
.table-btn-delete:hover {
    background-color: var(--danger-text);
    color: #ffffff;
    border-color: var(--danger-text);
}

/* Anti-Forgery Document Security Watermark & Seal */
.print-watermark-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.print-watermark-seal {
    position: relative;
    width: 420px;
    max-width: 85%;
    opacity: 0.14;
    transform: rotate(-10deg);
    text-align: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.print-watermark-matrix {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    opacity: 0.042;
}

/* -------------------------------------------------------------
   PRINT MEDIA STYLES (ENTERPRISE A4, REPORTS & SCREEN PRINTING)
   ------------------------------------------------------------- */
@media print {
    *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 10pt !important;
        line-height: 1.35 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    @page {
        margin: 8mm 10mm;
        size: auto;
    }

    /* 1. Hide all non-printable UI chrome */
    #appSidebar,
    .app-header,
    .modal-close,
    .modal-footer button,
    .btn,
    .toast-container,
    #loginGateScreen,
    .pagination-footer,
    .table-actions-group,
    .theme-toggle-btn,
    .help-tooltip,
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 2. STRICT MODAL PRINT ISOLATION: Hide ALL inactive modals */
    .modal-overlay:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }

    /* If an active modal exists, hide main page wrapper and print modal cleanly */
    body:has(.modal-overlay.active) #mainWrapper {
        display: none !important;
    }

    .modal-overlay.active {
        position: static !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .modal-overlay.active .modal-box {
        position: static !important;
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .modal-overlay.active .modal-body {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* 3. Screen / Tab Print Layout (when no modal is active) */
    #mainWrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    .tab-content {
        display: none !important;
    }

    .tab-content.active {
        display: block !important;
        overflow: visible !important;
    }

    .card, .panel-card, .metric-card {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin-bottom: 10px !important;
        background: #ffffff !important;
    }

    .custom-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 8.5pt !important;
    }

    .custom-table th, .custom-table td {
        border: 1px solid #cbd5e1 !important;
        padding: 5px 6px !important;
    }

    .custom-table thead {
        display: table-header-group !important;
    }

    tr {
        page-break-inside: avoid !important;
    }

    #printableInvoiceContent,
    #printableProformaWrapper,
    #printableTransferContent,
    #printableStoreOrderContent,
    .print-invoice-wrapper {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
        position: relative !important;
    }

    .print-watermark,
    .print-watermark-wrapper {
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        z-index: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-watermark-seal {
        position: relative !important;
        width: 400px !important;
        max-width: 80% !important;
        opacity: 0.13 !important;
        transform: rotate(-10deg) !important;
        text-align: center !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-watermark-matrix {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        opacity: 0.038 !important;
    }

    /* 4. THERMAL 80mm RECEIPT PRINT SPECIFICATIONS */
    .thermal-receipt-preview,
    .receipt-80mm,
    .thermal-receipt-box,
    #printableThermalReceiptWrapper {
        width: 72mm !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        color: #000000 !important;
        background: #ffffff !important;
    }

    .thermal-receipt-box * {
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-summary-signature-block,
    .signature-stamp-zone {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================================= */
/* ULTRA-MODERN TOAST NOTIFICATION SYSTEM                        */
/* ============================================================= */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

.modern-toast {
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 480px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.18), 0 0 1px rgba(15, 23, 42, 0.1);
    border: 1px solid #e2e8f0;
    border-left: 5px solid var(--primary);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}

.modern-toast.toast-show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modern-toast.toast-hide {
    transform: translateY(10px) scale(0.95);
    opacity: 0;
}

.modern-toast.toast-success {
    border-left-color: #10b981;
    background: #ffffff;
}
.modern-toast.toast-error {
    border-left-color: #ef4444;
    background: #ffffff;
}
.modern-toast.toast-warning {
    border-left-color: #f59e0b;
    background: #ffffff;
}
.modern-toast.toast-info {
    border-left-color: var(--primary);
    background: #ffffff;
}

.toast-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.toast-body {
    flex: 1;
    line-height: 1.35;
    word-break: break-word;
}

.toast-close {
    pointer-events: auto;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--slate-high-contrast);
    margin-left: 6px;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.toast-close:hover {
    color: #0f172a;
}

/* ============================================================= */
/* ULTRA-MODERN SLEEK CONFIRMATION MODAL                         */
/* ============================================================= */
#modalConfirmDialog .modal-box {
    max-width: 460px;
    border-radius: 18px;
    padding: 1.75rem 1.5rem 1.25rem 1.5rem;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.confirm-dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 1.1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.confirm-icon-danger {
    background: #fee2e2;
    color: var(--danger); /* 5.30:1 on #fee2e2 */
    border: 2px solid #fecaca;
}

.confirm-icon-warning {
    background: #fef3c7;
    color: var(--warning); /* #b45309: 4.51:1 on #fef3c7 */
    border: 2px solid #fde68a;
}

.confirm-icon-info {
    background: #e0f2fe;
    color: var(--primary);
    border: 2px solid #bae6fd;
}

.confirm-dialog-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.confirm-dialog-desc {
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.45;
    margin-bottom: 1.5rem;
    white-space: pre-line;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-dialog-actions button {
    flex: 1;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
}

/* ==========================================================================
   MODERN TOGGLE SWITCH (iOS / Enterprise Design System)
   ========================================================================== */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 26px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.switch .slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.switch input:checked + .slider {
    background-color: #e11d48; /* Vibrant Rose for Super Admin Alert */
}

.switch input:focus-visible + .slider {
    outline: 2px solid #e11d48;
    outline-offset: 2px;
}

.switch input:checked + .slider::before {
    transform: translateX(22px);
    background-color: #ffffff;
}

.switch:hover .slider {
    background-color: #94a3b8;
}

.switch:hover input:checked + .slider {
    background-color: #be123c;
}

@keyframes indeterminateLoadingBar {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   WCAG AA / AAA ACCESSIBILITY CONTRAST & TYPOGRAPHY ENFORCEMENT
   ========================================================================== */

/* Sub-13.6px (< 0.85rem) Floor Enforcement for Table Headers & Sub-Elements */
th small, td small {
    font-size: 0.85rem !important;
}

/* Master Catalog Location Assignment Action Links */
a[onclick*="openPartLocationModal"][style*="#94a3b8"],
.catalog-set-rack-link {
    color: var(--slate-high-contrast, #475569) !important;
    font-weight: 600;
}

/* Customer Retail Detail Badges */
span.badge[style*="#64748b"][style*="#f1f5f9"],
.badge-customer-detail {
    color: var(--text-muted-on-light, #334155) !important;
    background-color: #f1f5f9 !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
}

/* POS Tax Status Badge */
#posTaxStatusBadge {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* Accessible Emerald Financial & Variance KPI Numbers (Replacing #10b981 on white) */
#fin-cash-sales {
    color: var(--success, #047857) !important;
}

/* Report 1 Bento Grid Unit Labels & Separators */
#rep-returns-units .kpi-unit {
    color: #7e22ce !important; /* Purple-700: 6.50:1 on #fdf4ff */
}

#rep-transfers-units span[style*="#cbd5e1"] {
    color: var(--slate-high-contrast, #475569) !important; /* 7.58:1 on white */
    font-weight: 600 !important;
}

#rep-sales-units .kpi-unit {
    color: var(--danger, #b91c1c) !important; /* 6.47:1 on white */
}

#rep-credit-units .kpi-unit {
    color: var(--warning-text, #92400e) !important; /* 6.98:1 on #fffdfa */
}

/* Report 5 Smart Reorder Alert Titles */
#reportViewSmartReorder .kpi-card:nth-child(1) .kpi-title {
    color: #be123c !important; /* Rose-700: 5.72:1 on #fff1f2 */
}

#reportViewSmartReorder .kpi-card:nth-child(2) .kpi-title {
    color: #92400e !important; /* Amber-800: 6.84:1 on #fffbeb */
}

#reportViewSmartReorder .kpi-card:nth-child(3) .kpi-title {
    color: #15803d !important; /* Green-700: 4.79:1 on #f0fdf4 */
}

/* Standard Button Variants Accessibility */
.btn-success {
    background-color: var(--success, #047857) !important;
    border-color: var(--success, #047857) !important;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: var(--success-text, #065f46) !important;
    border-color: var(--success-text, #065f46) !important;
}

/* Required Form Indicator Asterisk (*) */
label span[style*="#ef4444"],
label span[style*="color:red"],
label span[style*="color: red"] {
    color: var(--danger, #b91c1c) !important;
}

/* Official Document Header Subtitles */
.official-doc-subtitle,
[data-doc-subtitle] {
    color: var(--slate-high-contrast, #475569) !important;
}

/* SVG Watermark Seal Typography Floor (>= 13.6px) */
.watermark-stamp text,
.watermark-stamp textPath,
svg.watermark-stamp text,
svg.watermark-stamp textPath {
    font-size: 14px !important;
}

/* Financial Matrix Zero/Null Values on Light Red / Neutral BG */
#reportFinancialTableBody td span[style*="color:#94a3b8"],
#reportFinancialTableBody td span[style*="color: #94a3b8"] {
    color: var(--slate-high-contrast, #475569) !important;
}

/* ========================================================================= */
/* MODAL WCAG AA ACCESSIBILITY & CONTRAST HARDENING (M1-IT3.2 & IT3.3)      */
/* ========================================================================= */

/* Universal Form Control & Button Typography Floor (>= 0.85rem / 13.6px) */
button,
.btn,
input,
select,
textarea {
    font-family: inherit;
    font-size: 0.85rem;
}

/* Modal Button & Input Safety Net: Guarantees modal inputs/buttons never drop below 0.85rem */
.modal button,
.modal-overlay button,
[id^="modal"] button,
.modal input,
.modal-overlay input,
[id^="modal"] input,
.modal select,
.modal-overlay select,
[id^="modal"] select {
    font-family: inherit;
    font-size: 0.85rem;
}

/* Ensure intentional larger close/action buttons inside modals retain their hierarchy */
.modal-close,
.modal .modal-close,
.modal-overlay .modal-close,
[id^="modal"] .modal-close {
    font-size: 1.25rem !important;
}

.modal .password-toggle-btn,
.modal-overlay .password-toggle-btn,
[id^="modal"] .password-toggle-btn {
    font-size: 1.1rem !important;
}

/* 1. Edit Invoice Price Mode Toggle Buttons Font Size Floor (Defect 1) */
#editInvPriceModeWholesale,
#editInvPriceModeRetail {
    font-size: 0.85rem !important;
}

/* 2. User Email Verification Default Badge (Defect 2) */
#userEmailVerificationBadge[style*="background:#f1f5f9"],
#userEmailVerificationBadge[style*="background: #f1f5f9"],
#userEmailVerificationBadge {
    color: var(--text-muted-on-light, #334155) !important;
    border: 1px solid #cbd5e1 !important;
}

/* 3. User Custom Logo Placeholder on #fafafa (Defect 3) */
#userCustomLogoPlaceholder {
    color: var(--slate-high-contrast, #475569) !important;
    font-weight: 700 !important;
}

/* 4. Store Unique Code 'System Locked (Auto)' Badge on #e2e8f0 (Defect 4) */
#storeSystemLockedBadge,
#modalStore .modal-body span[style*="background:#e2e8f0"],
#modalStore .modal-body span[style*="background: #e2e8f0"] {
    color: #1e293b !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
}



/* 7. Edit Invoice Partial Payment Suffix 'F' on #eff6ff (Discovery A) */
#editInvCreditPaidAmountSuffix,
#editInvCreditPartialGroup span[style*="position:absolute"] {
    color: var(--text-muted-on-light, #334155) !important;
    font-weight: 700 !important;
}

/* 8. Sales Return Auto-Fill Remaining Gap Button (Discovery B) */
#btnSalesReturnAutoFillGap,
#retModalCashSection .table-btn {
    background-color: #ffffff !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   MILESTONE M2: CORE COMMERCIAL VIEWS OVERHAUL
   ========================================================================== */

/* 1. Executive Dashboard & 14-Store Performance Cockpit */
.cockpit-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cockpit-type-hub {
    background: #e8ecf8;
    color: #253C80;
    border: 1px solid #c7d2fe;
}

.cockpit-type-warehouse {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.cockpit-type-retail {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* 2. POS Counter Sales & Basket Overhaul */
.pos-billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
    gap: 1.25rem;
    align-items: start;
    min-width: 0;
}
.pos-billing-grid > div {
    min-width: 0;
}

/* POS Basket Table Layout & Strict Vertical Center Alignment */
.pos-basket-table {
    width: 100%;
    border-collapse: collapse;
}
.pos-basket-table th {
    padding: 0.5rem 0.35rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    vertical-align: middle !important;
    border-bottom: 2px solid var(--border) !important;
    background: #f8fafc;
}
.pos-basket-table td,
#posBasketTableBody td {
    padding: 0.45rem 0.35rem !important;
    font-size: 0.85rem !important;
    display: table-cell !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
#posBasketTableBody tr {
    transition: background 0.15s ease;
}
#posBasketTableBody tr td div {
    white-space: normal;
    word-break: break-word;
}
.pos-basket-table input[data-field="unit_price"],
#posBasketTableBody input[data-field="unit_price"] {
    width: 80px !important;
    height: 30px !important;
    padding: 2px 6px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    font-family: var(--font-mono) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    text-align: center !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    display: inline-block !important;
    line-height: normal !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.pos-basket-table input[data-field="unit_price"]:focus,
#posBasketTableBody input[data-field="unit_price"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(37, 60, 128, 0.15) !important;
    outline: none !important;
}
.pos-basket-table input[data-field="discount_amount"],
#posBasketTableBody input[data-field="discount_amount"] {
    width: 72px !important;
    height: 30px !important;
    padding: 2px 6px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    font-family: var(--font-mono) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    text-align: center !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    display: inline-block !important;
    line-height: normal !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.pos-basket-table input[data-field="discount_amount"]:focus,
#posBasketTableBody input[data-field="discount_amount"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(37, 60, 128, 0.15) !important;
    outline: none !important;
}

/* POS Bounded Scroll & Non-Scrolling Action Deck */
.pos-basket-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}
.pos-basket-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.pos-basket-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.pos-basket-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.pos-basket-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.pos-checkout-console {
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

@media (max-width: 1280px) {
    .pos-billing-grid {
        grid-template-columns: minmax(300px, 0.85fr) minmax(460px, 1.65fr);
        gap: 1rem;
    }
}

@media (max-width: 860px) {
    .pos-billing-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .pos-top-ribbon {
        flex-direction: column;
        align-items: stretch !important;
    }
    .sales-filter-bar {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Quantity Stepper in Basket Table */
#posBasketTableBody .pos-qty-stepper {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    height: 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
#posBasketTableBody .stepper-btn {
    width: 22px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    background: #f8fafc !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    user-select: none !important;
}
#posBasketTableBody .stepper-btn:hover {
    background: #e2e8f0 !important;
    color: var(--primary) !important;
}
#posBasketTableBody .pos-qty-stepper input,
#posBasketTableBody .pos-qty-stepper input.pos-inline-input {
    width: 32px !important;
    height: 28px !important;
    border: none !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    outline: none !important;
    margin: 0 !important;
}

/* Single-Line Compact Stock Badge */
#posBasketTableBody .badge {
    white-space: nowrap !important;
    display: inline-block !important;
    padding: 2px 7px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

/* Refined Subtle Danger Delete Button */
.btn-remove-basket-item {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}
.btn-remove-basket-item:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15) !important;
}

/* Currency Value Strict No-Wrap Contract */
.currency-val {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

/* Checkout Method Tabs in Slide-Over Drawer */
.checkout-tab-btn {
    transition: all 0.15s ease;
}
.checkout-tab-btn:hover:not(.active) {
    border-color: #94a3b8 !important;
    background: #e2e8f0 !important;
}
@media (max-width: 640px) {
    .checkout-method-tabs {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
.momo-provider-btn {
    transition: all 0.15s ease;
}
.momo-provider-btn:hover {
    filter: brightness(0.96);
}

/* 3. Sales History Table & Summary Bar */
.sales-history-summary-bar .summary-metric-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sales-history-summary-bar .summary-metric-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.sales-history-summary-bar .summary-metric-card .currency-val,
.sales-history-summary-bar .summary-metric-card .text-kpi-headline,
.summary-metric-card .currency-val,
.summary-metric-card .text-kpi-headline {
    text-align: left !important;
}

/* WCAG AA High-Contrast Status Badges */
.badge-paid {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.badge-partial {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.badge-unpaid {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.badge-returned {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.badge-proforma {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

/* =============================================================
   ENTERPRISE PARTS CATALOG & MASTER TABLE SYSTEM (LINEAR/STRIPE)
   ============================================================= */

/* 1. Master Table Base Typography & Container */
.enterprise-parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--text-primary, #0f172a);
}

.enterprise-parts-table th {
    background-color: #f8fafc;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.6rem 0.45rem !important;
    border-bottom: 1px solid var(--border, #e2e8f0);
    white-space: nowrap !important;
}

.enterprise-parts-table td {
    padding: 0.55rem 0.45rem !important;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    vertical-align: middle;
    transition: background-color 0.12s ease;
}

.enterprise-parts-table .table-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-wrap: nowrap;
}

.enterprise-parts-table .table-btn {
    padding: 2px 5px !important;
    font-size: 0.85rem !important;
}

/* 2. Alternating Row Colors & Elevation Hover */
.enterprise-parts-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}
.enterprise-parts-table tbody tr:nth-child(odd) {
    background-color: #fbfcfe;
}
.enterprise-parts-table tbody tr:hover {
    background-color: #f1f5f9 !important;
    box-shadow: inset 3px 0 0 var(--primary, #253C80);
}
.enterprise-parts-table tbody tr.selected-row {
    background-color: #eff6ff !important;
    box-shadow: inset 3px 0 0 #3b82f6;
}

/* 3. SKU Code Badge (Linear Monospace Standard) */
.part-sku-badge {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 2px 7px;
    letter-spacing: 0.02em;
    display: inline-block;
    white-space: nowrap !important;
}

/* 4. Tabular Numbers & Currency Non-Wrapping Rule */
.enterprise-parts-table .currency-val,
.enterprise-parts-table td.currency-cell,
.enterprise-parts-table td.tabular-cell {
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums !important;
    font-weight: 700;
    white-space: nowrap !important;
    text-align: center !important;
}

/* 5. High-Contrast Stock Status Pills (WCAG AA >= 4.5:1 Compliant) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap !important;
}
.status-pill-instock {
    background-color: #dcfce7;
    color: #15803d; /* 4.88:1 contrast on #dcfce7 */
    border: 1px solid #86efac;
}
.status-pill-lowstock {
    background-color: #fef3c7;
    color: #92400e; /* 5.76:1 contrast on #fef3c7 */
    border: 1px solid #fde68a;
}
.status-pill-outofstock {
    background-color: #fee2e2;
    color: #b91c1c; /* 5.43:1 contrast on #fee2e2 */
    border: 1px solid #fca5a5;
}
.status-pill .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-pill-instock .pill-dot { background-color: #16a34a; }
.status-pill-lowstock .pill-dot { background-color: #d97706; }
.status-pill-outofstock .pill-dot { background-color: #dc2626; }

/* 6. Multi-Store Stock Breakdown Link Badge */
.store-breakdown-link-badge {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    transition: all 0.15s ease;
}
.store-breakdown-link-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* 7. Action Button Variants in Master Table */
.table-btn-warning {
    background-color: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.table-btn-warning:hover {
    background-color: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

/* 8. Responsive Viewport Constraints (1440px, 1280px, 1024px) */
@media (max-width: 1440px) {
    .enterprise-parts-table th, 
    .enterprise-parts-table td {
        padding: 0.6rem 0.55rem;
    }
}
@media (max-width: 1280px) {
    .parts-toolbar-panel {
        gap: 0.75rem;
    }
}
@media (max-width: 1024px) {
    .enterprise-parts-table {
        min-width: 1100px;
    }
    .table-wrapper {
        overflow-x: auto !important;
        max-width: 100vw;
    }
}

/* ========================================================================= */
/* MODAL: #modalPartLocation (13-Store Storage Grid & Location Code Modal)   */
/* ========================================================================= */

#modalPartLocation.modal-overlay {
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

#modalPartLocation .loc-modal-box {
    max-width: 860px !important;
    width: 95% !important;
    max-height: calc(100vh - 3rem) !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: auto;
}

#modalPartLocation .loc-modal-header {
    background: #ffffff !important;
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1.15rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

.loc-header-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    flex-shrink: 0;
}

.loc-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.loc-modal-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

#modalPartLocation .loc-modal-body {
    padding: 1.25rem 1.5rem !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.loc-summary-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.loc-single-store-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.loc-select-field {
    font-weight: 700;
    font-size: 0.875rem;
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    width: 100%;
}

.loc-input-field {
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    width: 100%;
    padding: 0.4rem 0.75rem;
}

.loc-input-field:focus,
.loc-multi-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
    background: #ffffff !important;
}

.btn-preset {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-preset:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Scrollable Multi-Store Grid Matrix */
.loc-grid-scroll-wrap {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    background: #ffffff;
}

.loc-grid-table th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    font-size: 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.3px;
}

.loc-grid-table td {
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
}

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

.loc-grid-table tr:hover td {
    background: #f8fafc;
}

.loc-store-code-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #ffffff;
    font-family: var(--font-mono, monospace);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.badge-stock-in {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-stock-zero {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#modalPartLocation .loc-modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.1rem 1.5rem !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

/* Responsive Media Queries (1440px, 1280px, 1024px, 768px) */
@media (max-width: 1024px) {
    #modalPartLocation .loc-modal-box {
        max-width: 94vw !important;
        max-height: calc(100vh - 2rem) !important;
    }
    .loc-grid-table th, 
    .loc-grid-table td {
        padding: 0.5rem 0.65rem;
    }
}

@media (max-width: 768px) {
    #modalPartLocation .loc-modal-box {
        max-width: 98vw !important;
        border-radius: 12px !important;
    }
    #modalPartLocation .form-grid-2col {
        grid-template-columns: 1fr !important;
    }
    .loc-grid-scroll-wrap {
        max-height: 280px;
    }
    #modalPartLocation .loc-modal-header,
    #modalPartLocation .loc-modal-footer,
    #modalPartLocation .loc-modal-body {
        padding: 0.85rem 1rem !important;
    }
}

/* =============================================================
   ENTERPRISE STOCK TRANSFERS & DISPATCHING STYLES (M3.3)
   ============================================================= */

/* Modern Segmented Sub-Tab Group */
.subtab-nav-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3px;
}

.transfer-sub-tab-btn {
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 1rem !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    border: 1px solid transparent !important;
    cursor: pointer;
}

.transfer-sub-tab-btn.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(37, 60, 128, 0.25) !important;
}

.transfer-sub-tab-btn.btn-secondary {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.transfer-sub-tab-btn.btn-secondary:hover {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: #e2e8f0 !important;
}

/* WCAG AAA High-Contrast Status Badges (>7:1 Contrast Ratio) */
.badge-status-pending {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
}

.badge-status-intransit {
    background-color: #e0f2fe !important;
    color: #075985 !important;
    border: 1px solid #bae6fd !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
}

.badge-status-accepted,
.badge-status-completed {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
}

.badge-status-rejected,
.badge-status-cancelled {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
}

/* Responsive Modal Layout Grids */
.transfer-modal-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.transfer-quick-entry-grid {
    display: grid;
    grid-template-columns: 1fr 140px auto;
    gap: 0.75rem;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .transfer-modal-grid-3 {
        grid-template-columns: 1fr;
    }
    .transfer-quick-entry-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ENTERPRISE MILESTONE 4: REPORTS BENTO & RESPONSIVE GRID SYSTEM
   ========================================================================== */

/* --- Spatial Rhythm & Gutter Tokens --- */
:root {
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --gutter-xs: 0.35rem;
    --gutter-sm: 0.5rem;
    --gutter-md: 0.75rem;
    --gutter-lg: 1rem;
    --gutter-xl: 1.5rem;
}

/* --- Report 1: 12-Column Enterprise Bento Grid --- */
.kpi-grid-report1 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kpi-hero-cell {
    grid-column: span 4;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kpi-spotlight-cell {
    grid-column: span 4;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 1200px) {
    .kpi-grid-report1 {
        grid-template-columns: repeat(6, 1fr);
    }
    .kpi-hero-cell {
        grid-column: span 6;
        grid-row: auto;
    }
    .kpi-spotlight-cell {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .kpi-grid-report1 {
        grid-template-columns: 1fr;
    }
    .kpi-hero-cell,
    .kpi-spotlight-cell {
        grid-column: span 1;
        grid-row: auto;
    }
}

/* --- Report 2: Balanced 4-Column Financial Bento Matrix --- */
.kpi-grid-report2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

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

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

/* --- Report 3: 4 Aging Buckets Schedule Grid --- */
.kpi-grid-aging {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.aging-bucket-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.15rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.aging-current {
    border-top: 3.5px solid #10b981;
}

.aging-overdue {
    border-top: 3.5px solid #f59e0b;
}

.aging-delinquent {
    border-top: 3.5px solid #f97316;
}

.aging-critical {
    border-top: 3.5px solid #ef4444;
}

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

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

/* --- Semantic Responsive Grid Primitives --- */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-md, 0.75rem);
}

.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter-md, 0.75rem);
}

.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter-md, 0.75rem);
}

.grid-kpi-autofit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.grid-form-pair-asym {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.6rem;
    align-items: center;
}

.grid-quick-entry {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 0.5rem;
    align-items: end;
}

.grid-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.grid-filter-bar > * {
    flex: 1 1 180px;
    min-width: 160px;
}
.grid-filter-bar > *:first-child {
    flex: 2 1 240px;
    min-width: 220px;
}

.grid-settings-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.grid-key-value-compact {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.5rem;
    align-items: center;
}

.grid-asym-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0.5rem;
}

.grid-col-span-2 {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    .grid-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .grid-2col,
    .grid-3col,
    .grid-4col,
    .grid-form-pair-asym,
    .grid-settings-split,
    .grid-quick-entry,
    .grid-filter-bar,
    .grid-asym-row {
        grid-template-columns: 1fr !important;
    }
    .grid-col-span-2 {
        grid-column: span 1 !important;
    }
}

/* --- WCAG AA Contrast Compliance & Utilities --- */
.text-muted-accessible {
    color: #64748b !important;
}

.text-discount-accessible {
    color: #991b1b !important;
}

span[style*="color:#94a3b8"],
div[style*="color:#94a3b8"],
td[style*="color:#94a3b8"],
p[style*="color:#94a3b8"],
label[style*="color:#94a3b8"],
small[style*="color:#94a3b8"] {
    color: #64748b !important;
}

/* Currency formatting without wrapping */
.currency-val {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

/* Customer Statement Modal Table Compact Layout */
.cust-statement-table th,
.cust-statement-table td,
#custStatementTableBody td {
    padding: 0.55rem 0.45rem !important;
    font-size: 0.85rem !important;
}

/* Price Approvals Table Compact Layout */
.price-proposals-table th,
.price-proposals-table td,
#priceProposalsTableBody td {
    padding: 0.55rem 0.45rem !important;
    font-size: 0.85rem !important;
}

/* Master Parts Catalog Table Compact Layout */
.enterprise-parts-table th,
.enterprise-parts-table td,
#partsTableBody td {
    padding: 0.5rem 0.3rem !important;
    font-size: 0.85rem;
}
.enterprise-parts-table .table-actions-group .table-btn {
    padding: 0.2rem 0.35rem !important;
    font-size: 0.85rem !important;
}




/* Keep confirmation choices visible even for large purchase rack lists. */
#modalConfirmDialog .modal-box { max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-sizing: border-box; }
#modalConfirmDialog .confirm-dialog-desc { min-height: 0; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; }
#modalConfirmDialog .confirm-dialog-icon, #modalConfirmDialog .confirm-dialog-title, #modalConfirmDialog .confirm-dialog-actions { flex-shrink: 0; }

/* ============================================================= */
/* AUDIT HISTORY PANEL (Activity & Trash)                        */
/* ============================================================= */
.ah-panel { background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); margin-bottom:1rem; overflow:hidden; }
.ah-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#f8fafc,#fff); flex-wrap:wrap; }
.ah-title { font-size:1.05rem; font-weight:800; color:var(--primary); }
.ah-sub { font-size:0.8rem; color:var(--text-secondary); margin-top:2px; max-width:60ch; }
.ah-presets { display:inline-flex; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:3px; gap:2px; }
.ah-presets button { border:0; background:transparent; padding:0.3rem 0.7rem; font-size:0.78rem; font-weight:700; color:#475569; border-radius:6px; cursor:pointer; white-space:nowrap; }
.ah-presets button.active { background:var(--primary); color:#fff; }
.ah-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.6rem 0.75rem; padding:0.85rem 1.25rem; align-items:end; border-bottom:1px solid var(--border); }
.ah-filters label { display:flex; flex-direction:column; gap:3px; font-size:0.75rem; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.03em; }
.ah-filters label .form-control { height:36px; font-size:0.85rem; text-transform:none; letter-spacing:0; }
.ah-filters .ah-search { grid-column:span 2; }
.ah-filters .ah-actions { display:flex; gap:0.4rem; align-items:end; }
.ah-filters .ah-actions .btn { height:36px; font-size:0.82rem; font-weight:700; white-space:nowrap; }
.ah-results { padding:0 0 0.5rem; }
.ah-status { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; padding:0.6rem 1.25rem; font-size:0.82rem; color:#475569; flex-wrap:wrap; }
.ah-status strong { color:#0f172a; }
.ah-table { width:100%; border-collapse:collapse; font-size:0.83rem; }
.ah-table th { position:sticky; top:0; background:#f8fafc; color:#475569; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.04em; font-weight:800; padding:0.55rem 0.9rem; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.ah-table td { padding:0.55rem 0.9rem; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.ah-table tr:hover td { background:#f8fafc; }
.ah-when { white-space:nowrap; font-weight:700; color:#0f172a; }
.ah-when small { display:block; font-weight:500; color:#94a3b8; font-family:var(--font-mono); font-size:0.72rem; }
.ah-user { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#0f172a; white-space:nowrap; }
.ah-user i { width:22px; height:22px; border-radius:50%; background:#e0e7ff; color:#3730a3; font-style:normal; font-size:0.7rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.ah-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.72rem; font-weight:800; letter-spacing:0.02em; white-space:nowrap; border:1px solid transparent; }
.ah-badge.sale { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.ah-badge.stock { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.ah-badge.audit { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.ah-badge.security { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.ah-badge.danger { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.ah-badge.system { background:#faf5ff; color:#7e22ce; border-color:#e9d5ff; }
.ah-details { color:#334155; line-height:1.45; overflow-wrap:anywhere; max-width:56rem; }
.ah-details mark { background:#fef08a; padding:0 2px; border-radius:2px; }
.ah-pager { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; padding:0.7rem 1.25rem; border-top:1px solid var(--border); flex-wrap:wrap; }
.ah-pager .btn { font-size:0.8rem; font-weight:700; padding:0.35rem 0.7rem; }
.ah-pager .ah-page-jump { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:#475569; }
.ah-pager .ah-page-jump input { width:64px; height:32px; text-align:center; font-weight:700; }
.ah-pager select { height:32px; font-size:0.8rem; }
.ah-empty { padding:2.5rem 1rem; text-align:center; color:#64748b; }
.ah-archives { padding:0.5rem 1.25rem 0.75rem; font-size:0.8rem; color:#475569; }
.ah-archives ul { margin:0.4rem 0 0; padding-left:1.1rem; }
.ah-archives li { margin:0.25rem 0; }
@media (max-width:768px) { .ah-filters .ah-search { grid-column:span 1; } .ah-table { min-width:720px; } .ah-results { overflow-x:auto; } }


/* ---------- Audit reconciliation: readable toolbar, guide strip, swap screen ---------- */
.audit-tools-row { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.audit-tools-label { font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; min-width:52px; }
.audit-tools .btn { font-size:0.9rem; font-weight:700; padding:0.55rem 1rem; min-height:40px; border-radius:8px; }
.audit-tools-searchrow { margin-top:-0.1rem; }
.audit-tools-search { flex:1 1 220px; min-width:200px; max-width:420px; font-size:0.95rem; padding:0.5rem 0.8rem; min-height:40px; }
.audit-count { color:#fff; border-radius:999px; padding:1px 8px; margin-left:6px; font-size:0.78rem; }
.audit-guide { margin-bottom:0.65rem; padding:0.85rem 1.1rem; background:#eef2ff; border:1px solid #c7d2fe; border-radius:10px; font-size:0.98rem; line-height:1.55; color:#1e293b; }
.audit-guide .btn { font-size:0.9rem; font-weight:700; padding:0.45rem 0.9rem; min-height:38px; margin:2px 4px 2px 0; border-radius:8px; }
.audit-pick-list { border:1px solid #cbd5e1; border-radius:10px; max-height:280px; overflow:auto; background:#fff; }
.audit-pick-group { padding:0.45rem 0.9rem; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; background:#f8fafc; border-bottom:1px solid #e2e8f0; position:sticky; top:0; }
.audit-pick { display:grid; grid-template-columns: 1fr auto auto; gap:0.4rem 1rem; align-items:center; width:100%; text-align:left; padding:0.6rem 0.9rem; border:0; border-bottom:1px solid #f1f5f9; background:#fff; cursor:pointer; font: inherit; }
.audit-pick:hover { background:#f8fafc; }
.audit-pick.selected { background:#eef2ff; box-shadow: inset 4px 0 0 #253C80; }
.audit-pick[disabled] { opacity:0.5; cursor:not-allowed; }
.audit-pick .pick-no { font-weight:800; color:#0f172a; }
.audit-pick .pick-name { display:block; font-size:0.82rem; color:#64748b; font-weight:500; }
.audit-pick .pick-qty { font-weight:800; white-space:nowrap; }
.audit-pick .pick-price { color:#475569; white-space:nowrap; font-family:var(--font-mono, monospace); }
.audit-ex-card { border:1px solid #e2e8f0; border-radius:10px; padding:0.7rem 0.9rem; margin-bottom:0.5rem; display:grid; grid-template-columns: 1fr auto; gap:0.4rem 1rem; align-items:center; background:#fff; }
.audit-ex-card.reversed { opacity:0.6; background:#f8fafc; }
.audit-ex-card .ex-title { font-weight:800; font-size:0.95rem; color:#0f172a; }
.audit-ex-card .ex-meta { font-size:0.82rem; color:#475569; margin-top:2px; }
.audit-ex-card .ex-docs { font-size:0.82rem; color:#1e293b; margin-top:4px; line-height:1.5; }
.audit-ex-card .badge-status { font-size:0.75rem; font-weight:800; padding:3px 9px; border-radius:999px; background:#ecfdf5; color:#047857; white-space:nowrap; }
.audit-ex-card.reversed .badge-status { background:#f1f5f9; color:#64748b; }
.audit-form-label { display:block; font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:#475569; margin:0.9rem 0 0.35rem; }
.audit-form-label:first-of-type { margin-top:0.5rem; }
@media (max-width:768px) { .audit-pick { grid-template-columns: 1fr auto; } .audit-pick .pick-price { grid-column: 1 / -1; } .audit-ex-card { grid-template-columns: 1fr; } }
/* phones: filter and tool buttons become one swipeable chip strip each; search gets its own line */
@media (max-width:768px) {
  .card-panel.audit-tools { align-items:stretch !important; justify-content:flex-start !important; }
  .audit-tools-row { width:100%; max-width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; }
  .audit-tools-row::-webkit-scrollbar { display:none; }
  .audit-tools-row .btn { flex:0 0 auto; white-space:nowrap; }
  .audit-tools-label { flex:0 0 auto; }
  .audit-tools-search { flex:1 1 100%; max-width:none; }
}

/* ---------- Audit tool screens (Settle, Fix, Bill typos, Re-compose, Adjust bill, Sync racks): one look ---------- */
.audit-modal .modal-body { font-size:1rem; color:#0f172a; }
.audit-modal .modal-body > label:not(.audit-form-label) { display:block; margin-top:0.5rem; font-weight:600; }
.audit-modal .form-control { min-height:42px; font-size:1rem; }
.audit-intro { background:#f8fafc; border:1px solid #e2e8f0; border-left:4px solid #253C80; border-radius:10px; padding:0.8rem 1rem; margin:0 0 0.6rem; font-size:0.95rem; line-height:1.55; color:#334155; }
.audit-intro.ok { border-left-color:#047857; }
.audit-intro.warn { border-left-color:#b45309; background:#fffbeb; border-color:#fde68a; }
.audit-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.audit-grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.audit-grid-3 label, .audit-grid-2 label { font-weight:600; }
.audit-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0.4rem 0 0.5rem; }
.audit-row .form-control { flex:1 1 220px; }
.audit-row .btn { font-size:0.9rem; font-weight:700; padding:0.5rem 0.9rem; min-height:42px; }
.audit-note { font-size:0.88rem; color:#64748b; margin:0.25rem 0 0.5rem; line-height:1.5; }
.audit-scroll { max-height:48vh; overflow:auto; border:1px solid #e2e8f0; border-radius:10px; }
table.audit-lines { width:100%; border-collapse:collapse; font-size:0.95rem; }
table.audit-lines th { position:sticky; top:0; background:#f8fafc; text-align:left; font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; padding:0.6rem 0.8rem; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
table.audit-lines td { padding:0.55rem 0.8rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
table.audit-lines tr:last-child td { border-bottom:0; }
table.audit-lines th.num, table.audit-lines td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.audit-lines .part-no { font-weight:800; color:#0f172a; white-space:nowrap; }
table.audit-lines .part-name { display:block; font-size:0.84rem; color:#64748b; font-weight:500; }
table.audit-lines .sub { display:block; font-size:0.82rem; color:#64748b; }
table.audit-lines .warn { display:block; font-size:0.82rem; color:#b45309; }
table.audit-lines .form-control { min-height:40px; font-size:1rem; }
table.audit-lines .qty { width:96px; text-align:center; font-weight:700; }
table.audit-lines .btn { font-size:0.88rem; font-weight:700; padding:0.45rem 0.85rem; min-height:38px; white-space:nowrap; }
.audit-totals { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0.6rem 0 0.2rem; padding:0.7rem 0.9rem; background:#eef2ff; border:1px solid #c7d2fe; border-radius:10px; font-weight:800; color:#1e293b; }
.audit-totals .muted { font-weight:500; color:#475569; }
.audit-error { color:#b91c1c; font-weight:600; margin:0.5rem 0 0; min-height:0; }
.audit-error:empty { display:none; }
.audit-choice { display:grid; grid-template-columns:auto 1fr; gap:0.3rem 0.8rem; align-items:center; width:100%; text-align:left; padding:0.75rem 0.9rem; margin-bottom:8px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; cursor:pointer; font:inherit; color:#0f172a; }
.audit-choice:hover { background:#f8fafc; }
.audit-choice input { width:20px; height:20px; margin:0; accent-color:#253C80; }
.audit-choice .choice-title { font-weight:800; font-size:1rem; }
.audit-choice .choice-text { font-size:0.9rem; color:#475569; margin-top:2px; line-height:1.45; }
.audit-choice .choice-note { font-size:0.85rem; color:#b45309; margin-top:3px; }
.audit-choice.selected { background:#eef2ff; border-color:#253C80; box-shadow:inset 4px 0 0 #253C80; }
.audit-choice[disabled], .audit-choice.disabled { opacity:0.55; cursor:not-allowed; background:#f8fafc; }
.audit-choice .choice-side { grid-column:2; display:flex; gap:10px; flex-wrap:wrap; font-size:0.88rem; color:#475569; }
.audit-choice .choice-side strong { color:#1d4ed8; }
.audit-fix-option { display:block; width:100%; text-align:left; border:1px solid #cbd5e1; border-radius:10px; padding:0.8rem 1rem; margin-bottom:8px; background:#fff; cursor:pointer; font:inherit; color:#0f172a; }
.audit-fix-option:hover:not([disabled]) { background:#f8fafc; border-color:#94a3b8; }
.audit-fix-option[disabled] { background:#f8fafc; color:#94a3b8; cursor:not-allowed; border-color:#e2e8f0; }
.audit-fix-option .fix-title { font-weight:800; font-size:1rem; }
.audit-fix-option .fix-text { font-size:0.9rem; color:#475569; margin-top:3px; line-height:1.45; }
.audit-fix-option[disabled] .fix-text { color:#94a3b8; }
.audit-fix-option .fix-note { font-size:0.85rem; color:#b45309; margin-top:4px; }
.audit-clues { margin:0; padding-left:1.1rem; font-size:0.85rem; color:#475569; line-height:1.45; }
.audit-kpis { display:flex; gap:10px; flex-wrap:wrap; margin:0.4rem 0 0.7rem; }
.audit-kpi { flex:1 1 140px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:0.6rem 0.8rem; }
.audit-kpi b { display:block; font-size:1.35rem; color:#0f172a; }
.audit-kpi span { font-size:0.8rem; color:#64748b; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; }
details.audit-details { margin-top:0.8rem; border:1px solid #e2e8f0; border-radius:10px; padding:0.5rem 0.9rem; }
details.audit-details summary { cursor:pointer; font-weight:800; padding:0.3rem 0; }
@media (max-width:768px) {
  .audit-grid-3, .audit-grid-2 { grid-template-columns:1fr; }
  .audit-scroll { max-height:none; border:0; }
  table.audit-lines th { position:static; }
  .audit-choice .choice-side { grid-column:1 / -1; }
}

/* ---------- Settle board: missing and extra side by side ---------- */
.audit-board-box { max-width:1320px; width:97%; height:92vh; display:flex; flex-direction:column; }
.audit-board-box .audit-board-body { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.audit-board { display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1 1 auto; min-height:0; }
.audit-board-pane { display:flex; flex-direction:column; min-height:0; border:1px solid #e2e8f0; border-radius:12px; background:#fff; overflow:hidden; }
.audit-board-head { padding:0.6rem 0.8rem; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.audit-board-head h4 { margin:0 0 0.45rem; font-size:1.05rem; font-weight:900; display:flex; align-items:center; gap:6px; }
.audit-board-ctl { display:grid; grid-template-columns:1fr auto auto; gap:6px; }
.audit-board-ctl .form-control { min-height:38px; font-size:0.92rem; }
.audit-board-ctl select { max-width:170px; }
.audit-board-ctl .btn { min-height:38px; padding:0.3rem 0.7rem; font-size:0.95rem; }
.audit-board-list { flex:1 1 auto; min-height:0; max-height:none; border:0; border-radius:0; overflow:auto; }
.audit-board-list .audit-pick { grid-template-columns:1fr auto auto; }
.audit-board-list .audit-pick .pick-price { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.audit-pick-toggle { background:#f8fafc !important; }
.board-hint { font-family:inherit; font-size:0.72rem; font-weight:800; padding:1px 7px; border-radius:999px; }
.board-hint.same { background:#eef2ff; color:#253C80; }
.board-hint.ok { background:#ecfdf5; color:#047857; }
.board-hint.no { background:#fef2f2; color:#b91c1c; }
.audit-board-foot { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.audit-board-verdict { font-size:0.95rem; line-height:1.5; color:#1e293b; }
.audit-board-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.audit-board-actions .btn { font-size:0.92rem; font-weight:700; padding:0.55rem 1rem; min-height:42px; }
@media (max-width:768px) {
  .audit-board-box { height:auto; }
  .audit-board-box .audit-board-body { overflow:visible; }
  .audit-board { grid-template-columns:1fr; }
  .audit-board-pane { max-height:none; }
  .audit-board-list { max-height:48vh; }
  .audit-board-ctl { grid-template-columns:1fr auto; }
  .audit-board-ctl input { grid-column:1 / -1; grid-row:1; }
  .audit-board-ctl select { grid-column:1; grid-row:2; max-width:none; }
  .audit-board-ctl .btn { grid-column:2; grid-row:2; }
  .audit-board-actions .btn { flex:1 1 45%; }
}

/* ---------- Budget Order planner ---------- */
.bo-form { background:#fff; border:1px solid #cbd5e1; border-radius:10px; padding:0.9rem 1rem; margin-bottom:0.8rem; }
.bo-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px 16px; }
.bo-grid > label { font-weight:700; font-size:0.9rem; color:#334155; }
.bo-grid .form-control { margin-top:4px; min-height:42px; font-size:1rem; }
#boBudget { font-weight:800; font-size:1.15rem; font-family:var(--font-mono, monospace); }
.bo-quick { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.bo-quick .btn { padding:0.3rem 0.7rem; font-size:0.85rem; font-weight:700; min-height:32px; }
.bo-help { display:block; font-weight:500; font-size:0.8rem; color:#64748b; margin-top:3px; }
.bo-toggle { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.bo-toggle label { display:flex; gap:8px; align-items:center; font-weight:600; font-size:0.95rem; cursor:pointer; }
.bo-toggle input { width:18px; height:18px; accent-color:#253C80; }
.bo-cats-wrap { grid-column:1 / -1; }
.bo-cats { display:flex; flex-wrap:wrap; gap:6px 14px; max-height:120px; overflow:auto; padding:6px 0 0; }
.bo-cat { display:inline-flex; gap:6px; align-items:center; font-weight:600; font-size:0.92rem; cursor:pointer; }
.bo-cat input { width:17px; height:17px; accent-color:#253C80; }
.bo-table { font-size:0.92rem; }
.bo-table th { font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; white-space:nowrap; cursor:pointer; }
.bo-table th.num, .bo-table td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bo-table .part-no { font-weight:800; white-space:nowrap; }
.bo-table .part-name { display:block; font-size:0.82rem; color:#64748b; font-weight:500; }
.bo-table .sub { font-size:0.8rem; color:#0f766e; }
.bo-table .bo-why { font-size:0.82rem; color:#475569; min-width:260px; line-height:1.4; }
.bo-conf { font-size:0.74rem; font-weight:800; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.bo-conf.high { background:#ecfdf5; color:#047857; } .bo-conf.medium { background:#eef2ff; color:#253C80; } .bo-conf.low { background:#fffbeb; color:#b45309; }
@media (max-width:768px) { .bo-grid { grid-template-columns:1fr; } .bo-form .audit-row .btn { flex:1 1 45%; } }

/* Period stepper (global date filter) */
.period-stepper { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; position:relative; flex:1 1 100%; min-width:0; max-width:100%; box-sizing:border-box; padding:0.1rem 0; outline:none; }
.period-stepper:focus-visible { box-shadow:0 0 0 2px var(--primary); border-radius:8px; }
.period-units { display:inline-flex; background:#f1f5f9; border:1px solid var(--border); border-radius:8px; padding:2px; gap:2px; }
.period-units button { border:none; background:transparent; color:var(--text-secondary); font-weight:700; font-size:0.8rem; padding:0.2rem 0.55rem; border-radius:6px; cursor:pointer; min-height:26px; }
.period-units button:hover { color:var(--primary); background:#ffffff; }
.period-units button.active { background:#ffffff; color:var(--primary); box-shadow:0 1px 2px rgba(15,23,42,0.12); }
.period-arrow { border:1px solid var(--border); background:#ffffff; color:var(--primary); font-size:0.7rem; width:30px; min-height:30px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.period-arrow:hover:not(:disabled) { background:#f1f5f9; }
.period-arrow:disabled { opacity:0.35; cursor:not-allowed; }
.period-label { min-width:0; border:1px solid var(--border); background:#ffffff; color:var(--text-primary, #0f172a); font-weight:800; font-size:0.85rem; min-height:30px; padding:0.25rem 0.75rem; border-radius:6px; cursor:pointer; white-space:nowrap; }
.period-label:hover { border-color:var(--primary); color:var(--primary); }
.period-jump { border:1px dashed var(--border); background:transparent; color:var(--text-secondary); font-weight:700; font-size:0.78rem; min-height:30px; padding:0.2rem 0.6rem; border-radius:6px; cursor:pointer; }
.period-jump:hover { color:var(--primary); border-color:var(--primary); }
.period-popover { position:absolute; top:calc(100% + 6px); left:0; z-index:1200; background:#ffffff; border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,0.18); padding:0.75rem; width:300px; }
.pcal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; font-size:0.9rem; }
.pcal-nav { border:1px solid var(--border); background:#fff; border-radius:6px; width:28px; height:28px; cursor:pointer; font-size:1rem; line-height:1; }
.pcal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.pcal-dow { font-size:0.7rem; font-weight:700; color:#64748b; text-align:center; padding:2px 0; }
.pcal-cell { border:none; background:transparent; border-radius:6px; font-size:0.8rem; font-weight:600; height:32px; cursor:pointer; color:var(--text-primary, #0f172a); }
.pcal-cell:hover:not(:disabled) { background:#e0e7ff; }
.pcal-empty { pointer-events:none; }
.pcal-today { box-shadow:inset 0 0 0 1.5px var(--primary); }
.pcal-in { background:#e0e7ff; border-radius:0; }
.pcal-edge { background:var(--primary) !important; color:#ffffff !important; border-radius:6px; }
.pcal-off { opacity:0.3; cursor:not-allowed; }
.pcal-hint { font-size:0.75rem; color:#64748b; margin:0.5rem 0 0.4rem; }
.pcal-quick { display:flex; flex-wrap:wrap; gap:0.3rem; }
.pcal-quick button { border:1px solid var(--border); background:#f8fafc; border-radius:999px; font-size:0.75rem; font-weight:700; padding:0.2rem 0.6rem; cursor:pointer; color:var(--text-secondary); }
.pcal-quick button:hover { color:var(--primary); border-color:var(--primary); }
/* the card-panel class is a flex row; this panel is a plain block with the heading on top */
.sales-daily-breakdown { display:block !important; }
.sales-daily-breakdown > summary { width:100%; }
.sales-daily-breakdown table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.sales-daily-breakdown th, .sales-daily-breakdown td { padding:0.35rem 0.6rem; text-align:right; border-bottom:1px solid #f1f5f9; white-space:nowrap; }
.sales-daily-breakdown th:first-child, .sales-daily-breakdown td:first-child { text-align:left; }
.sales-daily-breakdown tbody tr { cursor:pointer; }
.sales-daily-breakdown tbody tr:hover { background:#f1f5f9; }
.sales-daily-breakdown tr.pdb-total td { font-weight:800; border-top:2px solid var(--border); }
.sales-daily-breakdown .pdb-bar { display:inline-block; height:8px; background:#c7d2fe; border-radius:4px; vertical-align:middle; margin-right:0.4rem; }
@media (max-width: 768px) {
  .date-preset-bar > .period-stepper { flex-wrap:wrap !important; overflow:visible !important; row-gap:0.35rem; }
  .period-units { flex:1 1 100% !important; justify-content:space-between; }
  .period-units button { flex:1; }
  .period-label { flex:1 1 auto !important; text-align:center; white-space:normal; }
  .period-popover { left:0; right:0; width:auto; }
  .sales-daily-breakdown { display:block; }
}