/* Hair Salon Top-Up System - Custom Styles */

/* ============================================================
   SALON MANAGEMENT SYSTEM — CANONICAL DESIGN TOKENS
   Single source of truth. All pages consume these variables.
   ============================================================ */

:root {
    /* === Brand Colors === */
    --primary:          #5a7a6a;
    --primary-light:    #8FAE9E;
    --primary-soft:     #eef3f0;
    --primary-dark:     #3d5a4a;
    --on-primary:       #ffffff;
    --heading-color:    var(--primary-dark);
    --accent:           #8B6F47;
    --accent-light:     #f5ede0;
    --accent-dark:      #6b4f32;

    /* === Semantic / Status Colors === */
    --success:          #16a34a;
    --success-bg:       #dcfce7;
    --success-text:     #166534;
    --warning:          #d97706;
    --warning-bg:       #fef3c7;
    --warning-text:     #92400e;
    --danger:           #dc2626;
    --danger-bg:        #fee2e2;
    --danger-text:      #991b1b;
    --info:             #2d8cb5;
    --info-bg:          #eef7fb;
    --info-text:        #164e63;
    --redeemed:         #2563eb;
    --redeemed-bg:      #dbeafe;
    --redeemed-text:    #1e40af;

    /* === Commission Type Colors === */
    --comm-fixed:       #7c5cbf;
    --comm-fixed-bg:    #f3effe;
    --comm-percent:     #b7860a;
    --comm-percent-bg:  #fef6e4;

    /* === Sage Scale (for components needing fine steps) === */
    --sage-50:   #f6f7f6;
    --sage-100:  #e8ebe8;
    --sage-200:  #d1d7d1;
    --sage-300:  #b0bbb0;
    --sage-400:  #8a998a;
    --sage-500:  #6b7c6b;
    --sage-600:  #556555;
    --sage-700:  #455145;
    --sage-800:  #39443a;
    --sage-900:  #2f382f;

    /* === Neutral Surface Colors === */
    --ink:          #1f2937;
    --muted:        #6b7a72;
    --border:       #e2e8f0;
    --surface:      #f8faf9;
    --card-bg:      #ffffff;
    --hover-row:    #f1f5f2;
    --zebra-row:    rgba(0, 0, 0, 0.02);
    --soft:         #f7faf8;
    --line:         #e6ece8;

    /* === Theme Tokens (used by Bootstrap overrides) === */
    --primary-color:     var(--primary);
    --secondary-color:   var(--surface);
    --accent-color:      var(--accent);
    --text-color:        var(--ink);
    --dark-color:        #1f2937;
    --light-color:       var(--surface);
    --navbar-text:       #ffffff;
    --card-text:         var(--ink);
    --input-bg:          #ffffff;
    --input-border:      var(--border);
    --table-hover:       var(--hover-row);
    --border-color:      var(--border);
    --stat-card-bg:      var(--card-bg);
    --dropdown-bg:       var(--card-bg);
    --dropdown-text:     var(--ink);
    --nav-bg:            var(--primary);
    --nav-text:          #ffffff;
    --nav-hover:         #ffffff;
    --nav-brand:         #ffffff;
    --modal-close-filter: invert(1) brightness(2);

    /* === Legacy aliases kept for backward compat === */
    --success-color:     var(--success);
    --danger-color:      var(--danger);
    --warning-color:     var(--warning);
    --info-color:        var(--info);
    --text-muted:        var(--muted);
    --product-green:     var(--success);
    --product-green-bg:  var(--success-bg);

    /* === Typography === */
    --font-sans:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-mono:    ui-monospace, 'Courier New', monospace;

    /* === Spacing / Layout === */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
    --ring:         rgba(90, 122, 106, 0.22);
}

[data-theme="theme2"] {
    /* Champagne Pearl */
    --primary:          #C8A46A;
    --primary-light:    #EAD8C0;
    --primary-soft:     #F6EBDD;
    --primary-dark:     #B8904F;
    --on-primary:       #2B2118;
    --heading-color:    #8A6332;
    --accent:           #EAD8C0;
    --accent-light:     #FFF9F0;
    --accent-dark:      #9A7541;

    --success:          #6F8F72;
    --success-bg:       #E6EFE3;
    --success-text:     #3F6543;
    --warning:          #C47F3A;
    --warning-bg:       #FFF0DD;
    --warning-text:     #854B1E;
    --danger:           #B85C5C;
    --danger-bg:        #F8E2E0;
    --danger-text:      #7A3737;
    --info:             #7B91A3;
    --info-bg:          #EEF3F4;
    --info-text:        #425A69;
    --comm-fixed:       #7A5CA8;
    --comm-fixed-bg:    #F0E8FA;
    --comm-percent:     #8A6332;
    --comm-percent-bg:  #FFF0DD;

    --ink:              #2B2118;
    --muted:            #7A6A5D;
    --border:           #E8D8C6;
    --surface:          #FFF9F0;
    --card-bg:          #FFFFFF;
    --hover-row:        #F6EBDD;
    --zebra-row:        rgba(122, 106, 93, 0.06);
    --soft:             #F6EBDD;
    --line:             #E8D8C6;
    --navbar-text:      #2B2118;
    --card-text:        #2B2118;
    --input-bg:         #FFFCF7;
    --input-border:     #E8D8C6;
    --text-color:       #2B2118;
    --dropdown-bg:      #FFFFFF;
    --dropdown-text:    #2B2118;
    --primary-color:    var(--primary);
    --secondary-color:  var(--surface);
    --accent-color:     var(--primary-dark);
    --dark-color:       #2B2118;
    --light-color:      #FFF9F0;
    --stat-card-bg:     #FFFFFF;
    --nav-bg:           #C8A46A;
    --nav-text:         #2B2118;
    --nav-hover:        #2B2118;
    --nav-brand:        #2B2118;
    --modal-close-filter: none;
    --ring:             rgba(200, 164, 106, 0.28);
    --shadow-sm:        0 1px 4px rgba(43, 33, 24, 0.08);
    --shadow-md:        0 8px 22px rgba(43, 33, 24, 0.11);
    --shadow-lg:        0 18px 42px rgba(43, 33, 24, 0.16);
    --redeemed:         #7B91A3;
    --redeemed-bg:      #EEF3F4;
    --redeemed-text:    #425A69;
}

[data-theme="theme3"] {
    /* Noir Rose */
    color-scheme: dark;
    --primary:          #D6A2A8;
    --primary-light:    #E3BBC0;
    --primary-soft:     #302731;
    --primary-dark:     #C2868E;
    --on-primary:       #171316;
    --heading-color:    #D6A2A8;
    --accent:           #B76E79;
    --accent-light:     #302731;
    --accent-dark:      #8E505D;

    --success:          #8FAF9B;
    --success-bg:       #25352C;
    --success-text:     #BFE0C8;
    --warning:          #D1A15F;
    --warning-bg:       #3A2D1F;
    --warning-text:     #F0C980;
    --danger:           #D07A7A;
    --danger-bg:        #3B2528;
    --danger-text:      #F3AAAA;
    --info:             #9DB5CC;
    --info-bg:          #24313E;
    --info-text:        #C5D9ED;
    --comm-fixed:       #C9BAFF;
    --comm-fixed-bg:    #332A43;
    --comm-percent:     #F0C980;
    --comm-percent-bg:  #3A2D1F;
    --redeemed:         #9DB5CC;
    --redeemed-bg:      #24313E;
    --redeemed-text:    #C5D9ED;

    --ink:              #F8EEF1;
    --muted:            #CBB9C0;
    --border:           #443642;
    --surface:          #171316;
    --card-bg:          #241D23;
    --hover-row:        #302731;
    --zebra-row:        rgba(255, 255, 255, 0.035);
    --soft:             #302731;
    --line:             #443642;
    --navbar-text:      #F8EEF1;
    --card-text:        #F8EEF1;
    --input-bg:         #211B20;
    --input-border:     #443642;
    --text-color:       #F8EEF1;
    --dropdown-bg:      #241D23;
    --dropdown-text:    #F8EEF1;
    --primary-color:    var(--primary);
    --secondary-color:  var(--card-bg);
    --accent-color:     var(--accent);
    --dark-color:       #171316;
    --light-color:      #171316;
    --stat-card-bg:     #241D23;
    --nav-bg:           #211A20;
    --nav-text:         #F8EEF1;
    --nav-hover:        #D6A2A8;
    --nav-brand:        #D6A2A8;
    --modal-close-filter: none;
    --ring:             rgba(214, 162, 168, 0.34);
    --shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.34);
    --shadow-md:        0 12px 28px rgba(0, 0, 0, 0.38);
    --shadow-lg:        0 22px 54px rgba(0, 0, 0, 0.45);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Demo Mode Badge */
.demo-mode-badge {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--accent-color);
    color: white;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.05);
    }
}

/* Navigation */
.navbar {
    box-shadow: var(--shadow-sm);
    background: var(--nav-bg, var(--primary-color)) !important;
    border-bottom: 1px solid var(--border);
}

.navbar-brand {
    color: var(--nav-brand, var(--navbar-text)) !important;
}

.navbar .nav-link {
    color: var(--nav-text, var(--navbar-text)) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--nav-hover, var(--navbar-text)) !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Cards */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background-color: var(--secondary-color);
    color: var(--text-color);
}

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

.card-header {
    background: var(--primary-color);
    color: var(--on-primary);
    font-weight: 600;
    border-radius: 12px 12px 0 0 !important;
}

.stat-card {
    background: var(--stat-card-bg);
    border-left: 4px solid;
    color: var(--card-text);
}

.stat-card.primary {
    border-left-color: var(--primary-color);
}

.stat-card.success {
    border-left-color: var(--success-color);
}

.stat-card.warning {
    border-left-color: var(--warning-color);
}

.stat-card.info {
    border-left-color: var(--info-color);
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    color: var(--card-text);
}

.stat-label {
    color: var(--card-text);
    opacity: 0.7;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: var(--primary-color);
    border: none;
    color: var(--on-primary);
}

.btn-primary:hover {
    background: var(--accent-color);
    color: var(--on-primary);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(143, 174, 158, 0.25);
    background-color: var(--input-bg);
    color: var(--text-color);
}

.form-label {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

/* Tables */
.table {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    color: var(--card-text);
}

.table thead {
    background: var(--primary-color);
    color: var(--on-primary);
}

.table thead th {
    border: none;
    font-weight: 600;
    padding: 1rem;
}

.table tbody tr {
    transition: background-color 0.2s ease;
    background-color: var(--card-bg);
}

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

.table td {
    vertical-align: middle;
    padding: 0.75rem 1rem;
    color: var(--card-text);
    border-color: var(--border-color);
}

/* Badges */
.badge {
    padding: 0.5em 0.75em;
    font-weight: 500;
    border-radius: 6px;
}

/* Membership Badges */
.badge-bronze {
    background-color: #cd7f32;
    color: white;
}

.badge-silver {
    background-color: #c0c0c0;
    color: #333;
}

.badge-gold {
    background-color: #ffd700;
    color: #333;
}

.badge-platinum {
    background-color: #e5e4e2;
    color: #333;
}

/* Bootstrap Badge Overrides - Theme Aware */
.bg-primary,
.badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--on-primary) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--on-primary) !important;
}

/* :focus-visible for the same reason as the rule further down this file: a tap
   should not leave the button painted in its hover colour. */
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--on-primary) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-check:checked+.btn-outline-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--on-primary) !important;
}

