/**
 * SalfaNet Modern Unified CSS v2.5
 * ================================
 * Single source of truth for all template layouts across all roles:
 *   AdminTemplate, UserTemplate, RouterTemplate, KangTagihTemplate,
 *   Customer Portal, auth_template, PublicTemplate
 *
 * Loaded AFTER bootstrap.min.css and all.min.css.
 * Replaces all inline <style> blocks in templates.
 */

/* ========================================
   0. FONTS (system font stack — no external CDN)
   ======================================== */
/* Inter & Poppins dihapus: gunakan system-ui sebagai pengganti */

/* ========================================
   1. CSS CUSTOM PROPERTIES (THEME)
   ======================================== */
:root {
    /* ── Primary: Ocean Blue ── */
    --sf-primary:          #3b82f6;
    --sf-primary-dark:     #1d4ed8;
    --sf-primary-light:    #bfdbfe;
    --sf-primary-rgb:      59, 130, 246;
    --sf-primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --sf-primary-hover:    #2563eb;

    /* ── Accent: Sky Blue ── */
    --sf-accent:           #0ea5e9;
    --sf-accent-light:     #bae6fd;
    --sf-accent-gradient:  linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);

    /* ── Semantic ── */
    --sf-success:          #10b981;
    --sf-success-light:    #d1fae5;
    --sf-success-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --sf-success-text:     #065f46;

    --sf-warning:          #f59e0b;
    --sf-warning-light:    #fef3c7;
    --sf-warning-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    /* Text color for warning badges/notes sitting on --sf-warning-light
       (e.g. "isolir"/"pending" badges across teknisi/agen/admin) - #92400e
       is dark amber, readable on the light tint in light mode, but becomes
       dark-on-dark once --sf-warning-light itself darkens in dark mode. */
    --sf-warning-text:     #92400e;

    --sf-danger:           #ef4444;
    --sf-danger-light:     #fee2e2;
    --sf-danger-gradient:  linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    --sf-danger-text:      #991b1b;

    --sf-info:             #06b6d4;
    --sf-info-light:       #cffafe;
    --sf-info-gradient:    linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    --sf-info-text:        #155e75;

    /* ── Neutrals (Slate scale) ── */
    --sf-white:   #ffffff;
    --sf-gray-50: #f8fafc;
    --sf-gray-100:#f1f5f9;
    --sf-gray-200:#e2e8f0;
    --sf-gray-300:#cbd5e1;
    --sf-gray-400:#94a3b8;
    --sf-gray-500:#64748b;
    --sf-gray-600:#475569;
    --sf-gray-700:#334155;
    --sf-gray-800:#1e293b;
    --sf-gray-900:#0f172a;

    /* ── Layout ── */
    --sf-sidebar-width:      280px;
    --sf-header-height:      56px;
    --sf-bottom-nav-height:  60px;
    --sf-safe-top:           env(safe-area-inset-top, 0px);
    --sf-safe-bottom:        env(safe-area-inset-bottom, 0px);

    /* ── Spacing Scale (4px base) ── */
    --sf-space-0:    0;
    --sf-space-1:    4px;
    --sf-space-2:    8px;
    --sf-space-3:    12px;
    --sf-space-4:    16px;
    --sf-space-5:    20px;
    --sf-space-6:    24px;
    --sf-space-8:    32px;
    --sf-space-10:   40px;
    --sf-space-12:   48px;
    --sf-space-16:   64px;

    /* ── Typography Scale ── */
    --sf-font-sans:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sf-font-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;
    --sf-text-xs:      0.75rem;     /* 12px */
    --sf-text-sm:      0.8125rem;   /* 13px */
    --sf-text-base:    0.875rem;    /* 14px */
    --sf-text-lg:      1rem;        /* 16px */
    --sf-text-xl:      1.125rem;    /* 18px */
    --sf-text-2xl:     1.25rem;     /* 20px */
    --sf-text-3xl:     1.5rem;      /* 24px */
    --sf-text-4xl:     2rem;        /* 32px */
    --sf-leading-tight:   1.25;
    --sf-leading-normal:  1.5;
    --sf-leading-relaxed: 1.625;
    --sf-weight-normal:   400;
    --sf-weight-medium:   500;
    --sf-weight-semibold: 600;
    --sf-weight-bold:     700;

    /* ── Radius scale — chosen to match values already in wide use across the
       app (so pointing existing components at these is a zero-diff rename,
       not a resize); ad hoc one-off literals elsewhere are left alone. ── */
    --sf-radius-xs:   6px;
    --sf-radius-sm:   8px;
    --sf-radius-md:   10px;
    --sf-radius-lg:   12px;
    --sf-radius-xl:   16px;
    --sf-radius-2xl:  20px;
    --sf-radius-pill: 999px;

    /* ── Components ── */
    --sf-card-radius:        var(--sf-radius-xl);
    --sf-card-radius-sm:     var(--sf-radius-lg);
    --sf-card-shadow:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sf-card-shadow-hover:  0 10px 25px rgba(0,0,0,.08);
    --sf-card-shadow-lg:     0 20px 40px rgba(0,0,0,.10);
    --sf-btn-radius:         var(--sf-radius-md);
    --sf-btn-radius-sm:      var(--sf-radius-sm);
    --sf-input-radius:       var(--sf-radius-md);
    --sf-transition:         all .25s cubic-bezier(.4,0,.2,1);
    --sf-transition-fast:    all .15s cubic-bezier(.4,0,.2,1);

    /* ── Shadow scale — elevation tiers. -md/-lg/-xl alias the existing card
       shadow tokens (so they re-theme automatically via that block's dark
       override); -xs/-sm/-modal are new and get their own dark values below
       since they have no existing base to alias. ── */
    --sf-shadow-xs:    0 1px 2px rgba(0,0,0,.04);
    --sf-shadow-sm:    0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
    --sf-shadow-md:    var(--sf-card-shadow);
    --sf-shadow-lg:    var(--sf-card-shadow-hover);
    --sf-shadow-xl:    var(--sf-card-shadow-lg);
    --sf-shadow-modal: 0 25px 50px -12px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.03);

    /* ── Elevation surface — modal/dropdown/toast/popover sit on this instead
       of the plain card surface (--sf-white), so they read as "above" the
       page's cards instead of blending into them. Same as --sf-white in
       light mode (no visual change there); gets its own lighter dark value
       below since dark mode currently only has 3 flat surface tones. ── */
    --sf-surface-raised: var(--sf-white);

    /* ── Focus ring — one shared treatment for inputs/buttons/nav items,
       replacing several ad hoc rgba(...) focus colors scattered per-component
       (e.g. admin forms previously hardcoded a violet ring that didn't match
       the blue ring used everywhere else). ── */
    --sf-focus-ring: 0 0 0 3px rgba(var(--sf-primary-rgb), .18);

    /* ── Sidebar header gradient ── */
    --sf-sidebar-header-bg:  linear-gradient(175deg, #0c1a3a 0%, #1e3a8a 100%);

    /* ── Overlay ── */
    --sf-overlay-bg:         rgba(15, 23, 42, 0.5);
    --sf-overlay-blur:       blur(4px);

    /* Legacy compat aliases — pages that use old var names still work */
    --primary:            var(--sf-primary);
    --primary-dark:       var(--sf-primary-dark);
    --primary-light:      var(--sf-primary-light);
    --primary-rgb:        var(--sf-primary-rgb);
    --primary-gradient:   var(--sf-primary-gradient);
    --primary-hover:      var(--sf-primary-hover);
    --accent:             var(--sf-accent);
    --accent-light:       var(--sf-accent-light);
    --accent-gradient:    var(--sf-accent-gradient);
    --success:            var(--sf-success);
    --success-light:      var(--sf-success-light);
    --success-gradient:   var(--sf-success-gradient);
    --warning:            var(--sf-warning);
    --warning-light:      var(--sf-warning-light);
    --warning-gradient:   var(--sf-warning-gradient);
    --danger:             var(--sf-danger);
    --danger-light:       var(--sf-danger-light);
    --danger-gradient:    var(--sf-danger-gradient);
    --info:               var(--sf-info);
    --info-light:         var(--sf-info-light);
    --info-gradient:      var(--sf-info-gradient);
    --white:              var(--sf-white);
    --gray-50:            var(--sf-gray-50);
    --gray-100:           var(--sf-gray-100);
    --gray-200:           var(--sf-gray-200);
    --gray-300:           var(--sf-gray-300);
    --gray-400:           var(--sf-gray-400);
    --gray-500:           var(--sf-gray-500);
    --gray-600:           var(--sf-gray-600);
    --gray-700:           var(--sf-gray-700);
    --gray-800:           var(--sf-gray-800);
    --gray-900:           var(--sf-gray-900);
    --sidebar-width:      var(--sf-sidebar-width);
    --header-height:      var(--sf-header-height);
    --bottom-nav-height:  var(--sf-bottom-nav-height);
    --card-border-radius: var(--sf-card-radius);
    --card-shadow:        var(--sf-card-shadow);
    --card-shadow-hover:  var(--sf-card-shadow-hover);
    --transition:         var(--sf-transition);
    --secondary-gradient: var(--sf-success-gradient);

    /* Admin page legacy aliases */
    --admin-primary:          var(--sf-primary);
    --admin-primary-dark:     var(--sf-primary-dark);
    --admin-primary-light:    var(--sf-primary-light);
    --admin-primary-rgb:      var(--sf-primary-rgb);
    --admin-primary-gradient: var(--sf-primary-gradient);
    --admin-primary-hover:    var(--sf-primary-hover);
    --admin-secondary:           var(--sf-primary-dark);
    --admin-secondary-gradient:  var(--sf-accent-gradient);
    --admin-success:             var(--sf-success);
    --admin-success-gradient:    var(--sf-success-gradient);
    --admin-warning:             var(--sf-warning);
    --admin-warning-gradient:    var(--sf-warning-gradient);
    --admin-danger:              var(--sf-danger);
    --admin-danger-gradient:     var(--sf-danger-gradient);
    --admin-info:                var(--sf-info);
    --admin-info-gradient:       var(--sf-info-gradient);
    --admin-dark:             var(--sf-gray-900);
    --admin-light:            var(--sf-gray-50);

    /* Unprefixed layout/safe-area aliases (AdminTemplate.php's old local :root) */
    --safe-top:    var(--sf-safe-top);
    --safe-bottom: var(--sf-safe-bottom);
}

/* ========================================
   1b. DARK MODE (override, not a parallel token set)
   ========================================
   Reassigns the neutral/shadow tokens only — --sf-primary/success/warning/
   danger/info and their *-gradient forms stay the same, they're already
   readable on a dark surface. Only the *-light tints (used as badge/icon
   backgrounds, meant to sit near-white in light mode) get darkened so they
   don't glow white-on-dark.

   Toggled via [data-theme="dark"] on <html>, set by an inline init script
   in templates/components/head.php (reads localStorage/prefers-color-scheme
   on first visit, a cookie on repeat visits — see that file for the
   zero-flash mechanism) and flipped at runtime by assets/js/theme-toggle.js.
   Every component below that already reads var(--sf-gray-*)/var(--sf-white)
   re-themes automatically; components with literal hex need their own
   [data-theme="dark"] rule alongside them (see sections 4+ in this file). */
[data-theme="dark"] {
    /* Surface ladder lightened (page/card/border only - text tones below are
       unchanged) so the page reads as a soft dark slate rather than
       near-black. Elevation gap between page/card/border is kept
       proportional to before, just shifted up as a group. */
    --sf-white:    #212c40;
    --sf-gray-50:  #182233;
    --sf-gray-100: #212c40;
    --sf-gray-200: #3a4863;
    --sf-gray-300: #475569;
    --sf-gray-400: #64748b;
    --sf-gray-500: #94a3b8;
    --sf-gray-600: #cbd5e1;
    --sf-gray-700: #e2e8f0;
    --sf-gray-800: #f1f5f9;
    --sf-gray-900: #f8fafc;

    --sf-primary-light: rgba(59, 130, 246, .18);
    --sf-accent-light:  rgba(14, 165, 233, .18);
    --sf-success-light: rgba(16, 185, 129, .18);
    --sf-warning-light: rgba(245, 158, 11, .18);
    --sf-danger-light:  rgba(239, 68, 68, .18);
    --sf-info-light:    rgba(6, 182, 212, .18);
    /* Text-on-*-light pairs: same dark-on-dark problem as --sf-warning-text
       (see :root definition), same fix — a light tint of each hue instead
       of the light-mode dark shade, once the *-light backgrounds darken. */
    --sf-success-text:  #6ee7b7;
    --sf-warning-text:  #fde68a;
    --sf-danger-text:   #fca5a5;
    --sf-info-text:     #67e8f9;

    --sf-card-shadow:       0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
    --sf-card-shadow-hover: 0 10px 25px rgba(0,0,0,.5);
    --sf-card-shadow-lg:    0 20px 40px rgba(0,0,0,.6);
    --sf-overlay-bg:        rgba(0, 0, 0, .7);

    /* -md/-lg/-xl re-theme automatically via the --sf-card-shadow* redefines
       above; -xs/-sm/-modal have no light-mode base to alias so they need
       their own dark value here. */
    --sf-shadow-xs:    0 1px 2px rgba(0,0,0,.35);
    --sf-shadow-sm:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --sf-shadow-modal: 0 25px 50px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);

    /* 4th surface tone: page(#182233) < card(#212c40) < raised(this) < border(#3a4863).
       Fixes modals/dropdowns/toasts rendering as the exact same flat tone as
       an ordinary card underneath them. */
    --sf-surface-raised: #2a3750;

    /* Slightly stronger than the light-mode ring so it stays visible against
       dark surfaces. */
    --sf-focus-ring: 0 0 0 3px rgba(var(--sf-primary-rgb), .3);

    /* Bootstrap 5.3 ships its own [data-bs-theme="dark"] variable set —
       rather than fighting it or re-styling .modal-content/.dropdown-menu/
       .form-control one by one, point Bootstrap's own root variables at our
       tokens. theme-toggle.js sets data-bs-theme alongside data-theme, so
       every native Bootstrap component (modals, dropdowns, forms, cards)
       reads these and stays on the same palette automatically. */
    --bs-body-bg:               var(--sf-gray-50);
    --bs-body-color:            var(--sf-gray-700);
    --bs-border-color:          var(--sf-gray-200);
    --bs-border-color-translucent: var(--sf-gray-200);
    --bs-tertiary-bg:           var(--sf-gray-100);
    --bs-tertiary-color:        var(--sf-gray-500);
    --bs-secondary-bg:          var(--sf-gray-100);
    --bs-secondary-color:       var(--sf-gray-500);
    --bs-modal-bg:              var(--sf-surface-raised);
    --bs-modal-color:           var(--sf-gray-700);
    --bs-modal-border-color:    var(--sf-gray-200);
    --bs-modal-header-border-color: var(--sf-gray-200);
    --bs-modal-footer-border-color: var(--sf-gray-200);
    --bs-dropdown-bg:           var(--sf-surface-raised);
    --bs-dropdown-color:        var(--sf-gray-700);
    --bs-dropdown-link-color:   var(--sf-gray-700);
    --bs-dropdown-link-hover-bg:    var(--sf-gray-100);
    --bs-dropdown-link-hover-color: var(--sf-primary);
    --bs-dropdown-border-color: var(--sf-gray-200);
    --bs-card-bg:               var(--sf-white);
    --bs-card-color:            var(--sf-gray-700);
    --bs-card-border-color:     var(--sf-gray-200);

    /* Bootstrap's own [data-bs-theme=dark] never redefines --bs-light-rgb/
       --bs-dark-rgb/--bs-white-rgb, so raw .bg-light/.text-dark/.bg-white/
       .border-light utility classes (used ad hoc across ~70 files, e.g.
       page-local "bg-light" info boxes) stay hardcoded to their light-mode
       color even with dark mode on, since those utilities read directly
       from rgba(var(--bs-*-rgb),opacity) !important. Redefining the RGB
       triplets here fixes every such usage app-wide without touching
       each file. */
    --bs-light-rgb: 30, 41, 59;
    --bs-dark-rgb: 241, 245, 249;
    --bs-white-rgb: 30, 41, 59;
}