/* Toast Notifications */
.toast {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.toast-header {
    font-weight: 600;
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border-bottom-color: var(--border-color);
}

.toast-header.bg-success {
    background: var(--success) !important;
    color: var(--on-primary) !important;
}

.toast-header.bg-danger {
    background: var(--danger) !important;
    color: var(--on-primary) !important;
}

.toast-header.bg-warning {
    background: var(--warning) !important;
    color: var(--on-primary) !important;
}

.toast-header.bg-info {
    background: var(--info) !important;
    color: var(--on-primary) !important;
}

.toast-body {
    background: var(--card-bg);
    color: var(--text-color);
}

.toast-header.bg-success + .toast-body {
    background: var(--success-bg);
    color: var(--success-text);
}

.toast-header.bg-danger + .toast-body {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.toast-header.bg-warning + .toast-body {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.toast-header.bg-info + .toast-body {
    background: var(--info-bg);
    color: var(--info-text);
}

/* Dropdown Menus */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    color: var(--dropdown-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--table-hover);
    color: var(--dropdown-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--table-hover) !important;
    color: var(--primary-color) !important;
    font-weight: 600;
    border-left: 3px solid var(--primary-color);
    padding-left: calc(1rem - 3px);
}

.dropdown-divider {
    border-color: var(--border-color);
}

.theme-dot-sage {
    color: #5a7a6a;
}

.theme-dot-champagne {
    color: #C8A46A;
}

.theme-dot-noir {
    color: #D6A2A8;
}

/* Footer */
.footer {
    margin-top: auto;
    border-top: 1px solid #e5e7eb;
}

/* Autocomplete */
.autocomplete-results {
    position: absolute;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    margin-top: 4px;
}

.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.autocomplete-item:hover {
    background-color: var(--hover-row);
}

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

/* Receipt Styles */
.receipt {
    background: white;
    max-width: 1000px;
    margin: 0 auto;
}

.receipt-header {
    text-align: center;
    border-bottom: 2px solid var(--dark-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.receipt-details {
    margin: 1.5rem 0;
}

.receipt-details table {
    width: 100%;
}

.receipt-details td {
    padding: 0.5rem 0;
}

.receipt-total {
    font-size: 1.5rem;
    font-weight: bold;
    border-top: 2px solid var(--dark-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Print Styles */
@media print {
    body {
        background: white;
    }

    .navbar,
    .footer,
    .btn,
    .demo-mode-badge {
        display: none !important;
    }

    .receipt {
        box-shadow: none;
    }

    .container-fluid,
    .container {
        padding: 0;
    }
}

/* Loading Spinner */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Quick Actions */
.quick-actions .card {
    cursor: pointer;
    text-align: center;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.quick-actions .card:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
}

.quick-actions .card i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stat-value {
        font-size: 1.5rem;
    }

    .stat-icon {
        font-size: 2rem;
    }

    .table {
        font-size: 0.875rem;
    }

    .demo-mode-badge {
        top: 60px;
        right: 10px;
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* Utilities */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

h1.text-gradient {
    font-size: clamp(1.6rem, 2.2vw + 0.6rem, 2.4rem);
    word-break: break-word;
}

h2 {
    font-size: clamp(1.3rem, 1.6vw + 0.5rem, 2rem);
    word-break: break-word;
}

.card-title {
    word-break: break-word;
}

.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: all 0.3s ease;
}

/* Fix for nav tabs in card header */
.card-header .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.card-header .nav-link:hover {
    color: white !important;
}

.card-header .nav-link.active {
    color: var(--primary-color) !important;
}

/* Clickable Stats Cards */
.clickable-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.clickable-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Tablet Optimization (768px - 1024px)
   General touch-target sizing for tablets, unrelated to the navbar's own
   collapse state — dropdown items stack vertically once open, and generic
   buttons already wrap, so neither can be squeezed into an unbreakable
   single row the way top-level nav items can. See the block below for the
   navbar-specific rules and why they're scoped differently. */
@media (min-width: 768px) and (max-width: 1024px) {
    .dropdown-item {
        padding: 12px 20px;
        font-size: 1.1rem;
    }

    /* Increase touch targets */
    .dropdown-item,
    .btn {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Prevent clipping */
    .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Tablet Optimization — navbar only (768px - 991.98px)
   Bigger touch targets for the COLLAPSED navbar only. Capped just below the
   992px navbar-expand-lg breakpoint (matching main.js's
   initNavbarCollapseFallback auto-close check) so this never overlaps the
   horizontal, single-row layout above it. It used to run all the way to
   1024px and overlap that horizontal row by 32px — Theme has since moved
   out of the top-level nav into the user-profile dropdown (see header.php),
   which was enough on its own to fit the remaining 7 items comfortably at
   992-1024px without moving this breakpoint. Verified by measurement. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-nav .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.1rem;
    }

    .navbar .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Spacing between items — scoped to the navbar so this doesn't also
       widen unrelated .nav-item tab bars elsewhere (transactions.php,
       role_management.php, etc.) */
    .navbar-nav .nav-item {
        margin-right: 15px;
    }
}

/* Mobile & iPad portrait navbar submenus (≤991.98px — matches navbar-
   expand-lg's own collapse breakpoint, same cutoff the two navbar blocks
   above use). Bootstrap's .dropdown-menu is position:absolute by default,
   built for floating below a horizontal desktop bar. Left as-is inside the
   already-vertical collapsed menu, it floats a white card over whatever
   nav items come after it (Packages, Reports, ...) instead of pushing them
   down. Make it part of the flow instead: static, indented, a translucent
   panel that reads as nested inside the green menu rather than on top of
   it. Uses --primary via the navbar's own background, so it follows
   whichever theme (Sage/Gold/Rose) is active without any color literals
   here. Desktop dropdowns (≥992px) are untouched. */
@media (max-width: 991.98px) {
    .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        max-width: none;
        margin: .375rem 0 .5rem 1.375rem;
        padding: .125rem 0 .125rem .75rem;
        background: transparent;
        border: none;
        border-left: 2px solid rgba(255, 255, 255, .28);
        border-radius: 0;
        box-shadow: none;
    }

    .navbar-collapse .dropdown-item {
        color: rgba(255, 255, 255, .92);
        border-radius: 7px;
    }

    .navbar-collapse .dropdown-item:hover,
    .navbar-collapse .dropdown-item:focus {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

    .navbar-collapse .dropdown-item.active {
        background: rgba(255, 255, 255, .18);
        color: #fff;
        font-weight: 600;
    }

    .navbar-collapse .dropdown-divider {
        border-color: rgba(255, 255, 255, .2);
    }

    .navbar-collapse .dropdown-header {
        color: rgba(255, 255, 255, .6);
    }

    /* Full-width row with the disclosure caret pinned to the right edge,
       so it reads as an accordion trigger rather than trailing text. */
    .navbar-collapse .nav-link.dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .navbar-collapse .dropdown-toggle::after {
        transition: transform .2s ease;
    }

    .navbar-collapse .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
}

/* Horizontal navbar overflow (992px-1200px, e.g. iPad Mini landscape at
   1024px). navbar-expand-lg switches to the horizontal nav right at 992px,
   but "Dashboard Operations Packages Reports Settings Language admin" at
   their normal padding needs ~1052px -- more than the viewport itself at
   the narrow end of this range, let alone the container. #navbarNav is
   flex-nowrap and doesn't shrink, so it overflowed its own container and
   forced the whole page to scroll horizontally on every single page (this
   bar is shared via header.php). Trimmed link padding, the gap on the
   right-hand list, and the brand's font-size just enough to fit at 992px
   with room to spare -- verified live, no page needs its own fix. */
@media (min-width: 992px) and (max-width: 1200px) {
    .navbar-nav .nav-link {
        padding-left: 5px;
        padding-right: 5px;
    }

    .navbar-nav.gap-lg-2 {
        gap: 2px;
    }

    .navbar-brand {
        font-size: 1.05rem;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .stat-value {
        font-size: 1.75rem;
    }

    .stat-icon {
        font-size: 2.25rem;
    }
}

/* Redemption — Balance-to-deduct bar (992px-1200px, e.g. iPad Mini landscape
   at 1024px). Inside col-lg-7 there isn't room for the total label plus the
   two 160px discount/surcharge inputs and the Redeem button on one line, so
   flex-wrap breaks them into a 3-line staircase. Stack the bar into two rows
   instead — the controls then get the bar's full width and fit on one line. */
@media (min-width: 992px) and (max-width: 1200px) {
    .redeem-bar {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .redeem-bar > div:last-child {
        justify-content: flex-end;
    }
}

/* General Touch Optimizations */
.dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    max-width: 90vw;
}

.dropdown-menu.show {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Ensure focus states are visible for accessibility.
   :focus-visible, not :focus -- a nav link is tapped and left, so a plain
   :focus ring stays painted around it after every tap on a touch screen and
   reads as a stuck selection. :focus-visible still shows the ring for keyboard
   navigation, which is who it was for. Text inputs elsewhere deliberately keep
   :focus, because there the ring is correct on touch too: the field is still
   being typed into. */
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

/* ========================================
   PAGE-SPECIFIC STYLES
   ======================================== */

/* --- Login &  Authentication ---  */
/* From: login_template.php */

body.login-page {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.login-card {
    max-width: 450px;
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: none;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    background: var(--card-bg);
}

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

.login-header {
    background: var(--primary-color);
    color: var(--navbar-text);
    padding: 2rem;
    border-radius: 15px 15px 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.login-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.login-header i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.login-card:hover .login-header i {
    transform: scale(1.1) rotate(10deg);
}

/* Language switcher in the login header. Inherits the header's per-theme text
   colour, so it stays readable on dark (sage/noir) and light (champagne) headers. */
.login-lang-switch {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 12.5px;
}

.login-lang-switch a {
    text-decoration: none;
    color: inherit;
    font-weight: 400;
    /* 0.75 is the lowest opacity that still clears WCAG AA (4.5:1) on the
       tightest theme (sage) — anything less is unreadable on champagne. */
    opacity: 0.75;
}

.login-lang-switch a:hover {
    opacity: 1;
}

.login-lang-switch a.active {
    font-weight: 700;
    opacity: 1;
}

.login-lang-switch .login-lang-sep {
    opacity: 0.5;
}

/* Demo-site reset notice in the login header. Defaults suit the dark headers
   (sage/noir); light headers override the colours below. */
.login-demo-notice {
    max-width: 90%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    white-space: normal;
}

.login-demo-notice i {
    font-size: 0.78rem;
    margin-bottom: 0;
}

.login-body {
    padding: 2.5rem;
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: 0 0 15px 15px;
}

.login-page .form-control {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-color);
}

.login-page .form-control:focus {
    box-shadow: 0 0 0 0.25rem var(--ring);
    border-color: var(--primary-color);
    background-color: var(--input-bg);
    color: var(--text-color);
}

.login-page .input-group-text {
    background-color: var(--secondary-color);
    border-color: var(--input-border);
    color: var(--text-color);
}

.login-page .btn-primary {
    background: var(--primary-color);
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    color: var(--navbar-text);
}

.login-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background: var(--accent-color);
    color: white;
}

[data-theme="theme2"] body.login-page {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 249, 240, 0.9), transparent 28rem),
        radial-gradient(circle at 72% 78%, rgba(200, 164, 106, 0.28), transparent 34rem),
        linear-gradient(135deg, #FFF9F0 0%, #F6EBDD 56%, #EAD8C0 100%);
}

[data-theme="theme2"] .login-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 70px rgba(43, 33, 24, 0.16);
}

[data-theme="theme2"] .login-header {
    background: linear-gradient(135deg, #FFF9F0 0%, #F6EBDD 55%, #EAD8C0 100%);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="theme2"] .login-header::after {
    background: linear-gradient(45deg, rgba(200, 164, 106, 0.16), rgba(255, 255, 255, 0));
}

[data-theme="theme2"] .login-header i {
    color: var(--primary-dark);
}

/* Champagne's login header is a light beige gradient — the default white-on-
   white notice is invisible there, so tint it with the champagne gold instead. */
[data-theme="theme2"] .login-demo-notice {
    background: rgba(200, 164, 106, 0.18);
    border-color: rgba(200, 164, 106, 0.55);
    color: var(--text-color);
}

[data-theme="theme2"] .login-body {
    background: #FFFCF7;
}

[data-theme="theme2"] .login-page .btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

[data-theme="theme2"] .login-page .btn-primary:hover {
    background: var(--primary-dark);
    color: #FFFFFF;
}

[data-theme="theme3"] body.login-page {
    background:
        radial-gradient(circle at 35% 18%, rgba(214, 162, 168, 0.22), transparent 30rem),
        radial-gradient(circle at 70% 78%, rgba(183, 110, 121, 0.18), transparent 34rem),
        linear-gradient(135deg, #120f12 0%, #1b151a 52%, #2a1f28 100%);
}

[data-theme="theme3"] .login-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

[data-theme="theme3"] .login-header {
    background: linear-gradient(135deg, #2a2028 0%, #3a2a35 58%, #523541 100%);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="theme3"] .login-header::after {
    background: linear-gradient(45deg, rgba(214, 162, 168, 0.14), rgba(214, 162, 168, 0));
}

[data-theme="theme3"] .login-header i {
    color: var(--primary);
}

[data-theme="theme3"] .login-body {
    background: var(--card-bg);
}

[data-theme="theme3"] .login-page .btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

[data-theme="theme3"] .login-page .btn-primary:hover {
    background: var(--primary-light);
    color: var(--on-primary);
}

.demo-badge {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.language-switcher {
    position: fixed;
    top: 20px;
    left: 20px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
}

.language-switcher a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    opacity: 0.6;
    transition: all 0.2s;
}

.language-switcher a:hover,
.language-switcher a.active {
    opacity: 1;
    color: var(--primary-color);
}

.language-switcher .divider {
    color: #ccc;
}

/* --- Admin & Audit --- */
/* From: audit_viewer.php */

.badge-action {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.table-sm td {
    vertical-align: middle;
}

.log-description {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* From: user_management.php */

.list-group-item {
    border-left: 3px solid transparent;
}

.list-group-item:has(.form-check-input:checked) {
    border-left-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

[data-theme="theme3"] #rolesModal .list-group-item,
[data-theme="theme3"] #userModal #rolesCheckboxes,
[data-theme="theme3"] #userModal #rolesCheckboxes .list-group-item {
    background: var(--card-bg, #241A22);
    border-color: var(--line, #443642);
    color: var(--text-color, #F8EEF1);
}

[data-theme="theme3"] #rolesModal .list-group-item {
    border-left-color: transparent;
}

[data-theme="theme3"] #rolesModal .list-group-item:has(.form-check-input:checked),
[data-theme="theme3"] #userModal #rolesCheckboxes .list-group-item:has(.form-check-input:checked) {
    background: var(--soft, #302731);
    border-left-color: var(--primary-light, #D6A2A8);
}

[data-theme="theme3"] #rolesModal .form-check-label,
[data-theme="theme3"] #rolesModal .form-check-label strong,
[data-theme="theme3"] #userModal #rolesCheckboxes .form-check-label,
[data-theme="theme3"] #userModal #rolesCheckboxes .form-check-label strong {
    color: var(--heading-color, #F8EEF1);
}

[data-theme="theme3"] #rolesModal .text-muted,
[data-theme="theme3"] #userModal #rolesCheckboxes .text-muted {
    color: var(--muted, #C9B6BE) !important;
}

[data-theme="theme3"] #rolesModal .form-check-input:checked,
[data-theme="theme3"] #userModal #rolesCheckboxes .form-check-input:checked {
    background-color: var(--primary-light, #D6A2A8);
    border-color: var(--primary-light, #D6A2A8);
}

[data-theme="theme3"] #rolesModal .badge.bg-info,
[data-theme="theme3"] #userModal #rolesCheckboxes .badge.bg-info {
    background: rgba(214, 162, 168, 0.22) !important;
    color: var(--heading-color, #F8EEF1) !important;
    border: 1px solid rgba(214, 162, 168, 0.35);
}

/* --- Redemption & Services --- */
/* From: redemption.php */


.redemption-page body {
    background: var(--bg);
    color: var(--ink);
}

.page-title {
    color: var(--heading-color);
    font-weight: 800;
    letter-spacing: .2px;
}

.subtle {
    color: var(--muted);
}

.redemption-page .card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-h {
    background: linear-gradient(180deg, rgba(142, 170, 158, .35) 0%, rgba(142, 170, 158, .18) 100%);
    border-bottom: 1px solid var(--line);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.pill {
    border: 1px solid var(--line);
    background: var(--soft);
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .85rem;
    color: var(--muted);
}

.seg {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .25rem;
}

.seg .btn {
    border-radius: 999px;
    padding: .45rem .9rem;
}

.seg .btn.active {
    background: var(--sage-700);
    border-color: var(--sage-700);
    color: #fff;
}

.redemption-page .form-control,
.redemption-page .form-select {
    border-color: var(--line);
}

.redemption-page .form-control:focus,
.redemption-page .form-select:focus {
    border-color: var(--sage-700);
    box-shadow: 0 0 0 .25rem var(--ring);
}

.btn-sage {
    background: var(--sage-700);
    border-color: var(--sage-700);
    color: #fff;
}

.btn-sage:hover {
    background: var(--sage-800);
    border-color: var(--sage-800);
    color: #fff;
}

.btn-soft {
    background: var(--soft);
    border-color: var(--line);
    color: var(--ink);
}

.btn-soft:hover {
    background: #eef4f1;
    border-color: #d7e1db;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--line);
    background: var(--soft);
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .82rem;
    color: var(--muted);
}

.chip .x {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 0;
    line-height: 1;
}

.service-tabs .nav-item .nav-link {
    border-radius: 999px !important;
    border: 1px solid var(--line) !important;
    background: var(--soft) !important;
    color: var(--ink) !important;
    padding: .5rem .85rem !important;
}

.service-tabs .nav-item .nav-link.active {
    background: var(--sage-700) !important;
    border-color: var(--sage-700) !important;
    color: #fff !important;
}

.opt-row {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: .75rem .75rem;
}

.opt-row:hover {
    box-shadow: 0 10px 24px rgba(23, 36, 29, .08);
}

.opt-name {
    font-weight: 800;
    line-height: 1.15;
}

.opt-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .78rem;
    color: var(--muted);
}

.price {
    font-weight: 800;
    color: var(--sage-800);
}

.cart-table td,
.cart-table th {
    vertical-align: middle;
}

.member-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    margin-top: 4px;
}

.member-dropdown.show {
    display: block;
}

.member-dropdown-item {
    padding: 0.875rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
}

.member-dropdown-item:hover {
    background: var(--soft);
}

.member-dropdown-item:last-child {
    border-bottom: none;
}

/* --- Members & Tables --- */
/* From: members.php */

#memberDetailsModal #memberTabs {
    gap: 0.25rem;
}

#memberDetailsModal #memberTabs .nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000000 !important;
    padding: 0.6rem 1.25rem;
    line-height: 1.4;
    opacity: 1 !important;
}

#memberDetailsModal #memberTabs .nav-link:hover,
#memberDetailsModal #memberTabs .nav-link:focus {
    color: #000000 !important;
    background-color: #f8f9fa;
}

#memberDetailsModal #memberTabs .nav-link.active {
    color: #000000 !important;
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #fff;
}

@media (max-width: 576px) {
    #memberDetailsModal #memberTabs {
        flex-wrap: wrap;
    }

    #memberDetailsModal #memberTabs .nav-link {
        width: 100%;
        text-align: left;
    }
}

/* --- Products --- */
/* From: products.php */

.product-card-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

#productsCardView {
    flex-wrap: wrap;
}

/* --- Service Maintenance --- */
/* From: service_maintenance.php */


/* Split Panel Layout */
.service-panels {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    min-height: calc(100vh - 200px);
}

/* Left Panel - Categories */
.categories-panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 80px;
}

.categories-panel-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--sage-200);
}

.categories-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sage-300);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.categories-list {
    max-height: 600px;
    overflow-y: auto;
}

.category-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sage-100);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-item:hover {
    background: var(--sage-50);
}

.category-item.active {
    background: var(--sage-100);
    border-left: 3px solid var(--sage-600);
}

.category-icon {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.category-info {
    flex: 1;
    min-width: 0;
    /* Allow text truncation */
}

.category-name {
    font-weight: 500;
    color: var(--sage-900);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-code {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background: var(--sage-200);
    border-radius: 4px;
    color: var(--sage-700);
    font-family: 'Courier New', monospace;
}

.category-status {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 12px;
    margin-left: 0.25rem;
}

.category-status.active {
    background: #d4edda;
    color: #155724;
}

.category-status.inactive {
    background: #f8d7da;
    color: #721c24;
}

.category-edit-icon {
    color: var(--sage-600);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.category-edit-icon:hover {
    background: var(--sage-200);
    color: var(--sage-800);
}

/* Right Panel - Options */
.options-panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    overflow-x: auto;
    /* Allow horizontal scroll if needed */
}

.options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.options-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    /* Prevent wrapping */
}

.options-table thead {
    background: var(--sage-100);
}

.options-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--sage-800);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.options-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sage-100);
    vertical-align: middle;
}