/* --bs-dark-rgb above is flipped light so .text-dark (dark text meant for a light
   background) still reads on the new dark page background - but that same variable
   also drives .bg-dark/.border-dark/.link-dark (things meant to STAY dark for
   contrast, e.g. "badge bg-dark"), so the flip turns those backgrounds/borders
   light too while their paired text (white, from Bootstrap's own defaults) stays
   white - invisible white-on-near-white. Restore a genuinely dark value for just
   those three utilities without touching --bs-dark-rgb itself. */
[data-theme="dark"] .bg-dark {
    background-color: var(--sf-gray-200) !important;
}
[data-theme="dark"] .border-dark {
    border-color: var(--sf-gray-200) !important;
}
[data-theme="dark"] .link-dark {
    color: var(--sf-gray-200) !important;
}

/* ========================================
   2. GLOBAL RESET & TYPOGRAPHY
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    line-height: var(--sf-leading-relaxed);
    color: var(--sf-gray-700);
    background: var(--sf-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    overflow-x: hidden;
}

/* ========================================
   0b. SCROLLBAR & MODAL/DROPDOWN LAYOUT SHIFT FIX
   Prevents content from shifting when modal/dropdown opens
   ======================================== */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

/* Prevent Bootstrap from adding padding-right to body when modal opens */
body.modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}

/* Modal must always be position: fixed relative to viewport, not affected by ancestor transforms/filters */
.modal {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1055;
    width: 100vw;
    height: 100vh;
    overflow: hidden auto;
    scrollbar-gutter: stable;
    outline: 0;
}

/* Modal dialog centered properly */
.modal-dialog {
    margin: auto;
    min-height: calc(100vh - 1rem);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.modal-dialog > * {
    pointer-events: auto;
}

/* Modal backdrop fixed to viewport */
.modal-backdrop {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
}

/* Dropdown menu in topbar — absolute positioning works now that backdrop-filter is removed */
.topbar .dropdown-menu,
.admin-header .dropdown-menu {
    position: absolute !important;
    z-index: 1080 !important;
}

h1, .h1 { font-size: var(--sf-text-2xl); font-weight: var(--sf-weight-bold); color: var(--sf-gray-800); margin-bottom: var(--sf-space-2); }
h2, .h2 { font-size: var(--sf-text-xl); font-weight: var(--sf-weight-bold); color: var(--sf-gray-800); margin-bottom: var(--sf-space-2); }
h3, .h3 { font-size: var(--sf-text-lg); font-weight: var(--sf-weight-semibold); color: var(--sf-gray-800); margin-bottom: var(--sf-space-2); }
h4, .h4 { font-size: var(--sf-text-base); font-weight: var(--sf-weight-semibold); color: var(--sf-gray-700); margin-bottom: var(--sf-space-1); }
h5, .h5 { font-size: var(--sf-text-sm); font-weight: var(--sf-weight-semibold); color: var(--sf-gray-600); margin-bottom: var(--sf-space-1); }
h6, .h6 { font-size: var(--sf-text-xs); font-weight: var(--sf-weight-semibold); color: var(--sf-gray-500); margin-bottom: var(--sf-space-1); }

p { margin-bottom: .75rem; color: var(--sf-gray-600); }

a { color: var(--sf-primary); text-decoration: none; transition: var(--sf-transition); }
a:hover { color: var(--sf-primary-dark); }

/* ========================================
   3. SIDEBAR (all roles)
   ======================================== */
/* Admin button — violet gradient (used across admin pages) */
.btn-admin-primary {
    background: var(--sf-primary-gradient);
    color: #fff;
    border: none;
    border-radius: var(--sf-btn-radius);
    font-weight: 600;
    font-size: .78rem;
    padding: .5rem 1.25rem;
    transition: var(--sf-transition);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.btn-admin-primary:hover,
.btn-admin-primary:focus {
    background: linear-gradient(135deg, var(--sf-primary-hover), var(--sf-primary-dark));
    color: #fff;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}
.btn-admin-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.admin-sidebar {
    width: var(--sf-sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: #1e1b4b;
    box-shadow: 2px 0 12px rgba(0,0,0,.25);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar,
.portal-sidebar {
    width: var(--sf-sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--sf-white);
    box-shadow: 1px 0 0 var(--sf-gray-200);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

/* Scrollbar */
.sidebar::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.portal-sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.portal-sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.portal-sidebar::-webkit-scrollbar-thumb { background: var(--sf-gray-300); border-radius: 4px; }

/* Sidebar header (brand area) */
.sidebar-header,
.admin-brand,
.sidebar-brand-wrap {
    padding: 1.25rem 1rem;
    text-align: center;
    background: var(--sf-sidebar-header-bg);
    color: white;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    text-decoration: none;
    color: white;
}

.sidebar-brand-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    backdrop-filter: blur(10px);
}

.sidebar-brand-text {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.sidebar-role-badge {
    display: inline-block;
    margin-top: .5rem;
    padding: .2rem .75rem;
    background: rgba(255,255,255,.15);
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    color: white;
}

/* Close button (mobile) */
.sidebar-close-btn {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: .875rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: var(--sf-transition);
}
.sidebar-close-btn:hover { background: rgba(255,255,255,.25); }

/* ── Sidebar Menu ── */
.sidebar-menu,
.friendly-sidebar-menu,
.kang-tagih-sidebar-menu,
.admin-menu,
.sidebar-nav {
    padding: .75rem;
}

.menu-section {
    margin-bottom: .75rem;
}

/* UserTemplate section label */
.section-header {
    margin-bottom: .375rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .65rem !important;
    font-weight: 700;
    color: var(--sf-gray-400);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 0;
    padding: .25rem .5rem;
    line-height: 1;
}

/* RouterTemplate section label */
.menu-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .65rem;
    font-weight: 700;
    color: var(--sf-gray-400);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .5rem .5rem .25rem;
    margin-bottom: .25rem;
}

.menu-header i {
    font-size: .7rem;
    color: var(--sf-primary);
    opacity: .7;
}

/* UserTemplate menu item container */
.menu-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Menu card item (User, KangTagih) */
.menu-card {
    margin-bottom: 2px;
    background: var(--sf-white);
    border-radius: var(--sf-card-radius);
    border: 1px solid var(--sf-gray-100);
    overflow: hidden;
    position: relative;
    transition: var(--sf-transition);
}

.menu-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--sf-primary-rgb), .08);
}

.menu-card.active {
    background: rgba(var(--sf-primary-rgb), .05);
    border-color: rgba(var(--sf-primary-rgb), .2);
}

.menu-card .card-link,
.menu-card a.card-link,
.menu-card .card-trigger {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    color: var(--sf-gray-700);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--sf-transition);
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
}

.menu-card .card-link:hover,
.menu-card a.card-link:hover,
.menu-card .card-trigger:hover {
    background: rgba(var(--sf-primary-rgb), .06);
    color: var(--sf-primary);
}

.menu-card .card-link.active,
.menu-card a.card-link.active,
.menu-card.active .card-link,
.menu-card.active .card-trigger {
    background: rgba(var(--sf-primary-rgb), .08);
    color: var(--sf-primary);
    font-weight: 600;
}

/* card-icon (UserTemplate generated markup) */
.menu-card .card-icon,
.menu-card .menu-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    background: var(--sf-gray-100);
    color: var(--sf-primary);
    transition: var(--sf-transition);
}

.menu-card[data-color="success"] .card-icon { background: var(--sf-success-light); color: var(--sf-success); }
.menu-card[data-color="warning"] .card-icon { background: var(--sf-warning-light); color: var(--sf-warning); }
.menu-card[data-color="danger"] .card-icon  { background: var(--sf-danger-light); color: var(--sf-danger); }
.menu-card[data-color="info"] .card-icon    { background: var(--sf-info-light); color: var(--sf-info); }

.menu-card .card-link:hover .card-icon,
.menu-card .card-link.active .card-icon,
.menu-card.active .card-link .card-icon,
.menu-card .card-trigger:hover .card-icon,
.menu-card.active .card-trigger .card-icon {
    background: rgba(var(--sf-primary-rgb), .15);
    color: var(--sf-primary);
}

.menu-card .card-link:hover .menu-icon,
.menu-card .card-link.active .menu-icon,
.menu-card.active .card-link .menu-icon {
    background: rgba(var(--sf-primary-rgb), .12);
    color: var(--sf-primary);
}

/* card-content and card-title inside sidebar */
.menu-card .card-content {
    flex: 1;
    min-width: 0;
}

.menu-card .card-title {
    font-weight: 700;
    font-size: .8rem !important;
    color: var(--sf-gray-800);
    line-height: 1.3;
    margin-bottom: 0;
}

.menu-card .card-link:hover .card-title,
.menu-card .card-link.active .card-title,
.menu-card.active .card-title {
    color: var(--sf-primary);
}

.menu-card .card-actions {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-left: auto;
}

/* Nav-link style (Router, Admin) */
.sidebar .nav-link,
.admin-sidebar .menu-item a,
.admin-sidebar a.menu-item,
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-radius: var(--sf-btn-radius);
    color: var(--sf-gray-700);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--sf-transition);
    background: var(--sf-white);
    border: 1px solid var(--sf-gray-100);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    min-height: 42px;
    margin-bottom: 3px;
}

.sidebar .nav-link:hover,
.admin-sidebar .menu-item a:hover,
.admin-sidebar a.menu-item:hover,
.sidebar-nav a:hover {
    background: var(--sf-gray-50) !important;
    color: var(--sf-primary) !important;
    border-color: rgba(var(--sf-primary-rgb), .25);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--sf-primary-rgb), .1);
}

.sidebar .nav-link.active,
.admin-sidebar .menu-item a.active,
.admin-sidebar a.menu-item.active,
.sidebar-nav a.active {
    background: var(--sf-primary-gradient) !important;
    color: white !important;
    border-color: var(--sf-primary);
    box-shadow: 0 4px 12px rgba(var(--sf-primary-rgb), .3);
    font-weight: 700;
}

/* Admin sidebar — dark themed override for nav items */
.admin-sidebar a.menu-item {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75);
    box-shadow: none;
}
.admin-sidebar a.menu-item:hover {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.25) !important;
    box-shadow: none !important;
    transform: translateX(2px);
}
.admin-sidebar a.menu-item.active {
    background: var(--sf-primary-gradient) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.45) !important;
}

/* Admin sidebar feather icons */
.admin-sidebar a.menu-item svg,
.admin-sidebar a.menu-item i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255,255,255,.6);
    stroke: rgba(255,255,255,.6);
}
.admin-sidebar a.menu-item:hover svg,
.admin-sidebar a.menu-item:hover i {
    color: #fff;
    stroke: #fff;
}
.admin-sidebar a.menu-item.active svg,
.admin-sidebar a.menu-item.active i {
    color: white !important;
    stroke: white !important;
}

/* Menu section title (Admin sidebar) */
.menu-section-title {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .75rem .75rem .25rem;
    margin-bottom: .25rem;
}

/* Admin sidebar submenu on dark bg */
.admin-sidebar .submenu {
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.08);
}
.admin-sidebar .submenu-item {
    color: rgba(255,255,255,.6);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-sidebar .submenu-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.admin-sidebar .submenu-item.active {
    background: rgba(59,130,246,.2);
    color: #bfdbfe;
    border-left: 3px solid #3b82f6;
    font-weight: 600;
}

/* Submenu wrapper */
.menu-item-wrapper {
    margin-bottom: 2px;
}

/* Arrow rotation on expanded submenu parent */
.admin-sidebar a.menu-item .menu-item-arrow {
    width: 14px;
    height: 14px;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .3s ease;
}
.admin-sidebar a.menu-item.expanded .menu-item-arrow {
    transform: rotate(90deg);
}

.menu-item-text {
    flex: 1;
    min-width: 0;
}

.sidebar .nav-link i {
    width: 18px;
    text-align: center;
    font-size: .8rem;
    flex-shrink: 0;
    color: var(--sf-primary);
}

.sidebar .nav-link span { flex: 1; }

.sidebar .nav-link.active i { color: white !important; }

/* Color variants for nav-link */
.sidebar .nav-link[data-color="success"] i { color: var(--sf-success); }
.sidebar .nav-link[data-color="warning"] i { color: var(--sf-warning); }
.sidebar .nav-link[data-color="danger"] i  { color: var(--sf-danger); }
.sidebar .nav-link[data-color="info"] i    { color: var(--sf-info); }
.sidebar .nav-link[data-color="success"]:hover { border-color: var(--sf-success) !important; background: rgba(16,185,129,.05) !important; color: var(--sf-success) !important; }
.sidebar .nav-link[data-color="warning"]:hover { border-color: var(--sf-warning) !important; background: rgba(245,158,11,.05) !important; color: var(--sf-warning) !important; }
.sidebar .nav-link[data-color="danger"]:hover  { border-color: var(--sf-danger) !important; background: rgba(239,68,68,.05) !important; color: var(--sf-danger) !important; }
.sidebar .nav-link[data-color="info"]:hover    { border-color: var(--sf-info) !important; background: rgba(59,130,246,.05) !important; color: var(--sf-info) !important; }

/* Submenu */
.friendly-submenu,
.sidebar-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: var(--sf-gray-50);
    border-top: 1px solid var(--sf-gray-100);
}

.friendly-submenu.show,
.sidebar-submenu.show {
    max-height: 500px;
}

/* RouterTemplate submenu — display:none/block pattern */
.submenu {
    display: none;
    background: var(--sf-gray-50);
    border-radius: var(--sf-btn-radius);
    border: 1px solid var(--sf-gray-100);
    margin: 2px 0 4px;
    overflow: hidden;
}

.submenu.show {
    display: block;
}

.submenu .nav-link {
    padding: .4rem .75rem !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: var(--sf-gray-600) !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: unset !important;
    border-bottom: 1px solid var(--sf-gray-100) !important;
}

.submenu .nav-item:last-child .nav-link {
    border-bottom: none !important;
}

.submenu .nav-link:hover {
    background: var(--sf-white) !important;
    color: var(--sf-primary) !important;
}

.submenu .nav-link.active {
    background: var(--sf-white) !important;
    color: var(--sf-primary) !important;
    border-left: 3px solid var(--sf-primary) !important;
}

.submenu-arrow {
    transition: transform .3s ease;
    font-size: .75rem;
    opacity: .7;
    margin-left: auto;
    flex-shrink: 0;
}

.sidebar .nav-link[aria-expanded="true"] .submenu-arrow,
.sidebar .nav-link.active .submenu-arrow {
    transform: rotate(90deg);
    opacity: 1;
}

.submenu-item,
.submenu-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    color: var(--sf-gray-600);
    font-size: .75rem;
    text-decoration: none;
    transition: var(--sf-transition);
    border-bottom: 1px solid var(--sf-gray-100);
}

.submenu-item:last-child,
.submenu-link:last-child {
    border-bottom: none;
}

.submenu-item:hover,
.submenu-link:hover {
    background: var(--sf-white);
    color: var(--sf-primary);
}

.submenu-item.active,
.submenu-link.active {
    background: var(--sf-white);
    color: var(--sf-primary);
    font-weight: 600;
    border-left: 3px solid var(--sf-primary);
}

.submenu-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-white);
    color: var(--sf-gray-500);
    font-size: .7rem;
    flex-shrink: 0;
    transition: var(--sf-transition);
}

.submenu-item:hover .submenu-icon,
.submenu-item.active .submenu-icon {
    background: var(--sf-primary);
    color: white;
}

.submenu-content { flex: 1; min-width: 0; }

.submenu-title {
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.3;
}

/* Dropdown arrow */
.dropdown-arrow {
    transition: transform .3s ease;
    color: var(--sf-gray-400);
    font-size: .875rem;
    flex-shrink: 0;
}

.menu-card.active .dropdown-arrow,
.dropdown-card.active .dropdown-arrow {
    transform: rotate(180deg);
    color: var(--sf-primary);
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 1029;
    opacity: 0;
    animation: sfFadeIn .2s ease forwards;
}

@keyframes sfFadeIn { to { opacity: 1; } }

/* ========================================
   4. CONTENT WRAPPER & TOPBAR
   ======================================== */
.content-wrapper,
.admin-content,
.portal-main {
    margin-left: var(--sf-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin .3s cubic-bezier(.4,0,.2,1);
}

.topbar,
.admin-header,
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: var(--sf-header-height);
    height: auto;
    background: var(--sf-white);
    border-bottom: 1px solid var(--sf-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
}
[data-theme="dark"] .admin-header,
[data-theme="dark"] .portal-topbar {
    background: rgba(30, 41, 59, .98);
}

.topbar-left,
.admin-header .admin-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topbar-left h4,
.topbar-left h3,
.admin-header h4,
.admin-header .admin-header-title {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--sf-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    line-height: 1.3;
}

.admin-header .admin-header-subtitle {
    margin: 0;
    font-size: .72rem;
    color: var(--sf-gray-500);
    line-height: 1.2;
    white-space: nowrap;
}

/* Admin user info in header */
.admin-user-info {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.admin-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sf-primary-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.topbar-controls,
.admin-header .admin-header-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* Menu toggle button */
.menu-toggle,
.admin-menu-toggle,
.mobile-menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: var(--sf-btn-radius);
    border: 1px solid var(--sf-gray-200);
    background: var(--sf-white);
    color: var(--sf-gray-600);
    font-size: 1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: var(--sf-transition);
}
.menu-toggle:hover,
.admin-menu-toggle:hover { background: var(--sf-gray-50); }

/* Main content */
main,
.admin-page-content,
.portal-body {
    flex: 1;
    padding: 1.25rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ── Device selector ── */
.device-selector .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    border-radius: var(--sf-btn-radius);
    font-size: .8125rem;
    font-weight: 500;
    border: 1px solid var(--sf-gray-200);
    background: var(--sf-white);
    color: var(--sf-gray-700);
    transition: var(--sf-transition);
}
.device-selector .dropdown-toggle:hover { border-color: var(--sf-primary-light); }

.device-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    background: rgba(var(--sf-primary-rgb), .1);
    color: var(--sf-primary);
}

/* ========================================
   5. CARDS
   ======================================== */
.card,
.custom-card {
    background: var(--sf-white);
    border: 1px solid var(--sf-gray-200);
    border-radius: var(--sf-card-radius);
    box-shadow: var(--sf-card-shadow);
    transition: var(--sf-transition);
    overflow: hidden;
}

.card:hover,
.custom-card:hover {
    box-shadow: var(--sf-card-shadow-hover);
}

.card-header {
    background: var(--sf-white);
    border-bottom: 1px solid var(--sf-gray-100);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.card-body,
.custom-card-body {
    padding: 1.25rem;
}

.card-footer {
    background: var(--sf-gray-50);
    border-top: 1px solid var(--sf-gray-100);
    padding: .75rem 1.25rem;
}

.card-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--sf-gray-800);
    margin-bottom: .5rem;
}

/* Stat cards */
.stat-card,
.stats-card {
    border: none;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sf-primary-gradient);
    opacity: 0;
    transition: var(--sf-transition);
}

.stat-card:hover::before { opacity: 1; }

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--sf-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.bg-primary-light { background: rgba(var(--sf-primary-rgb), .1) !important; }
.bg-success-light { background: rgba(16,185,129,.1) !important; }
.bg-warning-light { background: rgba(245,158,11,.1) !important; }
.bg-danger-light  { background: rgba(239,68,68,.1) !important; }
.bg-info-light    { background: rgba(6,182,212,.1) !important; }

.sf-stat-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sf-gray-500);
    margin-bottom: .2rem;
}
.sf-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sf-gray-800);
    line-height: 1.1;
    margin-bottom: .15rem;
}
.sf-stat-sub {
    font-size: .75rem;
    color: var(--sf-gray-400);
}

/* ========================================
   6. BUTTONS
   ======================================== */
.btn {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    border-radius: var(--sf-btn-radius);
    transition: var(--sf-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .8125rem;
    border: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn:active { transform: scale(.97); }

/* One shared focus-visible treatment for keyboard/a11y focus, reused instead
   of components each hand-rolling their own focus color. */
.btn:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: var(--sf-focus-ring);
}

.btn-primary {
    background: var(--sf-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--sf-primary-rgb), .3);
}
.btn-primary:hover {
    background: var(--sf-primary-hover);
    box-shadow: 0 4px 14px rgba(var(--sf-primary-rgb), .35);
    color: #fff;
}

.btn-success {
    background: var(--sf-success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.btn-success:hover { background: #059669; color: #fff; }

.btn-danger {
    background: var(--sf-danger);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239,68,68,.3);
}
.btn-danger:hover { background: #dc2626; color: #fff; }

.btn-warning {
    background: var(--sf-warning);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245,158,11,.25);
}
.btn-warning:hover { background: #d97706; color: #fff; }

.btn-info {
    background: var(--sf-info);
    color: #fff;
    box-shadow: 0 2px 8px rgba(6,182,212,.25);
}
.btn-info:hover { background: #0891b2; color: #fff; }

.btn-secondary {
    background: var(--sf-gray-500);
    color: #fff;
}
.btn-secondary:hover { background: var(--sf-gray-600); color: #fff; }

.btn-outline-primary {
    border: 1.5px solid var(--sf-primary);
    color: var(--sf-primary);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--sf-primary);
    color: #fff;
}

.btn-outline-secondary {
    border: 1.5px solid var(--sf-gray-300);
    color: var(--sf-gray-600);
    background: transparent;
}
.btn-outline-secondary:hover { background: var(--sf-gray-100); color: var(--sf-gray-700); }

.btn-outline-success {
    border: 1.5px solid var(--sf-success);
    color: var(--sf-success);
    background: transparent;
}
.btn-outline-success:hover { background: var(--sf-success); color: #fff; }

.btn-outline-danger {
    border: 1.5px solid var(--sf-danger);
    color: var(--sf-danger);
    background: transparent;
}
.btn-outline-danger:hover { background: var(--sf-danger); color: #fff; }

.btn-outline-warning {
    border: 1.5px solid var(--sf-warning);
    color: var(--sf-warning);
    background: transparent;
}
.btn-outline-warning:hover { background: var(--sf-warning); color: #fff; }

.btn-outline-info {
    border: 1.5px solid var(--sf-info);
    color: var(--sf-info);
    background: transparent;
}
.btn-outline-info:hover { background: var(--sf-info); color: #fff; }

.btn-sm {
    padding: .3rem .65rem;
    font-size: .75rem;
    min-height: 30px;
    border-radius: var(--sf-radius-sm);
}

.btn-xs {
    padding: .2rem .5rem;
    font-size: .6875rem;
    min-height: 26px;
    border-radius: var(--sf-radius-xs);
}

.btn-lg {
    padding: .625rem 1.5rem;
    font-size: .9375rem;
    min-height: 44px;
}

/* ========================================
   7. TABLES
   ======================================== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--sf-card-radius);
}

.table {
    font-size: .8125rem;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .6rem .75rem;
    vertical-align: middle;
}

.table thead th {
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sf-gray-500);
    background: var(--sf-gray-50);
    border-bottom: 2px solid var(--sf-gray-200);
    white-space: nowrap;
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--sf-primary-rgb), .03);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--sf-gray-50);
}

/* ========================================
   8. FORMS
   ======================================== */
.form-control,
.form-select {
    border-radius: var(--sf-input-radius);
    border: 1.5px solid var(--sf-gray-200);
    padding: .5rem .875rem;
    font-size: .8125rem;
    transition: var(--sf-transition);
    background-color: var(--sf-white);
    color: var(--sf-gray-800);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sf-primary);
    box-shadow: var(--sf-focus-ring);
}

.form-label {
    font-weight: 500;
    font-size: .8125rem;
    color: var(--sf-gray-700);
    margin-bottom: .375rem;
}

.input-group-text {
    border-radius: var(--sf-input-radius);
    border: 1.5px solid var(--sf-gray-200);
    background: var(--sf-gray-50);
    font-size: .8125rem;
}

.form-check-input:checked {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
}

/* ========================================
   9. BADGES
   ======================================== */
.badge {
    font-weight: 600;
    font-size: .6875rem;
    padding: .3em .6em;
    border-radius: var(--sf-radius-xs);
    letter-spacing: .02em;
}

/* ========================================
   10. DROPDOWN MENUS
   ======================================== */
.dropdown-menu {
    --bs-dropdown-min-width: 8rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.25rem;
    --bs-dropdown-font-size: 0.8125rem;
    --bs-dropdown-border-radius: var(--sf-radius-sm);
    --bs-dropdown-box-shadow: var(--sf-shadow-lg);
    border: 1px solid var(--sf-gray-200);
    border-radius: var(--sf-radius-sm);
    box-shadow: var(--sf-shadow-lg);
    padding: .25rem;
    min-width: 8rem;
}

/* Disable Bootstrap .fade transition — prevents double animation */
.dropdown-menu.fade {
    transition: none !important;
}

/* No custom animation — eliminates the second transition that caused position shift */

.dropdown-item {
    border-radius: var(--sf-radius-xs);
    padding: .3rem .5rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--sf-gray-600);
    transition: background .1s ease, color .1s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--sf-primary-rgb), .06);
    color: var(--sf-primary);
}

.dropdown-divider {
    margin: .375rem 0;
    border-color: var(--sf-gray-100);
}

/* ========================================
   11. ALERTS
   ======================================== */
.alert {
    border-radius: var(--sf-radius-lg);
    border: none;
    font-size: .8125rem;
    padding: .875rem 1.25rem;
}

.alert-success { background: var(--sf-success-light); color: var(--sf-success-text); }
.alert-danger  { background: var(--sf-danger-light);  color: var(--sf-danger-text); }
.alert-warning { background: var(--sf-warning-light); color: var(--sf-warning-text); }
.alert-info    { background: var(--sf-info-light);    color: var(--sf-info-text); }
/* Bootstrap's native .alert-secondary reads --bs-secondary-bg-subtle, which
   Bootstrap's own [data-bs-theme=dark] sets to a near-black #161719 - a
   jarring, un-themed patch next to the app's --sf-gray-* dark surfaces.
   Route it through our own tokens instead, matching the four variants above. */
.alert-secondary { background: var(--sf-gray-100); color: var(--sf-gray-600); }

/* ========================================
   12. BOTTOM NAVIGATION (Mobile)
   ======================================== */
.app-bottom-nav,
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sf-white);
    border-top: 1px solid var(--sf-gray-200);
    z-index: 1040;
    padding-bottom: var(--sf-safe-bottom);
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}

.app-bottom-nav-inner,
.bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: var(--sf-bottom-nav-height);
    max-width: 500px;
    margin: 0 auto;
}

.bottom-nav-item,
.bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    text-decoration: none;
    color: var(--sf-gray-400);
    font-size: .625rem;
    font-weight: 500;
    transition: var(--sf-transition);
    position: relative;
    padding: .25rem 0;
}

.bottom-nav-item i,
.bnav-item i {
    font-size: 1.125rem;
    transition: var(--sf-transition);
}

.bottom-nav-item.active,
.bnav-item.active {
    color: var(--sf-primary);
}

.bottom-nav-item.active::before,
.bnav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--sf-primary);
    border-radius: 0 0 3px 3px;
}

.bottom-nav-item:hover,
.bnav-item:hover {
    color: var(--sf-primary);
}

/* ========================================
   13. TOAST NOTIFICATIONS (Unified)
   ======================================== */
.sf-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 380px;
    width: calc(100% - 2rem);
    pointer-events: none;
}

.sf-toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--sf-radius-lg);
    background: var(--sf-surface-raised);
    box-shadow: var(--sf-shadow-lg);
    border-left: 4px solid var(--sf-gray-400);
    animation: sfToastIn .35s cubic-bezier(.21,1.02,.73,1) forwards;
    pointer-events: auto;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--sf-gray-700);
    position: relative;
    overflow: hidden;
}

.sf-toast.sf-toast-out {
    animation: sfToastOut .3s ease forwards;
}

.sf-toast.sf-toast-success { border-left-color: var(--sf-success); }
.sf-toast.sf-toast-danger  { border-left-color: var(--sf-danger);  }
.sf-toast.sf-toast-warning { border-left-color: var(--sf-warning); }
.sf-toast.sf-toast-info    { border-left-color: var(--sf-info);    }

.sf-toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.sf-toast-success .sf-toast-icon { background: var(--sf-success-light); color: var(--sf-success); }
.sf-toast-danger  .sf-toast-icon { background: var(--sf-danger-light);  color: var(--sf-danger);  }
.sf-toast-warning .sf-toast-icon { background: var(--sf-warning-light); color: var(--sf-warning); }
.sf-toast-info    .sf-toast-icon { background: var(--sf-info-light);    color: var(--sf-info);    }

.sf-toast-body {
    flex: 1;
    min-width: 0;
}

.sf-toast-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--sf-gray-100);
    border-radius: var(--sf-radius-xs);
    color: var(--sf-gray-400);
    font-size: .625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sf-transition);
    padding: 0;
}
.sf-toast-close:hover { background: var(--sf-gray-200); color: var(--sf-gray-600); }