.options-table tbody tr:hover {
    background: var(--sage-50);
}

.option-code {
    font-family: 'Courier New', monospace;
    background: var(--sage-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gender-chip,
.length-chip {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.gender-chip.male {
    background: #cfe2ff;
    color: #084298;
}

.gender-chip.female {
    background: #f8d7da;
    color: #842029;
}

.gender-chip.both {
    background: #d1e7dd;
    color: #0f5132;
}

.gender-chip.none {
    background: #e2e3e5;
    color: #41464b;
}

.length-chip.short {
    background: #fff3cd;
    color: #664d03;
}

.length-chip.medium {
    background: #fbdfc8;
    color: #984c0c;
}

.length-chip.long {
    background: #fec5bb;
    color: #842029;
}

.length-chip.extra-long {
    background: #f5c2c7;
    color: #58151c;
}

.length-chip.none {
    background: #e2e3e5;
    color: #41464b;
}

/* Inline Discount Input */
.discount-input {
    width: 70px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--sage-300);
    border-radius: 4px;
    text-align: center;
    transition: border-color 0.2s;
}

.discount-input:focus {
    outline: none;
    border-color: var(--sage-600);
    box-shadow: 0 0 0 2px rgba(107, 124, 107, 0.1);
}

.member-price {
    color: var(--sage-700);
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .service-panels {
        grid-template-columns: 1fr;
    }

    .categories-panel {
        position: static;
        margin-bottom: 1.5rem;
    }

    .categories-list {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .options-table {
        display: none;
    }

    .options-cards {
        display: block;
    }
}

.options-cards {
    display: none;
}

.option-card {
    background: white;
    border: 1px solid var(--sage-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.option-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.75rem;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sage-600);
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--sage-400);
    margin-bottom: 1rem;
}

/* --- Transactions --- */
/* From: transactions.php */

.action-btns {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wa-icon {
    color: #25D366;
}

.wa-icon:hover {
    color: #1ebe57;
}

.filter-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.filter-card.active {
    background-color: #f8f9ff;
    position: relative;
    overflow: hidden;
}

.filter-card.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 20px solid var(--primary-color);
    border-left: 20px solid transparent;
}

.filter-card.active::before {
    content: "\F26A";
    /* Bootstrap Icons check */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    font-size: 10px;
    z-index: 1;
    padding: 2px;
}

/* Tab text: muted inactive, green active — matches global nav-tabs override */
#transactionTabs .nav-link,
#commissionTabs .nav-link {
    color: var(--muted, #6b7280) !important;
}

#transactionTabs .nav-link.active,
#commissionTabs .nav-link.active {
    color: var(--primary, #3f6244) !important;
}

/* --- Reports & Commission Reports --- */
/* From: reports.php, commission_reports.php */

@media print {

    /* Hide non-printable elements */
    .navbar,
    .btn,
    form,
    footer,
    .bi-download,
    .d-print-none,
    .print-section .card-header {
        display: none !important;
    }

    /* Ensure the main container wrapper doesn't restrict width */
    .container,
    .container-fluid {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .card-header {
        background-color: transparent !important;
        border-bottom: 2px solid #333 !important;
    }

    /* Ensure table borders show up */
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #000 !important;
    }

    /* Additional rule to hide headers/footers */
    @page {
        margin: 0.5in;
    }

    @page :first {
        margin-top: 0.5in;
    }

    /* Keep summary columns side-by-side if possible */
    .col-md-3 {
        width: 25% !important;
        float: left;
    }

    .col-md-4 {
        width: 33.33% !important;
        float: left;
    }

    .col-md-6 {
        width: 50% !important;
        float: left;
    }

    /* Force Landscape */
    @page {
        size: landscape;
        margin: 0.5in;
    }

    /* Hide Expand Column in Print */
    .col-exp {
        display: none !important;
    }

    /* Override Fixed Widths for Print */
    .dtx-ledger .col-date {
        width: 14% !important;
    }

    .dtx-ledger .col-id {
        width: 18% !important;
    }

    .dtx-ledger .col-customer {
        width: 15% !important;
    }

    .dtx-ledger .col-type {
        width: 25% !important;
    }

    .dtx-ledger .col-method {
        width: 14% !important;
    }

    .dtx-ledger .col-amt {
        width: 14% !important;
    }

    /* Ensure table fits */
    #reportTable {
        width: 100% !important;
        table-layout: auto !important;
    }

    #reportTable th,
    #reportTable td {
        font-size: 10pt !important;
        padding: 4px !important;
        white-space: normal !important;
        /* Allow wrapping */
    }
}

/* Premium Table Styles */
.tg-sections {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Scoped Ledger Styles from table.html */
.dtx-ledger {
    --sage-700: #7f9f90;
    --sage-200: #eaf2ee;
    --sage-100: #f4f8f6;
    --ink: #21302a;
    --muted: #6b7a73;
    --border: rgba(0, 0, 0, .08);
    --shadow: 0 10px 22px rgba(0, 0, 0, .06);
    --radius: 14px;
    --pos: #137333;
    --neg: #d93025;
    --comm: #0a84ff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
}

.dtx-ledger .card {
    border: 1px solid var(--border);
    border-top: none;
    background: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Ledger table */
.dtx-ledger .ledger {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.dtx-ledger .ledger thead th {
    font-size: 12.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2b3832;
    background: #fbfbfb;
    padding: 12px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.dtx-ledger .ledger tbody td {
    font-size: 14.5px;
    padding: 12px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.dtx-ledger .ledger tbody tr:hover td {
    background: rgba(127, 159, 144, .08);
}

.dtx-ledger .col-exp {
    width: 44px;
    text-align: center;
}

.dtx-ledger .col-date {
    width: 210px;
}

.dtx-ledger .col-id {
    width: 250px;
}

.dtx-ledger .col-customer {
    width: 180px;
}

.dtx-ledger .col-type {
    width: 320px;
}

.dtx-ledger .col-method {
    width: 140px;
}

.dtx-ledger .col-amt {
    width: 140px;
    text-align: right;
}

.dtx-ledger .exp-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    vertical-align: middle;
}

.dtx-ledger .exp-btn:hover {
    background: var(--sage-100);
}

.dtx-ledger .exp-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dtx-ledger .exp-btn .chev {
    font-size: 14px;
    transform: translateY(-1px);
}

.dtx-ledger .dt {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.dtx-ledger .dt .d {
    font-weight: normal;
}

.dtx-ledger .dt .t {
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 3px;
}

.dtx-ledger .pill-id {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 12.8px;
    color: #2c3a35;
    white-space: nowrap;
}

.dtx-ledger .type-plain {
    font-weight: normal;
    color: #22312b;
    white-space: nowrap;
}

.dtx-ledger .type-plain small {
    font-weight: normal;
    color: var(--muted);
    margin-left: 6px;
}

.dtx-ledger .amt {
    font-weight: normal;
    letter-spacing: .2px;
}

.dtx-ledger .amt.neg {
    color: var(--neg);
}

.dtx-ledger .amt.pos {
    color: var(--pos);
}

.dtx-ledger .method {
    font-weight: normal;
    color: #2b3832;
}

.dtx-ledger .method.muted {
    color: var(--muted);
    font-weight: normal;
}

/* Receipt panel */
.dtx-ledger .detail-row td {
    padding: 0;
    background: #fff;
}

.dtx-ledger .receipt {
    padding: 12px 14px 16px;
    border-top: 1px solid var(--border);
    background: #fff;
}

.dtx-ledger .receipt-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--sage-100);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: #2f3a36;
}

.dtx-ledger .receipt-meta b {
    font-weight: normal;
}

.dtx-ledger .receipt-meta .right {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dtx-ledger .meta-chip span {
    color: var(--muted);
    font-weight: normal;
    margin-right: 6px;
}

.dtx-ledger .receipt-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.dtx-ledger .receipt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 920px;
}

.dtx-ledger .receipt-table thead th {
    background: #fbfbfb;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2d3a35;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.dtx-ledger .receipt-table tbody td {
    font-size: 14px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.dtx-ledger .receipt-table tbody tr:last-child td {
    border-bottom: none;
}

.dtx-ledger .rt-item {
    width: 50%;
}

.dtx-ledger .rt-qty {
    width: 90px;
    text-align: center;
}

.dtx-ledger .rt-staff {
    width: 140px;
}

.dtx-ledger .rt-amount {
    width: 140px;
    text-align: right;
    font-weight: normal;
}

.dtx-ledger .rt-comm {
    width: 140px;
    text-align: right;
    font-weight: normal;
    color: var(--comm);
}

.dtx-ledger .item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 320px;
}

.dtx-ledger .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 560px;
    font-weight: normal;
    color: #22312b;
}

.dtx-ledger .sub {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: normal;
    margin-top: 2px;
}

.dtx-ledger .section-row td {
    background: var(--sage-200);
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #2c3a35;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 640px) {
    .dtx-ledger .ledger tbody td {
        font-size: 14px;
    }

    .dtx-ledger .receipt-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .dtx-ledger .receipt-meta .right {
        justify-content: flex-start;
    }

    .dtx-ledger .type-plain {
        white-space: normal;
    }
}

.dtx-ledger {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Independent Child Tables */
.tg-detail-panel {
    padding: 12px 14px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
    box-sizing: border-box;
}

/* Commission Reports  Specific */
.summary-cards .card {
    overflow: hidden;
}

.summary-cards .card-body {
    padding: 1.25rem;
    position: relative;
}

.summary-cards h6 {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1400px) {
    .summary-cards h6 {
        white-space: normal;
    }
}

.summary-cards h2 {
    font-weight: 700;
    font-size: 1.8rem;
}

.summary-cards i {
    font-size: 2.5rem;
    opacity: 0.3 !important;
}

/* PDF Export Specific High-Fidelity Styles */
.pdf-export-mode {
    background-color: white !important;
}

.pdf-export-mode .btn-group,
.pdf-export-mode #filterSection,
.pdf-export-mode .no-print,
.pdf-export-mode #commissionPaginationContainer,
.pdf-export-mode .pagination {
    display: none !important;
}

.pdf-export-mode .card {
    box-shadow: none !important;
    border: 1px solid #eee !important;
    break-inside: avoid;
}

.pdf-export-mode .summary-cards {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.pdf-export-mode .summary-cards .col {
    flex: 1;
    min-width: 0;
}

.pdf-export-mode .summary-cards h6 {
    font-size: 11px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: inherit !important;
    opacity: 0.9 !important;
}

.pdf-export-mode .summary-cards h2 {
    font-size: 20px !important;
}

.pdf-export-mode .summary-cards i {
    display: none !important;
}

.pdf-export-mode table {
    font-size: 12px;
}

.pdf-export-mode .card-header {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #ddd !important;
}

.pdf-export-mode #transactionCount {
    display: none !important;
}


/* ========================================
   DATA TABLE SYSTEM
   Unified design for all listing tables.
   Uses existing CSS variables — all 3
   themes are automatically supported.
   ======================================== */

/* --- Wrapper ------------------------------------------------- */
.data-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

/* Header bar above the table: title left, record count right */
.data-table-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.125rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.data-table-header-bar .dt-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--card-text);
    letter-spacing: 0.01em;
}

.dt-count {
    font-size: 0.775rem;
    color: var(--card-text);
    opacity: 0.6;
    white-space: nowrap;
}

/* --- Core Table ---------------------------------------------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    color: var(--card-text);
    background: var(--card-bg);
}

/* --- Header -------------------------------------------------- */
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--secondary-color);
    color: var(--text-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}

/* Sort icons */
.data-table thead th .sort-icon {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.4;
    font-size: 0.65rem;
    vertical-align: middle;
    transition: opacity 0.15s;
}

.data-table thead th:hover .sort-icon,
.data-table thead th.sorted .sort-icon {
    opacity: 1;
}

/* --- Body ---------------------------------------------------- */
.data-table tbody tr {
    transition: background-color 0.15s ease;
}

/* Zebra striping — very subtle */
.data-table tbody tr:nth-child(even) {
    background-color: var(--zebra-row);
}

.data-table tbody tr:hover {
    background-color: var(--table-hover) !important;
}

/* Selected row */
.data-table tbody tr.selected {
    background-color: rgba(143, 174, 158, 0.12) !important;
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* --- Cells --------------------------------------------------- */
.data-table td,
.data-table th {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    line-height: 1.5;
}

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

/* Text overflow — single line cells */
.data-table td.dt-ellipsis {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Actions column */
.data-table td.col-actions {
    white-space: nowrap;
    min-width: 110px;
    text-align: right;
}

/* --- Badges (pill style) ------------------------------------- */
.dt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.3em 0.75em;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.dt-badge-success {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.dt-badge-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.dt-badge-danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.dt-badge-info {
    background-color: var(--info-bg);
    color: var(--info-text);
}

.dt-badge-secondary {
    background-color: var(--soft);
    color: var(--muted);
}

.dt-badge-primary {
    background-color: var(--primary-soft);
    color: var(--primary-dark);
}

/* --- Action Buttons ------------------------------------------ */
.dt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 0.775rem;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}

.dt-btn:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: none;
    /* override global btn:hover translateY */
}

.dt-btn-edit {
    color: var(--info-color);
    border-color: var(--info-color);
    background: transparent;
}

.dt-btn-edit:hover {
    background: var(--info-color);
    color: #fff;
}

.dt-btn-delete {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background: transparent;
}

.dt-btn-delete:hover {
    background: var(--danger-color);
    color: #fff;
}

.dt-btn-view {
    color: var(--success-color);
    border-color: var(--success-color);
    background: transparent;
}

.dt-btn-view:hover {
    background: var(--success-color);
    color: #fff;
}

.dt-btn-topup {
    color: var(--success-color);
    border-color: var(--success-color);
    background: transparent;
}

.dt-btn-topup:hover {
    background: var(--success-color);
    color: #fff;
}

.dt-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* --- Empty State --------------------------------------------- */
.dt-empty {
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--card-text);
    opacity: 0.55;
}

.dt-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.5;
}

.dt-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* --- Pagination ---------------------------------------------- */
.dt-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dt-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dt-pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--card-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

.dt-pagination .page-item .page-link:hover {
    background: var(--table-hover);
    border-color: var(--primary-color);
    color: var(--text-color);
}

.dt-pagination .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--navbar-text);
}