/* Progress bar at bottom of toast */
.sf-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: .3;
    animation: sfToastProgress 5s linear forwards;
}

@keyframes sfToastIn {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes sfToastOut {
    from { opacity: 1; transform: translateX(0); max-height: 200px; margin-bottom: .5rem; }
    to   { opacity: 0; transform: translateX(100%); max-height: 0; margin-bottom: 0; padding: 0; }
}

@keyframes sfToastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* Also style legacy Bootstrap .toast-container for backward compat */
.toast-container { z-index: 9999 !important; }

/* ========================================
   14. MODALS
   ======================================== */
.modal-content {
    border-radius: var(--sf-radius-xl);
    border: none;
    box-shadow: var(--sf-shadow-modal);
}

.modal-header {
    border-bottom: 1px solid var(--sf-gray-100);
    padding: 1.25rem 1.5rem;
}

.modal-body { padding: 1.5rem; }

.modal-footer {
    border-top: 1px solid var(--sf-gray-100);
    padding: 1rem 1.5rem;
}

/* ========================================
   15. PAGE-SPECIFIC HELPERS
   ======================================== */
.container-fluid.responsive-padding {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Selected row */
.selected-row,
tr.table-active {
    background: rgba(var(--sf-primary-rgb), .06) !important;
}

/* Saldo card (User sidebar) */
.saldo-card .card {
    background: linear-gradient(135deg, var(--sf-white) 0%, var(--sf-gray-50) 100%);
    border: 1px solid var(--sf-gray-100);
}

.saldo-item { text-align: center; padding: .5rem; }
.saldo-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .25rem;
    font-size: .7rem;
    color: var(--sf-gray-500);
}
.saldo-amount { font-size: .8rem; font-weight: 700; color: var(--sf-gray-800); }

/* Loading spinner modal */
#loading-spinner .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Auth pages */
.auth-gradient-header {
    background: var(--sf-primary-gradient);
    padding: 2rem 1.5rem;
    text-align: center;
    color: white;
    border-radius: 0 0 24px 24px;
}

.auth-card {
    max-width: 420px;
    margin: -2rem auto 2rem;
    border-radius: var(--sf-card-radius);
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    background: var(--sf-white);
}

/* ========================================
   16. RESPONSIVE — MOBILE FIRST
   ======================================== */

/* Tablet & below */
@media (max-width: 991.98px) {
    .sidebar,
    .admin-sidebar,
    .portal-sidebar {
        transform: translateX(-100%);
        /* Ensure content is not hidden behind bottom nav */
        padding-bottom: calc(var(--sf-bottom-nav-height, 60px) + var(--sf-safe-bottom, 0px) + 0.5rem);
    }

    .sidebar.show,
    .sidebar.active,
    .admin-sidebar.active,
    .portal-sidebar.open {
        transform: translateX(0);
        /* Must be above bottom-nav (1040) so full sidebar is visible */
        z-index: 1060;
    }

    .sidebar-close-btn { display: flex; }

    .content-wrapper,
    .admin-content,
    .portal-main {
        margin-left: 0;
    }

    .menu-toggle,
    .admin-menu-toggle,
    .mobile-menu-btn {
        display: flex;
    }

    .app-bottom-nav,
    .bottom-nav {
        display: block;
    }

    main,
    .admin-page-content,
    .portal-body {
        padding-bottom: calc(var(--sf-bottom-nav-height) + var(--sf-safe-bottom) + 1rem);
    }

    /* Topbar adjustments */
    .topbar-left h4,
    .topbar-left h3 {
        max-width: 150px;
        font-size: .8rem;
    }

    .device-selector .dropdown-toggle span { display: none; }
    .device-selector .dropdown-toggle { padding: .3rem .6rem; }
}

/* Mobile */
@media (max-width: 767.98px) {
    main,
    .admin-page-content,
    .portal-body {
        padding: .75rem;
        padding-bottom: calc(var(--sf-bottom-nav-height) + var(--sf-safe-bottom) + 1rem);
    }

    .card-body, .custom-card-body { padding: 1rem; }
    .card-header { padding: .75rem 1rem; }

    .container-fluid.responsive-padding {
        padding-left: .625rem;
        padding-right: .625rem;
    }

    h1, .h1 { font-size: 1.125rem; }
    h2, .h2 { font-size: 1rem; }
    h3, .h3 { font-size: .875rem; }

    .sf-toast-container {
        top: auto;
        bottom: calc(var(--sf-bottom-nav-height) + var(--sf-safe-bottom) + .5rem);
        right: .5rem;
        left: .5rem;
        max-width: 100%;
    }

    .table > :not(caption) > * > * {
        padding: .4rem .5rem;
        font-size: .75rem;
    }

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

    .btn-group .btn-sm {
        padding: .2rem .35rem;
        font-size: .6875rem;
        min-width: 26px;
        min-height: 26px;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    main,
    .admin-page-content,
    .portal-body {
        padding: .5rem;
        padding-bottom: calc(var(--sf-bottom-nav-height) + var(--sf-safe-bottom) + 1rem);
    }

    .topbar, .admin-header, .portal-topbar {
        padding: 0 .75rem;
        height: 48px;
    }

    .topbar-left h4,
    .topbar-left h3 {
        max-width: 120px;
        font-size: .75rem;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: .875rem;
    }

    .card-body, .custom-card-body { padding: .75rem; }

    .sf-toast { font-size: .75rem; padding: .75rem; }
}

/* Large desktop */
@media (min-width: 1400px) {
    main,
    .admin-page-content,
    .portal-body {
        max-width: 1400px;
    }
}

/* ========================================
   17. SCROLLBAR GLOBAL
   ======================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sf-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sf-gray-400); }

/* ========================================
   18. UTILITY CLASSES
   ======================================== */
.text-primary   { color: var(--sf-primary) !important; }
.text-success   { color: var(--sf-success) !important; }
.text-danger    { color: var(--sf-danger) !important; }
.text-warning   { color: var(--sf-warning) !important; }
.text-info      { color: var(--sf-info) !important; }
.text-muted     { color: var(--sf-gray-500) !important; font-size: .8125rem; }

.bg-gradient-primary { background: var(--sf-primary-gradient) !important; }
.bg-gradient-success { background: var(--sf-success-gradient) !important; }
.bg-gradient-danger  { background: var(--sf-danger-gradient) !important; }
.bg-gradient-warning { background: var(--sf-warning-gradient) !important; }
.bg-gradient-info    { background: var(--sf-info-gradient) !important; }

/* Page header pattern */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h2 {
    margin-bottom: 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--sf-gray-400);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .5;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, var(--sf-gray-100) 25%, var(--sf-gray-200) 50%, var(--sf-gray-100) 75%);
    background-size: 200% 100%;
    animation: sfSkeleton 1.5s infinite;
    border-radius: 8px;
}

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

/* ========================================
   19. PRINT
   ======================================== */