.dt-pagination .page-item.disabled .page-link {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 768px) {

    .data-table td,
    .data-table th {
        padding: 0.55rem 0.65rem;
        font-size: 0.8rem;
    }

    .data-table thead th {
        font-size: 0.68rem;
    }

    .dt-badge {
        font-size: 0.68rem;
        padding: 0.25em 0.55em;
    }

    .dt-btn {
        font-size: 0.725rem;
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dt-actions-group {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
}

/* Print: remove sticky/shadow for data tables */
@media print {
    .data-table thead th {
        position: static;
        background: #f3f4f6 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .data-table tbody tr:nth-child(even) {
        background-color: #f9f9f9 !important;
    }

    .dt-btn,
    .dt-actions-group,
    .col-actions {
        display: none !important;
    }

    .dt-pagination-wrapper {
        display: none !important;
    }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

body {
    font-family: var(--font-sans);
    background-color: var(--surface);
    color: var(--ink);
}

.page-title,
h1.text-gradient {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.2vw + 0.6rem, 2.4rem);
    font-weight: 700;
    color: var(--heading-color);
    word-break: break-word;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
}

.text-muted,
.subtle {
    color: var(--muted) !important;
}

.bg-light,
.table-light,
.modal-footer.bg-light {
    background-color: var(--soft) !important;
    color: var(--ink) !important;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
    border-color: var(--border) !important;
}

.alert-info {
    background-color: var(--info-bg) !important;
    border-color: var(--info) !important;
    color: var(--info-text) !important;
}

.alert-success {
    background-color: var(--success-bg) !important;
    border-color: var(--success) !important;
    color: var(--success-text) !important;
}

.alert-warning {
    background-color: var(--warning-bg) !important;
    border-color: var(--warning) !important;
    color: var(--warning-text) !important;
}

.alert-danger {
    background-color: var(--danger-bg) !important;
    border-color: var(--danger) !important;
    color: var(--danger-text) !important;
}

.input-group-text {
    background-color: var(--soft);
    border-color: var(--input-border);
    color: var(--muted);
}

/* The member search bar's Clear button rendered as a separate square block
   stuck onto the search field instead of the rounded closing edge of one
   fused pill. Root cause is structural, not stylistic: #memberDropdown (the
   search-results popover, empty and invisible until a query returns matches)
   sits INSIDE the same .input-group as a third child after the Clear button,
   so Bootstrap's own input-group CSS treats the button as a middle member --
   not a trailing one -- and strips rounding from every corner, left and
   right alike.
   The other two "icon + input + Clear" search bars in this app (walk-in
   history search below, and packages/sell.php's member search) keep their
   dropdown OUTSIDE the .input-group and round correctly already, which is
   why this fix is scoped to #memberSearchContainer only: it corrects the one
   instance that is actually broken instead of a general .input-group rule
   that could alter the two that already work. Left corners stay flat
   (Bootstrap's rule for that side is correct here, since the button
   genuinely isn't the visual lead -- the search icon is); only the right
   corners, which should never have been flattened, are restored to match
   the icon's own radius on the opposite end. */
#memberSearchContainer .input-group > .btn-soft {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.form-text {
    color: var(--muted);
}

.form-select option {
    background-color: var(--card-bg);
    color: var(--ink);
}

.btn-light,
.btn-secondary {
    background-color: var(--soft) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

.btn-light:hover,
.btn-secondary:hover {
    background-color: var(--hover-row) !important;
    border-color: var(--primary-light) !important;
    color: var(--ink) !important;
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

/* ============================================================
   BUTTONS — Unified system
   ============================================================ */

.btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    padding: 0.45rem 1rem;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, color 0.18s ease;
    cursor: pointer;
    line-height: 1.5;
}

/* Primary — sage green fill */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}
/* :focus-visible, not :focus -- sharing one rule with :hover meant a tap left
   the button painted in its hover colour until something else took focus.
   Keyboard focus still gets the same treatment. */
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--on-primary) !important;
    box-shadow: 0 2px 8px var(--ring) !important;
}

/* Outline Primary */
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

/* Sage — alias for primary, for page-specific classes */
.btn-sage {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-md);
}
.btn-sage:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--on-primary);
}

/* Soft — ghost/neutral action */
.btn-soft {
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--radius-md);
}
.btn-soft:hover {
    background: var(--hover-row);
    border-color: var(--border);
    color: var(--ink);
}

/* Success */
.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}
.btn-success:hover {
    background-color: var(--success-text) !important;
    border-color: var(--success-text) !important;
}
.btn-outline-success {
    color: var(--success) !important;
    border-color: var(--success) !important;
}
.btn-outline-success:hover {
    background-color: var(--success) !important;
    color: #fff !important;
}

/* Danger */
.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}
.btn-danger:hover {
    background-color: var(--danger-text) !important;
    border-color: var(--danger-text) !important;
}
.btn-outline-danger {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
}
.btn-outline-danger:hover {
    background-color: var(--danger) !important;
    color: #fff !important;
}

/* Warning */
.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #fff !important;
}

/* Export buttons (used in transactions, reports) */
.btn-export-excel {
    background: var(--success-bg);
    border: 1px solid var(--success);
    color: var(--success-text);
    font-weight: 600;
}
.btn-export-excel:hover {
    background: var(--success);
    color: #fff;
}
.btn-export-pdf {
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    color: var(--danger-text);
    font-weight: 600;
}
.btn-export-pdf:hover {
    background: var(--danger);
    color: #fff;
}

/* Size variants */
.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
}
.btn-lg {
    font-size: 1rem;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-md);
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   BADGES & STATUS INDICATORS — Unified system
   ============================================================ */

/* Base badge reset */
.badge {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3em 0.65em;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

/* Bootstrap bg-* overrides */
.badge.bg-primary, .bg-primary {
    background-color: var(--primary) !important;
    color: #fff !important;
}
.badge.bg-success, .bg-success { background-color: var(--success) !important; }
.badge.bg-danger,  .bg-danger  { background-color: var(--danger)  !important; }
.badge.bg-warning, .bg-warning { background-color: var(--warning) !important; color: #fff !important; }
.badge.bg-info,    .bg-info    { background-color: var(--info)    !important; }

/* === Package / Member-Package Status badges === */
.status-badge {
    padding: 0.3em 0.75em;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
}
.status-active,
.badge.status-active         { background: var(--success-bg);   color: var(--success-text); }
.status-expired,
.badge.status-expired        { background: var(--danger-bg);    color: var(--danger-text); }
.status-fully_redeemed,
.badge.status-fully_redeemed { background: var(--redeemed-bg);  color: var(--redeemed-text); }
.status-cancelled,
.badge.status-cancelled      { background: var(--sage-100);     color: var(--muted); }
.status-pending,
.badge.status-pending        { background: var(--warning-bg);   color: var(--warning-text); }

/* === Staff Level badges === */
.level-badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--sage-100);
    color: var(--sage-700);
}
.level-badge.junior   { background: var(--success-bg);  color: var(--success-text); }
.level-badge.senior   { background: var(--info-bg);     color: var(--info-text); }
.level-badge.standard { background: var(--sage-100);    color: var(--sage-700); }
.level-badge.master   { background: var(--comm-fixed-bg); color: var(--comm-fixed); }
.level-count-badge {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 0.7rem;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    font-weight: 600;
}

/* === Commission Type badges === */
.type-badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.type-badge.fixed   { background: var(--comm-fixed-bg);   color: var(--comm-fixed); }
.type-badge.percent { background: var(--comm-percent-bg);  color: var(--comm-percent); }
.type-badge.package { background: var(--primary-soft);     color: var(--primary-dark); }
.type-badge.manual  { background: var(--accent-light);     color: var(--accent-dark); }

/* === Membership Tier badges === */
.badge-bronze   { background-color: #cd7f32; color: #fff; }
.badge-silver   { background-color: #c0c0c0; color: #333; }
.badge-gold     { background-color: #ffd700; color: #333; }
.badge-platinum { background-color: #e5e4e2; color: #333; }

/* === Commission amount pills === */
.comm-fixed   { color: var(--comm-fixed);   font-weight: 700; }
.comm-percent { color: var(--comm-percent);  font-weight: 700; }
.total-comm-pill {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-dark);
    padding: 0.2em 0.6em;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.875rem;
}
.total-comm-pill.footer {
    background: var(--primary);
    color: #fff;
    padding: 0.3em 0.8em;
}

/* Payment method badge */
.badge.payment-method {
    background: var(--sage-100);
    color: var(--sage-700);
    font-size: 0.75rem;
}

/* ============================================================
   STAT CARDS — Unified system
   ============================================================ */

.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: none;
    border-left: 4px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: default;
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-card.primary   { border-left-color: var(--primary); }
.stat-card.success   { border-left-color: var(--success); }
.stat-card.warning   { border-left-color: var(--warning); }
.stat-card.info      { border-left-color: var(--info); }
.stat-card.accent    { border-left-color: var(--accent); }
.stat-card.danger    { border-left-color: var(--danger); }
.stat-card.redeemed  { border-left-color: var(--redeemed); }

.stat-card-body {
    padding: 1.1rem 1.2rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}
.stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.1;
}
.stat-value.text-primary { color: var(--primary) !important; }
.stat-value.text-success { color: var(--success) !important; }
.stat-value.text-warning { color: var(--warning) !important; }
.stat-value.text-info    { color: var(--info)    !important; }
.stat-value.text-danger  { color: var(--danger)  !important; }

.stat-icon {
    font-size: 2.25rem;
    opacity: 0.15;
    position: absolute;
    top: 1rem;
    right: 1rem;
    pointer-events: none;
}

.stat-card .card-body { position: relative; }

/* Ghost icon variant (dashboard) */
.stat-card-ghost-icon {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 3rem;
    opacity: 0.08;
    color: var(--ink);
    pointer-events: none;
    line-height: 1;
}

/* Clickable stat card */
.stat-card.clickable,
.filter-card {
    cursor: pointer;
}
.stat-card.clickable:hover,
.filter-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.filter-card.active {
    border-left-width: 4px;
    box-shadow: var(--shadow-md);
}

/* ============================================================
   DATA TABLES — Unified system
   Applies to: .data-table, .table, Bootstrap tables
   ============================================================ */

/* Wrapper */
.data-table-wrapper {
    border-radius: var(--radius-lg);
    /* overflow-x must stay scrollable: .data-table thead th is nowrap, so a
       multi-column table is wider than a phone viewport. The `overflow: hidden`
       shorthand that used to be here silently cancelled the `overflow-x: auto`
       declared on this same selector earlier in the file, which clipped the
       right-hand columns (Actions included) with no way to reach them. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
}

/* Header bar (title + count row above table) */
.data-table-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.1rem;
    background: var(--soft);
    border-bottom: 1px solid var(--border);
}
.dt-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dt-count {
    font-size: 0.775rem;
    color: var(--muted);
}
.dt-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--muted);
}
.dt-empty-icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.35;
}

/* Table base */
.data-table,
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--card-bg);
    color: var(--ink);
}

/* Header */
.data-table thead th,
.table thead th {
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border: none;
    white-space: nowrap;
}
/* Light table header variant */
.table thead.table-light th {
    background: var(--soft);
    color: var(--ink);
    border-bottom: 2px solid var(--border);
}

/* Rows */
.data-table tbody tr,
.table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s ease;
    background: var(--card-bg);
}
.data-table tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--hover-row);
}
.data-table tbody tr:last-child,
.table tbody tr:last-child {
    border-bottom: none;
}

/* Cells */
.data-table td,
.table td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    color: var(--ink);
    border-color: var(--border);
}

/* Selected / active row */
.data-table tbody tr.table-active,
.table-active {
    background-color: var(--primary-soft) !important;
    font-weight: 600;
}

/* Expandable sub-rows (commission staff breakdown) */
.data-table tr.staff-row {
    cursor: pointer;
}
.data-table tr.staff-row:hover {
    background: var(--primary-soft);
}
.data-table tr.sub-row {
    display: none;
    background: var(--soft);
    font-size: 0.82rem;
}
.data-table tr.sub-row.show {
    display: table-row;
}
.data-table tr.staff-row.expanded {
    background: var(--primary-soft);
}

/* Expand icon rotation */
.expand-icon {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--muted);
    transition: transform 0.2s ease;
}
.expand-icon.rotated {
    transform: rotate(90deg);
    color: var(--primary);
}