@media print {
    .sidebar, .admin-sidebar, .portal-sidebar,
    .topbar, .admin-header, .portal-topbar,
    .app-bottom-nav, .bottom-nav,
    .sf-toast-container, .toast-container { display: none !important; }

    .content-wrapper, .admin-content, .portal-main {
        margin-left: 0 !important;
    }

    .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ========================================
   12. AUTH PAGES (Login/Register/Verify)
   ======================================== */

/* Auth app layout */
.auth-app {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Gradient header accent */
.auth-accent {
    background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%));
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.auth-accent::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.auth-accent::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 24px;
    background: var(--sf-white, #fff);
    border-radius: 20px 20px 0 0;
}

.auth-accent-content { position: relative; z-index: 2; }

/* Back button with glassmorphism */
.auth-back {
    position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.25);
    color: white; font-size: 1.125rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.auth-back:hover {
    background: rgba(255,255,255,0.28);
    transform: translateX(-4px) scale(1.05);
    color: white;
}

.auth-back:active { 
    transform: translateX(-2px) scale(0.95); 
}

/* Auth logo */
.auth-logo {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 8px;
    animation: authFadeInDown 0.6s ease-out;
}

@keyframes authFadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-logo i {
    font-size: 1.5rem; color: white;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}

.auth-logo span {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.auth-page-title {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    animation: authFadeInDown 0.6s 0.1s ease-out both;
}

.auth-page-desc {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
    animation: authFadeInDown 0.6s 0.2s ease-out both;
}

/* Auth form container */
.auth-form-wrap {
    flex: 0 1 auto;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px 24px 0 0;
    margin-top: -16px;
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 5;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.5) inset;
    animation: authSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes authSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Auth form elements */
.auth-form-wrap .form-group {
    margin-bottom: 12px;
    position: relative;
    animation: authFadeIn 0.5s ease-out both;
}

.auth-form-wrap .form-group:nth-child(1) { animation-delay: 0.3s; }
.auth-form-wrap .form-group:nth-child(2) { animation-delay: 0.4s; }
.auth-form-wrap .form-group:nth-child(3) { animation-delay: 0.5s; }
.auth-form-wrap .form-group:nth-child(4) { animation-delay: 0.6s; }

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.auth-form-wrap .form-label {
    display: block;
    color: var(--sf-gray-700, #334155);
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 5px;
}

.auth-form-wrap .form-input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 2px solid var(--sf-gray-200, #e2e8f0);
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--sf-gray-700, #334155);
    background: var(--sf-white, #fff);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-height: 52px;
    -webkit-appearance: none;
    appearance: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.auth-form-wrap .form-input:hover {
    border-color: var(--sf-gray-300, #cbd5e1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.auth-form-wrap .form-input:focus {
    outline: none;
    border-color: var(--sf-primary, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12), 0 4px 12px rgba(59,130,246,0.15);
    background: var(--sf-white, #fff);
    transform: translateY(-1px);
}

.auth-form-wrap .form-input::placeholder {
    color: var(--sf-gray-400, #94a3b8);
}

.form-input-large {
    padding: 14px 14px 14px 48px;
    font-size: 1rem;
    min-height: 54px;
}

.form-input-center {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.4rem;
    padding: 14px 16px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Auth input icons */
.auth-form-wrap .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sf-gray-400, #94a3b8);
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
    width: 18px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.auth-form-wrap .form-group:focus-within .input-icon {
    color: var(--sf-primary, #3b82f6);
    transform: translateY(-50%) scale(1.1);
}

.auth-form-wrap .form-group:has(.form-label) .input-icon {
    top: calc(50% + 12px);
}

.auth-form-wrap .form-group:has(.form-input-center) .input-icon { display: none; }

/* Auth password toggle */
.auth-form-wrap .input-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--sf-gray-400, #94a3b8);
    cursor: pointer;
    padding: 10px;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.auth-form-wrap .form-group:has(.form-label) .input-toggle { top: calc(50% + 12px); }

.auth-form-wrap .input-toggle:hover {
    background: rgba(59,130,246,0.08);
    color: var(--sf-primary, #3b82f6);
    transform: translateY(-50%) scale(1.05);
}

/* Auth buttons */
.btn-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    cursor: pointer;
    width: 100%;
    min-height: 52px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.btn-auth::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.btn-auth:hover::before { left: 100%; }

.btn-auth-primary {
    background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8));
    color: white;
    box-shadow: 0 4px 20px rgba(59,130,246,0.35), 0 1px 3px rgba(0,0,0,0.1);
}

.btn-auth-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59,130,246,0.45);
    color: white;
}

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

.btn-auth-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-auth-accent {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    box-shadow: 0 4px 20px rgba(236,72,153,0.35);
}

.btn-auth-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(236,72,153,0.45);
    color: white;
}

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

.btn-auth-green {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 20px rgba(16,185,129,0.35);
}

.btn-auth-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(16,185,129,0.45);
    color: white;
}

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

/* Auth alerts */
.auth-form-wrap .alert {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.5;
    animation: authAlertSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

@keyframes authAlertSlide {
    from { opacity: 0; transform: translateY(-16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-form-wrap .alert-success {
    background: linear-gradient(135deg, #dcfce7, #d1fae5);
    color: #065f46;
    border: 1.5px solid #86efac;
}

.auth-form-wrap .alert-error {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1.5px solid #fca5a5;
}

.auth-form-wrap .alert-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1.5px solid #fcd34d;
}

.auth-form-wrap .alert i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.875rem;
}

/* Auth footer */
.auth-footer {
    text-align: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--sf-gray-100, #f1f5f9);
    animation: authFadeIn 0.5s 0.7s ease-out both;
}

.auth-footer p {
    color: var(--sf-gray-500, #64748b);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

.auth-footer a {
    color: var(--sf-primary, #3b82f6);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    padding: 2px 4px;
    border-radius: 6px;
}

.auth-footer a:hover {
    background: rgba(59,130,246,0.08);
}

/* Auth link styles */
.link-action {
    color: var(--sf-primary, #3b82f6);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    transition: all 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.link-action:hover {
    background: rgba(59,130,246,0.08);
    color: var(--sf-primary, #3b82f6);
}

.link-forgot {
    color: var(--sf-danger, #ef4444);
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    padding: 4px 8px;
    display: inline-block;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.link-forgot:hover {
    background: rgba(239,68,68,0.08);
    color: var(--sf-danger, #ef4444);
}

.helper-text {
    font-size: 0.6875rem;
    color: var(--sf-gray-400, #94a3b8);
    margin-top: 4px;
    line-height: 1.4;
}

/* Auth loading screen */
.auth-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.auth-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,0.08) 0%, transparent 50%);
    animation: authPulse 3s ease-in-out infinite;
}

@keyframes authPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.auth-loading.hidden {
    opacity: 0;
    visibility: hidden;
}

.auth-loading-content {
    text-align: center;
    color: white;
    position: relative;
    z-index: 2;
}

.auth-loading-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 3.5px solid rgba(255,255,255,0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: authSpin 0.7s linear infinite;
}

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

.auth-loading-title {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.auth-loading-bar {
    width: 120px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
    margin: 10px auto 0;
}

.auth-loading-bar::after {
    content: '';
    display: block;
    width: 40%;
    height: 100%;
    background: white;
    border-radius: 3px;
    animation: authLoadbar 1.2s ease-in-out infinite;
}

@keyframes authLoadbar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,0.25);
    border-top-color: white;
    border-radius: 50%;
    animation: authSpin 0.6s linear infinite;
    display: inline-block;
}

/* Auth page body background */
body.auth-body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.auth-body::before {
    content: '';
    position: fixed;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59,130,246,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(29,78,216,0.12) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(59,130,246,0.1) 0%, transparent 50%);
    pointer-events: none;
    animation: authDrift 20s ease-in-out infinite alternate;
}

@keyframes authDrift {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(10%, -10%) rotate(3deg); }
}

/* Auth responsive */
@media (max-width: 480px) {
    .auth-accent {
        padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 24px;
    }
    .auth-logo span { font-size: 1.25rem; }
    .auth-form-wrap {
        padding: 16px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px 20px 0 0;
    }
    .auth-form-wrap .form-input {
        font-size: 0.95rem;
        min-height: 48px;
        padding: 12px 12px 12px 42px;
    }
    .btn-auth { font-size: 0.95rem; min-height: 52px; }
}

@media (min-width: 600px) {
    body.auth-body { background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8)); }
    
    .auth-app {
        min-height: 100vh;
        justify-content: center;
        align-items: center;
        padding: 24px 20px;
    }
    
    .auth-accent {
        border-radius: 24px 24px 0 0;
        max-width: 440px;
        width: 100%;
        padding: 24px 32px 32px;
    }
    
    .auth-back { top: 16px; left: 16px; }
    
    .auth-form-wrap {
        max-width: 440px;
        width: 100%;
        border-radius: 0 0 24px 24px;
        padding: 28px 32px 32px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
    
    .form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 640px) {
    .auth-app {
        min-height: auto;
        justify-content: flex-start;
    }
    .auth-form-wrap {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .auth-accent { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-bottom: 24px; }
    .auth-logo i { font-size: 1.125rem; }
    .auth-logo span { font-size: 1.25rem; }
    .auth-page-title { font-size: 1rem; }
    .auth-form-wrap .form-group { margin-bottom: 8px; }
}

@media (max-width: 360px) {
    .auth-accent { padding-left: 16px; padding-right: 16px; }
    .auth-form-wrap { padding: 16px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .auth-form-wrap .form-input { min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
    .btn-auth { min-height: 50px; }
}

/* Auth touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn-auth-primary:hover, .btn-auth-accent:hover, .btn-auth-green:hover { transform: none; }
    .btn-auth:active { transform: scale(0.98); transition: transform 0.1s ease; }
}

/* Auth autofill fix */
.auth-form-wrap input:-webkit-autofill,
.auth-form-wrap input:-webkit-autofill:hover,
.auth-form-wrap input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: var(--sf-gray-700, #334155);
    transition: background-color 5000s ease-in-out 0s;
}

/* iOS Safari auth fix */
@supports (-webkit-touch-callout: none) {
    .auth-form-wrap .form-input { font-size: 16px !important; }
    .auth-app { min-height: -webkit-fill-available; }
}

/* ========================================
   13. PUBLIC / LANDING PAGE
   ======================================== */

/* Landing loading screen */
.app-loading {
    position: fixed; inset: 0; z-index: 9999;
    background: linear-gradient(145deg, #0f0720 0%, #0c1a3a 35%, #1e3a8a 70%, #1e3a8a 100%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.app-loading.hidden { opacity: 0; visibility: hidden; }
.loading-inner { text-align: center; color: white; }
.loading-logo {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.75rem; font-weight: 900;
    letter-spacing: 2px;
    display: flex; align-items: center; gap: 12px; justify-content: center;
}
.loading-logo-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.loading-bar {
    width: 180px; height: 3px; background: rgba(255,255,255,0.15);
    border-radius: 2px; overflow: hidden; margin: 16px auto 0;
}
.loading-bar::after {
    content: ''; display: block; height: 100%;
    background: linear-gradient(90deg, transparent, white, transparent);
    animation: landingBarSlide 1.4s ease-in-out infinite;
}
@keyframes landingBarSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }

/* Landing header */
.app-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding-top: env(safe-area-inset-top, 0px); transition: all 0.3s ease;
}
.app-header.scrolled {
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 16px rgba(59,130,246,0.08);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; max-width: 1200px; margin: 0 auto;
}
.app-logo {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.25rem; font-weight: 900;
    color: white; text-decoration: none; letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 9px;
}
.logo-icon {
    width: 36px; height: 36px; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all 0.3s ease;
}
.app-header.scrolled .app-logo { color: var(--sf-gray-800, #1e293b); }
.app-header.scrolled .logo-icon {
    background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8));
    border-color: transparent;
    box-shadow: 0 8px 32px rgba(59,130,246,0.3);
}
.header-nav { display: none; gap: 4px; }
.header-nav .nav-link {
    padding: 7px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
    text-decoration: none; color: rgba(255,255,255,0.85); transition: all 0.3s ease;
}
.header-nav .nav-link:hover { background: rgba(255,255,255,0.1); color: white; }
.app-header.scrolled .header-nav .nav-link { color: var(--sf-gray-600, #475569); }
.app-header.scrolled .header-nav .nav-link:hover { background: var(--sf-gray-100, #f1f5f9); color: var(--sf-primary, #3b82f6); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.btn-h {
    padding: 8px 18px; border-radius: 20px; font-size: 0.8125rem; font-weight: 600;
    text-decoration: none; transition: all 0.3s ease; border: none; cursor: pointer;
}
.btn-h-ghost {
    background: rgba(255,255,255,0.12); color: white;
    border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px);
}
.btn-h-solid { background: white; color: var(--sf-primary-dark, #1d4ed8); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.app-header.scrolled .btn-h-ghost { background: var(--sf-gray-100, #f1f5f9); color: var(--sf-gray-700, #334155); border-color: var(--sf-gray-200, #e2e8f0); }
.app-header.scrolled .btn-h-solid { background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8)); color: white; }

/* Hero section */
.app-hero {
    position: relative; min-height: 100vh; min-height: 100dvh;
    background: linear-gradient(145deg, #0f0720 0%, #0c1a3a 35%, #1e3a8a 70%, #1e3a8a 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: calc(80px + env(safe-area-inset-top, 0px)) 24px 80px;
    overflow: hidden; text-align: center;
}
.app-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(59,130,246,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,0.07) 1px, transparent 1px);
    background-size: 42px 42px; pointer-events: none;
}
.app-hero::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -5%, rgba(59,130,246,0.38) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 60%, rgba(236,72,153,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 40% 40% at 15% 70%, rgba(99,102,241,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.14; }
.orb-1 { width: 380px; height: 380px; background: #93c5fd; top: -110px; left: -90px; animation: landingOrbDrift 14s ease-in-out infinite; }
.orb-2 { width: 260px; height: 260px; background: #0ea5e9; top: 40%; right: -70px; animation: landingOrbDrift 10s ease-in-out infinite reverse; }
.orb-3 { width: 220px; height: 220px; background: #818cf8; bottom: 8%; left: 28%; animation: landingOrbDrift 18s ease-in-out infinite 4s; }
@keyframes landingOrbDrift {
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(22px,-28px) scale(1.05)}
    66%{transform:translate(-16px,14px) scale(0.97)}
}
.hero-content { position: relative; z-index: 2; max-width: 640px; width: 100%; }
.hero-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: 30px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(12px); color: rgba(255,255,255,0.9);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3px;
    margin-bottom: 24px; animation: landingFadeInDown 0.8s ease-out both;
}
.chip-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
    animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse {
    0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,0.25)}
    50%{box-shadow:0 0 0 6px rgba(16,185,129,0.1)}
}
.hero-title {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 2.5rem; font-weight: 900;
    line-height: 1.1; color: white; margin-bottom: 18px; letter-spacing: -0.02em;
    animation: landingFadeInUp 0.8s ease-out 0.1s both;
}

/* ========================================
   ADMIN ROLE — MIDNIGHT VIOLET THEME
   Scoped to .admin-sidebar and admin-
   specific elements. Does NOT affect
   UserTemplate, RouterTemplate, etc.
   ======================================== */

/* Sidebar shell */
.admin-sidebar {
    background: linear-gradient(180deg, #1a0533 0%, #130826 50%, #0e0620 100%) !important;
    box-shadow: 2px 0 20px rgba(109,40,217,.25), inset -1px 0 0 rgba(124,58,237,.12) !important;
}

/* Brand / header area — violet gradient */
.admin-brand {
    background: linear-gradient(135deg, #3b0764 0%, #6d28d9 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #fff !important;
}

.admin-brand h4,
.admin-brand h4 a,
.admin-brand .sidebar-title {
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* SUPER badge */
.admin-brand .badge {
    background: rgba(255,255,255,.15);
    color: #ddd6fe;
    font-size: .55rem;
    letter-spacing: .08em;
    border-radius: 4px;
    padding: 2px 6px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Scrollbar inside admin sidebar */
.admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
}

/* Section label */
.admin-sidebar .menu-section-title {
    color: rgba(196,181,253,.6);
    font-size: .58rem;
    letter-spacing: .12em;
    text-shadow: 0 0 8px rgba(124,58,237,.4);
}

/* Menu items — base */
.admin-sidebar a.menu-item {
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(221,214,254,.75);
    font-size: .78rem;
    min-height: 40px;
    margin-bottom: 1px;
    padding: .45rem .75rem;
    box-shadow: none;
}

/* Hover */
.admin-sidebar a.menu-item:hover {
    background: rgba(124,58,237,.18) !important;
    color: #c4b5fd !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: translateX(3px);
}

/* Active */
.admin-sidebar a.menu-item.active {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(124,58,237,.45) !important;
}

/* Icons */
.admin-sidebar a.menu-item svg,
.admin-sidebar a.menu-item i {
    color: rgba(255,255,255,.4);
    stroke: rgba(255,255,255,.4);
}
.admin-sidebar a.menu-item:hover svg,
.admin-sidebar a.menu-item:hover i {
    color: #c4b5fd;
    stroke: #c4b5fd;
}
.admin-sidebar a.menu-item.active svg,
.admin-sidebar a.menu-item.active i {
    color: #fff !important;
    stroke: #fff !important;
}

/* Submenu */
.admin-sidebar .submenu {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
    margin: 2px 0 4px;
}

.admin-sidebar .submenu-item {
    color: rgba(221,214,254,.72);
    border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: .75rem;
}

.admin-sidebar .submenu-item:hover {
    background: rgba(124,58,237,.15);
    color: #ddd6fe;
}

.admin-sidebar .submenu-item.active {
    background: rgba(124,58,237,.22);
    color: #c4b5fd;
    border-left: 2px solid #7c3aed;
    font-weight: 600;
}

/* Admin header topbar — accent left border */
.admin-header {
    border-bottom: 1px solid rgba(124,58,237,.1);
}

.admin-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #7c3aed, transparent);
}

/* Admin user avatar — violet */
.admin-user-avatar {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
}

/* Admin primary button — violet */
.btn-admin-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    box-shadow: 0 2px 8px rgba(124,58,237,.28) !important;
}
.btn-admin-primary:hover,
.btn-admin-primary:focus {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 4px 16px rgba(124,58,237,.4) !important;
    color: #fff !important;
}

/* Bottom nav active indicator — violet */
.app-bottom-nav .bottom-nav-item.active {
    color: #7c3aed !important;
}
.app-bottom-nav .bottom-nav-item.active::before {
    background: #7c3aed !important;
}
.hero-title .hl {
    background: linear-gradient(135deg, #bfdbfe, #e879f9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle {
    font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.75);
    margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto;
    animation: landingFadeInUp 0.8s ease-out 0.2s both;
}
.hero-btns {
    display: flex; flex-direction: column; gap: 12px; align-items: center;
    margin-bottom: 40px; animation: landingFadeInUp 0.8s ease-out 0.3s both;
}
.btn-app {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 15px 28px; border-radius: 14px;
    font-size: 0.9375rem; font-weight: 700; text-decoration: none;
    border: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 54px; min-width: 200px; justify-content: center;
}
.btn-app-primary {
    background: white; color: var(--sf-primary-dark, #1d4ed8);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.btn-app-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); color: var(--sf-primary-dark, #1d4ed8); }
.btn-app-primary:active { transform: scale(0.97); }
.btn-app-outline {
    background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.25);
    color: white; backdrop-filter: blur(10px);
}
.btn-app-outline:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); color: white; }
.btn-app-outline:active { transform: scale(0.97); }
.hero-stats {
    display: flex; gap: 12px; justify-content: center;
    animation: landingFadeInUp 0.8s ease-out 0.4s both;
}
.stat-pill {
    flex: 1; max-width: 110px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(16px); border-radius: 16px; padding: 14px 12px; text-align: center;
    transition: all 0.3s ease;
}
.stat-pill:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.stat-pill-value { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.5rem; font-weight: 900; color: white; line-height: 1; }
.stat-pill-label { font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.scroll-indicator { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.35); font-size: 1.1rem; animation: landingBounce 2s ease-in-out infinite; }
@keyframes landingBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-8px)} }
@keyframes landingFadeInDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes landingFadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* Sections */
.app-section { padding: 56px 20px; }
.app-section-white { background: var(--sf-white); }
.app-section-gray { background: var(--sf-gray-50, #f8fafc); }
.app-section .section-header, .app-hero ~ * .section-header { text-align: center; margin-bottom: 36px; }
.section-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 30px;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(236,72,153,0.1));
    border: 1px solid rgba(59,130,246,0.2); color: var(--sf-primary, #3b82f6);
}
.section-chip i { font-size: 0.625rem; }
.app-section .section-title {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.75rem; font-weight: 800;
    line-height: 1.2; color: var(--sf-gray-900, #0f172a); margin-bottom: 10px; letter-spacing: -0.02em;
    text-transform: none;
}
.app-section .section-subtitle { font-size: 0.9375rem; color: var(--sf-gray-500, #64748b); line-height: 1.65; max-width: 500px; margin: 0 auto; }

/* Feature cards */
.features-scroll {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 12px; margin: 0 -20px; padding-left: 20px; padding-right: 20px;
    scrollbar-width: none;
}
.features-scroll::-webkit-scrollbar { display: none; }
.feature-card {
    flex: 0 0 272px; scroll-snap-align: start;
    background: linear-gradient(145deg, #ffffff, #faf5ff); border: 1px solid var(--sf-gray-200, #e2e8f0);
    border-radius: 22px; padding: 24px 20px;
    box-shadow: 0 2px 12px rgba(59,130,246,0.06); transition: all 0.3s ease;
    position: relative; overflow: hidden;
}
.feature-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 3px 3px 0 0; opacity: 0; transition: opacity 0.3s;
}
.fc-1::before { background: linear-gradient(135deg, #0ea5e9, #be185d); }
.fc-2::before { background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8)); }
.fc-3::before { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.fc-4::before { background: linear-gradient(135deg, #f59e0b, #d97706); }
.fc-5::before { background: linear-gradient(135deg, #6366f1, #4338ca); }
.fc-6::before { background: linear-gradient(135deg, #10b981, #059669); }
.feature-card:active::before { opacity: 1; }
.feature-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem; margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.feature-title {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 0.9375rem; font-weight: 700;
    color: var(--sf-gray-900, #0f172a); margin-bottom: 8px;
}
.feature-desc { font-size: 0.8125rem; color: var(--sf-gray-500, #64748b); line-height: 1.65; }
.scroll-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.scroll-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--sf-gray-300, #cbd5e1); transition: all 0.3s ease; }
.scroll-dot.active { width: 20px; background: var(--sf-primary, #3b82f6); }

/* About section */
.about-text { font-size: 0.9375rem; color: var(--sf-gray-600, #475569); line-height: 1.75; text-align: center; max-width: 560px; margin: 0 auto 24px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; max-width: 600px; margin-left: auto; margin-right: auto; }
.about-card {
    background: var(--sf-white); border: 1px solid var(--sf-gray-200, #e2e8f0); border-radius: 16px;
    padding: 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 12px rgba(59,130,246,0.06); transition: all 0.3s ease;
}
.about-card:active { transform: scale(0.98); }
.about-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; flex-shrink: 0; }
.about-label { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 0.8125rem; font-weight: 700; color: var(--sf-gray-800, #1e293b); }
.stats-row { display: flex; gap: 12px; max-width: 600px; margin: 0 auto; }
.stat-box {
    flex: 1; background: var(--sf-white); border: 1px solid var(--sf-gray-200, #e2e8f0);
    border-radius: 16px; padding: 20px 14px; text-align: center;
    box-shadow: 0 2px 12px rgba(59,130,246,0.06);
}
.stat-box-value {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.625rem; font-weight: 900; line-height: 1;
    background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-box-label { font-size: 0.6875rem; font-weight: 600; color: var(--sf-gray-500, #64748b); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 5px; }

/* Contact section */
.contact-list { display: flex; flex-direction: column; gap: 12px; max-width: 600px; margin: 0 auto; }
.contact-card {
    background: var(--sf-white); border: 1px solid var(--sf-gray-200, #e2e8f0); border-radius: 16px;
    padding: 16px 20px; display: flex; align-items: center; gap: 14px;
    box-shadow: 0 2px 12px rgba(59,130,246,0.06); transition: all 0.3s ease; text-decoration: none; color: inherit;
}
.contact-card:active { transform: scale(0.98); }
.contact-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.125rem; flex-shrink: 0; }
.contact-card-title { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--sf-gray-800, #1e293b); margin-bottom: 2px; }
.contact-card-text { font-size: 0.8125rem; color: var(--sf-gray-500, #64748b); }

/* CTA card */
.cta-card {
    background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8));
    border-radius: 32px; padding: 36px 28px; text-align: center; color: white;
    margin-top: 24px; max-width: 560px; margin-left: auto; margin-right: auto;
    position: relative; overflow: hidden; box-shadow: 0 16px 48px rgba(59,130,246,0.25);
}
.cta-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.12), transparent 60%);
}
.cta-card h3 { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.375rem; font-weight: 800; margin-bottom: 8px; position: relative; }
.cta-card p { font-size: 0.875rem; opacity: 0.85; line-height: 1.55; margin-bottom: 24px; position: relative; max-width: 380px; margin-left: auto; margin-right: auto; }
.btn-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 16px;
    background: white; color: var(--sf-primary-dark, #1d4ed8);
    font-size: 0.9375rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.25); color: var(--sf-primary-dark, #1d4ed8); }
.btn-cta:active { transform: scale(0.97); }

/* Landing footer */
.app-footer { background: var(--sf-gray-900, #0f172a); color: white; padding: 36px 20px 28px; text-align: center; }
.app-footer-logo { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.125rem; font-weight: 900; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.app-footer-logo span { background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-tagline { font-size: 0.8125rem; color: rgba(255,255,255,0.4); margin-bottom: 16px; }
.app-footer-nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.app-footer-link { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.8125rem; font-weight: 500; transition: all 0.3s ease; }
.app-footer-link:hover { color: #bfdbfe; }
.app-footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.07); padding-top: 16px; }
.app-footer-copy a { color: rgba(255,255,255,0.4); text-decoration: none; }
.app-footer-copy a:hover { color: #bfdbfe; }

/* Landing bottom bar */
.app-bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--sf-gray-200, #e2e8f0);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px;
    box-shadow: 0 -4px 20px rgba(59,130,246,0.08);
}
.bottom-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 16px; border-radius: 16px;
    font-size: 0.875rem; font-weight: 700; text-decoration: none;
    border: none; cursor: pointer; transition: all 0.3s ease; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.bottom-btn-outline { background: var(--sf-gray-50, #f8fafc); color: var(--sf-gray-700, #334155); border: 1.5px solid var(--sf-gray-200, #e2e8f0); }
.bottom-btn-primary { background: var(--sf-primary-gradient, linear-gradient(135deg, #3b82f6, #1d4ed8)); color: white; box-shadow: 0 8px 32px rgba(59,130,246,0.3); }
.bottom-btn:active { transform: scale(0.97); }

/* Landing animations */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Landing responsive */
@media (min-width: 480px) { .hero-btns { flex-direction: row; justify-content: center; } }
@media (min-width: 769px) {
    .app-bottom-bar { display: none; }
    .header-nav { display: flex; }
    .header-inner { height: 68px; padding: 0 40px; }
    .hero-title { font-size: 3.5rem; }
    .hero-subtitle { font-size: 1.125rem; }
    .app-section { padding: 72px 40px; }
    .app-section .section-title { font-size: 2.25rem; }
    .features-scroll {
        display: grid; grid-template-columns: repeat(3, 1fr);
        overflow: visible; margin: 0; padding: 0; gap: 20px;
        max-width: 1080px; margin: 0 auto;
    }
    .feature-card { flex: none; }
    .feature-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(59,130,246,0.18); }
    .feature-card:hover::before { opacity: 1; }
    .scroll-dots { display: none; }
    .about-grid { grid-template-columns: repeat(4, 1fr); max-width: 800px; }
    .contact-list { max-width: 600px; margin: 0 auto; }
}
@media (min-width: 1024px) { .feature-card { padding: 32px 26px; } }

/* ========================================
   BACK BUTTON — Global secondary/outline style
   Digunakan di billing/, router/, user/ pages
   ======================================== */
.back-button {
    background: var(--sf-white);
    border: 1.5px solid var(--sf-gray-200);
    color: var(--sf-gray-600);
    padding: 0.625rem 1.125rem;
    border-radius: var(--sf-radius-sm);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    min-height: 40px;
    font-size: 0.9rem;
}
.back-button:hover {
    background: var(--sf-gray-100);
    border-color: var(--sf-gray-400);
    color: var(--sf-gray-700);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateX(-2px);
}
.back-button i, .back-button svg { flex-shrink: 0; }
@media (max-width: 576px) {
    .back-button { padding: 0.5rem 0.875rem; font-size: 0.84rem; min-height: 36px; }
}

/* ========================================
   SALFANET WEBVIEW APP (SalfanetApp/1.0)
   Handles edge-to-edge layout, safe areas,
   bottom nav hide, dropdown z-index fixes
   ======================================== */

/* Bottom nav: transition untuk hide/show saat scroll */
.app-bottom-nav,
.bottom-nav {
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.app-bottom-nav.nav-hidden,
.bottom-nav.nav-hidden {
    transform: translateY(100%);
}

/* Dropdown z-index — harus di atas topbar (1020) dan bottom-nav (1040) */
.topbar .dropdown-menu,
.admin-header .dropdown-menu {
    z-index: 1080 !important;
}

/* Dropdown di topbar jangan ter-clip oleh overflow parent */
.topbar,
.admin-header,
.portal-topbar {
    overflow: visible !important;
}
.topbar-controls,
.admin-header .admin-header-right {
    overflow: visible !important;
    position: relative;
}
.device-selector,
.user-dropdown {
    position: relative;
    overflow: visible !important;
}

/* Topbar dropdown — no animation, just show/hide */
.topbar .dropdown-menu,
.admin-header .dropdown-menu {
    animation: none !important;
}


/* ========================================
   ADMIN PAGE COMPONENTS — MODERN REDESIGN
   Covers: stat-card, data-table, table-header,
   quick-actions, page banners, and all admin
   page-specific layout classes.
   ======================================== */

/* ── Page wrapper background ── */
.admin-content {
    background: #f5f3ff;
}
[data-theme="dark"] .admin-content {
    background: var(--sf-gray-50);
}

.admin-page-content {
    background: transparent;
}

/* ── Page banner / hero header ── */
.admin-page-banner {
    background: linear-gradient(135deg, #3b0764 0%, #5b21b6 60%, #7c3aed 100%);
    border-radius: var(--sf-radius-xl);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.admin-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.08) 0%, transparent 60%);
    pointer-events: none;
}

.admin-page-banner h2,
.admin-page-banner h3 {
    color: #fff;
    margin: 0 0 .25rem;
    font-weight: 700;
}

.admin-page-banner p {
    color: rgba(255,255,255,.75);
    margin: 0;
    font-size: .8125rem;
}

/* ── Stat cards ── */
.stat-card {
    background: var(--sf-white);
    color: var(--sf-gray-700);
    border-radius: var(--sf-radius-xl);
    border: 1px solid rgba(124,58,237,.08);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(124,58,237,.06);
}
[data-theme="dark"] .stat-card {
    border-color: rgba(124,58,237,.2);
    box-shadow: var(--sf-shadow-sm);
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #5b21b6);
    border-radius: 16px 16px 0 0;
    opacity: 0;
    transition: opacity .25s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124,58,237,.15);
    border-color: rgba(124,58,237,.2);
}

.stat-card:hover::after {
    opacity: 1;
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--sf-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    background: rgba(124,58,237,.1);
    color: #7c3aed;
}

.stat-card-icon svg {
    width: 22px;
    height: 22px;
}

.stat-card-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--sf-gray-800);
    line-height: 1;
    letter-spacing: -.02em;
}

.stat-card-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--sf-gray-500);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.stat-card-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--sf-radius-2xl);
}

.stat-card-trend.up   { background: var(--sf-success-light); color: var(--sf-success-text); }
.stat-card-trend.down { background: var(--sf-danger-light);  color: var(--sf-danger-text); }

/* ── Data table container ── */
.data-table {
    background: var(--sf-white);
    border-radius: var(--sf-radius-xl);
    border: 1px solid var(--sf-gray-200);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .25s ease;
}
[data-theme="dark"] .data-table {
    box-shadow: var(--sf-shadow-sm);
}

.data-table:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
[data-theme="dark"] .data-table:hover {
    box-shadow: var(--sf-shadow-md);
}

/* ── Table header ── */
.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sf-gray-100);
    background: #faf9ff;
}
[data-theme="dark"] .table-header {
    background: var(--sf-gray-100);
}

.table-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sf-gray-800);
    margin: 0;
}

.table-title svg,
.table-title i {
    color: #7c3aed;
    width: 18px;
    height: 18px;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── Table inside data-table ── */
.data-table .table {
    margin-bottom: 0;
    font-size: .8125rem;
}

.data-table .table thead th {
    background: #faf9ff;
    color: var(--sf-gray-500);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid #ede9fe;
    padding: .625rem .875rem;
    white-space: nowrap;
}
[data-theme="dark"] .data-table .table thead th {
    background: var(--sf-gray-100);
    border-bottom-color: rgba(124,58,237,.25);
}

.data-table .table tbody tr {
    transition: background .15s ease;
}

.data-table .table tbody tr:hover {
    background: #faf9ff;
}
[data-theme="dark"] .data-table .table tbody tr:hover {
    background: var(--sf-gray-100);
}

.data-table .table tbody td {
    padding: .75rem .875rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--sf-gray-50);
    color: var(--sf-gray-700);
}

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

/* ── User avatar in table ── */
.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}

/* ── Admin btn-admin-primary override (violet) ── */
.btn-admin-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    color: #fff !important;
    border: none;
    border-radius: var(--sf-radius-md);
    font-weight: 600;
    font-size: .78rem;
    padding: .45rem 1rem;
    box-shadow: 0 2px 8px rgba(124,58,237,.3);
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.btn-admin-primary:hover,
.btn-admin-primary:focus {
    background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%) !important;
    box-shadow: 0 4px 16px rgba(124,58,237,.45);
    transform: translateY(-1px);
    color: #fff !important;
}

.btn-admin-primary svg,
.btn-admin-primary i {
    width: 14px;
    height: 14px;
}

/* ── Quick Actions section ── */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: 1.25rem 1rem;
    background: var(--sf-white);
    border: 1.5px solid var(--sf-gray-200);
    border-radius: 14px;
    text-decoration: none;
    color: var(--sf-gray-700);
    font-size: .8rem;
    font-weight: 600;
    transition: all .25s ease;
    cursor: pointer;
    min-height: 90px;
}

.quick-action-btn:hover {
    border-color: #7c3aed;
    background: #faf9ff;
    color: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124,58,237,.15);
}
[data-theme="dark"] .quick-action-btn:hover {
    background: rgba(124,58,237,.12);
}

.quick-action-btn .qa-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--sf-radius-md);
    background: rgba(124,58,237,.1);
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all .25s ease;
}

.quick-action-btn:hover .qa-icon {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
}

/* ── Admin page section card ── */
.admin-section {
    background: var(--sf-white);
    border-radius: var(--sf-radius-xl);
    border: 1px solid var(--sf-gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
[data-theme="dark"] .admin-section {
    box-shadow: var(--sf-shadow-sm);
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sf-gray-100);
    background: #faf9ff;
}
[data-theme="dark"] .admin-section-header {
    background: var(--sf-gray-100);
}

.admin-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sf-gray-800);
    margin: 0;
}

.admin-section-body {
    padding: 1.25rem;
}

/* ── Status badges for admin ── */
.badge-violet {
    background: rgba(124,58,237,.12);
    color: #6d28d9;
    border: 1px solid rgba(124,58,237,.2);
}
[data-theme="dark"] .badge-violet {
    /* #6d28d9 is a dark violet meant to read on a light tint - swap for a
       lighter violet so it still reads once the tint darkens too. */
    background: rgba(167,139,250,.18);
    color: #c4b5fd;
    border-color: rgba(167,139,250,.3);
}

.badge-active {
    background: var(--sf-success-light);
    color: var(--sf-success-text);
    border: 1px solid rgba(16,185,129,.3);
}

.badge-inactive {
    background: var(--sf-gray-100);
    color: var(--sf-gray-500);
    border: 1px solid var(--sf-gray-200);
}

.badge-expired {
    background: var(--sf-danger-light);
    color: var(--sf-danger-text);
    border: 1px solid rgba(239,68,68,.3);
}

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--sf-gray-100);
    flex-wrap: wrap;
}

.page-item .page-link {
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--sf-gray-200);
    color: var(--sf-gray-600);
    font-size: .8rem;
    font-weight: 500;
    padding: .35rem .65rem;
    min-width: 32px;
    text-align: center;
    transition: all .2s ease;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,.35);
}

.page-item:not(.active) .page-link:hover {
    background: #faf9ff;
    border-color: #7c3aed;
    color: #7c3aed;
}
[data-theme="dark"] .page-item:not(.active) .page-link:hover {
    background: rgba(124,58,237,.12);
}

/* ── Form cards ── */
.form-card {
    background: var(--sf-white);
    border-radius: var(--sf-radius-xl);
    border: 1px solid var(--sf-gray-200);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
[data-theme="dark"] .form-card {
    box-shadow: var(--sf-shadow-sm);
}

.form-card-title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--sf-gray-800);
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--sf-gray-100);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-card-title svg,
.form-card-title i {
    color: #7c3aed;
    width: 16px;
    height: 16px;
}

/* ── Admin page form controls: use the same shared focus ring as every other
   role instead of this previously-hardcoded violet one (was inconsistent
   with the blue ring used everywhere else, in both themes). ── */
.admin-content .form-control:focus,
.admin-content .form-select:focus {
    border-color: var(--sf-primary);
    box-shadow: var(--sf-focus-ring);
}

/* ── Info/alert box ── */
.admin-info-box {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 1.25rem;
    border-radius: var(--sf-radius-lg);
    border-left: 4px solid #7c3aed;
    background: rgba(124,58,237,.06);
    color: var(--sf-gray-700);
    font-size: .8125rem;
    margin-bottom: 1rem;
}
[data-theme="dark"] .admin-info-box {
    background: rgba(167,139,250,.1);
}

.admin-info-box .info-icon {
    color: #7c3aed;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Empty state ── */
.admin-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--sf-gray-400);
}

.admin-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--sf-radius-2xl);
    background: rgba(124,58,237,.08);
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1rem;
}

.admin-empty h5 {
    color: var(--sf-gray-700);
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .375rem;
}

.admin-empty p {
    font-size: .8rem;
    color: var(--sf-gray-400);
    margin: 0;
}

/* ── Mobile responsive for admin pages ── */
@media (max-width: 767.98px) {
    .stat-card {
        padding: 1rem;
    }

    .stat-card-value {
        font-size: 1.4rem;
    }

    .table-header {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .quick-action-btn {
        min-height: 75px;
        padding: 1rem .75rem;
    }
}

@media (max-width: 575.98px) {
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: .625rem;
    }

    .stat-card-value {
        font-size: 1.25rem;
    }
}

/* =============================================================
   ROLE-SPECIFIC SIDEBAR THEMES (v3.0)
   Applied via <body class="role-user|role-kangtag">
   ============================================================= */

/* ── Shared dark sidebar base ── */
body.role-user .sidebar,
body.role-kangtag .sidebar {
    background: var(--rs-sidebar-bg);
    box-shadow: 2px 0 20px var(--rs-sidebar-shadow), inset -1px 0 0 var(--rs-sidebar-border);
    border-right: none;
}

body.role-user .sidebar-header,
body.role-kangtag .sidebar-header {
    background: var(--rs-header-bg);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

body.role-user .sidebar-brand,
body.role-kangtag .sidebar-brand {
    color: #fff;
    text-decoration: none;
}

body.role-user .sidebar-brand-text,
body.role-kangtag .sidebar-brand-text,
body.role-user .sidebar-brand-icon,
body.role-kangtag .sidebar-brand-icon { color: #fff; }

body.role-user .sidebar-role-badge,
body.role-kangtag .sidebar-role-badge {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
}

body.role-user .sidebar::-webkit-scrollbar-thumb,
body.role-kangtag .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
}

body.role-user .sidebar-close-btn,
body.role-kangtag .sidebar-close-btn { display: none; }

/* Section label */
body.role-user .section-title,
body.role-kangtag .section-title {
    color: var(--rs-label-color);
}

/* ── menu-card → flat dark style ── */
body.role-user .menu-card,
body.role-kangtag .menu-card {
    background: transparent;
    border: none;
    border-radius: 8px;
    box-shadow: none;
}

body.role-user .menu-card:hover,
body.role-kangtag .menu-card:hover {
    transform: none;
    box-shadow: none;
}

body.role-user .menu-card .card-link,
body.role-user .menu-card .card-trigger,
body.role-kangtag .menu-card .card-link,
body.role-kangtag .menu-card .card-trigger {
    color: var(--rs-item-color);
    font-size: .78rem;
    min-height: 40px;
    padding: .45rem .75rem;
    border-radius: 8px;
}

body.role-user .menu-card .card-link:hover,
body.role-user .menu-card .card-trigger:hover,
body.role-kangtag .menu-card .card-link:hover,
body.role-kangtag .menu-card .card-trigger:hover {
    background: var(--rs-item-hover-bg);
    color: var(--rs-item-hover-color);
}

body.role-user .menu-card.active .card-link,
body.role-user .menu-card .card-link.active,
body.role-kangtag .menu-card.active .card-link,
body.role-kangtag .menu-card .card-link.active {
    background: var(--rs-item-active-bg);
    color: #fff;
    box-shadow: var(--rs-item-active-shadow);
}

body.role-user .menu-card .card-icon,
body.role-kangtag .menu-card .card-icon {
    background: rgba(255,255,255,.08);
    color: var(--rs-icon-color);
}

body.role-user .menu-card .card-link:hover .card-icon,
body.role-user .menu-card .card-link.active .card-icon,
body.role-user .menu-card.active .card-icon,
body.role-kangtag .menu-card .card-link:hover .card-icon,
body.role-kangtag .menu-card .card-link.active .card-icon,
body.role-kangtag .menu-card.active .card-icon {
    background: var(--rs-icon-active-bg);
    color: var(--rs-icon-active-color);
}

/* Dropdown arrow in dark sidebar */
body.role-user .menu-card .dropdown-arrow,
body.role-kangtag .menu-card .dropdown-arrow { color: var(--rs-item-color); }

/* Friendly submenu in dark sidebar */
body.role-user .friendly-submenu,
body.role-kangtag .friendly-submenu {
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    margin: 2px 4px;
}

body.role-user .submenu-item,
body.role-kangtag .submenu-item {
    color: var(--rs-item-color);
    border-bottom: none;
}

body.role-user .submenu-item:hover,
body.role-kangtag .submenu-item:hover {
    background: var(--rs-item-hover-bg);
    color: var(--rs-item-hover-color);
}

body.role-user .submenu-item.active,
body.role-kangtag .submenu-item.active {
    background: var(--rs-item-active-bg);
    color: #fff;
}

body.role-user .submenu-icon,
body.role-kangtag .submenu-icon {
    background: rgba(255,255,255,.06);
    color: var(--rs-icon-color);
}

body.role-user .submenu-item:hover .submenu-icon,
body.role-user .submenu-item.active .submenu-icon,
body.role-kangtag .submenu-item:hover .submenu-icon,
body.role-kangtag .submenu-item.active .submenu-icon {
    background: var(--rs-icon-active-bg);
    color: var(--rs-icon-active-color);
}

/* Card title in dark sidebar */
body.role-user .card-title,
body.role-kangtag .card-title { color: inherit; }

/* Menu badge in dark sidebar */
body.role-user .menu-badge,
body.role-kangtag .menu-badge { opacity: .9; }

/* Topbar - match role color */
body.role-user .topbar { border-bottom-color: rgba(29,78,216,.15); }
body.role-kangtag .topbar { border-bottom-color: rgba(29,78,216,.15); }

/* ── User (Operator) theme: Deep Navy Blue ── */
body.role-user {
    --rs-sidebar-bg:         linear-gradient(180deg, #000814 0%, #03045e 45%, #023e8a 100%);
    --rs-sidebar-shadow:     rgba(0,119,182,.35);
    --rs-sidebar-border:     rgba(0,180,216,.15);
    --rs-header-bg:          linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
    --rs-label-color:        rgba(144,224,239,.6);
    --rs-item-color:         rgba(202,240,248,.88);
    --rs-item-hover-bg:      rgba(0,119,182,.35);
    --rs-item-hover-color:   #90e0ef;
    --rs-item-active-bg:     linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
    --rs-item-active-shadow: 0 4px 14px rgba(0,150,199,.5);
    --rs-icon-color:         rgba(72,202,228,.75);
    --rs-icon-active-bg:     rgba(0,180,216,.3);
    --rs-icon-active-color:  #caf0f8;
}

/* ── KangTagih theme: Ocean Blue (konsisten dengan User) ── */
body.role-kangtag {
    --rs-sidebar-bg:         linear-gradient(180deg, #000814 0%, #03045e 45%, #023e8a 100%);
    --rs-sidebar-shadow:     rgba(0,119,182,.35);
    --rs-sidebar-border:     rgba(0,180,216,.15);
    --rs-header-bg:          linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
    --rs-label-color:        rgba(144,224,239,.6);
    --rs-item-color:         rgba(202,240,248,.88);
    --rs-item-hover-bg:      rgba(0,119,182,.35);
    --rs-item-hover-color:   #90e0ef;
    --rs-item-active-bg:     linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
    --rs-item-active-shadow: 0 4px 14px rgba(0,150,199,.5);
    --rs-icon-color:         rgba(72,202,228,.75);
    --rs-icon-active-bg:     rgba(0,180,216,.3);
    --rs-icon-active-color:  #caf0f8;
}

/* ========================================
   99. REUSABLE COMPONENT CLASSES (Design System)
   ======================================== */

/* ── Unified Card ── */
.sf-card {
    background: var(--sf-white);
    border-radius: var(--sf-card-radius);
    box-shadow: var(--sf-card-shadow);
    border: 1px solid var(--sf-gray-100);
    overflow: hidden;
    transition: var(--sf-transition);
}
.sf-card:hover { box-shadow: var(--sf-card-shadow-hover); }
.sf-card-header {
    padding: var(--sf-space-4) var(--sf-space-5);
    border-bottom: 1px solid var(--sf-gray-100);
    background: var(--sf-gray-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sf-card-header h5, .sf-card-header h6 {
    margin: 0;
    font-weight: var(--sf-weight-semibold);
    color: var(--sf-gray-800);
}
.sf-card-body { padding: var(--sf-space-5); }
.sf-card-footer {
    padding: var(--sf-space-3) var(--sf-space-5);
    border-top: 1px solid var(--sf-gray-100);
    background: var(--sf-gray-50);
}

/* ── Stat Card (vertical layout — default) ── */
.sf-stat-card {
    background: var(--sf-white);
    border-radius: var(--sf-card-radius);
    box-shadow: var(--sf-card-shadow);
    padding: var(--sf-space-5);
    border: 1px solid var(--sf-gray-100);
    transition: var(--sf-transition);
    text-decoration: none;
    display: block;
    color: inherit;
}
.sf-stat-card:hover { box-shadow: var(--sf-card-shadow-hover); transform: translateY(-2px); }
.sf-stat-card .sf-stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--sf-btn-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--sf-space-3);
}
.sf-stat-card .sf-stat-label {
    font-size: var(--sf-text-xs);
    color: var(--sf-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--sf-weight-medium);
    margin-bottom: var(--sf-space-1);
}
.sf-stat-card .sf-stat-value {
    font-size: var(--sf-text-2xl);
    font-weight: var(--sf-weight-bold);
    color: var(--sf-gray-800);
    line-height: var(--sf-leading-tight);
}
.sf-stat-card .sf-stat-sub {
    font-size: var(--sf-text-xs);
    color: var(--sf-gray-500);
    margin-top: var(--sf-space-1);
}

/* ── Stat Card Horizontal (icon left, text right) ── */
.sf-stat-card.sf-stat-horizontal {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
}
.sf-stat-card.sf-stat-horizontal .sf-stat-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    margin-bottom: 0;
    flex-shrink: 0;
}
.sf-stat-card.sf-stat-horizontal .sf-stat-content {
    flex-grow: 1;
    min-width: 0;
}
.sf-stat-card.sf-stat-horizontal .sf-stat-label {
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-stat-card.sf-stat-horizontal .sf-stat-value {
    font-size: var(--sf-text-xl);
}

/* ── Stat Card Color Variants ── */
.sf-stat-card.sf-stat-primary .sf-stat-icon { background: var(--sf-primary-light); color: var(--sf-primary); }
.sf-stat-card.sf-stat-success .sf-stat-icon { background: var(--sf-success-light); color: var(--sf-success); }
.sf-stat-card.sf-stat-warning .sf-stat-icon { background: var(--sf-warning-light); color: var(--sf-warning); }
.sf-stat-card.sf-stat-danger  .sf-stat-icon { background: var(--sf-danger-light); color: var(--sf-danger); }
.sf-stat-card.sf-stat-info    .sf-stat-icon { background: var(--sf-info-light); color: var(--sf-info); }

/* ── Stat Card Left Border Variants ── */
.sf-stat-card.sf-stat-border-primary { border-left: 4px solid var(--sf-primary); }
.sf-stat-card.sf-stat-border-success { border-left: 4px solid var(--sf-success); }
.sf-stat-card.sf-stat-border-warning { border-left: 4px solid var(--sf-warning); }
.sf-stat-card.sf-stat-border-danger  { border-left: 4px solid var(--sf-danger); }

/* ── Section Title ── */
.sf-section-title {
    font-size: var(--sf-text-lg);
    font-weight: var(--sf-weight-semibold);
    color: var(--sf-gray-800);
    margin-bottom: var(--sf-space-4);
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
}
.sf-section-title i { color: var(--sf-primary); }

/* ── Unified Table ── */
.sf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sf-text-sm);
    line-height: var(--sf-leading-normal);
}
.sf-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sf-gray-50);
    color: var(--sf-gray-600);
    font-weight: var(--sf-weight-semibold);
    font-size: var(--sf-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--sf-space-3) var(--sf-space-4);
    border-bottom: 2px solid var(--sf-gray-200);
    vertical-align: middle;
    white-space: nowrap;
}
.sf-table tbody td {
    padding: var(--sf-space-3) var(--sf-space-4);
    border-bottom: 1px solid var(--sf-gray-100);
    color: var(--sf-gray-700);
    vertical-align: middle;
}
.sf-table tbody tr:hover { background: var(--sf-gray-50); }
.sf-table tbody tr:last-child td { border-bottom: none; }

/* Table alignment utilities */
.sf-table .col-num,
.sf-table td.text-end,
.sf-table th.text-end { text-align: right; }
.sf-table .col-status,
.sf-table td.text-center,
.sf-table th.text-center { text-align: center; }
.sf-table .col-action,
.sf-table td.col-action { text-align: center; white-space: nowrap; }
.sf-table td.col-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--sf-weight-semibold); }
.sf-table tfoot th {
    background: var(--sf-gray-50);
    border-top: 2px solid var(--sf-gray-200);
    padding: var(--sf-space-3) var(--sf-space-4);
    font-weight: var(--sf-weight-bold);
    color: var(--sf-gray-800);
    font-size: var(--sf-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Theme toggle button ── */
/* Markup: <button data-theme-toggle><i class="fas fa-moon theme-icon-dark"></i><i class="fas fa-sun theme-icon-light"></i></button>
   theme-toggle.js flips [data-theme] on <html>; these rules just pick which icon shows. */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--sf-gray-200);
    background: var(--sf-white);
    color: var(--sf-gray-600);
    transition: var(--sf-transition-fast);
}
.theme-toggle-btn:hover {
    background: var(--sf-gray-100);
    color: var(--sf-primary);
    border-color: var(--sf-primary-light);
}
.theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-light { display: inline; }
[data-theme="dark"] .theme-icon-dark  { display: none; }

/* Table responsive wrapper */
.sf-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sf-table-responsive .sf-table { min-width: 600px; }

/* ── Unified Badge ── */
.sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-semibold);
    line-height: 1.4;
}
.sf-badge-success { background: var(--sf-success-light); color: var(--sf-success); }
.sf-badge-warning { background: var(--sf-warning-light); color: #92400e; }
.sf-badge-danger  { background: var(--sf-danger-light); color: var(--sf-danger); }
.sf-badge-info    { background: var(--sf-info-light); color: var(--sf-info); }
.sf-badge-primary { background: var(--sf-primary-light); color: var(--sf-primary-dark); }

/* ── Unified Progress Bar ── */
.sf-progress {
    height: 22px;
    border-radius: var(--sf-btn-radius-sm);
    background: var(--sf-gray-100);
    overflow: hidden;
}
.sf-progress-bar {
    height: 100%;
    border-radius: var(--sf-btn-radius-sm);
    transition: width .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-semibold);
    color: var(--sf-white);
}
.sf-progress-bar.success { background: var(--sf-success); }
.sf-progress-bar.warning { background: var(--sf-warning); }
.sf-progress-bar.danger  { background: var(--sf-danger); }
.sf-progress-bar.primary { background: var(--sf-primary); }

/* ── Page Header ── */
.sf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sf-space-3);
    margin-bottom: var(--sf-space-6);
}
.sf-page-header h1, .sf-page-header h2 {
    margin: 0;
    font-weight: var(--sf-weight-bold);
    color: var(--sf-gray-800);
}
.sf-page-header .sf-page-subtitle {
    font-size: var(--sf-text-sm);
    color: var(--sf-gray-500);
    margin-top: var(--sf-space-1);
}

/* ── Back Button ── */
.sf-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    color: var(--sf-gray-600);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-weight-medium);
    text-decoration: none;
    padding: var(--sf-space-2) var(--sf-space-3);
    border-radius: var(--sf-btn-radius-sm);
    border: 1px solid var(--sf-gray-200);
    background: var(--sf-white);
    transition: var(--sf-transition);
    min-height: 38px;
}
.sf-back-btn:hover {
    color: var(--sf-primary);
    background: var(--sf-primary-light);
    border-color: var(--sf-primary-light);
    text-decoration: none;
    transform: translateX(-2px);
}
.sf-back-btn i { font-size: 0.75rem; }

/* Legacy .back-button compat — redirect to sf-back-btn style */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    color: var(--sf-gray-600);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-weight-medium);
    text-decoration: none;
    padding: var(--sf-space-2) var(--sf-space-3);
    border-radius: var(--sf-btn-radius-sm);
    border: 1px solid var(--sf-gray-200);
    background: var(--sf-white);
    transition: var(--sf-transition);
    min-height: 38px;
}
.back-button:hover {
    color: var(--sf-primary);
    background: var(--sf-primary-light);
    border-color: var(--sf-primary-light);
    text-decoration: none;
    transform: translateX(-2px);
}

/* ── Empty State ── */
.sf-empty-state {
    text-align: center;
    padding: var(--sf-space-12) var(--sf-space-4);
}
.sf-empty-state i {
    font-size: 4rem;
    color: var(--sf-gray-300);
    margin-bottom: var(--sf-space-4);
}
.sf-empty-state h4 {
    color: var(--sf-gray-600);
    margin-bottom: var(--sf-space-2);
}
.sf-empty-state p {
    color: var(--sf-gray-400);
    font-size: var(--sf-text-sm);
}

/* ========================================
   20. MOBILE NATIVE AUDIT — CONSISTENCY FIX
   Ensures all roles (user, router, admin, kangtag, teknisi, pelanggan)
   have consistent, native Android-like mobile UI
   ======================================== */

/* ── 20a. CARD ICON ALIGNMENT ── */
@media (max-width: 991.98px) {
    .menu-card .card-icon,
    .menu-card .menu-icon,
    .stat-icon,
    .card-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
    }

    .menu-card .card-link,
    .menu-card .card-trigger {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem;
    }

    .menu-card .card-link > span,
    .menu-card .card-trigger > span {
        flex: 1;
        min-width: 0;
    }
}

/* ── 20b. TYPOGRAPHY STANDARDIZATION ── */
@media (max-width: 768px) {
    .card-title,
    .card-header h4,
    .card-header h5,
    .card-header h6 {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    .card-text,
    .card-body p,
    .text-muted {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    .stat-card .stat-value,
    .stat-card .h3,
    .stat-card .h4,
    .summary-card .h3,
    .summary-card .h4 {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .stat-card .stat-label,
    .stat-card .text-muted,
    .summary-card .text-muted {
        font-size: 0.6875rem !important;
        font-weight: 500 !important;
    }

    .dropdown-header {
        font-size: 0.7rem !important;
    }
}

/* ── 20c. LAYOUT & SPACING (8/12/16px grid) ── */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(var(--sf-bottom-nav-height, 60px) + var(--sf-safe-bottom, 0px) + 16px) !important;
    }

    main {
        padding: 12px !important;
        padding-bottom: calc(var(--sf-bottom-nav-height, 60px) + var(--sf-safe-bottom, 0px) + 16px) !important;
    }

    .card {
        margin-bottom: 12px !important;
        border-radius: 12px !important;
        overflow: hidden;
    }

    .card-body {
        padding: 12px !important;
    }

    .card-header {
        padding: 10px 12px !important;
    }

    .card-footer {
        padding: 10px 12px !important;
    }

    .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .row.g-3 {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
    }

    .row.g-4 {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .mb-3 { margin-bottom: 12px !important; }
    .mb-4 { margin-bottom: 16px !important; }
    .mt-3 { margin-top: 12px !important; }
    .mt-4 { margin-top: 16px !important; }
    .gap-2 { gap: 8px !important; }
    .gap-3 { gap: 12px !important; }
}

@media (max-width: 575.98px) {
    main {
        padding: 8px !important;
        padding-bottom: calc(var(--sf-bottom-nav-height, 60px) + var(--sf-safe-bottom, 0px) + 16px) !important;
    }

    .card {
        margin-bottom: 8px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .card-header {
        padding: 8px 10px !important;
    }

    .row {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
    }
}

/* ── 20d. NATIVE ANDROID FEEL ── */
@media (max-width: 991.98px) {
    /* Card: Material Design style */
    .card {
        border: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important;
        transition: box-shadow .2s ease, transform .1s ease !important;
    }

    .card:hover {
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important;
    }

    .card:active {
        transform: scale(0.99) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    }

    /* Stat cards */
    .stat-card,
    .summary-card,
    .stats-card {
        border: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important;
        border-radius: 12px !important;
    }

    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal overflow */
    body, html {
        overflow-x: hidden !important;
    }

    .container-fluid,
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ── 20e. HEADER & NAVIGATION ── */
@media (max-width: 768px) {
    .topbar,
    .admin-header,
    .portal-topbar {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 12px !important;
    }

    .topbar-left h4,
    .topbar-left h3,
    .admin-header h4,
    .admin-header h3 {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        max-width: 160px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-toggle,
    .admin-menu-toggle,
    .mobile-menu-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
    }

    .menu-toggle i,
    .admin-menu-toggle i {
        font-size: 1.125rem !important;
    }

    /* Bottom nav: ensure 44px tap target */
    .bottom-nav-item,
    .bnav-item {
        min-height: 44px !important;
        padding: 6px 0 !important;
    }

    .bottom-nav-item i,
    .bnav-item i {
        font-size: 1.125rem !important;
    }

    .bottom-nav-item span,
    .bnav-item span {
        font-size: 0.625rem !important;
        font-weight: 500 !important;
    }

    /* Sidebar menu items */
    .sidebar .nav-link,
    .admin-sidebar .menu-item,
    .friendly-sidebar-menu .submenu-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.625rem 0.875rem !important;
    }

    .sidebar .nav-link i,
    .admin-sidebar .menu-item i {
        font-size: 1rem !important;
        width: 20px !important;
        text-align: center !important;
        flex-shrink: 0;
    }

    .sidebar .nav-link span,
    .admin-sidebar .menu-item-text {
        font-size: 0.8125rem !important;
        font-weight: 500 !important;
    }
}

/* ── 20f. TABLES ON MOBILE ── */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    .table {
        white-space: nowrap !important;
        margin-bottom: 0 !important;
    }

    .table th {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        padding: 8px 10px !important;
        background: var(--sf-gray-50) !important;
        border-bottom: 1px solid var(--sf-gray-200) !important;
    }

    .table td {
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
        vertical-align: middle !important;
    }

    .table thead th:first-child,
    .table td:first-child {
        position: sticky;
        left: 0;
        background: var(--sf-white);
        z-index: 1;
        box-shadow: 2px 0 0 var(--sf-gray-100);
    }

    .table thead th:first-child {
        background: var(--sf-gray-50);
    }

    /* Numeric columns right-aligned */
    .table .text-end,
    .table td.text-end,
    .table th.text-end {
        text-align: right !important;
    }
}

/* ── 20g. BUTTONS & INTERACTIONS ── */
@media (max-width: 768px) {
    .btn {
        min-height: 40px !important;
        font-size: 0.8125rem !important;
        font-weight: 500 !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.375rem !important;
    }

    .btn-sm {
        min-height: 34px !important;
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
    }

    .btn:active {
        transform: scale(0.97) !important;
    }

    .btn-group .btn,
    .btn-group > .btn {
        min-height: 40px !important;
    }

    /* Full-width buttons on mobile when in card footer */
    .card-footer .btn,
    .card-footer .d-flex .btn {
        flex: 1;
        min-width: 0;
    }

    /* Back button */
    .back-button {
        min-height: 40px !important;
        font-size: 0.8125rem !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 575.98px) {
    .btn {
        min-height: 38px !important;
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }

    .btn-sm {
        min-height: 32px !important;
        font-size: 0.7rem !important;
        padding: 5px 8px !important;
    }
}

/* ── 20h. VISUAL CONSISTENCY ── */
@media (max-width: 991.98px) {
    /* Consistent icon sizes in cards */
    .menu-card .card-icon,
    .menu-card .menu-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        font-size: 0.875rem !important;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 1rem !important;
    }

    /* Consistent badge sizing */
    .badge {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        padding: 0.25em 0.5em !important;
        border-radius: 4px !important;
    }

    /* Alerts: Material style */
    .alert {
        border: none !important;
        border-radius: 8px !important;
        font-size: 0.75rem !important;
        padding: 10px 14px !important;
    }

    /* Form controls: consistent height */
    .form-control,
    .form-select {
        min-height: 40px !important;
        font-size: 0.8125rem !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
    }

    .form-label {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
    }

    /* Input groups */
    .input-group .btn {
        min-height: 40px !important;
    }

    /* Pagination: larger tap targets */
    .pagination .page-link {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
    }
}

/* ── 20i. MODAL ON MOBILE ── */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 16px !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 12px 16px !important;
    }

    .modal-header .modal-title {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-footer {
        padding: 10px 16px !important;
    }

    .modal-footer .btn {
        min-height: 38px !important;
    }
}

/* ── 20j. PREVENT OVERFLOW & SMOOTH UX ── */
@media (max-width: 991.98px) {
    /* Prevent text selection on UI elements (native app feel) */
    .btn,
    .bottom-nav-item,
    .bnav-item,
    .menu-card,
    .nav-link,
    .dropdown-item {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Remove hover effects on touch devices */
    @media (hover: none) {
        .card:hover,
        .menu-card:hover,
        .stat-card:hover {
            transform: none !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important;
        }

        .btn:hover {
            transform: none !important;
        }
    }

    /* Smooth scroll for entire page */
    html {
        scroll-behavior: smooth;
    }
}

/* ========================================
   14. TEKNISI LAYOUT (tk- classes)
   Shared sidebar + content layout for all teknisi pages
   ======================================== */

/* ── Layout Shell ── */
.tk-layout {
    display: flex;
    min-height: 100vh;
    background: var(--sf-gray-50);
}

/* ── Sidebar ── */
.tk-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: linear-gradient(175deg, #000814 0%, #03045e 60%, #023e8a 100%);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: transform .3s ease;
    overflow: hidden;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
}

.tk-sidebar.collapsed {
    transform: translateX(-240px);
}

/* ── Sidebar Brand ── */
.tk-sidebar-brand {
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
    flex-shrink: 0;
}

.tk-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tk-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.tk-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tk-brand-icon i {
    color: #fff;
    font-size: 1rem;
}

.tk-brand-text {
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-brand-sub {
    color: rgba(255,255,255,.55);
    font-size: .65rem;
    font-weight: 500;
    margin-top: 1px;
}

/* ── User Panel ── */
.tk-user-panel {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.tk-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tk-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,119,182,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(0,180,216,.45);
}

.tk-user-name {
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-user-role {
    color: rgba(202,240,248,.6);
    font-size: .63rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Navigation ── */
.tk-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.tk-nav::-webkit-scrollbar {
    width: 3px;
}

.tk-nav::-webkit-scrollbar-track {
    background: transparent;
}

.tk-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 2px;
}

.tk-nav-section {
    padding: 10px 16px 4px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255,255,255,.35);
}

.tk-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: rgba(202,240,248,.75);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.tk-nav-item:hover {
    background: rgba(0,119,182,.3);
    color: #90e0ef;
    text-decoration: none;
}

.tk-nav-item.active {
    background: rgba(0,119,182,.4);
    color: #caf0f8;
    border-left-color: #0ea5e9;
    font-weight: 600;
}

.tk-nav-item i {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: .85rem;
}

/* ── Sidebar Footer ── */
.tk-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.tk-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.5);
    font-size: .78rem;
    text-decoration: none;
    transition: color .2s;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    padding: 0;
}

.tk-logout:hover {
    color: #f87171;
}

/* ── Content Area ── */
.tk-content {
    flex: 1;
    margin-left: 240px;
    transition: margin-left .3s;
    min-height: 100vh;
    background: var(--sf-gray-50);
    display: flex;
    flex-direction: column;
}

.tk-content.expanded {
    margin-left: 0;
}

/* ── Topbar ── */
.tk-topbar {
    background: var(--sf-white);
    border-bottom: 1px solid var(--sf-gray-200);
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    flex-shrink: 0;
}

.tk-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tk-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: var(--sf-gray-700);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.tk-hamburger:hover {
    background: var(--sf-gray-100);
}

.tk-topbar-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--sf-gray-800);
}

.tk-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tk-topbar-user {
    font-size: .78rem;
    color: var(--sf-gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Device Selector ── */
.tk-device-selector .btn {
    font-size: .75rem;
    padding: 4px 10px;
    border-radius: 6px;
}

/* ── Page Body ── */
.tk-page-body {
    padding: 24px;
    flex: 1;
    max-width: 100%;
    overflow-x: hidden;
}

/* ── Overlay (mobile) ── */
.tk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1025;
    backdrop-filter: blur(2px);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .tk-sidebar {
        transform: translateX(-240px);
    }
    .tk-sidebar.open {
        transform: translateX(0);
    }
    .tk-content {
        margin-left: 0;
    }
    .tk-hamburger {
        display: flex;
    }
    .tk-overlay.show {
        display: block;
    }
    .tk-page-body {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .tk-page-body {
        padding: 12px;
    }
    .tk-topbar {
        padding: 0 14px;
    }
    .tk-topbar-user {
        display: none !important;
    }
}

/* ── WhatsApp Gateway provider card (moved from the now-retired
   assets/css/salfanet-theme.css — only consumer: user/whatsapp_gateway.php) ── */
.provider-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1rem;
    border: 2px solid var(--sf-gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--sf-transition-fast);
    background: var(--sf-white);
    margin: 0;
    width: 100%;
}
.provider-card:hover {
    border-color: var(--sf-primary);
    background: var(--sf-primary-light);
}
.provider-card.active {
    border-color: var(--sf-success);
    background: var(--sf-success-light);
}
.provider-card .provider-check { display: none; }
.provider-card.active .provider-check { display: block; }

code {
    background: var(--sf-gray-100);
    color: var(--sf-gray-700);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .8rem;
}