/* tfoot totals row */
.data-table tfoot tr,
.table tfoot tr {
    background: var(--soft);
    border-top: 2px solid var(--border);
}
.data-table tfoot td,
.table tfoot td {
    font-weight: 700;
    color: var(--ink);
    padding: 0.75rem 1rem;
}

/* ============================================================
   CARDS — Unified system
   ============================================================ */

.card {
    background: var(--card-bg);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    color: var(--ink);
}
.card:hover {
    box-shadow: var(--shadow-md);
}
.card-header {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 0.85rem 1.25rem;
    border-bottom: none;
}

/* Section card (commission/report sections) */
.section-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    background: var(--soft);
    border-bottom: 1px solid var(--border);
}
.section-header .section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Feature card (package POS, large cards) */
.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
}

/* KPI / summary card */
.kpi-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.kpi-card .kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.kpi-card .kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
}
.kpi-card .kpi-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* ============================================================
   FORMS — Unified system
   ============================================================ */

.form-control,
.form-select {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    color: var(--ink);
    padding: 0.5rem 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
    background-color: var(--input-bg);
    color: var(--ink);
    outline: none;
}
.form-control::placeholder {
    color: var(--muted);
    opacity: 0.7;
}
.input-group-text {
    background: var(--soft);
    border-color: var(--border);
    color: var(--muted);
    font-size: 0.875rem;
}

/* Inline filter row labels */
.filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.3rem;
    display: block;
}

/* ============================================================
   NAV TABS — Unified system
   ============================================================ */

/* Standard Bootstrap nav-tabs override — square bordered style */
.nav-tabs {
    border-bottom: 2px solid var(--border);
    gap: 0.25rem;
}
.nav-tabs .nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted) !important;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 0.6rem 1.1rem;
    margin-bottom: -2px;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-tabs .nav-link:hover {
    color: var(--primary) !important;
    background: var(--primary-soft);
    border-color: var(--border) var(--border) transparent;
}
.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    background: var(--card-bg);
    border-color: var(--border) var(--border) var(--card-bg);
    font-weight: 700;
}

/* Pill-style tabs (used in service/package POS segments) */
.seg {
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem;
    display: inline-flex;
    gap: 0.15rem;
}
.seg .btn {
    border-radius: 999px;
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: none;
}
.seg .btn.active,
.seg .btn:hover {
    background: var(--primary);
    color: var(--on-primary);
}

/* Tab badge counts */
.nav-tabs .nav-link .badge {
    font-size: 0.65rem;
    padding: 0.2em 0.5em;
    background: var(--sage-200);
    color: var(--sage-700);
    border-radius: 999px;
    font-weight: 700;
}
.nav-tabs .nav-link.active .badge {
    background: var(--primary);
    color: #fff;
}

/* ============================================================
   PACKAGE TOOLBAR BUTTONS — shared across all packages/ pages
   Compact sizing (34px / 11px padding / 13px) fits 7 buttons
   on one row at ≥1200px without wrapping.
   ============================================================ */
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 11px;
    font-size: 13px;
    font-weight: 600;
    /* same token as every other button — a hardcoded 8px here left the
       toolbar visibly rounder than the card and modal buttons next to it */
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Toolbar wrapper: title left, buttons right, wraps gracefully */
.pkg-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.pkg-toolbar-title h3 { margin-bottom: 0.15rem; font-size: 1.3rem; }
.pkg-toolbar-title p  { margin-bottom: 0; font-size: 0.82rem; }
.pkg-toolbar-actions  { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

/* ---- Packages toolbar on tablet/phone --------------------------------
   Shared by all eight packages/* pages. On a narrow screen the title and
   the button set stop competing for one row, and every button grows to
   fill the row it lands on. That last part is the whole point: with plain
   wrapping, a button that wraps on its own (e.g. "Add Package") sits short
   and left-aligned and reads as a mistake. Grown to full width it reads as
   a deliberate primary action, and no row ever ends ragged.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .pkg-toolbar {
        flex-direction: column;
        /* nowrap matters: a *wrapping* column flex container sizes its single
           line to the children's max-content width, which would stretch the
           title and the action row past the viewport */
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.65rem;
        margin-bottom: 1rem;
    }
    .pkg-toolbar > * { min-width: 0; }

    .pkg-toolbar-actions { gap: 0.4rem; row-gap: 0.5rem; }
    .pkg-toolbar-actions > .toolbar-btn,
    .pkg-toolbar-actions > .dropdown { flex: 1 1 auto; }
    .pkg-toolbar-actions > .dropdown > .toolbar-btn { width: 100%; }
    /* 34px is a tight tap target; lift the whole set on touch-sized screens */
    .pkg-toolbar-actions .toolbar-btn { height: 38px; padding: 0 0.8rem; }

    /* Status is state, not an action — keep it at its natural size so it
       reads as a label while the real buttons share out the leftover room */
    .pkg-toolbar-actions > .status-badge { flex: 0 0 auto; }
}

/* ============================================================
   PAGE HEADER — Unified system
   Covers: title, description, optional breadcrumb links,
   optional right-aligned CTA action buttons.
   ============================================================ */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Left: title block */
.page-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Optional breadcrumb / back-nav row above the h1 */
.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.page-breadcrumb .btn {
    font-size: 0.78rem;
    padding: 0.25rem 0.65rem;
    color: var(--muted);
    border-color: var(--border);
    background: transparent;
}
.page-breadcrumb .btn:hover {
    background: var(--hover-row);
    color: var(--ink);
}

/* h1 inside page header */
.page-header-text .page-title,
.page-header-text h1 {
    font-size: clamp(1.45rem, 2vw + 0.5rem, 2.1rem);
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    word-break: break-word;
}
.page-header-text h1 i,
.page-header-text .page-title i {
    color: var(--heading-color);
    font-size: 1em;
}

/* Description line */
.page-header-text .page-desc,
.page-header-text > p {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

/* Right: action buttons block */
.page-header-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Responsive: stack on mobile */
@media (max-width: 576px) {
    .page-header {
        flex-direction: column;
    }
    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================================
   FILTER PANEL — Unified system
   Replaces the ad-hoc:
     <div class="card mb-4" style="overflow: visible;">
     <div class="card border-0 shadow-sm mb-4" style="overflow: visible;">
   ============================================================ */

.filter-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    overflow: visible;          /* allows date pickers to overflow */
}
.filter-card .card-body {
    padding: 1rem 1.25rem;
    overflow: visible;
}

/* Filter field label */
.filter-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

/* Quick-select period buttons (This Month / Last Month) */
.filter-quick-select {
    display: flex;
    width: 100%;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.btn-filter-period {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    background: var(--soft);
    border: none;
    color: var(--ink);
    border-right: 1px solid var(--border);
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
}
.btn-filter-period:last-child {
    border-right: none;
}
.btn-filter-period:hover,
.btn-filter-period.active {
    background: var(--primary);
    color: var(--on-primary);
}

/* Filter submit / reset buttons */
.btn-filter-submit {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 0.875rem;
}
.btn-filter-submit:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-filter-reset {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
    font-size: 0.875rem;
}
.btn-filter-reset:hover {
    background: var(--hover-row);
    color: var(--ink);
    border-color: var(--border);
}

/* Export buttons group — always right-aligned via col-md-auto ms-auto */
.filter-export-group {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* ============================================================
   NAV TABS — HTML class cleanup overrides
   Removes the effect of legacy fw-bold, text-dark, opacity-75
   that pages hard-code onto tab buttons.
   ============================================================ */

/* Nullify per-page overrides on tab buttons */
.nav-tabs .nav-link.fw-bold {
    font-weight: 600 !important;   /* match canonical weight */
}
.nav-tabs .nav-link.text-dark {
    color: var(--muted) !important; /* inactive: muted */
}
.nav-tabs .nav-link.text-dark.active {
    color: var(--primary) !important; /* active: primary */
}
.nav-tabs .nav-link.opacity-75 {
    opacity: 1 !important;          /* never dim — use color instead */
}

/* Ensure tab bar never needs z-index inline style */
.nav-tabs {
    position: relative;
    z-index: 10;
}

/* Member search autocomplete */
.member-dropdown,
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1050;
    margin-top: 4px;
    display: none;
}
.member-dropdown.show,
.autocomplete-results.show {
    display: block;
}
.member-dropdown-item,
.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--ink);
    transition: background-color 0.12s ease;
}
.member-dropdown-item:hover,
.autocomplete-item:hover {
    background: var(--hover-row);
}
.member-dropdown-item:last-child,
.autocomplete-item:last-child {
    border-bottom: none;
}

/* Modal standardization */
.modal-header {
    background: var(--primary);
    color: var(--on-primary);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header .btn-close {
    filter: var(--modal-close-filter);
}
.modal-content {
    background: var(--card-bg);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-footer {
    background: var(--soft);
    border-top: 1px solid var(--border);
}

/* Spinner overlay */
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 55, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Toast */
.toast {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: none;
}

/* Dropdown menus */
.dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
}
.dropdown-item {
    font-size: 0.875rem;
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.875rem;
    transition: background-color 0.12s ease;
}
.dropdown-item:hover {
    background: var(--hover-row);
    color: var(--ink);
}

/* Pagination */
.page-link {
    background-color: var(--card-bg);
    color: var(--primary);
    border-color: var(--border);
    font-size: 0.82rem;
}
.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}
.page-link:hover {
    background: var(--primary-soft);
    border-color: var(--primary-light);
    color: var(--primary-dark);
}

.page-item.disabled .page-link {
    background-color: var(--soft);
    border-color: var(--border);
    color: var(--muted);
}

/* ============================================================
   THEME PERSISTENCE GUARD
   Some legacy pages define Sage variables in page-level :root
   blocks after this stylesheet loads. Mark selected theme tokens
   important so navigation cannot silently fall back to Sage.
   ============================================================ */

[data-theme="theme2"] {
    --primary: #C8A46A !important;
    --primary-light: #EAD8C0 !important;
    --primary-soft: #F6EBDD !important;
    --primary-dark: #B8904F !important;
    --on-primary: #2B2118 !important;
    --heading-color: #8A6332 !important;
    --accent: #EAD8C0 !important;
    --accent-green: #C8A46A !important;
    --success: #6F8F72 !important;
    --warning: #C47F3A !important;
    --warning-bg: #FFF0DD !important;
    --danger: #B85C5C !important;
    --warning-red: #B85C5C !important;
    --ink: #2B2118 !important;
    --muted: #7A6A5D !important;
    --border: #E8D8C6 !important;
    --border-color: #E8D8C6 !important;
    --surface: #FFF9F0 !important;
    --bg: #FFF9F0 !important;
    --background-light: #FFF9F0 !important;
    --card-bg: #FFFFFF !important;
    --card: #FFFFFF !important;
    --card-light: #FFFFFF !important;
    --inner-card-light: #F6EBDD !important;
    --hover-row: #F6EBDD !important;
    --zebra-row: rgba(122, 106, 93, 0.06) !important;
    --soft: #F6EBDD !important;
    --line: #E8D8C6 !important;
    --input-bg: #FFFCF7 !important;
    --input-border: #E8D8C6 !important;
    --primary-color: #C8A46A !important;
    --secondary-color: #FFF9F0 !important;
    --accent-color: #B8904F !important;
    --nav-bg: #C8A46A !important;
    --nav-text: #2B2118 !important;
    --nav-hover: #2B2118 !important;
    --nav-brand: #2B2118 !important;
    --primary-green: #C8A46A !important;
    --dark-green: #8A6332 !important;
    --sage-50: #FFF9F0 !important;
    --sage-100: #F6EBDD !important;
    --sage-200: #E8D8C6 !important;
    --sage-300: #D9C3A9 !important;
    --sage-400: #C8A46A !important;
    --sage-500: #B8904F !important;
    --sage-600: #B8904F !important;
    --sage-700: #C8A46A !important;
    --sage-800: #B8904F !important;
    --sage-900: #2B2118 !important;
    --active-light: #F6EBDD !important;
    --bronze: #C8A46A !important;
    --ring: rgba(200, 164, 106, 0.28) !important;
}

[data-theme="theme3"] {
    --primary: #D6A2A8 !important;
    --primary-light: #E3BBC0 !important;
    --primary-soft: #302731 !important;
    --primary-dark: #C2868E !important;
    --on-primary: #171316 !important;
    --heading-color: #D6A2A8 !important;
    --accent: #B76E79 !important;
    --accent-green: #D6A2A8 !important;
    --success: #8FAF9B !important;
    --warning: #D1A15F !important;
    --warning-bg: #3A2D1F !important;
    --danger: #D07A7A !important;
    --warning-red: #D07A7A !important;
    --ink: #F8EEF1 !important;
    --muted: #CBB9C0 !important;
    --border: #443642 !important;
    --border-color: #443642 !important;
    --surface: #171316 !important;
    --bg: #171316 !important;
    --background-light: #171316 !important;
    --card-bg: #241D23 !important;
    --card: #241D23 !important;
    --card-light: #241D23 !important;
    --inner-card-light: #302731 !important;
    --hover-row: #302731 !important;
    --zebra-row: rgba(255, 255, 255, 0.035) !important;
    --soft: #302731 !important;
    --line: #443642 !important;
    --input-bg: #211B20 !important;
    --input-border: #443642 !important;
    --primary-color: #D6A2A8 !important;
    --secondary-color: #241D23 !important;
    --accent-color: #B76E79 !important;
    --nav-bg: #211A20 !important;
    --nav-text: #F8EEF1 !important;
    --nav-hover: #D6A2A8 !important;
    --nav-brand: #D6A2A8 !important;
    --primary-green: #D6A2A8 !important;
    --dark-green: #D6A2A8 !important;
    --sage-50: #211B20 !important;
    --sage-100: #302731 !important;
    --sage-200: #443642 !important;
    --sage-300: #5B4857 !important;
    --sage-400: #B76E79 !important;
    --sage-500: #C2868E !important;
    --sage-600: #D6A2A8 !important;
    --sage-700: #D6A2A8 !important;
    --sage-800: #C2868E !important;
    --sage-900: #F8EEF1 !important;
    --active-light: #302731 !important;
    --bronze: #D6A2A8 !important;
    --ring: rgba(214, 162, 168, 0.34) !important;
}

/*  Format E: Item Type Chip  */
.item-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 6px;
}
.item-type-chip i { font-size: 0.68rem; }
.chip-service { background:#e8f0ec; color:#2d5240; border-color:#b2ccbc; }
.chip-adhoc   { background:#dbeafe; color:#1e3a8a; border-color:#93c5fd; }
.chip-product { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.chip-package { background:#ede9fe; color:#4c1d95; border-color:#c4b5fd; }
.chip-topup   { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.item-name    { font-weight: 500; vertical-align: middle; }
/*  */

/* --- ERP UI Standardization: Tab & Header Borders --- */
.nav-tabs {
    border-bottom: 2px solid var(--sage-600) !important;
}
.nav-tabs .nav-link {
    color: var(--sage-600) !important;
    font-weight: 600;
}
.nav-tabs .nav-link.active {
    border-color: var(--sage-600) var(--sage-600) var(--card-bg) !important;
    border-bottom-width: 2px !important;
    color: var(--primary) !important;
}
.nav-tabs .nav-link:hover:not(.active) {
    border-color: var(--sage-400) var(--sage-400) var(--sage-600) !important;
    border-bottom-width: 2px !important;
}
.data-table-header-bar {
    border-bottom: 2px solid var(--sage-600) !important;
}

/* --- Selected Theme Overrides: legacy Service Sales surfaces --- */
[data-theme="theme2"] body.redemption-page,
[data-theme="theme3"] body.redemption-page {
    background: var(--bg) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page .card,
[data-theme="theme3"] .redemption-page .card,
[data-theme="theme2"] .redemption-page .modal-content,
[data-theme="theme3"] .redemption-page .modal-content,
[data-theme="theme2"] .redemption-page .simple-confirmation-card,
[data-theme="theme3"] .redemption-page .simple-confirmation-card,
[data-theme="theme2"] .redemption-page #successPanel,
[data-theme="theme3"] .redemption-page #successPanel,
[data-theme="theme2"] .redemption-page .member-dropdown,
[data-theme="theme3"] .redemption-page .member-dropdown,
[data-theme="theme2"] .redemption-page .opt-row,
[data-theme="theme3"] .redemption-page .opt-row,
[data-theme="theme2"] .redemption-page .staff-sheet,
[data-theme="theme3"] .redemption-page .staff-sheet,
[data-theme="theme2"] .redemption-page .staff-check-item,
[data-theme="theme3"] .redemption-page .staff-check-item,
[data-theme="theme2"] .redemption-page .detail-card,
[data-theme="theme3"] .redemption-page .detail-card {
    background: var(--card-bg) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page .card-h,
[data-theme="theme3"] .redemption-page .card-h,
[data-theme="theme2"] .redemption-page .seg-toggle,
[data-theme="theme3"] .redemption-page .seg-toggle,
[data-theme="theme2"] .redemption-page .seg-toggle .seg,
[data-theme="theme3"] .redemption-page .seg-toggle .seg,
[data-theme="theme2"] .redemption-page .service-tabs .nav-link,
[data-theme="theme3"] .redemption-page .service-tabs .nav-link,
[data-theme="theme2"] .redemption-page .pm-card,
[data-theme="theme3"] .redemption-page .pm-card,
[data-theme="theme2"] .redemption-page .redeem-bar,
[data-theme="theme3"] .redemption-page .redeem-bar,
[data-theme="theme2"] .redemption-page .bg-light,
[data-theme="theme3"] .redemption-page .bg-light {
    background: var(--soft) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page .bg-white,
[data-theme="theme3"] .redemption-page .bg-white,
[data-theme="theme2"] .redemption-page .table,
[data-theme="theme3"] .redemption-page .table {
    background: var(--card-bg) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page .btn-sage,
[data-theme="theme3"] .redemption-page .btn-sage,
[data-theme="theme2"] .redemption-page .seg .btn.active,
[data-theme="theme3"] .redemption-page .seg .btn.active,
[data-theme="theme2"] .redemption-page .seg-toggle .seg.active,
[data-theme="theme3"] .redemption-page .seg-toggle .seg.active,
[data-theme="theme2"] .redemption-page .service-tabs .nav-link.active,
[data-theme="theme3"] .redemption-page .service-tabs .nav-link.active,
[data-theme="theme2"] .redemption-page .btn-check:checked + .pm-card,
[data-theme="theme3"] .redemption-page .btn-check:checked + .pm-card {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    box-shadow: 0 2px 8px var(--ring) !important;
}

[data-theme="theme2"] .redemption-page .btn-sage:hover,
[data-theme="theme3"] .redemption-page .btn-sage:hover,
[data-theme="theme2"] .redemption-page .btn-soft:hover,
[data-theme="theme3"] .redemption-page .btn-soft:hover,
[data-theme="theme2"] .redemption-page .pm-card:hover,
[data-theme="theme3"] .redemption-page .pm-card:hover,
[data-theme="theme2"] .redemption-page .staff-check-item:hover,
[data-theme="theme3"] .redemption-page .staff-check-item:hover,
[data-theme="theme2"] .redemption-page .opt-row:hover,
[data-theme="theme3"] .redemption-page .opt-row:hover {
    background: var(--hover-row) !important;
    border-color: var(--primary-light) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page .cart-table,
[data-theme="theme3"] .redemption-page .cart-table,
[data-theme="theme2"] .redemption-page .cart-table tbody,
[data-theme="theme3"] .redemption-page .cart-table tbody,
[data-theme="theme2"] .redemption-page .cart-table tbody tr,
[data-theme="theme3"] .redemption-page .cart-table tbody tr,
[data-theme="theme2"] .redemption-page .cart-table td,
[data-theme="theme3"] .redemption-page .cart-table td {
    background: var(--card-bg) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page .cart-table thead th,
[data-theme="theme3"] .redemption-page .cart-table thead th {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

[data-theme="theme2"] .redemption-page .form-control,
[data-theme="theme3"] .redemption-page .form-control,
[data-theme="theme2"] .redemption-page .form-select,
[data-theme="theme3"] .redemption-page .form-select,
[data-theme="theme2"] .redemption-page .input-group-text,
[data-theme="theme3"] .redemption-page .input-group-text {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page select option,
[data-theme="theme3"] .redemption-page select option {
    background: var(--card-bg) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page select option:checked,
[data-theme="theme3"] .redemption-page select option:checked {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
}

[data-theme="theme2"] .redemption-page .text-dark,
[data-theme="theme3"] .redemption-page .text-dark,
[data-theme="theme2"] .redemption-page .opt-name,
[data-theme="theme3"] .redemption-page .opt-name,
[data-theme="theme2"] .redemption-page .item-name,
[data-theme="theme3"] .redemption-page .item-name {
    color: var(--ink) !important;
}

[data-theme="theme2"] .redemption-page .text-muted,
[data-theme="theme3"] .redemption-page .text-muted,
[data-theme="theme2"] .redemption-page .subtle,
[data-theme="theme3"] .redemption-page .subtle,
[data-theme="theme2"] .redemption-page .form-text,
[data-theme="theme3"] .redemption-page .form-text,
[data-theme="theme2"] .redemption-page .opt-code,
[data-theme="theme3"] .redemption-page .opt-code {
    color: var(--muted) !important;
}

[data-theme="theme2"] .redemption-page .text-success,
[data-theme="theme3"] .redemption-page .text-success,
[data-theme="theme2"] .redemption-page .pm-card i,
[data-theme="theme3"] .redemption-page .pm-card i {
    color: var(--success) !important;
}

[data-theme="theme2"] .redemption-page .btn-check:checked + .pm-card i,
[data-theme="theme3"] .redemption-page .btn-check:checked + .pm-card i {
    color: var(--on-primary) !important;
}

[data-theme="theme2"] .nav-tabs,
[data-theme="theme3"] .nav-tabs,
[data-theme="theme2"] .data-table-header-bar,
[data-theme="theme3"] .data-table-header-bar {
    border-color: var(--primary) !important;
}

[data-theme="theme2"] .nav-tabs .nav-link,
[data-theme="theme3"] .nav-tabs .nav-link {
    color: var(--primary-dark) !important;
}

[data-theme="theme2"] .nav-tabs .nav-link.active,
[data-theme="theme3"] .nav-tabs .nav-link.active {
    background: var(--card-bg) !important;
    border-color: var(--primary) var(--primary) var(--card-bg) !important;
    color: var(--primary) !important;
}

/* --- Selected Theme Overrides: legacy cross-page surfaces --- */
[data-theme="theme2"] .navbar,
[data-theme="theme3"] .navbar {
    background: var(--nav-bg) !important;
    border-color: var(--border) !important;
}

[data-theme="theme2"] .navbar .nav-link,
[data-theme="theme2"] .navbar-brand,
[data-theme="theme2"] .navbar .dropdown-toggle,
[data-theme="theme3"] .navbar .nav-link,
[data-theme="theme3"] .navbar-brand,
[data-theme="theme3"] .navbar .dropdown-toggle {
    color: var(--nav-text) !important;
}

[data-theme="theme2"] .navbar .nav-link:hover,
[data-theme="theme2"] .navbar .nav-link.active,
[data-theme="theme2"] .navbar-brand:hover,
[data-theme="theme3"] .navbar .nav-link:hover,
[data-theme="theme3"] .navbar .nav-link.active,
[data-theme="theme3"] .navbar-brand:hover {
    color: var(--nav-hover) !important;
}

[data-theme="theme2"] .navbar-brand,
[data-theme="theme3"] .navbar-brand {
    color: var(--nav-brand) !important;
}

[data-theme="theme2"] .card,
[data-theme="theme3"] .card,
[data-theme="theme2"] .stat-card,
[data-theme="theme3"] .stat-card,
[data-theme="theme2"] .filter-card,
[data-theme="theme3"] .filter-card,
[data-theme="theme2"] .custom-card,
[data-theme="theme3"] .custom-card,
[data-theme="theme2"] .card-custom,
[data-theme="theme3"] .card-custom,
[data-theme="theme2"] .section-card,
[data-theme="theme3"] .section-card,
[data-theme="theme2"] .empty-card,
[data-theme="theme3"] .empty-card,
[data-theme="theme2"] .scr-card,
[data-theme="theme3"] .scr-card,
[data-theme="theme2"] .tab-content,
[data-theme="theme3"] .tab-content {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .card-h,
[data-theme="theme3"] .card-h,
[data-theme="theme2"] .pm-table-header,
[data-theme="theme3"] .pm-table-header,
[data-theme="theme2"] .summary-chips,
[data-theme="theme3"] .summary-chips,
[data-theme="theme2"] .service-item.active,
[data-theme="theme3"] .service-item.active,
[data-theme="theme2"] .bg-light,
[data-theme="theme3"] .bg-light {
    background: var(--soft) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .bg-white,
[data-theme="theme3"] .bg-white,
[data-theme="theme2"] .activity-item,
[data-theme="theme3"] .activity-item,
[data-theme="theme2"] .service-item,
[data-theme="theme3"] .service-item,
[data-theme="theme2"] .payment-pill,
[data-theme="theme3"] .payment-pill,
[data-theme="theme2"] .input-simulator,
[data-theme="theme3"] .input-simulator,
[data-theme="theme2"] .pm-table,
[data-theme="theme3"] .pm-table,
[data-theme="theme2"] .table,
[data-theme="theme3"] .table,
[data-theme="theme2"] .data-table,
[data-theme="theme3"] .data-table {
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--zebra-row);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: var(--hover-row);
    --bs-table-hover-color: var(--ink);
    --bs-table-active-bg: var(--hover-row);
    --bs-table-active-color: var(--ink);
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .table tbody,
[data-theme="theme3"] .table tbody,
[data-theme="theme2"] .table tbody tr,
[data-theme="theme3"] .table tbody tr,
[data-theme="theme2"] .data-table tbody,
[data-theme="theme3"] .data-table tbody,
[data-theme="theme2"] .data-table tbody tr,
[data-theme="theme3"] .data-table tbody tr,
[data-theme="theme2"] .pm-table tbody,
[data-theme="theme3"] .pm-table tbody,
[data-theme="theme2"] .pm-table tbody tr,
[data-theme="theme3"] .pm-table tbody tr {
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--ink);
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

[data-theme="theme2"] .table tbody tr:nth-child(even),
[data-theme="theme3"] .table tbody tr:nth-child(even),
[data-theme="theme2"] .data-table tbody tr:nth-child(even),
[data-theme="theme3"] .data-table tbody tr:nth-child(even),
[data-theme="theme2"] .pm-table tbody tr:nth-child(even),
[data-theme="theme3"] .pm-table tbody tr:nth-child(even) {
    --bs-table-bg: var(--zebra-row);
    background: var(--zebra-row) !important;
    background-color: var(--zebra-row) !important;
}

[data-theme="theme2"] .table tbody tr:hover,
[data-theme="theme3"] .table tbody tr:hover,
[data-theme="theme2"] .data-table tbody tr:hover,
[data-theme="theme3"] .data-table tbody tr:hover,
[data-theme="theme2"] .pm-table tbody tr:hover,
[data-theme="theme3"] .pm-table tbody tr:hover,
[data-theme="theme2"] .activity-item:hover,
[data-theme="theme3"] .activity-item:hover,
[data-theme="theme2"] .service-item:hover,
[data-theme="theme3"] .service-item:hover,
[data-theme="theme2"] .payment-pill:hover,
[data-theme="theme3"] .payment-pill:hover {
    background: var(--hover-row) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .table td,
[data-theme="theme3"] .table td,
[data-theme="theme2"] .table th,
[data-theme="theme3"] .table th,
[data-theme="theme2"] .data-table td,
[data-theme="theme3"] .data-table td,
[data-theme="theme2"] .data-table th,
[data-theme="theme3"] .data-table th,
[data-theme="theme2"] .pm-table td,
[data-theme="theme3"] .pm-table td,
[data-theme="theme2"] .pm-table th,
[data-theme="theme3"] .pm-table th {
    background-color: var(--bs-table-bg, transparent) !important;
    color: var(--bs-table-color, var(--ink)) !important;
    border-color: var(--border) !important;
}

[data-theme="theme2"] .table thead,
[data-theme="theme3"] .table thead {
    --bs-table-bg: var(--primary);
    --bs-table-color: var(--on-primary);
}

[data-theme="theme2"] .table thead th,
[data-theme="theme3"] .table thead th,
[data-theme="theme2"] .data-table thead th,
[data-theme="theme3"] .data-table thead th,
[data-theme="theme2"] .pm-table thead th,
[data-theme="theme3"] .pm-table thead th {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="theme2"] .table tfoot tr,
[data-theme="theme3"] .table tfoot tr,
[data-theme="theme2"] .data-table tfoot tr,
[data-theme="theme3"] .data-table tfoot tr,
[data-theme="theme2"] .pm-table tfoot tr,
[data-theme="theme3"] .pm-table tfoot tr {
    background: var(--soft) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

[data-theme="theme2"] .form-control,
[data-theme="theme3"] .form-control,
[data-theme="theme2"] .form-select,
[data-theme="theme3"] .form-select,
[data-theme="theme2"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
[data-theme="theme3"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
[data-theme="theme2"] select,
[data-theme="theme3"] select,
[data-theme="theme2"] textarea,
[data-theme="theme3"] textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--ink) !important;
}

[data-theme="theme2"] .text-dark,
[data-theme="theme3"] .text-dark {
    color: var(--ink) !important;
}

[data-theme="theme2"] .text-muted,
[data-theme="theme3"] .text-muted {
    color: var(--muted) !important;
}

/* Header shared controls */
/**
         * iPad/Tablet Virtual Keyboard Fix
         * Prevents keyboard from blocking inputs and ensures proper scrolling
         * Uses visualViewport API via CSS variables set by JavaScript
         */

        :root {
            /* Visual viewport height (real visible area) */
            --vvh: 100vh;
            /* Keyboard height (0 when closed, actual height when open) */
            --kbd: 0px;
        }

        /* When keyboard is open (class added by JS) */
        html.kbd-open {
            /* Ensure proper scrolling behavior on tablets */
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        html.kbd-open body {
            /* Add bottom padding equal to keyboard height */
            /* This creates scrollable space below content */
            padding-bottom: var(--kbd) !important;
            /* Ensure body can scroll */
            overflow-y: auto !important;
            /* Prevent fixed positioning issues */
            position: relative !important;
        }

        /* Tablet-specific fixes (applies always on touch devices) */
        @media (hover: none) and (pointer: coarse) {
            html {
                /* Replace unreliable 100vh with dynamic value */
                height: var(--vvh);
                /* Prevent body from being cut off */
                overflow-y: auto;
            }

            body {
                /* Use visual viewport height instead of 100vh */
                min-height: var(--vvh);
                /* Ensure scrolling works */
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Prevent fixed elements from blocking interaction */
            .modal-backdrop,
            .position-fixed {
                /* Allow pointer events to pass through when keyboard is open */
                /* Exception: Keep interactive elements functional */
            }

            /* Ensure input fields are never hidden behind keyboard */
            input:focus,
            textarea:focus,
            select:focus {
                /* Smooth scroll into view handled by JS */
                scroll-margin-bottom: calc(var(--kbd) + 20px);
            }
        }

        /* Desktop: No changes */
        @media (hover: hover) and (pointer: fine) {
            /* Desktop behavior remains unchanged */
            /* No keyboard fixes applied */
        }

/* ============================================================
   MOBILE — table row action buttons
   Icon-only .btn-sm controls in a table's Actions column render
   ~39x31px, below a comfortable tap target. Raise the floor on
   touch-sized screens only; desktop is unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
    .data-table td .btn-sm,
    .data-table td .btn-group > .btn,
    .table td .btn-sm {
        /* height only — a min-width here pushes a 2-3 button cluster past the
           cell width and wraps it into a vertical stack, inflating every row */
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Keep the action cluster on one line. Without this a 3-button group
       wraps into a vertical stack (a pre-existing issue: ~115px rows), which
       the taller buttons above would make worse. Letting the cell stay wide
       is now safe because .data-table-wrapper scrolls horizontally again. */
    .data-table td:last-child {
        white-space: nowrap;
    }
}

/* ============================================================
   BUTTON SIZING — one box model for every variant
   Outline buttons carry a 1px border; the solid ones declared
   `border: none`. Same padding, same font, but the solids came
   out 2px shorter (35px vs 37px, and 29px vs 30px at btn-sm) —
   visible whenever a solid and an outline button sit together,
   which is every modal footer and the admin-actions stack.
   A transparent border restores a single shared box.
   ============================================================ */
.btn-primary,
.btn-sage,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning {
    border: 1px solid transparent;
}

/* ============================================================
   LISTING TABLES AS CARDS (mobile)
   Opt in with .data-table--cards on the <table>. Column names
   come from data-label, stamped from the table's own <thead> by
   initResponsiveTableLabels() in main.js — no per-page markup.

   Each cell becomes one label/value line: label left in small
   caps, value right. Reads as a record rather than a squashed
   grid, and works for any column set without hand-tuning.
   Wide report tables deliberately opt out and keep scrolling.
   ============================================================ */
@media (max-width: 767.98px) {
    .data-table--cards,
    .data-table--cards tbody { display: block; }
    .data-table--cards thead { display: none; }

    .data-table--cards tbody tr {
        display: block;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
    }
    .data-table--cards tbody tr:last-child { border-bottom: 0; }

    .data-table--cards tbody td {
        display: grid;
        grid-template-columns: 7.5em minmax(0, 1fr);
        gap: 10px;
        align-items: baseline;
        width: auto !important;
        padding: 1px 0 !important;
        line-height: 1.45;
        font-size: 0.85rem;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }
    .data-table--cards tbody td::before {
        content: attr(data-label);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.66rem;
        font-weight: 700;
        line-height: 1.7;
        color: var(--muted);
        opacity: 0.75;
    }
    /* a cell with no matching header (actions) spans the full width */
    .data-table--cards tbody td:not([data-label]) {
        display: block;
        padding-top: 8px !important;
    }

    /* the first labelled cell carries the record's identity */
    .data-table--cards tbody td[data-label]:first-child {
        font-weight: 600;
        font-size: 0.95rem;
    }

    /* action clusters sit on one line, right-aligned, thumb-sized */
    /* :not([colspan]) matters — without it this outranks the empty-state
       rule below and centres nothing, leaving "No records" right-aligned */
    .data-table--cards tbody td.col-actions,
    .data-table--cards tbody td:last-child:not([data-label]):not([colspan]) {
        text-align: right !important;
        white-space: nowrap !important;
    }

    /* empty state keeps its full-width centred cell */
    .data-table--cards tbody tr > td[colspan] {
        display: block;
        text-align: center !important;
    }
    .data-table--cards tbody tr > td[colspan]::before { content: none; }
}

/* Scroll affordance for the report tables that stay as tables.
   .is-scrollable is set by initScrollableTableHint() only when the
   table really overflows, so a table that fits is never dimmed. */
@media (max-width: 991.98px) {
    .data-table-wrapper.is-scrollable {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }
    .data-table-wrapper.is-scrollable.is-scrolled-end {
        -webkit-mask-image: none;
                mask-image: none;
    }
}