/* =====================================================================
   SERVICE MANAGER - DESIGN SYSTEM
   Premium modern SaaS theme (dark-first)
   ===================================================================== */

:root {
    --c-bg:           #0b1020;
    --c-bg-soft:      #0f172a;
    --c-surface:      #111a33;
    --c-surface-2:    #16223f;
    --c-border:       rgba(255, 255, 255, 0.08);
    --c-border-strong:rgba(255, 255, 255, 0.14);
    --c-text:         #e5edff;
    --c-text-muted:   #9aa6c2;
    --c-text-dim:     #6b7594;

    --c-primary:      #6366f1;
    --c-primary-600:  #4f46e5;
    --c-primary-soft: rgba(99, 102, 241, 0.14);
    --c-success:      #10b981;
    --c-warning:      #f59e0b;
    --c-danger:       #ef4444;
    --c-info:         #06b6d4;
    --c-accent:       #22d3ee;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 10px 30px rgba(2, 6, 23, 0.45);
    --shadow-lg: 0 20px 50px rgba(2, 6, 23, 0.55);

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 22px;

    --sidebar-w: 272px;
    --sidebar-w-collapsed: 84px;
    --topbar-h:  68px;

    --transition: .25s cubic-bezier(.4,.0,.2,1);
}

/* ------------------- LIGHT MODE ------------------- */
body[data-theme="light"] {
    --c-bg:           #f3f5fb;
    --c-bg-soft:      #eef1f8;
    --c-surface:      #ffffff;
    --c-surface-2:    #f7f8fc;
    --c-border:       rgba(15, 23, 42, 0.08);
    --c-border-strong:rgba(15, 23, 42, 0.15);
    --c-text:         #0f172a;
    --c-text-muted:   #475569;
    --c-text-dim:     #64748b;
    --c-primary-soft: rgba(99, 102, 241, 0.12);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); }

/* =====================================================================
   AUTH (login/register/forgot)
   ===================================================================== */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background:
        radial-gradient(1200px 600px at 0% 0%, rgba(99,102,241,.25), transparent 60%),
        radial-gradient(900px 600px at 100% 100%, rgba(34,211,238,.18), transparent 55%),
        linear-gradient(135deg, #0b1020, #0f172a 60%);
}

.auth-panel {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-panel::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(600px 400px at 20% 30%, rgba(99,102,241,.25), transparent 60%),
        radial-gradient(500px 400px at 80% 80%, rgba(34,211,238,.18), transparent 60%);
    pointer-events: none;
}
.auth-brand {
    display: flex; align-items: center; gap: .75rem;
    font-weight: 800; font-size: 1.35rem; letter-spacing: .5px;
    color: #fff;
}
.auth-brand-mark {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 30px rgba(99,102,241,.35);
    font-size: 1.4rem; color: #fff;
}
.auth-title { font-weight: 800; font-size: 2.15rem; margin: 1rem 0 .4rem; color: #fff; }
.auth-subtitle { color: #b4c0dc; margin-bottom: 2rem; }

.auth-form {
    position: relative; z-index: 1;
    background: rgba(17, 26, 51, 0.65);
    border: 1px solid var(--c-border);
    backdrop-filter: blur(14px);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-aside {
    padding: 3rem;
    display: flex; flex-direction: column; justify-content: center;
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(99,102,241,.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(34,211,238,.3) 0%, transparent 50%),
        linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #1e3a8a 100%);
    border-left: 1px solid rgba(255,255,255,.08);
}
.auth-aside::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='2' cy='2' r='1.5' fill='%23ffffff15'/></svg>");
    opacity: .6;
    pointer-events: none;
}
.auth-aside::after {
    content: "";
    position: absolute; top: -50%; right: -30%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(99,102,241,.25) 0%, transparent 70%);
    pointer-events: none;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside h3 { font-weight: 800; font-size: 1.8rem; color: #fff; }
.auth-aside .feature {
    display:flex; gap: .75rem; padding:.6rem 0; align-items:flex-start;
    color:#cbd5f1;
}
.auth-aside .feature i {
    width: 32px; height: 32px; border-radius: 10px;
    background: rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    flex-shrink: 0;
}

/* Auth light mode */
body[data-theme="light"] .auth-shell {
    background:
        radial-gradient(1200px 600px at 0% 0%, rgba(99,102,241,.12), transparent 60%),
        radial-gradient(900px 600px at 100% 100%, rgba(34,211,238,.08), transparent 55%),
        linear-gradient(135deg, #f8fafc, #eef2f7 60%);
}
body[data-theme="light"] .auth-panel::before {
    background:
        radial-gradient(600px 400px at 20% 30%, rgba(99,102,241,.1), transparent 60%),
        radial-gradient(500px 400px at 80% 80%, rgba(34,211,238,.08), transparent 60%);
}
body[data-theme="light"] .auth-brand { color: #0f172a; }
body[data-theme="light"] .auth-title { color: #0f172a; }
body[data-theme="light"] .auth-subtitle { color: #475569; }
body[data-theme="light"] .auth-form {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .auth-aside {
    background:
        radial-gradient(circle at 20% 20%, rgba(99,102,241,.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(34,211,238,.06) 0%, transparent 50%),
        linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%);
    border-left: 1px solid rgba(15,23,42,.08);
    color: #1e293b;
}
body[data-theme="light"] .auth-aside::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='2' cy='2' r='1.5' fill='%236366f115'/></svg>");
}
body[data-theme="light"] .auth-aside::after {
    background: radial-gradient(circle, rgba(99,102,241,.08) 0%, transparent 70%);
}
body[data-theme="light"] .auth-aside h3 { color: #0f172a; }
body[data-theme="light"] .auth-aside .feature { color: #475569; }
body[data-theme="light"] .auth-aside .feature i { background: rgba(99,102,241,.1); }

@media (max-width: 992px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-panel { padding: 1.5rem; }
}

/* =====================================================================
   APP LAYOUT (Sidebar + Topbar + Main)
   ===================================================================== */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, #0d1430 0%, #0b1020 100%);
    border-right: 1px solid var(--c-border);
    color: var(--c-text);
    display: flex; flex-direction: column;
    position: sticky;
    top: 0; left: 0;
    height: 100vh;
    transition: transform var(--transition), width var(--transition);
    z-index: 1050;
}
body[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
}

.sidebar-header {
    padding: 1.1rem 1.25rem;
    display: flex; align-items: center; gap: .75rem;
    border-bottom: 1px solid var(--c-border);
}
.sidebar-logo {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size: 1.15rem;
    box-shadow: 0 8px 22px rgba(99,102,241,.35);
}
.sidebar-title { font-weight: 800; letter-spacing: .3px; }
.sidebar-title small { color: var(--c-text-dim); font-weight: 500; font-size: .7rem; letter-spacing: 1.5px; display:block; margin-top: 2px; }

.sidebar-nav { padding: 1rem .75rem; flex: 1; overflow-y: auto; }
.sidebar-section {
    font-size: .7rem; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--c-text-dim); padding: 1rem .75rem .35rem;
}
.sidebar-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .8rem; border-radius: 12px;
    color: var(--c-text-muted);
    font-weight: 500;
    position: relative;
    transition: all var(--transition);
    margin-bottom: 2px;
}
.sidebar-link i { width: 22px; text-align: center; font-size: 1.05rem; }
.sidebar-link:hover {
    background: rgba(255,255,255,.04);
    color: var(--c-text);
    transform: translateX(2px);
}
.sidebar-link.active {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-600));
    color: #fff;
    box-shadow: 0 8px 18px rgba(99,102,241,.35);
}
.sidebar-footer {
    padding: .9rem 1rem;
    border-top: 1px solid var(--c-border);
    display:flex; align-items:center; gap:.75rem;
}
.sidebar-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight: 700; font-size: .95rem;
    overflow: hidden;
}
.sidebar-avatar img { width:100%; height:100%; object-fit: cover; }

.main-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background:
        radial-gradient(1000px 600px at 100% -10%, rgba(99,102,241,.12), transparent 60%),
        radial-gradient(800px 600px at 0% 120%, rgba(34,211,238,.08), transparent 60%),
        var(--c-bg);
}

.topbar {
    height: var(--topbar-h);
    padding: 0 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    border-bottom: 1px solid var(--c-border);
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(14px);
    position: sticky; top: 0; z-index: 20;
}
body[data-theme="light"] .topbar { background: rgba(255,255,255,.7); }

.topbar-title { font-weight: 700; font-size: 1.05rem; }
.topbar-title small { color: var(--c-text-dim); display:block; font-weight:400; font-size:.75rem; }

.topbar-search {
    flex: 1; max-width: 420px;
    display:flex; align-items:center; gap:.6rem;
    padding: .55rem .9rem;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border:1px solid var(--c-border);
    color: var(--c-text);
    position: relative;
}
.topbar-search input {
    background: transparent; border: 0; outline: 0;
    color: inherit; flex: 1; font-size: .9rem;
}
.topbar-search .search-results {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    max-height: 380px; overflow-y: auto;
    z-index: 50;
    padding: .35rem;
}
.topbar-search .search-results .sr-item {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .55rem .7rem; border-radius: 10px; color: var(--c-text);
    cursor: pointer;
}
.topbar-search .search-results .sr-item:hover,
.topbar-search .search-results .sr-item.focus { background: rgba(255,255,255,.06); }
.topbar-search .search-results .sr-empty {
    padding: 1.25rem; color: var(--c-text-dim); text-align: center; font-size: .85rem;
}
.topbar-icon-btn {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.04);
    border:1px solid var(--c-border);
    color: var(--c-text);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
    cursor: pointer;
    position: relative;
}
.topbar-icon-btn:hover { color: var(--c-text); background: rgba(255,255,255,.08); transform: translateY(-1px); }
.topbar-icon-btn .dot { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background: var(--c-danger); box-shadow: 0 0 0 2px var(--c-bg); }

.topbar-user {
    display:flex; align-items:center; gap:.6rem; padding: .35rem .6rem .35rem .35rem;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    cursor: pointer;
}
.topbar-user:hover { background: rgba(255,255,255,.08); color: var(--c-text); }
.topbar-user .sidebar-avatar { width: 32px; height: 32px; font-size: .8rem; }

.content { padding: 1.5rem; flex: 1; }
.content-header { display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.content-header h1 { font-size: 1.45rem; font-weight: 800; margin: 0; }
.content-header p { color: var(--c-text-muted); margin: 0; }

.breadcrumb {
    font-size: .8rem;
    color: var(--c-text-dim);
    margin: 0;
    padding: .5rem 0;
    display:flex; gap:.35rem; align-items: center;
    list-style: none;
    flex-wrap: wrap;
}
.breadcrumb li + li::before { content: '›'; margin-right: .35rem; color: var(--c-text-dim); font-size: 1rem; }
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-text); }

/* Sidebar collapse (desktop) */
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar-title,
body.sidebar-collapsed .sidebar-section,
body.sidebar-collapsed .sidebar-link span,
body.sidebar-collapsed .sidebar-footer .flex-grow-1 { display: none; }
body.sidebar-collapsed .sidebar-link { justify-content: center; padding: .65rem; }
body.sidebar-collapsed .sidebar-link i { margin: 0; font-size: 1.15rem; }
body.sidebar-collapsed .sidebar-header { justify-content: center; padding: 1.1rem .5rem; }
body.sidebar-collapsed .sidebar-footer { justify-content: center; }
@media (max-width: 991.98px) { body.sidebar-collapsed .sidebar { width: var(--sidebar-w); } }

/* Sidebar mobile overlay */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    z-index: 1049;
    opacity: 0;
    transition: opacity var(--transition);
}
body.sidebar-open .sidebar-overlay { display: block; opacity: 1; }

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        transform: translateX(-110%);
        box-shadow: none;
        transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 20px 0 60px rgba(0,0,0,.3);
    }
    .main-wrap { width: 100%; }
}

/* =====================================================================
   CARDS
   ===================================================================== */
.card-sm {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-sm:hover { transform: translateY(-3px); border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }

.stat-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    color: var(--c-text);
    transition: transform var(--transition), box-shadow var(--transition);
    min-height: 130px;
}
.stat-card::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--grad-start, rgba(99,102,241,.18)), transparent 60%);
    pointer-events: none;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--icon-bg, rgba(99,102,241,.18));
    color: var(--icon-color, var(--c-primary));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
}
.stat-card h3 { font-size: 2rem; font-weight: 800; margin: 0; letter-spacing: -.5px; }
.stat-card .stat-label { color: var(--c-text-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; }
.stat-card .stat-sub { font-size: .8rem; color: var(--c-text-dim); margin-top: .25rem; }

/* Stat variants */
.stat-card.is-primary { --grad-start: rgba(99,102,241,.22); --icon-bg: rgba(99,102,241,.18); --icon-color:#a5b4fc; }
.stat-card.is-success { --grad-start: rgba(16,185,129,.22);  --icon-bg: rgba(16,185,129,.18); --icon-color:#6ee7b7; }
.stat-card.is-warning { --grad-start: rgba(245,158,11,.22);  --icon-bg: rgba(245,158,11,.18); --icon-color:#fcd34d; }
.stat-card.is-danger  { --grad-start: rgba(239,68,68,.22);   --icon-bg: rgba(239,68,68,.18);  --icon-color:#fca5a5; }
.stat-card.is-info    { --grad-start: rgba(6,182,212,.22);   --icon-bg: rgba(6,182,212,.18);  --icon-color:#67e8f9; }

.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--c-border);
    display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap: wrap;
}
.panel-header h5 { margin: 0; font-weight: 700; }
.panel-body { padding: 1.25rem; }
.panel-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--c-border); }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-label { font-weight: 600; color: var(--c-text); font-size: .85rem; }
.form-control, .form-select {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: 10px;
    padding: .6rem .9rem;
    font-size: .9rem;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
body[data-theme="light"] .form-control,
body[data-theme="light"] .form-select {
    background: #fff;
}
.form-control:focus, .form-select:focus {
    outline: none;
    background: rgba(255,255,255,.06);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-soft);
    color: var(--c-text);
}
body[data-theme="light"] .form-control:focus,
body[data-theme="light"] .form-select:focus { background: #fff; }
.form-control::placeholder { color: var(--c-text-dim); }
textarea.form-control { min-height: 110px; }
.input-icon { position: relative; }
.input-icon .bi { position: absolute; top: 50%; left: .9rem; transform: translateY(-50%); color: var(--c-text-dim); }
.input-icon .form-control { padding-left: 2.4rem; }

.btn {
    font-weight: 600;
    padding: .55rem 1rem;
    border-radius: 10px;
    font-size: .88rem;
    transition: all var(--transition);
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: .4rem;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-600));
    color:#fff; border: 0;
    box-shadow: 0 8px 18px rgba(99,102,241,.35);
}
.btn-primary:hover { filter: brightness(1.08); color:#fff; box-shadow: 0 12px 24px rgba(99,102,241,.45); }
.btn-outline {
    background: rgba(255,255,255,.02);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}
.btn-outline:hover { background: rgba(255,255,255,.06); color: var(--c-text); }
.btn-ghost { background: transparent; color: var(--c-text-muted); }
.btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--c-text); }
.btn-danger { background: var(--c-danger); color:#fff; border:0; }
.btn-danger:hover { filter: brightness(1.1); color:#fff; }
.btn-success { background: var(--c-success); color:#fff; border:0; }
.btn-success:hover { filter: brightness(1.1); color:#fff; }
.btn-warning { background: var(--c-warning); color:#1f2937; border:0; }
.btn-icon { width: 38px; height: 38px; padding: 0; justify-content:center; }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; border-radius: 8px; }

/* =====================================================================
   TABLES
   ===================================================================== */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
}
.table-custom {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
}
.table-custom thead th {
    background: var(--c-surface-2);
    color: var(--c-text-muted);
    font-size: .72rem;
    text-transform: uppercase; letter-spacing: 1px;
    font-weight: 700;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    white-space: nowrap;
}
.table-custom tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}
.table-custom tbody tr:hover td { background: rgba(255,255,255,.02); }
.table-custom tbody tr:last-child td { border-bottom: 0; }

/* Badges */
.badge-pill {
    display: inline-flex; align-items:center; gap:.35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase; letter-spacing: .6px;
}
.badge-pill.success { background: rgba(16,185,129,.18); color: #6ee7b7; }
.badge-pill.warning { background: rgba(245,158,11,.18); color: #fcd34d; }
.badge-pill.info    { background: rgba(6,182,212,.18);  color: #67e8f9; }
.badge-pill.danger  { background: rgba(239,68,68,.18);  color: #fca5a5; }
.badge-pill.secondary{background: rgba(148,163,184,.18);color: #cbd5e1; }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-content {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    color: var(--c-text);
}
.modal-header { border-bottom: 1px solid var(--c-border); }
.modal-footer { border-top: 1px solid var(--c-border); }
.btn-close { filter: invert(1) grayscale(100%) brightness(1.5); }
body[data-theme="light"] .btn-close { filter: none; }
.modal-backdrop.show { opacity: .65; }

/* =====================================================================
   UPLOAD ZONE
   ===================================================================== */
.upload-zone {
    border: 2px dashed var(--c-border-strong);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    background: rgba(255,255,255,.02);
    transition: all var(--transition);
    cursor: pointer;
}
.upload-zone:hover, .upload-zone.drag {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}
.upload-zone i { font-size: 2.2rem; color: var(--c-primary); }
.upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}
.upload-preview .thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-surface-2);
}
.upload-preview .thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.upload-preview .thumb .rm {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,.6); color:#fff;
    width: 24px; height: 24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:0; cursor:pointer;
}

/* =====================================================================
   TIMELINE
   ===================================================================== */
.timeline { position: relative; padding-left: 1.5rem; margin: 0; list-style: none; }
.timeline::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--c-primary), transparent);
    opacity: .5;
}
.timeline-item { position: relative; padding: 0 0 1rem 1rem; }
.timeline-item::before {
    content: "";
    position: absolute; left: -1.42rem; top: .25rem;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}
.timeline-item .time { font-size: .72rem; color: var(--c-text-dim); }

/* =====================================================================
   FLOATING ACTION BUTTON (MOBILE)
   ===================================================================== */
.fab {
    position: fixed; bottom: 20px; right: 20px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-600));
    color: #fff;
    display: none;
    align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 14px 30px rgba(99,102,241,.45);
    z-index: 1040; border: 0;
}
.fab:hover { transform: translateY(-2px); }
@media (max-width: 991.98px) { .fab { display: flex; } }

/* =====================================================================
   EMPTY STATE
   ===================================================================== */
.empty-state { text-align:center; padding: 3rem 1rem; color: var(--c-text-muted); }
.empty-state i { font-size: 3rem; color: var(--c-text-dim); margin-bottom: .5rem; }
.empty-state h5 { color: var(--c-text); font-weight: 700; margin-bottom: .35rem; }

/* =====================================================================
   PAGINATION
   ===================================================================== */
.pager { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.pager a, .pager span {
    min-width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 .6rem;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-weight: 600; font-size: .85rem;
    transition: all var(--transition);
}
.pager a:hover { background: rgba(255,255,255,.08); color: var(--c-text); }
.pager .active { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-600)); color: #fff; border: 0; }
.pager .disabled { opacity: .4; pointer-events: none; }

/* =====================================================================
   GRID JOB CARDS
   ===================================================================== */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
.job-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.1rem;
    transition: all var(--transition);
    display: flex; flex-direction: column; gap: .5rem;
    position: relative; overflow: hidden;
    font: inherit; color: inherit; text-align: left; /* button reset */
}
.job-card:hover { transform: translateY(-4px); border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
.job-card .code { font-size: .72rem; color: var(--c-text-dim); letter-spacing: 1px; text-transform: uppercase; }
.job-card .title { font-weight: 700; color: var(--c-text); }
.job-card .meta { font-size: .82rem; color: var(--c-text-muted); display:flex; gap: .5rem; align-items:center; }

/* =====================================================================
   LOGIN OVERLAY / LOADING
   ===================================================================== */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.7);
    display: none; align-items: center; justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(3px);
}
.loading-overlay.show { display: flex; }
.spinner-lg {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.15);
    border-top-color: var(--c-primary);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   UTILITIES
   ===================================================================== */
.text-muted-custom { color: var(--c-text-muted) !important; }
.text-dim { color: var(--c-text-dim) !important; }
.bg-surface { background: var(--c-surface) !important; }
.bg-surface-2 { background: var(--c-surface-2) !important; }
.border-custom { border-color: var(--c-border) !important; }
.divider { height: 1px; background: var(--c-border); margin: 1rem 0; }

/* Dropdowns from Bootstrap */
.dropdown-menu {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    color: var(--c-text);
    box-shadow: var(--shadow-md);
}
.dropdown-item { color: var(--c-text-muted); padding: .5rem .9rem; border-radius: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255,255,255,.05); color: var(--c-text); }
.dropdown-divider { border-color: var(--c-border); }

/* Print helpers */
@media print {
    .sidebar, .topbar, .fab, .no-print { display: none !important; }
    .main-wrap, .content { background: #fff !important; color: #000 !important; }
    .panel, .card-sm { box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important; color: #000 !important; }
}

/* =====================================================================
   SKELETON LOADING (for AJAX content placeholders)
   ===================================================================== */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.10) 37%,
        rgba(255,255,255,.04) 63%);
    background-size: 400% 100%;
    border-radius: 8px;
    animation: skeleton-wave 1.4s ease-in-out infinite;
}
body[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
    background-size: 400% 100%;
}
.skeleton-line { height: 14px; margin-bottom: .5rem; }
.skeleton-line.sm { height: 10px; width: 60%; }
.skeleton-line.lg { height: 22px; width: 40%; }
.skeleton-card { height: 140px; border-radius: var(--radius); }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }

@keyframes skeleton-wave {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* =====================================================================
   MORE ANIMATIONS (fade + slide — inline usage without AOS)
   ===================================================================== */
.anim-fade-in   { animation: smFadeIn .45s ease both; }
.anim-slide-up  { animation: smSlideUp .45s cubic-bezier(.22,1,.36,1) both; }
.anim-slide-in  { animation: smSlideIn .45s cubic-bezier(.22,1,.36,1) both; }
.anim-scale-in  { animation: smScaleIn .35s cubic-bezier(.22,1,.36,1) both; }
.anim-pop       { animation: smPop .5s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes smFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes smSlideUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
@keyframes smSlideIn { from { opacity: 0; transform: translateX(-16px) } to { opacity: 1; transform: translateX(0) } }
@keyframes smScaleIn { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
@keyframes smPop     { 0% { opacity: 0; transform: scale(.8) } 70% { transform: scale(1.05) } 100% { opacity: 1; transform: scale(1) } }

/* Modal animation enhancement */
.modal.fade .modal-dialog { transform: translateY(-20px) scale(.96); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.modal.show .modal-dialog { transform: translateY(0) scale(1); }
.modal-backdrop { backdrop-filter: blur(6px); }

/* Toast success animation checkmark */
.success-check {
    width: 64px; height: 64px; border-radius: 50%;
    border: 3px solid var(--c-success);
    display: inline-flex; align-items: center; justify-content: center;
    animation: smPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.success-check i { color: var(--c-success); font-size: 2rem; animation: smFadeIn .6s .2s both; }

/* Sort indicator */
.table-custom th.sortable { cursor: pointer; user-select: none; }
.table-custom th.sortable::after { content: '\F144'; font-family: 'bootstrap-icons'; opacity: .3; margin-left: .3rem; }
.table-custom th.sortable.asc::after  { content: '\F145'; opacity: 1; color: var(--c-primary); }
.table-custom th.sortable.desc::after { content: '\F13D'; opacity: 1; color: var(--c-primary); }

/* =====================================================================
   NOTIFICATION CENTER
   ===================================================================== */
.notif-count {
    position: absolute; top: 4px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 10px;
    background: var(--c-danger); color: #fff;
    font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--c-bg);
    animation: smPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.notif-unread { background: rgba(99,102,241,.08); border-left: 2px solid var(--c-primary); }
.notif-unread:hover { background: rgba(99,102,241,.14); }
.notif-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-primary); flex-shrink: 0; margin-top: 6px;
}

/* =====================================================================
   EMPTY STATE MODERN (with SVG illustration)
   ===================================================================== */
.empty-state-modern {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--c-text-muted);
}
.empty-state-modern .empty-illu {
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 10px 30px rgba(99,102,241,.25));
    animation: smSlideUp .5s cubic-bezier(.22,1,.36,1) both;
}
.empty-state-modern .empty-icon-overlay {
    position: absolute;
    top: 34%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: var(--c-primary);
    text-shadow: 0 4px 12px rgba(99,102,241,.4);
    animation: smPop .6s .2s cubic-bezier(.34,1.56,.64,1) both;
}
.empty-state-modern h5 { color: var(--c-text); font-weight: 700; margin-bottom: .35rem; }

/* =====================================================================
   PASSWORD STRENGTH METER
   ===================================================================== */
.pw-meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: .4rem; }
.pw-meter .bar { height: 100%; width: 0%; transition: width .3s ease, background .3s ease; }
.pw-meter[data-score="0"] .bar { background: var(--c-danger);  width: 15%; }
.pw-meter[data-score="1"] .bar { background: var(--c-danger);  width: 30%; }
.pw-meter[data-score="2"] .bar { background: var(--c-warning); width: 55%; }
.pw-meter[data-score="3"] .bar { background: var(--c-info);    width: 80%; }
.pw-meter[data-score="4"] .bar { background: var(--c-success); width: 100%; }
.pw-hint { font-size: .75rem; color: var(--c-text-dim); margin-top: .25rem; min-height: 1em; }

/* =====================================================================
   DASHBOARD v2 — Compact, professional SaaS layout
   ===================================================================== */

.dash-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 2rem 2.25rem;
    border-radius: 22px;
    background:
        radial-gradient(circle at 20% 30%, rgba(99,102,241,.45) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(34,211,238,.35) 0%, transparent 50%),
        linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #1e3a8a 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 1.25rem;
    box-shadow: 0 20px 50px -15px rgba(99,102,241,.4);
}
.dash-hero::before {
    content: "";
    position: absolute; top: -40%; right: -10%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    pointer-events: none;
}
.dash-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='1' cy='1' r='1' fill='%23ffffff20'/></svg>");
    opacity: .35; pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero h1 { font-size: 1.75rem; letter-spacing: -.5px; color: #fff; font-weight: 800; }
.dash-hero p { color: rgba(255,255,255,.75); }
.dash-hero p strong { color: #fff; }
.dash-hero .text-dim { color: rgba(255,255,255,.55) !important; }
.dash-hero .btn-outline { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.dash-hero .btn-outline:hover { background: rgba(255,255,255,.18); color: #fff; }
.dash-hero .btn-primary {
    background: #fff; color: #1e1b4b; border: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}
.dash-hero .btn-primary:hover { background: #fff; color: #1e1b4b; filter: brightness(.95); }

/* KPI premium cards */
.kpi {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 1.35rem 1.4rem 1.4rem;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 15px rgba(0,0,0,.04);
}
body[data-theme="light"] .kpi { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06); }
.kpi::before {
    content: ""; position: absolute; top: 0; right: 0;
    width: 140px; height: 140px;
    background: radial-gradient(circle, var(--kpi-glow, rgba(99,102,241,.3)) 0%, transparent 70%);
    opacity: .5; pointer-events: none;
    transform: translate(30%, -30%);
}
.kpi::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kpi-icon-color, #6366f1), transparent);
    opacity: .8;
}
.kpi > * { position: relative; z-index: 1; }
.kpi:hover {
    transform: translateY(-4px);
    border-color: var(--kpi-icon-color, var(--c-border-strong));
    box-shadow: 0 12px 30px -10px var(--kpi-glow, rgba(99,102,241,.3));
}
.kpi-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--kpi-icon-bg, rgba(99,102,241,.15));
    color: var(--kpi-icon-color, #6366f1);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px -6px var(--kpi-icon-color, rgba(99,102,241,.5));
}
.kpi-label {
    font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--c-text-dim); font-weight: 600; margin-bottom: .4rem;
}
.kpi-value {
    font-size: 2.1rem; font-weight: 800;
    letter-spacing: -1.2px; line-height: 1;
    color: var(--c-text);
    margin-bottom: .5rem;
    font-variant-numeric: tabular-nums;
}
.kpi-sub {
    font-size: .78rem;
    color: var(--c-text-muted);
    display: flex; align-items: center; gap: .3rem;
}

.kpi-primary { --kpi-glow: rgba(99,102,241,.35);  --kpi-icon-bg: rgba(99,102,241,.12);  --kpi-icon-color: #6366f1; }
.kpi-success { --kpi-glow: rgba(16,185,129,.35);  --kpi-icon-bg: rgba(16,185,129,.12);  --kpi-icon-color: #10b981; }
.kpi-info    { --kpi-glow: rgba(6,182,212,.35);   --kpi-icon-bg: rgba(6,182,212,.12);   --kpi-icon-color: #06b6d4; }
.kpi-warning { --kpi-glow: rgba(245,158,11,.35);  --kpi-icon-bg: rgba(245,158,11,.12);  --kpi-icon-color: #f59e0b; }
.kpi-danger  { --kpi-glow: rgba(239,68,68,.35);   --kpi-icon-bg: rgba(239,68,68,.12);   --kpi-icon-color: #ef4444; }

/* Mini stat row */
.mini-stat {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    transition: border-color var(--transition), transform var(--transition);
}
body[data-theme="light"] .mini-stat { box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.mini-stat:hover { border-color: var(--c-border-strong); transform: translateY(-1px); }
.mini-stat > i {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.mini-stat-label { font-size: .7rem; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.mini-stat-value { font-weight: 700; font-size: 1.25rem; color: var(--c-text); letter-spacing: -.3px; }

/* Chart legend dot */
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.chart-center-label {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; pointer-events: none;
}
.chart-center-label > div:first-child { font-size: 1.75rem !important; letter-spacing: -.8px; }

/* Job list (compact recent jobs) - RESET list-style explicitly */
ul.job-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
ul.job-list > li {
    border-bottom: 1px solid var(--c-border);
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.job-list > li:last-child { border-bottom: 0; }
.job-list-item {
    display: flex; align-items: center; gap: .85rem;
    width: 100%; padding: 1rem 1.4rem;
    background: transparent; border: 0; color: inherit; text-align: left;
    cursor: pointer;
    transition: background var(--transition), padding-left var(--transition);
    font: inherit;
}
.job-list-item:hover {
    background: rgba(99,102,241,.06);
    padding-left: 1.6rem;
}
body[data-theme="light"] .job-list-item:hover { background: rgba(99,102,241,.05); }
.job-list-accent {
    width: 4px; align-self: stretch;
    border-radius: 4px; flex-shrink: 0;
    min-height: 40px;
    box-shadow: 0 0 12px var(--accent-glow, rgba(99,102,241,.4));
}
.job-list-item .min-w-0 { min-width: 0; }

/* Activity list (compact) - RESET list-style explicitly */
ul.activity-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
ul.activity-list > li {
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem 1.4rem;
    border-bottom: 1px solid var(--c-border);
    transition: background var(--transition);
    list-style: none;
}
ul.activity-list > li:last-child { border-bottom: 0; }
ul.activity-list > li:hover { background: rgba(255,255,255,.02); }
body[data-theme="light"] ul.activity-list > li:hover { background: rgba(99,102,241,.03); }
.activity-icon {
    width: 36px; height: 36px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    box-shadow: 0 4px 12px -4px currentColor;
}
ul.activity-list .min-w-0 { min-width: 0; }

/* Rank badge */
.rank-badge {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: #fff; font-weight: 800; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px -4px rgba(99,102,241,.5);
    letter-spacing: -.5px;
}

/* Panel heading upgraded */
.panel-header h5 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.2px;
}
.panel-header h5 i {
    color: var(--c-primary);
    margin-right: .2rem;
}

/* =====================================================================
   JOBS PAGE — Premium list/grid, unified with dashboard language
   ===================================================================== */

/* Hero variant: compact untuk halaman internal (bukan dashboard greeting) */
.dash-hero.dash-hero-compact {
    padding: 1.5rem 1.75rem;
}
.dash-hero.dash-hero-compact h1 { font-size: 1.4rem; }
.dash-hero.dash-hero-compact p { font-size: .9rem; margin-bottom: 1rem; }

/* Mini stats di hero */
.hero-stat {
    text-align: center;
    padding: .75rem 1.25rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    min-width: 86px;
}
.hero-stat-value {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    color: #fff; letter-spacing: -.8px;
    font-variant-numeric: tabular-nums;
}
.hero-stat-label {
    font-size: .65rem; color: rgba(255,255,255,.7);
    text-transform: uppercase; letter-spacing: 1.3px;
    font-weight: 600; margin-top: .35rem;
}

/* Status chips — shortcut filter row */
.status-chips {
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.status-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: .85rem; font-weight: 600;
    transition: all var(--transition);
    white-space: nowrap;
}
.status-chip:hover {
    border-color: var(--c-border-strong);
    color: var(--c-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.status-chip i { font-size: .95rem; color: var(--chip-color, var(--c-primary)); }
.status-chip .chip-count {
    background: rgba(148,163,184,.15);
    padding: 2px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    min-width: 22px; text-align: center;
    color: var(--c-text);
}
.status-chip.active {
    background: var(--chip-color, var(--c-primary));
    border-color: var(--chip-color, var(--c-primary));
    color: #fff;
    box-shadow: 0 6px 18px -4px var(--chip-color, rgba(99,102,241,.5));
}
.status-chip.active i { color: #fff; }
.status-chip.active .chip-count {
    background: rgba(255,255,255,.22);
    color: #fff;
}
.chip-primary { --chip-color: #6366f1; }
.chip-warning { --chip-color: #f59e0b; }
.chip-info    { --chip-color: #06b6d4; }
.chip-success { --chip-color: #10b981; }
.chip-danger  { --chip-color: #ef4444; }

/* Toolbar — search + filters + view switcher */
.toolbar {
    display: flex; gap: .75rem; flex-wrap: wrap;
    padding: .85rem 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    align-items: center;
}
body[data-theme="light"] .toolbar { box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.toolbar-form {
    display: flex; flex-wrap: wrap; gap: .6rem;
    flex: 1 1 auto; min-width: 0;
    align-items: center;
}
.toolbar-search { flex: 1 1 260px; max-width: 420px; }
.toolbar-search input { padding-left: 2.4rem; }
.toolbar-select { flex: 1 1 140px; max-width: 180px; }
.toolbar-actions {
    display: flex; gap: .5rem; align-items: center;
    flex-shrink: 0;
}

/* Segmented view toggle */
.view-toggle {
    display: inline-flex;
    background: rgba(148,163,184,.1);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.view-toggle a {
    width: 34px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    color: var(--c-text-muted);
    text-decoration: none;
    transition: all var(--transition);
}
.view-toggle a:hover { color: var(--c-text); }
.view-toggle a.active {
    background: var(--c-surface);
    color: var(--c-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* =====================================================================
   JOBS LIST (replaces old table) — premium flex-row layout
   ===================================================================== */
.jobs-table-head {
    display: grid;
    grid-template-columns: 110px 100px minmax(0, 1fr) 130px 120px 110px 120px;
    gap: 1rem;
    padding: .85rem 1.5rem .85rem 2rem;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    font-size: .7rem;
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.jobs-table-head .sortable {
    color: inherit; text-decoration: none;
    cursor: pointer; user-select: none;
}
.jobs-table-head .sortable::after { content: ' \F144'; font-family: 'bootstrap-icons'; opacity: .3; }
.jobs-table-head .sortable.asc::after  { content: ' \F145'; opacity: 1; color: var(--c-primary); }
.jobs-table-head .sortable.desc::after { content: ' \F13D'; opacity: 1; color: var(--c-primary); }

ul.jobs-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
ul.jobs-list > li {
    list-style: none;
    border-bottom: 1px solid var(--c-border);
}
ul.jobs-list > li:last-child { border-bottom: 0; }
.jobs-list-item {
    display: grid;
    grid-template-columns: 4px 110px 100px minmax(0, 1fr) 130px 120px 110px 120px;
    gap: 1rem;
    padding: 1rem 1.5rem 1rem 0;
    align-items: center;
    transition: background var(--transition);
    position: relative;
}
.jobs-list-item:hover { background: rgba(99,102,241,.04); }
body[data-theme="light"] .jobs-list-item:hover { background: rgba(99,102,241,.035); }
.jobs-list-accent {
    width: 4px; height: 100%;
    background: var(--accent, #6366f1);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px var(--accent, #6366f1);
    opacity: .75;
}
.jobs-list-item .col-code,
.jobs-list-item .col-date,
.jobs-list-item .col-customer,
.jobs-list-item .col-cat,
.jobs-list-item .col-status,
.jobs-list-item .col-user { min-width: 0; }
.jobs-list-item .col-actions {
    display: flex; gap: 4px; justify-content: flex-end;
}

/* Responsive: di layar kecil jadi card stack */
@media (max-width: 1100px) {
    .jobs-table-head { display: none; }
    .jobs-list-item {
        grid-template-columns: 4px 1fr auto;
        grid-template-rows: auto auto auto;
        gap: .5rem 1rem;
        padding: 1rem 1.25rem 1rem 0;
    }
    .jobs-list-accent { grid-row: 1 / -1; }
    .jobs-list-item .col-code { grid-column: 2; }
    .jobs-list-item .col-status { grid-column: 3; grid-row: 1; text-align: right; }
    .jobs-list-item .col-customer { grid-column: 2 / 4; }
    .jobs-list-item .col-cat { grid-column: 2; }
    .jobs-list-item .col-date { grid-column: 3; grid-row: 3; text-align: right; }
    .jobs-list-item .col-user { display: none; }
    .jobs-list-item .col-actions { grid-column: 2 / 4; grid-row: 4; justify-content: flex-start; padding-top: .5rem; border-top: 1px dashed var(--c-border); }
}

/* =====================================================================
   JOBS GRID — premium card
   ===================================================================== */
.jobs-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .85rem;
    padding: 1rem;
}
.job-card-premium {
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative;
}
body[data-theme="light"] .job-card-premium { box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.job-card-premium::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent, #6366f1);
    z-index: 2;
}
.job-card-premium:hover {
    transform: translateY(-3px);
    border-color: var(--accent, var(--c-border-strong));
    box-shadow: 0 10px 24px -8px var(--accent, rgba(99,102,241,.3));
}

.job-card-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface));
}
.job-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.job-card-premium:hover .job-card-media img { transform: scale(1.05); }
.job-card-media-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--c-text-dim);
    font-size: 1.5rem;
    background:
        repeating-linear-gradient(45deg, var(--c-surface-2) 0 8px, transparent 8px 16px);
    opacity: .4;
}
.job-card-status {
    position: absolute;
    top: .5rem; left: .5rem;
    backdrop-filter: blur(10px);
    background: rgba(15,23,42,.6) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.2);
    font-size: .62rem !important;
    padding: .2rem .55rem !important;
}
.job-card-photo-count {
    position: absolute;
    top: .5rem; right: .5rem;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 2px 7px; border-radius: 999px;
    font-size: .65rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 3px;
    border: 1px solid rgba(255,255,255,.15);
}
.job-card-body {
    padding: .7rem .85rem .8rem;
    flex: 1;
    display: flex; flex-direction: column;
    gap: .2rem;
    cursor: pointer;
}
.job-card-chip {
    padding: 1px 8px; border-radius: 999px;
    font-size: .62rem; font-weight: 600;
    max-width: 100%;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
    letter-spacing: .3px;
}
.job-card-title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--c-text);
    margin: .15rem 0 .2rem;
    letter-spacing: -.1px;
    line-height: 1.25;
}
.job-card-meta {
    font-size: .72rem;
    color: var(--c-text-muted);
    display: flex; align-items: center; gap: .25rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.4;
}
.job-card-meta i { color: var(--c-text-dim); flex-shrink: 0; font-size: .78rem; }
.dot-sep {
    display: inline-block;
    width: 2px; height: 2px; border-radius: 50%;
    background: currentColor;
    opacity: .4;
    margin: 0 .15rem;
    flex-shrink: 0;
}
.job-card-actions {
    display: flex; gap: .3rem;
    padding: .5rem .7rem .7rem;
    border-top: 1px solid var(--c-border);
    margin-top: auto;
}
.job-card-actions .btn { padding: .35rem .6rem !important; font-size: .75rem !important; border-radius: 8px !important; }
.job-card-actions .btn-icon { width: 30px !important; height: 30px !important; }

/* Hide grid padding in empty state */
.jobs-grid-premium:empty { display: none; }

/* Toolbar responsive — stack di mobile */
@media (max-width: 768px) {
    .toolbar { padding: .75rem; }
    .toolbar-form { width: 100%; }
    .toolbar-search, .toolbar-select { max-width: none; }
    .toolbar-actions { width: 100%; justify-content: space-between; }
}

/* =====================================================================
   FORM PREMIUM — Job Form & other forms
   ===================================================================== */

/* Hero illustration (kanan) */
.hero-illu {
    width: 110px; height: 110px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 15px 35px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
}
.hero-illu i {
    font-size: 3rem;
    color: #fff;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}

/* Form section panel with numbered badge */
.form-section .panel-header {
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--c-border);
}
.form-section .panel-header h5 {
    font-size: 1rem;
    margin: 0;
}
.form-section .panel-header h5 i { color: var(--section-color, var(--c-primary)); }
.form-section .panel-header small { display: block; margin-top: 2px; font-size: .76rem; }
.form-section .panel-body { padding: 1.25rem; }

.section-badge {
    width: 36px; height: 36px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--section-color, #6366f1), var(--section-color-dark, #4f46e5));
    box-shadow: 0 6px 14px -4px var(--section-color, rgba(99,102,241,.5));
    letter-spacing: -.5px;
}
.section-badge-primary { --section-color: #6366f1; --section-color-dark: #4f46e5; }
.section-badge-info    { --section-color: #06b6d4; --section-color-dark: #0891b2; }
.section-badge-warning { --section-color: #f59e0b; --section-color-dark: #d97706; }
.section-badge-success { --section-color: #10b981; --section-color-dark: #059669; }

.form-section:has(.section-badge-info)    { --section-color: #06b6d4; }
.form-section:has(.section-badge-warning) { --section-color: #f59e0b; }
.form-section:has(.section-badge-success) { --section-color: #10b981; }

/* Form labels upgraded with icons */
.form-label {
    display: flex; align-items: center; gap: .4rem;
    color: var(--c-text);
    font-weight: 600;
    font-size: .82rem;
    margin-bottom: .4rem;
}
.form-label i { color: var(--c-text-dim); font-size: .9rem; }
.form-label .required {
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}

/* Location group — input + GPS button */
.location-group {
    display: flex; gap: .5rem;
    flex-wrap: nowrap;
}
.location-group .input-icon { flex: 1; min-width: 0; }
.btn-gps {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 6px 16px -4px rgba(6,182,212,.5);
    transition: all var(--transition);
    font-size: .85rem;
    white-space: nowrap;
}
.btn-gps:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -4px rgba(6,182,212,.55);
    color: #fff;
}
.btn-gps:disabled { opacity: .6; cursor: wait; }
.gps-status {
    margin-top: .5rem;
    padding: .6rem .85rem;
    background: rgba(6,182,212,.08);
    border: 1px solid rgba(6,182,212,.2);
    border-radius: 10px;
    font-size: .78rem;
    color: var(--c-text-muted);
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.gps-status strong { color: var(--c-text); font-family: ui-monospace, monospace; }
.gps-status a { color: var(--c-accent); text-decoration: none; margin-left: auto; }

/* STATUS SELECTOR — radio pills */
.status-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
}
.status-option {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: 1rem .75rem;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
    font-weight: 600;
    font-size: .82rem;
    color: var(--c-text-muted);
    position: relative;
    user-select: none;
}
.status-option input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.status-option i {
    font-size: 1.5rem;
    color: var(--status-color, var(--c-primary));
    transition: transform var(--transition);
}
.status-option:hover {
    border-color: var(--status-color, var(--c-border-strong));
    transform: translateY(-2px);
    color: var(--c-text);
}
.status-option:hover i { transform: scale(1.15); }
.status-option.active {
    background: linear-gradient(135deg, var(--status-color-bg, rgba(99,102,241,.15)), transparent);
    border-color: var(--status-color);
    color: var(--c-text);
    box-shadow: 0 6px 18px -4px var(--status-color);
}
.status-option.active i { transform: scale(1.1); }
.status-option-warning { --status-color: #f59e0b; --status-color-bg: rgba(245,158,11,.15); }
.status-option-info    { --status-color: #06b6d4; --status-color-bg: rgba(6,182,212,.15); }
.status-option-success { --status-color: #10b981; --status-color-bg: rgba(16,185,129,.15); }
.status-option-danger  { --status-color: #ef4444; --status-color-bg: rgba(239,68,68,.15); }

/* UPLOAD ZONE PREMIUM */
.upload-zone-premium {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem;
    padding: 1.75rem 1rem;
    border: 2px dashed var(--c-border-strong);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,.08), transparent 70%),
        var(--c-surface-2);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.upload-zone-premium::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(99,102,241,.04), transparent 60%);
    opacity: 0; transition: opacity var(--transition);
}
.upload-zone-premium > * { position: relative; z-index: 1; }
.upload-zone-premium:hover,
.upload-zone-premium.drag {
    border-color: var(--c-primary);
    background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,.14), transparent 70%),
        var(--c-surface);
}
.upload-zone-premium:hover::before { opacity: 1; }
.upload-zone-premium.drag { transform: scale(1.02); }
.upload-zone-icon {
    width: 58px; height: 58px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(99,102,241,.08));
    color: var(--c-primary);
    font-size: 1.8rem;
    margin-bottom: .5rem;
    box-shadow: 0 6px 18px -4px rgba(99,102,241,.35);
    transition: transform var(--transition);
}
.upload-zone-premium:hover .upload-zone-icon { transform: translateY(-2px) rotate(-4deg); }
.upload-zone-tags {
    display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
}
.upload-zone-tags span {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 3px 9px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: .7rem;
    color: var(--c-text-dim);
    font-weight: 500;
}

/* Save card with subtle gradient */
.form-save-card {
    background: linear-gradient(135deg, var(--c-surface), var(--c-surface-2)) !important;
    border: 1px solid var(--c-border) !important;
}
.btn-save-action {
    font-size: .95rem;
    font-weight: 700 !important;
    letter-spacing: .2px;
}

/* Autosave indicator */
.autosave-indicator {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .75rem;
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 10px;
    font-size: .75rem;
    color: var(--c-text-muted);
    transition: all .3s;
}
.autosave-indicator i { color: var(--c-success); }

/* Sticky sidebar section pada layar lebar (optional) */
@media (min-width: 992px) {
    .form-section-sticky { position: sticky; top: calc(var(--topbar-h) + 12px); }
}

/* Error alert upgraded */
.form-error-alert {
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.04));
    border: 1px solid rgba(239,68,68,.3);
    color: var(--c-text);
    border-radius: 14px;
    padding: 1rem 1.25rem;
}
.form-error-alert i.bi-exclamation-triangle-fill { color: #ef4444; flex-shrink: 0; margin-top: 2px; }
.form-error-alert ul { padding-left: 1.25rem; font-size: .88rem; }

/* Input + select consistent sizing */
.form-control, .form-select {
    padding: .65rem .9rem;
    font-size: .92rem;
}
input[type="date"].form-control { font-variant-numeric: tabular-nums; }

/* Spinner for GPS search */
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   FIX: Dashboard recent-jobs list + activity list hard override
   ===================================================================== */
.panel .job-list,
.panel ul.job-list,
.panel .activity-list,
.panel ul.activity-list {
    list-style: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}
.panel .job-list > li,
.panel .activity-list > li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.panel .job-list > li::before,
.panel .job-list > li::marker,
.panel .activity-list > li::before,
.panel .activity-list > li::marker { content: none !important; display: none !important; }

/* Ensure job-list-item buttons look right */
.panel .job-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.4rem;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background var(--transition), padding-left var(--transition);
}
.panel .job-list-item > .job-list-accent {
    width: 4px;
    align-self: stretch;
    min-height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 10px var(--accent-glow, rgba(99,102,241,.4));
}

/* =====================================================================
   FORM PREMIUM v2 — Floating label input, animated focus ring,
   richer status selector, bigger gestures
   ===================================================================== */

/* Form Field premium wrapper */
.field-premium {
    position: relative;
    margin-top: .5rem;
}
.field-premium > .form-control,
.field-premium > .form-select {
    padding: 1.25rem .95rem .5rem 2.6rem !important;
    font-size: .95rem;
    border-radius: 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    height: auto;
    min-height: 58px;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.field-premium > .form-control::placeholder { color: transparent; }
.field-premium > .form-control:focus,
.field-premium > .form-select:focus {
    border-color: var(--c-primary);
    background: var(--c-surface);
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
/* Floating label */
.field-premium > label.floating {
    position: absolute;
    left: 2.6rem; top: 1rem;
    color: var(--c-text-dim);
    font-size: .95rem;
    font-weight: 500;
    pointer-events: none;
    transition: all .2s cubic-bezier(.22,1,.36,1);
    margin: 0;
    background: transparent;
    display: flex; align-items: center; gap: .4rem;
}
.field-premium > label.floating .required { color: #ef4444; font-weight: 700; }
.field-premium > .form-control:focus ~ label.floating,
.field-premium > .form-control:not(:placeholder-shown) ~ label.floating,
.field-premium > .form-select:not([value=""]) ~ label.floating,
.field-premium.has-value > label.floating {
    top: .4rem;
    font-size: .68rem;
    color: var(--c-primary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 700;
}
/* Icon di kiri */
.field-premium > .field-icon {
    position: absolute;
    left: .9rem; top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    font-size: 1.05rem;
    pointer-events: none;
    transition: color .2s;
}
.field-premium:focus-within > .field-icon,
.field-premium.has-value > .field-icon { color: var(--c-primary); }

/* For date/select (no placeholder trick works) — use has-value class via JS/prefilled */
.field-premium.is-select > .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506.001z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px;
    padding-right: 2.4rem !important;
}

/* Textarea premium */
.field-premium.is-textarea > .form-control {
    min-height: 120px;
    padding-top: 1.7rem !important;
    resize: vertical;
}
.field-premium.is-textarea > label.floating { top: 1rem; }
.field-premium.is-textarea > .field-icon { top: 1.2rem; transform: none; }
.field-premium.is-textarea > .form-control:focus ~ label.floating,
.field-premium.is-textarea > .form-control:not(:placeholder-shown) ~ label.floating,
.field-premium.is-textarea.has-value > label.floating {
    top: .5rem;
}

/* Section cards more depth */
.form-section {
    overflow: hidden;
    position: relative;
    transition: border-color var(--transition), transform var(--transition);
}
.form-section:hover { border-color: var(--c-border-strong); }
.form-section .panel-header {
    display: flex; align-items: center;
    background: linear-gradient(135deg, var(--section-color-soft, rgba(99,102,241,.06)), transparent 70%);
}
.form-section:has(.section-badge-primary) .panel-header { --section-color-soft: rgba(99,102,241,.08); }
.form-section:has(.section-badge-info)    .panel-header { --section-color-soft: rgba(6,182,212,.08); }
.form-section:has(.section-badge-warning) .panel-header { --section-color-soft: rgba(245,158,11,.08); }
.form-section:has(.section-badge-success) .panel-header { --section-color-soft: rgba(16,185,129,.08); }

.section-badge {
    position: relative;
    overflow: visible;
}
.section-badge::after {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 13px;
    background: inherit;
    opacity: .3;
    z-index: -1;
    filter: blur(8px);
}

/* Status selector — much more premium */
.status-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}
.status-option {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .55rem;
    padding: 1.1rem .75rem;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    transition: all .3s cubic-bezier(.22,1,.36,1);
    font-weight: 600;
    font-size: .83rem;
    color: var(--c-text-muted);
    user-select: none;
    overflow: hidden;
}
.status-option::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at center top, var(--status-color), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.status-option > * { position: relative; z-index: 1; }
.status-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.status-option i {
    font-size: 1.7rem;
    color: var(--status-color, var(--c-primary));
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    filter: drop-shadow(0 2px 8px var(--status-color, rgba(99,102,241,.3)));
}
.status-option:hover {
    border-color: var(--status-color);
    color: var(--c-text);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -8px var(--status-color);
}
.status-option:hover i { transform: scale(1.2) rotate(-4deg); }
.status-option:hover::before { opacity: .1; }
.status-option.active {
    border-color: var(--status-color);
    color: var(--c-text);
    background: linear-gradient(135deg, var(--status-color-bg, rgba(99,102,241,.15)), transparent);
    box-shadow: 0 8px 22px -6px var(--status-color);
}
.status-option.active::before { opacity: .15; }
.status-option.active::after {
    content: "\F26B"; /* bi-check-lg */
    font-family: 'bootstrap-icons';
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px;
    background: var(--status-color);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    box-shadow: 0 4px 10px var(--status-color);
    animation: smPop .35s cubic-bezier(.34,1.56,.64,1) both;
}

/* Location group: bigger, more premium */
.location-group {
    display: flex; gap: .65rem;
    align-items: stretch;
}
.location-group .input-icon { flex: 1; min-width: 0; }
.btn-gps {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.2rem;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 8px 22px -6px rgba(6,182,212,.6);
    transition: all var(--transition);
    font-size: .85rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn-gps::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
    opacity: 0; transition: opacity var(--transition);
}
.btn-gps:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -6px rgba(6,182,212,.7);
    color: #fff;
}
.btn-gps:hover:not(:disabled)::before { opacity: 1; }
.btn-gps:disabled { opacity: .6; cursor: wait; }

/* GPS status box */
.gps-status {
    margin-top: .65rem;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, rgba(6,182,212,.08), rgba(6,182,212,.02));
    border: 1px solid rgba(6,182,212,.2);
    border-left: 3px solid #06b6d4;
    border-radius: 12px;
    font-size: .82rem;
    color: var(--c-text-muted);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.gps-status strong { color: var(--c-text); font-family: ui-monospace, monospace; }
.gps-status a { color: var(--c-accent); text-decoration: none; margin-left: auto; font-weight: 600; }
.gps-status a:hover { text-decoration: underline; }

/* Upload zone richer */
.upload-zone-premium {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem;
    padding: 2rem 1.25rem;
    border: 2px dashed var(--c-border-strong);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,.1), transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(34,211,238,.05), transparent 60%),
        var(--c-surface-2);
    text-align: center;
    cursor: pointer;
    transition: all .3s cubic-bezier(.22,1,.36,1);
    position: relative;
    overflow: hidden;
}
.upload-zone-premium::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(99,102,241,.06), transparent 60%);
    opacity: 0; transition: opacity .3s;
}
.upload-zone-premium > * { position: relative; z-index: 1; }
.upload-zone-premium:hover,
.upload-zone-premium.drag {
    border-color: var(--c-primary);
    border-style: solid;
    transform: scale(1.01);
    box-shadow: 0 14px 35px -10px rgba(99,102,241,.3);
}
.upload-zone-premium:hover::after,
.upload-zone-premium.drag::after { opacity: 1; }
.upload-zone-premium.drag {
    background:
        radial-gradient(circle at 50% 50%, rgba(99,102,241,.2), transparent 70%),
        var(--c-surface);
}
.upload-zone-icon {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: .6rem;
    box-shadow: 0 10px 25px -5px rgba(99,102,241,.5);
    transition: all .4s cubic-bezier(.22,1,.36,1);
}
.upload-zone-premium:hover .upload-zone-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
    box-shadow: 0 16px 35px -5px rgba(99,102,241,.7);
}
.upload-zone-premium.drag .upload-zone-icon {
    animation: smPulse 1.2s ease-in-out infinite;
}
@keyframes smPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.upload-zone-tags {
    display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap;
    margin-top: .5rem;
}
.upload-zone-tags span {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 4px 10px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 999px;
    font-size: .7rem;
    color: var(--c-text-muted);
    font-weight: 600;
}
.upload-zone-tags span i { color: var(--c-primary); }

/* Upload preview richer */
.upload-preview .thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-surface-2);
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.15);
    transition: transform .25s;
}
.upload-preview .thumb:hover { transform: scale(1.04); }
.upload-preview .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-preview .thumb .rm {
    position: absolute; top: 6px; right: 6px;
    background: rgba(15,23,42,.8);
    backdrop-filter: blur(8px);
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.upload-preview .thumb .rm:hover { background: #ef4444; transform: scale(1.1); }

/* Save card gradient */
.form-save-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(99,102,241,.08), transparent 50%),
        linear-gradient(135deg, var(--c-surface), var(--c-surface-2)) !important;
    position: relative;
    overflow: hidden;
}
.form-save-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.btn-save-action {
    font-size: .95rem;
    font-weight: 700 !important;
    letter-spacing: .2px;
    padding: .75rem 1rem !important;
    box-shadow: 0 10px 28px -6px rgba(99,102,241,.5) !important;
    transition: all var(--transition) !important;
}
.btn-save-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -6px rgba(99,102,241,.6) !important;
}

/* Autosave — lebih terlihat */
.autosave-indicator {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem .85rem;
    background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(16,185,129,.04));
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 12px;
    font-size: .78rem;
    color: var(--c-text-muted);
    transition: all .3s;
    font-weight: 600;
}
.autosave-indicator i { color: var(--c-success); font-size: 1rem; }

/* Required star */
.required {
    display: inline-block;
    color: #ef4444;
    font-weight: 800;
    margin-left: 3px;
    font-size: 1.1em;
    line-height: 0;
}

/* Form section subtle entry animation */
.form-section { animation: smSlideUp .45s cubic-bezier(.22,1,.36,1) both; }
.form-section:nth-child(2) { animation-delay: .05s; }
.form-section:nth-child(3) { animation-delay: .1s; }
.form-section:nth-child(4) { animation-delay: .15s; }

/* Floating hint */
.field-hint {
    display: flex; align-items: center; gap: .4rem;
    margin-top: .4rem;
    font-size: .75rem;
    color: var(--c-text-dim);
}
.field-hint i { color: var(--c-accent); }

/* =====================================================================
   QUICK ADD MODAL — Premium layout
   ===================================================================== */
.quick-add-modal {
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.5) !important;
}
.quick-add-header {
    padding: 1.25rem 1.5rem !important;
    background:
        radial-gradient(circle at 10% 50%, rgba(99,102,241,.18), transparent 60%),
        linear-gradient(135deg, var(--c-surface), var(--c-surface-2));
    border-bottom: 1px solid var(--c-border) !important;
    align-items: center !important;
}
.quick-add-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 22px -4px rgba(99,102,241,.55);
    flex-shrink: 0;
}
.quick-add-header .modal-title { font-weight: 700; letter-spacing: -.2px; }
.quick-add-header small { display: block; margin-top: 2px; }

/* Modal sections */
.modal-section {
    padding: 1.1rem 0;
    border-bottom: 1px dashed var(--c-border);
}
.modal-section:last-child { border-bottom: 0; padding-bottom: 0; }
.modal-section:first-child { padding-top: .25rem; }
.modal-section-label {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .85rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-text);
}
.modal-section-label > span:nth-child(2) i { color: var(--c-text-dim); margin-right: .2rem; }
.modal-section-num {
    width: 24px !important; height: 24px !important;
    border-radius: 8px !important;
    font-size: .72rem !important;
}
.modal-section-num.section-badge::after { inset: -2px !important; border-radius: 10px !important; filter: blur(5px) !important; }
.modal-section-optional {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 600;
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    background: rgba(148,163,184,.12);
    border-radius: 999px;
}

/* Compact upload zone untuk modal */
.upload-zone-compact {
    padding: 1.25rem 1rem !important;
}
.upload-zone-compact .upload-zone-icon {
    width: 48px !important; height: 48px !important;
    border-radius: 14px !important;
    font-size: 1.4rem !important;
    margin-bottom: .4rem !important;
}

/* Status selector compact di modal */
.status-selector-sm {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: .4rem !important;
}
.status-selector-sm .status-option {
    padding: .65rem .4rem !important;
    border-radius: 11px !important;
    font-size: .72rem !important;
    gap: .3rem !important;
    border-width: 1.5px !important;
}
.status-selector-sm .status-option i { font-size: 1.2rem !important; }
.status-selector-sm .status-option.active::after {
    width: 18px !important; height: 18px !important;
    font-size: .65rem !important;
    top: 5px !important; right: 5px !important;
}

/* Modal footer premium */
.quick-add-footer {
    padding: 1rem 1.5rem !important;
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-border) !important;
    gap: .5rem;
}
.quick-add-footer .btn { min-width: 120px; justify-content: center; }

/* Make Bootstrap modal content adopt our surface colors crisp */
.modal.fade.show .modal-content.quick-add-modal {
    animation: smScaleIn .3s cubic-bezier(.22,1,.36,1) both;
}

/* =====================================================================
   MODAL SCROLL FIX — Pendekatan sederhana: outer .modal selalu scrollable
   ===================================================================== */

/* .modal container adalah scroll surface utama.
   Modal tumbuh natural (tidak di-fix height), user scroll viewport/modal outer. */
.modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Quick add modal: dialog + content tumbuh natural mengikuti content */
.quick-add-modal {
    overflow: visible !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
}

/* Header & footer flex-shrink tetap agar tidak tersquash saat content panjang */
.quick-add-modal .modal-header,
.quick-add-modal .modal-footer {
    flex-shrink: 0;
}

.quick-add-modal .modal-body {
    overflow: visible !important;
    flex: 0 0 auto;
}

/* Dialog margin di atas/bawah agar tombol close/simpan kelihatan ketika scroll */
.modal-dialog.modal-lg {
    margin: 1.75rem auto;
}

/* MOBILE (< 768px) — full width, sticky footer untuk akses tombol Simpan */
@media (max-width: 767.98px) {
    .modal-dialog.modal-lg {
        max-width: 100%;
        margin: 0 !important;
        min-height: 100vh;
    }
    .quick-add-modal {
        border-radius: 0 !important;
        min-height: 100vh;
    }

    .quick-add-header {
        position: sticky; top: 0;
        z-index: 10;
        background: var(--c-surface);
    }
    .quick-add-modal .quick-add-footer {
        position: sticky;
        bottom: 0;
        background: var(--c-surface);
        border-top: 1px solid var(--c-border) !important;
        box-shadow: 0 -8px 24px rgba(0,0,0,.12);
        z-index: 10;
        padding: .85rem 1rem !important;
    }
    .quick-add-modal .quick-add-footer .btn {
        flex: 1;
        min-width: 0;
        padding: .7rem .5rem !important;
        font-size: .9rem;
    }
    .quick-add-modal .modal-body {
        padding: 1rem !important;
    }
    .quick-add-modal .modal-section { padding: .85rem 0; }
    .quick-add-modal .status-selector-sm { grid-template-columns: repeat(2, 1fr) !important; }
    .quick-add-modal .upload-zone-compact { padding: 1rem .75rem !important; }
}

/* GPS resolve status */
.gps-resolved {
    display: flex; align-items: flex-start; gap: .5rem;
}
.gps-resolved-address {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.gps-resolved-coords {
    font-family: ui-monospace, monospace;
    font-size: .7rem;
    color: var(--c-text-dim);
    margin-top: 2px;
}

/* =====================================================================
   MODAL COMPACT OVERRIDES — Buat quick-add modal lebih rapat di desktop
   ===================================================================== */

/* Header lebih tipis */
.quick-add-modal .quick-add-header {
    padding: .85rem 1.25rem !important;
}
.quick-add-modal .quick-add-icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    font-size: 1.2rem;
}
.quick-add-modal .modal-title { font-size: 1rem; }
.quick-add-modal .quick-add-header small { font-size: .72rem; }

/* Body tighter */
.quick-add-modal .modal-body { padding: 0 1.25rem !important; }
.quick-add-modal .modal-section { padding: .75rem 0 !important; }
.quick-add-modal .modal-section:first-child { padding-top: .9rem !important; }
.quick-add-modal .modal-section:last-child { padding-bottom: .9rem !important; }
.quick-add-modal .modal-section-label {
    margin-bottom: .55rem !important;
    font-size: .8rem !important;
    gap: .45rem !important;
}
.quick-add-modal .modal-section-num {
    width: 22px !important; height: 22px !important;
    font-size: .7rem !important;
    border-radius: 7px !important;
}

/* Field inputs lebih kompak */
.quick-add-modal .field-premium > .form-control,
.quick-add-modal .field-premium > .form-select {
    min-height: 46px !important;
    padding: .95rem .8rem .3rem 2.3rem !important;
    font-size: .88rem !important;
    border-radius: 10px !important;
}
.quick-add-modal .field-premium > label.floating {
    left: 2.3rem;
    top: .75rem;
    font-size: .85rem;
}
.quick-add-modal .field-premium > .form-control:focus ~ label.floating,
.quick-add-modal .field-premium > .form-control:not(:placeholder-shown) ~ label.floating,
.quick-add-modal .field-premium > .form-select:not([value=""]) ~ label.floating,
.quick-add-modal .field-premium.has-value > label.floating {
    top: .28rem;
    font-size: .62rem;
    letter-spacing: 1px;
}
.quick-add-modal .field-premium > .field-icon {
    left: .75rem;
    font-size: .95rem;
}
.quick-add-modal .field-premium.is-textarea > .form-control {
    min-height: 90px !important;
    padding-top: 1.4rem !important;
}
.quick-add-modal .field-premium.is-textarea > label.floating { top: .8rem; }
.quick-add-modal .field-premium.is-textarea > .form-control:focus ~ label.floating,
.quick-add-modal .field-premium.is-textarea > .form-control:not(:placeholder-shown) ~ label.floating,
.quick-add-modal .field-premium.is-textarea.has-value > label.floating {
    top: .35rem;
}

/* Row gap lebih rapat */
.quick-add-modal .row.g-2,
.quick-add-modal .row.g-3 { --bs-gutter-y: .55rem !important; --bs-gutter-x: .55rem !important; }

/* Status selector lebih pendek */
.quick-add-modal .status-selector-sm .status-option {
    padding: .55rem .4rem !important;
    gap: .2rem !important;
    border-radius: 10px !important;
}
.quick-add-modal .status-selector-sm .status-option i { font-size: 1.05rem !important; }
.quick-add-modal .status-selector-sm .status-option span { font-size: .7rem !important; }
.quick-add-modal .status-selector-sm .status-option.active::after {
    width: 16px !important; height: 16px !important;
    font-size: .58rem !important;
    top: 4px !important; right: 4px !important;
}

/* Upload zone lebih compact */
.quick-add-modal .upload-zone-compact {
    padding: .9rem .75rem !important;
    border-radius: 12px !important;
}
.quick-add-modal .upload-zone-compact .upload-zone-icon {
    width: 40px !important; height: 40px !important;
    border-radius: 11px !important;
    font-size: 1.2rem !important;
    margin-bottom: .3rem !important;
}
.quick-add-modal .upload-zone-compact .fw-bold { font-size: .88rem; }
.quick-add-modal .upload-zone-compact .text-dim.small { font-size: .72rem; }

/* GPS status & button lebih pendek */
.quick-add-modal .btn-gps {
    padding: .55rem .85rem !important;
    border-radius: 10px !important;
    font-size: .8rem !important;
}
.quick-add-modal .gps-status {
    padding: .55rem .75rem !important;
    font-size: .75rem !important;
    margin-top: .45rem !important;
    border-radius: 10px !important;
}

/* Footer tipis */
.quick-add-modal .quick-add-footer {
    padding: .75rem 1.25rem !important;
    gap: .5rem;
}
.quick-add-modal .quick-add-footer .btn {
    padding: .55rem 1.1rem !important;
    font-size: .85rem !important;
    min-width: 110px;
}

/* Desktop: lebarkan sedikit agar layout 3-kolom tidak sempit */
@media (min-width: 768px) {
    .quick-add-modal .modal-dialog { max-width: 760px; }
}

/* =====================================================================
   CUSTOM SELECT DROPDOWN — Premium replacement untuk native <select>
   ===================================================================== */
.sm-select {
    position: relative;
    cursor: pointer;
}
.sm-select > select {
    /* Native select tetap ada untuk form submit, tapi disembunyikan visually */
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.sm-select-btn {
    width: 100%;
    text-align: left;
    background: inherit;
    border: 0;
    outline: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-select-btn::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: .85rem; top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    font-size: .95rem;
    transition: transform .2s;
    pointer-events: none;
}
.sm-select.open .sm-select-btn::after { transform: translateY(-50%) rotate(180deg); color: var(--c-primary); }

.sm-select-menu {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px -10px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.08);
    max-height: 280px;
    overflow-y: auto;
    padding: .35rem;
    z-index: 1080; /* di atas modal */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.sm-select.open .sm-select-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sm-select-search {
    position: sticky; top: -.35rem;
    margin: -.35rem -.35rem .3rem;
    padding: .5rem .6rem;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    z-index: 2;
}
.sm-select-search input {
    width: 100%;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: .4rem .6rem .4rem 2rem;
    color: var(--c-text);
    font-size: .85rem;
    outline: 0;
}
.sm-select-search input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.sm-select-search::before {
    content: "\F52A"; /* bi-search */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 1.15rem; top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    font-size: .85rem;
    pointer-events: none;
}

.sm-select-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    border-radius: 8px;
    color: var(--c-text);
    font-size: .88rem;
    cursor: pointer;
    transition: background .15s;
    user-select: none;
}
.sm-select-option:hover,
.sm-select-option.focused {
    background: rgba(99,102,241,.1);
    color: var(--c-text);
}
.sm-select-option.selected {
    background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.04));
    color: var(--c-text);
    font-weight: 600;
}
.sm-select-option.selected::after {
    content: "\F26B"; /* bi-check-lg */
    font-family: 'bootstrap-icons';
    margin-left: auto;
    color: var(--c-primary);
    font-weight: bold;
}
.sm-select-option i.sm-opt-icon {
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}
.sm-select-option-placeholder {
    color: var(--c-text-dim);
    font-style: italic;
}
.sm-select-empty {
    padding: 1rem .7rem;
    color: var(--c-text-dim);
    font-size: .82rem;
    text-align: center;
}

/* Integration dengan field-premium — pakai sm-select sebagai replacement select */
.field-premium.is-select.sm-select-wrap > .sm-select {
    width: 100%; height: 100%;
    position: absolute; inset: 0;
}
.field-premium.is-select.sm-select-wrap > .sm-select > .sm-select-btn {
    padding: 1.25rem .95rem .5rem 2.6rem;
    min-height: 58px;
    display: flex; align-items: center;
    border-radius: 12px;
}
/* Compact variant inside modal */
.quick-add-modal .field-premium.is-select.sm-select-wrap > .sm-select > .sm-select-btn {
    padding: .95rem .8rem .3rem 2.3rem !important;
    min-height: 46px;
    font-size: .88rem;
}
.quick-add-modal .field-premium.is-select.sm-select-wrap { min-height: 46px; }
.field-premium.is-select.sm-select-wrap { min-height: 58px; position: relative; }

/* Hide native arrow when sm-select active */
.field-premium.is-select.sm-select-wrap > .form-select {
    background-image: none !important;
    pointer-events: none;
}

/* =====================================================================
   DATE INPUT — Styling konsisten untuk date picker
   ===================================================================== */
input[type="date"] {
    color-scheme: light dark; /* auto tema OS */
    font-variant-numeric: tabular-nums;
}
body[data-theme="dark"] input[type="date"] { color-scheme: dark; }
body[data-theme="light"] input[type="date"] { color-scheme: light; }

/* Webkit date picker indicator — jadikan lebih subtle & primary color */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s;
    filter: invert(0);
    padding: 2px;
    border-radius: 4px;
}
body[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(.7);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Dark date-picker popup tidak bisa sepenuhnya di-style (browser-controlled),
   tapi color-scheme sudah memastikan native dark popup muncul otomatis. */

/* =====================================================================
   CUSTOM SELECT — Override agar tampil premium (fix duplikat look)
   ===================================================================== */

/* Paksa theme-aware dengan spesifisitas tinggi */
.sm-select .sm-select-menu,
.sm-select-menu {
    background-color: var(--c-surface) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 45px -12px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.08) !important;
    padding: .45rem !important;
    overflow: hidden;
    max-height: 320px !important;
    overflow-y: auto !important;
}

/* Hilangkan highlight aneh strip biru di atas list */
.sm-select .sm-select-list {
    padding-top: 0;
    background: transparent;
}
.sm-select .sm-select-list::before,
.sm-select .sm-select-list::after { content: none; }

/* Option styling yang lebih menonjol */
.sm-select .sm-select-option {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    padding: .6rem .8rem !important;
    border-radius: 10px !important;
    color: var(--c-text) !important;
    background: transparent !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    user-select: none !important;
    margin-bottom: 2px;
    border: 1px solid transparent !important;
}
.sm-select .sm-select-option:last-child { margin-bottom: 0; }

.sm-select .sm-select-option:hover,
.sm-select .sm-select-option.focused {
    background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.06)) !important;
    color: var(--c-text) !important;
    transform: translateX(2px);
}

.sm-select .sm-select-option.selected {
    background: linear-gradient(90deg, rgba(99,102,241,.2), rgba(99,102,241,.06)) !important;
    color: var(--c-text) !important;
    font-weight: 700 !important;
    border-color: rgba(99,102,241,.25) !important;
}

.sm-select .sm-select-option.selected::after {
    content: "\F26B" !important;
    font-family: 'bootstrap-icons' !important;
    margin-left: auto !important;
    color: var(--c-primary) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    flex-shrink: 0;
}

/* Light mode hover tetap jelas */
body[data-theme="light"] .sm-select .sm-select-option:hover,
body[data-theme="light"] .sm-select .sm-select-option.focused {
    background: rgba(99,102,241,.08) !important;
}
body[data-theme="light"] .sm-select .sm-select-option.selected {
    background: rgba(99,102,241,.12) !important;
}

/* Search input lebih prominent */
.sm-select .sm-select-search {
    position: sticky !important;
    top: -.45rem !important;
    margin: -.45rem -.45rem .35rem !important;
    padding: .55rem .65rem !important;
    background: var(--c-surface) !important;
    border-bottom: 1px solid var(--c-border) !important;
    z-index: 3;
}
.sm-select .sm-select-search input {
    width: 100% !important;
    background: rgba(148,163,184,.1) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 10px !important;
    padding: .45rem .65rem .45rem 2.1rem !important;
    color: var(--c-text) !important;
    font-size: .85rem !important;
    outline: 0 !important;
}
body[data-theme="light"] .sm-select .sm-select-search input {
    background: #f1f5f9 !important;
}
.sm-select .sm-select-search input::placeholder {
    color: var(--c-text-dim) !important;
}
.sm-select .sm-select-search input:focus {
    border-color: var(--c-primary) !important;
    background: var(--c-surface) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

/* Empty state */
.sm-select .sm-select-empty {
    padding: 1.5rem .7rem !important;
    color: var(--c-text-dim) !important;
    font-size: .85rem !important;
    text-align: center !important;
}
.sm-select .sm-select-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    opacity: .6;
}

/* Scrollbar custom di dalam dropdown */
.sm-select-menu::-webkit-scrollbar { width: 6px; }
.sm-select-menu::-webkit-scrollbar-track { background: transparent; }
.sm-select-menu::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.3);
    border-radius: 6px;
}
.sm-select-menu::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.5); }

/* =====================================================================
   SM-SELECT — HARD disable native select interaction (mobile fix)
   ===================================================================== */
.sm-select > select {
    /* Jauh lebih agresif: selain invisible, benar-benar tidak bisa di-tap
       (beberapa mobile browser masih teruskan tap walau z-index negative) */
    position: absolute !important;
    inset: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -9999 !important;
    clip: rect(0,0,0,0);
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* Tombol trigger pada .sm-select — tinggi minimum agar mudah di-tap di mobile */
.field-premium.is-select.sm-select-wrap > .sm-select > .sm-select-btn {
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 1.25rem .95rem .5rem 2.6rem;
    border-radius: 12px;
    position: relative;
    z-index: 2; /* di atas select tersembunyi */
}

/* =====================================================================
   MOBILE POLISH — Mode mobile professional look
   ===================================================================== */

@media (max-width: 767.98px) {
    /* Font base tetap Inter yang clean */
    body { font-size: 14px; }

    /* Content padding lebih nyaman */
    .content { padding: 1rem; }

    /* Panel rounded lebih soft di mobile, tidak lancip */
    .panel {
        border-radius: 14px !important;
    }

    /* Hero banner mobile — sedikit padding, rounded yang pas */
    .dash-hero {
        padding: 1.25rem 1.25rem !important;
        border-radius: 18px !important;
    }
    .dash-hero h1 { font-size: 1.25rem !important; letter-spacing: -.3px; }
    .dash-hero p { font-size: .88rem !important; }

    /* KPI, mini-stat, job-card di mobile: border-radius lebih soft */
    .kpi, .mini-stat, .job-card, .job-card-premium, .stat-card {
        border-radius: 14px !important;
    }

    /* Status chips: rounded full tetap, tapi ukuran compact */
    .status-chip {
        padding: .45rem .75rem !important;
        font-size: .78rem !important;
    }

    /* Toolbar: rounded soft */
    .toolbar {
        border-radius: 14px !important;
        padding: .65rem !important;
    }
    .toolbar-search input { font-size: 14px !important; }

    /* Job list: border radius kanan untuk accent, hover subtle */
    .jobs-list-item { padding: .9rem 1rem .9rem 0 !important; }

    /* FIELD PREMIUM di mobile tetap tinggi 58px (sentuh nyaman) tapi border radius smooth */
    .field-premium > .form-control,
    .field-premium > .form-select,
    .field-premium.is-select.sm-select-wrap > .sm-select > .sm-select-btn {
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    /* Section numbered badge tetap visible tapi lebih compact */
    .section-badge { width: 30px !important; height: 30px !important; font-size: .8rem !important; }

    /* Modal di mobile lebih smooth — corner atas rounded 20px (iOS sheet style) */
    @supports (border-radius: 20px) {
        .quick-add-modal {
            border-radius: 20px 20px 0 0 !important;
            min-height: auto !important;
        }
        .modal-dialog.modal-lg {
            align-items: flex-end !important;
            display: flex !important;
            min-height: 100vh !important;
            min-height: 100dvh !important;
        }
    }

    /* Tombol di modal footer mobile: text wrap off, font lebih kecil */
    .quick-add-modal .quick-add-footer .btn {
        font-size: .85rem !important;
        padding: .7rem .5rem !important;
        white-space: nowrap;
    }
    .quick-add-modal .quick-add-footer .btn i { display: inline-block; }

    /* Status selector di mobile: 2 kolom ukuran comfortable */
    .quick-add-modal .status-selector-sm {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .5rem !important;
    }
    .quick-add-modal .status-selector-sm .status-option {
        padding: .75rem .5rem !important;
    }
    .quick-add-modal .status-selector-sm .status-option i { font-size: 1.3rem !important; }
    .quick-add-modal .status-selector-sm .status-option span { font-size: .78rem !important; }

    /* Upload zone di mobile tetap touch-friendly */
    .upload-zone-compact {
        padding: 1.25rem 1rem !important;
    }
    .upload-zone-compact .upload-zone-icon {
        width: 48px !important; height: 48px !important; font-size: 1.4rem !important;
    }

    /* GPS status di mobile — wrap yang lebih rapi */
    .gps-status {
        font-size: .78rem !important;
        padding: .6rem .75rem !important;
        border-radius: 12px !important;
    }

    /* Sidebar di mobile: smooth rounded corner */
    .sidebar {
        border-radius: 0 !important;
    }

    /* Card di mobile: bayangan lebih rendah agar tidak "floating aneh" */
    .kpi, .mini-stat, .panel {
        box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04) !important;
    }

    /* Topbar lebih compact */
    .topbar { height: 58px; padding: 0 .85rem; }
    .topbar-title { display: none !important; }
    .topbar-icon-btn { width: 36px; height: 36px; }

    /* Subtle animation pada modal muncul di mobile (slide up like bottom sheet) */
    .modal.fade .modal-dialog.modal-lg {
        transform: translateY(100%) !important;
        transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
    }
    .modal.fade.show .modal-dialog.modal-lg {
        transform: translateY(0) !important;
    }
}

/* =====================================================================
   FIELD LABEL & ICON — fix posisi pada trigger tombol sm-select
   (sebelumnya label floating sudah ada, ini tambahan agar icon tetap rapi)
   ===================================================================== */
.field-premium.is-select.sm-select-wrap > .sm-select > .sm-select-btn {
    background: transparent;
}
/* Clear left padding duplication di atas icon */
.field-premium.is-select.sm-select-wrap > .field-icon {
    z-index: 3; /* di atas sm-select-btn agar ikon tetap terlihat */
}
.field-premium.is-select.sm-select-wrap > .floating {
    z-index: 3;
}

/* =====================================================================
   EXPORT PAGE — Format picker + period presets + summary sticky card
   ===================================================================== */

/* FORMAT PICKER — big radio cards */
.format-picker {
    display: flex; flex-direction: column;
    gap: .6rem;
}
.format-option {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface);
    cursor: pointer;
    position: relative;
    transition: all .25s cubic-bezier(.22,1,.36,1);
    user-select: none;
}
.format-option:hover {
    border-color: var(--format-color, var(--c-border-strong));
    transform: translateX(3px);
}
.format-option input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.format-option.active {
    border-color: var(--format-color);
    background: linear-gradient(90deg, var(--format-color-soft, rgba(99,102,241,.08)), transparent 70%);
    box-shadow: 0 8px 22px -8px var(--format-color);
}
.format-option.active::after {
    content: "\F26B";
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%; right: 1rem;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    background: var(--format-color);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    box-shadow: 0 4px 12px var(--format-color);
    animation: smPop .35s cubic-bezier(.34,1.56,.64,1) both;
}

.format-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--format-icon-bg, rgba(99,102,241,.12));
    color: var(--format-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: transform .25s;
}
.format-option:hover .format-icon { transform: scale(1.1) rotate(-4deg); }
.format-option.active .format-icon {
    background: var(--format-color);
    color: #fff;
    box-shadow: 0 6px 18px -4px var(--format-color);
}

.format-info { flex: 1; min-width: 0; }
.format-title {
    font-weight: 700;
    color: var(--c-text);
    font-size: 1rem;
    letter-spacing: -.2px;
}
.format-desc {
    font-size: .78rem;
    color: var(--c-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.format-ext {
    font-family: ui-monospace, monospace;
    font-size: .7rem;
    font-weight: 600;
    color: var(--c-text-dim);
    background: rgba(148,163,184,.1);
    border: 1px solid var(--c-border);
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .8px;
    flex-shrink: 0;
    margin-right: 2rem; /* space for check badge when active */
}
.format-option.active .format-ext {
    background: var(--format-color-soft, rgba(99,102,241,.15));
    color: var(--format-color);
    border-color: var(--format-color);
}

/* Format variants */
.format-xlsx { --format-color: #10b981; --format-color-soft: rgba(16,185,129,.1); --format-icon-bg: rgba(16,185,129,.12); }
.format-csv  { --format-color: #06b6d4; --format-color-soft: rgba(6,182,212,.1);  --format-icon-bg: rgba(6,182,212,.12); }
.format-pdf  { --format-color: #ef4444; --format-color-soft: rgba(239,68,68,.1);  --format-icon-bg: rgba(239,68,68,.12); }

/* PERIOD PRESETS — pill buttons */
.period-presets {
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.period-preset {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: all .2s;
}
.period-preset:hover {
    border-color: var(--c-primary);
    color: var(--c-text);
    background: var(--c-primary-soft);
    transform: translateY(-1px);
}
.period-preset.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,.35);
}

/* EXPORT SUMMARY — sticky sidebar card */
.export-summary {
    text-align: center;
    padding: 1.25rem .5rem .5rem;
}
.export-summary-icon {
    width: 60px; height: 60px; border-radius: 18px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto .75rem;
    box-shadow: 0 12px 30px -8px rgba(99,102,241,.5);
    animation: smPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.export-summary-label {
    font-size: .7rem;
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.export-summary-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-text);
    margin-top: .2rem;
    letter-spacing: -.3px;
}

/* Info list */
.export-info-list {
    display: flex; flex-direction: column;
    gap: .6rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--c-border);
}
.export-info-item {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: .78rem;
    color: var(--c-text-muted);
    line-height: 1.45;
}
.export-info-item i {
    color: var(--c-primary);
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Mobile tweak: format option smaller */
@media (max-width: 575.98px) {
    .format-option { padding: .85rem .9rem; gap: .75rem; }
    .format-icon { width: 44px; height: 44px; font-size: 1.35rem; }
    .format-title { font-size: .92rem; }
    .format-desc { font-size: .73rem; }
    .format-ext { margin-right: 1.75rem; font-size: .65rem; padding: 2px 7px; }
    .format-option.active::after { right: .75rem; width: 22px; height: 22px; font-size: .75rem; }
    .period-preset { padding: .35rem .7rem; font-size: .72rem; }
}

/* =====================================================================
   FIX: Dropdown overflow pada section cards — biarkan dropdown keluar
   ===================================================================== */

/* Override overflow agar custom select dropdown tidak ter-clip
   oleh border/overflow parent section */
.form-section {
    overflow: visible !important;
}
.form-section .panel-body,
.form-section .panel-header {
    overflow: visible;
}

/* Panel yang mengandung field-premium harus visible */
.panel:has(.field-premium.is-select),
.panel:has(.sm-select) {
    overflow: visible !important;
}

/* Dropdown menu pakai position:fixed via JS — z-index tinggi di semua konteks
   Ini menghilangkan semua masalah clipping dari parent overflow */
.sm-select-menu {
    z-index: 10050 !important;
}
.modal .sm-select-menu,
.modal-dialog .sm-select-menu {
    z-index: 10060 !important;
}
/* Saat open pakai fixed positioning dari JS — ini smooth animation */
.sm-select.open .sm-select-menu {
    position: fixed !important;
}

/* Drop-up variant: menu muncul di atas tombol, balik transform origin */
.sm-select.drop-up .sm-select-menu {
    transform: translateY(4px);
}
.sm-select.open.drop-up .sm-select-menu {
    transform: translateY(0);
}

/* Sticky sibling card (export summary) jangan menutupi dropdown */
.form-section-sticky {
    z-index: 1;
}

/* Chevron rotate & state untuk drop-up */
.sm-select.open.drop-up .sm-select-btn::after {
    transform: translateY(-50%) rotate(180deg);
}

/* =====================================================================
   PORTALED MENU — saat menu di-append ke document.body, tidak ada lagi
   ancestor .sm-select, jadi semua styling harus re-declared di selector
   .sm-select-menu-portaled (standalone) agar konsisten dengan theme
   ===================================================================== */
.sm-select-menu.sm-select-menu-portaled {
    display: block;
    background-color: var(--c-surface) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 45px -12px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.08) !important;
    padding: .45rem !important;
    overflow-y: auto !important;
    z-index: 10060 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}
.sm-select-menu.sm-select-menu-portaled[hidden] {
    display: none;
}

/* Options dalam portal menu */
.sm-select-menu-portaled .sm-select-option {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    padding: .6rem .8rem !important;
    border-radius: 10px !important;
    color: var(--c-text) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin-bottom: 2px !important;
    border: 1px solid transparent !important;
    position: relative;
}
.sm-select-menu-portaled .sm-select-option:hover,
.sm-select-menu-portaled .sm-select-option.focused {
    background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(99,102,241,.06)) !important;
    color: var(--c-text) !important;
}
.sm-select-menu-portaled .sm-select-option.selected {
    background: linear-gradient(90deg, rgba(99,102,241,.2), rgba(99,102,241,.06)) !important;
    color: var(--c-text) !important;
    font-weight: 600 !important;
}
.sm-select-menu-portaled .sm-select-option.selected::after {
    content: "\F26B" !important;
    font-family: 'bootstrap-icons' !important;
    margin-left: auto !important;
    color: var(--c-primary) !important;
    font-weight: bold !important;
}

/* Search input dalam portal menu */
.sm-select-menu-portaled .sm-select-search {
    position: sticky !important;
    top: -.45rem !important;
    margin: -.45rem -.45rem .45rem !important;
    padding: .55rem .55rem .35rem !important;
    background: var(--c-surface) !important;
    z-index: 3;
    border-bottom: 1px solid var(--c-border);
    border-radius: 14px 14px 0 0;
}
.sm-select-menu-portaled .sm-select-search input {
    width: 100% !important;
    background: rgba(148,163,184,.1) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 10px !important;
    padding: .55rem .7rem .55rem 2rem !important;
    color: var(--c-text) !important;
    font-size: .85rem !important;
    outline: 0 !important;
}
body[data-theme="light"] .sm-select-menu-portaled .sm-select-search input {
    background: #f1f5f9 !important;
}
.sm-select-menu-portaled .sm-select-search::before {
    content: "\F52A";
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    pointer-events: none;
    font-size: .95rem;
    z-index: 4;
}
.sm-select-menu-portaled .sm-select-empty {
    padding: 1.5rem .7rem !important;
    color: var(--c-text-dim) !important;
    font-size: .85rem !important;
    text-align: center !important;
}
.sm-select-menu-portaled .sm-select-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .35rem;
    opacity: .5;
}
/* Scrollbar custom di portal menu */
.sm-select-menu-portaled::-webkit-scrollbar { width: 6px; }
.sm-select-menu-portaled::-webkit-scrollbar-track { background: transparent; }
.sm-select-menu-portaled::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.3);
    border-radius: 6px;
}
.sm-select-menu-portaled::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.5); }

/* Light-mode override untuk portal */
body[data-theme="light"] .sm-select-menu-portaled .sm-select-option:hover,
body[data-theme="light"] .sm-select-menu-portaled .sm-select-option.focused {
    background: rgba(99,102,241,.08) !important;
}
body[data-theme="light"] .sm-select-menu-portaled .sm-select-option.selected {
    background: rgba(99,102,241,.12) !important;
}

/* Pastikan dropdown tetap visible walau parent punya transform/filter
   (transform/filter membuat stacking context baru yang bisa clip fixed) */
.sm-select-menu {
    will-change: transform, opacity;
}

/* =====================================================================
   USER CARDS GRID — Premium card layout untuk halaman pengguna
   Mirror bahasa design dengan dashboard & pekerjaan
   ===================================================================== */
.user-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.user-card-premium {
    background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 1.5rem 1.35rem 1.1rem;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Accent strip gradient di kiri — warna mengikuti role */
.user-card-strip {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--u-accent, var(--c-primary)), var(--u-accent-2, var(--c-accent)));
}
.user-card-premium.role-superadmin { --u-accent: #ef4444; --u-accent-2: #f87171; --u-accent-soft: rgba(239,68,68,.10); }
.user-card-premium.role-admin      { --u-accent: #06b6d4; --u-accent-2: #22d3ee; --u-accent-soft: rgba(6,182,212,.10); }
.user-card-premium.role-user       { --u-accent: #10b981; --u-accent-2: #34d399; --u-accent-soft: rgba(16,185,129,.10); }

/* Glow soft per role — subtle background gradient */
.user-card-premium::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 160px; height: 160px;
    background: radial-gradient(circle at top right, var(--u-accent-soft, rgba(99,102,241,.08)), transparent 70%);
    pointer-events: none;
    opacity: .9;
}

.user-card-premium:hover {
    transform: translateY(-4px);
    border-color: var(--u-accent, var(--c-border-strong));
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.06);
}

.user-card-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.user-card-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    overflow: visible;
    flex-shrink: 0;
}
.user-card-avatar img,
.user-card-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}
.user-card-avatar .avatar-placeholder {
    background: linear-gradient(135deg, var(--u-accent, var(--c-primary)), var(--u-accent-2, var(--c-accent)));
    color: #fff;
    font-size: 1.55rem;
    font-weight: 700;
    box-shadow: 0 6px 16px -4px var(--u-accent-soft, rgba(99,102,241,.25));
}

/* Status dot — online (hijau) / offline (abu) */
.user-status-dot {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 3px solid var(--c-surface);
    background: var(--c-text-dim);
}
.user-status-dot.online {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.22);
}
.user-status-dot.offline {
    background: #f59e0b;
}

.user-card-info {
    flex: 1;
    min-width: 0;
}

.user-card-name {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    color: var(--c-text);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.badge-me {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: #fff;
    border-radius: 6px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.user-card-username {
    font-size: .82rem;
    color: var(--c-text-dim);
    margin-bottom: .55rem;
    font-weight: 500;
}

.user-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.user-card-meta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem 1rem;
    background: rgba(148,163,184,.06);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    position: relative;
    z-index: 1;
}
body[data-theme="light"] .user-card-meta {
    background: #f8fafc;
}

.user-meta-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    color: var(--c-text-muted);
}
.user-meta-item i {
    width: 16px;
    color: var(--u-accent, var(--c-text-dim));
    flex-shrink: 0;
    font-size: .95rem;
}
.user-meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.user-meta-item strong {
    color: var(--c-text);
    font-weight: 600;
}

/* Action buttons — pill-style yang rapi, mirror .status-chip */
.user-card-actions {
    display: flex;
    gap: .45rem;
    position: relative;
    z-index: 1;
}
.user-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem .75rem;
    background: rgba(148,163,184,.08);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
}
.user-action-btn:hover {
    background: var(--u-accent-soft, rgba(99,102,241,.12));
    border-color: var(--u-accent, var(--c-primary));
    color: var(--u-accent, var(--c-primary));
    transform: translateY(-1px);
}
.user-action-btn.warning { color: #f59e0b; }
.user-action-btn.warning:hover { background: rgba(245,158,11,.14); border-color: #f59e0b; color: #f59e0b; }
.user-action-btn.danger  { color: #ef4444; }
.user-action-btn.danger:hover  { background: rgba(239,68,68,.14); border-color: #ef4444; color: #ef4444; }
.user-action-btn i { font-size: .95rem; }

@media (max-width: 767.98px) {
    .user-cards-grid {
        grid-template-columns: 1fr;
        gap: .9rem;
    }
    .user-card-premium {
        padding: 1.2rem 1.1rem 1rem;
        border-radius: 16px;
        gap: .85rem;
    }
    .user-card-avatar {
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }
    .user-card-avatar img,
    .user-card-avatar .avatar-placeholder {
        border-radius: 13px;
    }
    .user-card-avatar .avatar-placeholder {
        font-size: 1.35rem;
    }
    .user-card-name {
        font-size: 1rem;
    }
    .user-card-meta {
        padding: .7rem .85rem;
    }
    .user-meta-item {
        font-size: .78rem;
    }
    .user-action-btn {
        padding: .5rem .45rem;
        font-size: .78rem;
    }
}

/* =====================================================================
   RESPONSIVE OPTIMIZATION — Mobile-First Comprehensive Fix
   Breakpoints: 320px–480px (small), 481px–768px (medium), 769px–1024px (tablet)
   ===================================================================== */

/* ----- TABLET (769px – 1024px) ----- */
@media (max-width: 1024px) {
    .content { padding: 1.25rem 1rem; }
    .content-header h1 { font-size: 1.25rem; }

    .dash-hero { padding: 1.5rem 1.5rem; border-radius: 18px; gap: 1rem; }
    .dash-hero h1 { font-size: 1.45rem; }
    .dash-hero.dash-hero-compact { padding: 1.25rem 1.5rem; }
    .dash-hero.dash-hero-compact h1 { font-size: 1.2rem; }

    .kpi { padding: 1.1rem 1.15rem; border-radius: 16px; }
    .kpi-value { font-size: 1.75rem; }
    .kpi-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; }

    .panel-header { padding: .85rem 1rem; }
    .panel-body { padding: 1rem; }

    .hero-stat { padding: .6rem 1rem; min-width: 72px; }
    .hero-stat-value { font-size: 1.35rem; }

    .status-chips { gap: .4rem; }
    .status-chip { padding: .45rem .75rem; font-size: .8rem; }

    .toolbar { padding: .75rem .85rem; gap: .6rem; }
}

/* ----- MOBILE LANDSCAPE / LARGE PHONE (481px – 768px) ----- */
@media (max-width: 768px) {
    :root {
        --topbar-h: 60px;
    }

    .content { padding: 1rem .85rem; }
    .content-header { gap: .75rem; margin-bottom: 1rem; }
    .content-header h1 { font-size: 1.15rem; }

    /* Topbar compact */
    .topbar { padding: 0 .85rem; gap: .6rem; }
    .topbar-icon-btn { width: 36px; height: 36px; border-radius: 10px; }
    .topbar-user { padding: .25rem .5rem .25rem .25rem; }
    .topbar-user .sidebar-avatar { width: 30px; height: 30px; font-size: .75rem; }

    /* Dashboard hero */
    .dash-hero {
        padding: 1.25rem 1.15rem;
        border-radius: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
    .dash-hero h1 { font-size: 1.25rem; }
    .dash-hero p { font-size: .88rem; margin-bottom: .75rem; }
    .dash-hero.dash-hero-compact { padding: 1.1rem 1rem; }
    .dash-hero.dash-hero-compact h1 { font-size: 1.1rem; }

    /* KPI grid: 2 kolom */
    .kpi { padding: 1rem; border-radius: 14px; }
    .kpi-value { font-size: 1.6rem; }
    .kpi-label { font-size: .65rem; letter-spacing: 1px; }
    .kpi-icon { width: 38px; height: 38px; font-size: 1.1rem; margin-bottom: .75rem; }

    /* Mini stats */
    .mini-stat { padding: .8rem .9rem; gap: .75rem; border-radius: 12px; }
    .mini-stat > i { width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; }
    .mini-stat-value { font-size: 1.1rem; }

    /* Status chips: horizontal scroll */
    .status-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .25rem;
        margin: 0 -.85rem;
        padding-left: .85rem;
        padding-right: .85rem;
    }
    .status-chips::-webkit-scrollbar { display: none; }
    .status-chip { flex-shrink: 0; padding: .45rem .7rem; font-size: .78rem; }
    .status-chip .chip-label { display: inline; }

    /* Toolbar stacking */
    .toolbar {
        flex-direction: column;
        padding: .75rem;
        gap: .5rem;
        border-radius: 14px;
    }
    .toolbar-form {
        width: 100%;
        flex-direction: column;
        gap: .5rem;
    }
    .toolbar-search { flex: none; max-width: none; width: 100%; }
    .toolbar-select { flex: none; max-width: none; width: 100%; }
    .toolbar-actions { width: 100%; justify-content: space-between; }

    /* Job grid cards */
    .jobs-grid-premium {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .7rem;
        padding: .75rem;
    }
    .job-card-premium { border-radius: 12px; }
    .job-card-body { padding: .6rem .75rem .7rem; }
    .job-card-title { font-size: .85rem; }
    .job-card-actions { padding: .4rem .6rem .6rem; gap: .25rem; }
    .job-card-actions .btn { padding: .3rem .5rem !important; font-size: .72rem !important; }

    /* Panels */
    .panel { border-radius: 14px; }
    .panel-header { padding: .8rem 1rem; }
    .panel-body { padding: 1rem; }

    /* Charts */
    .panel-body canvas { max-height: 200px; }

    /* Pagination */
    .pager a, .pager span {
        min-width: 36px; height: 36px;
        font-size: .8rem;
    }

    /* FAB safe area */
    .fab { bottom: 24px; right: 16px; width: 52px; height: 52px; font-size: 1.35rem; }

    /* Modal */
    .modal-dialog { margin: .5rem; }
    .modal-content { border-radius: 18px; }
    .modal-lg { max-width: 100%; }

    /* Quick Add Modal sections */
    .modal-section { margin-bottom: .75rem; }
    .modal-section-label { font-size: .82rem; }
    .field-premium > .form-control,
    .field-premium > .form-select { min-height: 52px; padding: 1.1rem .85rem .4rem 2.4rem !important; font-size: .9rem; }
    .field-premium > .field-icon { left: .75rem; font-size: .95rem; }
    .field-premium > label.floating { left: 2.4rem; font-size: .9rem; }

    /* Status selector compact */
    .status-selector { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .status-option { padding: .85rem .6rem; border-radius: 12px; font-size: .78rem; }
    .status-option i { font-size: 1.3rem; }

    /* Upload zone */
    .upload-zone-premium { padding: 1.25rem .85rem; border-radius: 14px; }
    .upload-zone-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 1.5rem; }

    /* Location group */
    .location-group { gap: .5rem; }
    .btn-gps { padding: .6rem .85rem; font-size: .8rem; border-radius: 10px; }

    /* Table wrap */
    .table-wrap { border-radius: 12px; margin: 0 -.25rem; }
    .table-custom thead th { padding: .6rem .75rem; font-size: .65rem; }
    .table-custom tbody td { padding: .7rem .75rem; font-size: .85rem; }

    /* Job detail page */
    .row.g-3 > .col-lg-8,
    .row.g-3 > .col-lg-4 { padding-left: 0; padding-right: 0; }

    /* Breadcrumb */
    .breadcrumb { font-size: .75rem; }

    /* Auth pages */
    .auth-panel { padding: 1.25rem; }
    .auth-form { padding: 1.5rem; border-radius: 18px; }
    .auth-title { font-size: 1.6rem; }
}

/* ----- SMALL MOBILE (320px – 480px) ----- */
@media (max-width: 480px) {
    :root {
        --topbar-h: 56px;
        --radius: 12px;
        --radius-lg: 16px;
        --radius-sm: 8px;
    }

    body { font-size: 14px; }

    .content { padding: .85rem .7rem; }
    .content-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .content-header h1 { font-size: 1.1rem; }
    .content-header .d-flex { width: 100%; }
    .content-header .btn { flex: 1; justify-content: center; font-size: .82rem; padding: .5rem .75rem; }

    /* Topbar ultra-compact */
    .topbar { padding: 0 .65rem; gap: .4rem; }
    .topbar-icon-btn { width: 34px; height: 34px; border-radius: 9px; font-size: .9rem; }
    .topbar-user { gap: .4rem; padding: .2rem .4rem .2rem .2rem; }
    .topbar-user .sidebar-avatar { width: 28px; height: 28px; font-size: .7rem; }
    .topbar-user .d-none.d-md-block { display: none !important; }

    /* Sidebar mobile */
    .sidebar { width: 280px; }
    .sidebar-header { padding: .9rem 1rem; }
    .sidebar-logo { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; }
    .sidebar-title { font-size: .9rem; }
    .sidebar-link { padding: .6rem .7rem; border-radius: 10px; font-size: .9rem; }
    .sidebar-link i { font-size: 1rem; width: 20px; }
    .sidebar-footer { padding: .75rem .85rem; }
    .sidebar-avatar { width: 34px; height: 34px; }

    /* Dashboard hero ultra-compact */
    .dash-hero {
        padding: 1rem;
        border-radius: 14px;
        margin-bottom: 1rem;
    }
    .dash-hero h1 { font-size: 1.1rem; letter-spacing: -.3px; }
    .dash-hero p { font-size: .82rem; line-height: 1.45; margin-bottom: .6rem; }
    .dash-hero .btn { font-size: .8rem; padding: .45rem .7rem; }
    .dash-hero.dash-hero-compact { padding: .9rem; }
    .dash-hero.dash-hero-compact h1 { font-size: 1rem; }
    .dash-hero .text-dim.small { font-size: .65rem !important; letter-spacing: 1.5px; }

    /* Hero stats hidden on very small screens */
    .d-none.d-lg-flex { display: none !important; }
    .d-none.d-lg-block { display: none !important; }

    /* KPI cards */
    .kpi { padding: .85rem; border-radius: 12px; }
    .kpi::after { height: 2px; }
    .kpi-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; margin-bottom: .6rem; }
    .kpi-label { font-size: .6rem; letter-spacing: .8px; margin-bottom: .3rem; }
    .kpi-value { font-size: 1.4rem; letter-spacing: -.8px; margin-bottom: .35rem; }
    .kpi-sub { font-size: .7rem; }

    /* Mini stats 2-col */
    .mini-stat { padding: .7rem .75rem; gap: .6rem; border-radius: 10px; }
    .mini-stat > i { width: 30px; height: 30px; border-radius: 8px; font-size: .9rem; }
    .mini-stat-label { font-size: .6rem; }
    .mini-stat-value { font-size: 1rem; }

    /* Status chips */
    .status-chip { padding: .4rem .6rem; font-size: .72rem; border-radius: 999px; }
    .status-chip i { font-size: .82rem; }
    .status-chip .chip-count { padding: 1px 6px; font-size: .65rem; }

    /* Toolbar */
    .toolbar { padding: .6rem; border-radius: 12px; gap: .4rem; }
    .toolbar-form { gap: .4rem; }
    .form-control, .form-select { padding: .55rem .8rem; font-size: .85rem; border-radius: 9px; }

    /* Job grid: single column */
    .jobs-grid-premium {
        grid-template-columns: 1fr;
        gap: .6rem;
        padding: .6rem;
    }
    .job-card-media { aspect-ratio: 2/1; }
    .job-card-body { padding: .55rem .7rem .6rem; }
    .job-card-title { font-size: .88rem; }
    .job-card-actions .btn { font-size: .7rem !important; padding: .28rem .45rem !important; }

    /* Jobs list compact */
    .jobs-list-item {
        gap: .4rem .75rem;
        padding: .85rem 1rem .85rem 0;
    }

    /* Panels */
    .panel { border-radius: 12px; }
    .panel-header { padding: .7rem .85rem; flex-direction: column; align-items: flex-start; gap: .4rem; }
    .panel-header h5 { font-size: .9rem; }
    .panel-body { padding: .85rem; }
    .panel-footer { padding: .7rem .85rem; flex-direction: column; gap: .5rem; }

    /* Charts smaller */
    .panel-body canvas { max-height: 170px; }
    .chart-center-label > div:first-child { font-size: 1.3rem !important; }

    /* Donut + legend stack */
    .panel-body .d-flex.align-items-center.gap-3 {
        flex-direction: column;
        align-items: stretch;
    }
    .panel-body .d-flex.align-items-center.gap-3 > div:first-child {
        width: 120px; height: 120px;
        margin: 0 auto;
    }

    /* Recent jobs list */
    .job-list-item { padding: .8rem .85rem; gap: .6rem; }
    .job-list-accent { min-height: 32px; }

    /* Activity list */
    ul.activity-list > li { padding: .7rem .85rem; gap: .6rem; }
    .activity-icon { width: 32px; height: 32px; border-radius: 9px; font-size: .9rem; }

    /* Rank badge */
    .rank-badge { width: 28px; height: 28px; font-size: .75rem; }

    /* Pagination */
    .pager { gap: .25rem; }
    .pager a, .pager span {
        min-width: 34px; height: 34px;
        border-radius: 8px;
        font-size: .78rem;
    }

    /* FAB with safe area for notch phones */
    .fab {
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        right: 14px;
        width: 50px; height: 50px;
        font-size: 1.25rem;
        box-shadow: 0 10px 24px rgba(99,102,241,.4);
    }

    /* Modal full-screen on small */
    .modal-dialog {
        margin: 0;
        min-height: 100vh;
        max-width: 100%;
    }
    .modal-content {
        border-radius: 0;
        min-height: 100vh;
        border: 0;
    }
    .modal-header { padding: .85rem 1rem; }
    .modal-body { padding: 1rem; }
    .modal-footer { padding: .75rem 1rem; }

    /* Quick Add Modal */
    .quick-add-modal .modal-body { padding: .85rem; }
    .modal-section { margin-bottom: .6rem; }
    .modal-section-label { font-size: .78rem; gap: .4rem; }
    .modal-section-num { width: 28px; height: 28px; border-radius: 8px; font-size: .75rem; }

    .field-premium { margin-top: .4rem; }
    .field-premium > .form-control,
    .field-premium > .form-select {
        min-height: 48px;
        padding: 1rem .75rem .35rem 2.2rem !important;
        font-size: .88rem;
        border-radius: 10px;
    }
    .field-premium > .field-icon { left: .65rem; font-size: .9rem; }
    .field-premium > label.floating { left: 2.2rem; font-size: .88rem; top: .85rem; }
    .field-premium > .form-control:focus ~ label.floating,
    .field-premium > .form-control:not(:placeholder-shown) ~ label.floating,
    .field-premium.has-value > label.floating {
        top: .3rem;
        font-size: .6rem;
    }

    /* Status selector: 2x2 grid */
    .status-selector { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
    .status-selector-sm .status-option { padding: .7rem .5rem; border-radius: 10px; font-size: .72rem; gap: .35rem; }
    .status-selector-sm .status-option i { font-size: 1.1rem; }

    /* Upload zone compact */
    .upload-zone-premium { padding: 1rem .75rem; border-radius: 12px; }
    .upload-zone-premium .fw-bold { font-size: .85rem; }
    .upload-zone-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem; margin-bottom: .4rem; }
    .upload-preview { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .4rem; }

    /* Location group stack on very small */
    .location-group { flex-wrap: wrap; }
    .location-group .field-premium { width: 100%; }
    .btn-gps { width: 100%; justify-content: center; padding: .55rem; border-radius: 10px; }
    .gps-status { font-size: .75rem; padding: .6rem .75rem; border-radius: 10px; }

    /* GPS resolved */
    .gps-resolved { flex-direction: column; gap: .3rem; }
    .gps-resolved-coords { font-size: .7rem; }

    /* Buttons touch-friendly */
    .btn { min-height: 40px; padding: .5rem .85rem; font-size: .85rem; }
    .btn-sm { min-height: 34px; padding: .35rem .65rem; font-size: .78rem; }
    .btn-icon { width: 36px; height: 36px; min-height: 36px; }

    /* Auth pages */
    .auth-shell { min-height: 100dvh; }
    .auth-panel { padding: 1rem; }
    .auth-form { padding: 1.25rem; border-radius: 16px; }
    .auth-title { font-size: 1.35rem; }
    .auth-subtitle { font-size: .88rem; margin-bottom: 1.5rem; }
    .auth-brand { font-size: 1.1rem; }
    .auth-brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 1.15rem; }

    /* Table responsive */
    .table-wrap { margin: 0 -.5rem; border-radius: 0; }
    .table-custom thead th { padding: .5rem .6rem; font-size: .6rem; letter-spacing: .8px; }
    .table-custom tbody td { padding: .6rem; font-size: .82rem; }

    /* Dropdown */
    .dropdown-menu { min-width: 200px !important; border-radius: 12px; }
    .dropdown-item { padding: .55rem .8rem; font-size: .85rem; }

    /* Notification dropdown full-width on mobile */
    #notifToggle + .dropdown-menu {
        position: fixed !important;
        top: var(--topbar-h) !important;
        left: .5rem !important;
        right: .5rem !important;
        transform: none !important;
        min-width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Job detail page */
    .col-sm-6 { margin-bottom: .25rem; }

    /* Empty state */
    .empty-state { padding: 2rem .75rem; }
    .empty-state i { font-size: 2.5rem; }
    .empty-state h5 { font-size: .95rem; }

    /* Stat cards (legacy) */
    .stat-card { padding: 1rem; min-height: 110px; border-radius: 12px; }
    .stat-card .stat-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 1.15rem; }
    .stat-card h3 { font-size: 1.5rem; }

    /* Top stores */
    .rank-badge { width: 26px; height: 26px; font-size: .7rem; }
    .progress { height: 4px !important; }

    /* View toggle */
    .view-toggle a { width: 30px; height: 28px; }

    /* Breadcrumb */
    .breadcrumb { font-size: .7rem; padding: .35rem 0; }
}

/* ----- EXTRA SMALL (below 360px) ----- */
@media (max-width: 360px) {
    .content { padding: .75rem .6rem; }

    .dash-hero { padding: .85rem; }
    .dash-hero h1 { font-size: 1rem; }
    .dash-hero p { font-size: .78rem; }
    .dash-hero .btn { font-size: .75rem; padding: .4rem .6rem; }

    .kpi-value { font-size: 1.25rem; }
    .kpi-icon { width: 30px; height: 30px; font-size: .9rem; margin-bottom: .5rem; }

    .status-chip { padding: .35rem .5rem; font-size: .68rem; }
    .status-chip .chip-label { display: none; }

    .toolbar { padding: .5rem; }
    .form-control, .form-select { padding: .5rem .7rem; font-size: .82rem; }

    .jobs-grid-premium { padding: .5rem; gap: .5rem; }

    .panel-header h5 { font-size: .85rem; }
    .panel-body { padding: .7rem; }

    .btn { min-height: 38px; font-size: .8rem; }
    .btn-sm { min-height: 32px; font-size: .75rem; }

    .sidebar { width: 260px; }
}

/* =====================================================================
   TOUCH & INTERACTION IMPROVEMENTS
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .sidebar-link { padding: .75rem .85rem; min-height: 44px; }
    .topbar-icon-btn { min-width: 44px; min-height: 44px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    .btn-icon { min-width: 44px; min-height: 44px; }
    .pager a, .pager span { min-width: 40px; height: 40px; }
    .dropdown-item { padding: .65rem .9rem; min-height: 44px; display: flex; align-items: center; }
    .status-chip { min-height: 40px; }
    .job-list-item { min-height: 56px; }

    /* Remove hover effects that don't work on touch */
    .card-sm:hover,
    .stat-card:hover,
    .kpi:hover,
    .job-card-premium:hover,
    .mini-stat:hover { transform: none; }

    /* Active state instead */
    .card-sm:active,
    .kpi:active,
    .job-card-premium:active,
    .mini-stat:active { transform: scale(.98); }
    .btn:active { transform: scale(.96); }
    .sidebar-link:active { transform: translateX(2px); }
}

/* =====================================================================
   SAFE AREA (iPhone notch / dynamic island)
   ===================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
    .fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
    .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }

    @media (max-width: 480px) {
        .content { padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); }
    }
}

/* =====================================================================
   SMOOTH SCROLL & REDUCED MOTION
   ===================================================================== */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .skeleton { animation: none; }
}

/* =====================================================================
   LANDSCAPE PHONE FIX
   ===================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .dash-hero { padding: .85rem 1rem; }
    .dash-hero h1 { font-size: 1.1rem; }
    .kpi { padding: .75rem; }
    .kpi-value { font-size: 1.3rem; }
    .modal-content { min-height: auto; }
    .modal-dialog { min-height: auto; }
    .fab { bottom: 12px; right: 12px; width: 44px; height: 44px; font-size: 1.1rem; }
}

/* =====================================================================
   OVERFLOW PREVENTION (global)
   ===================================================================== */
.main-wrap { overflow-x: hidden; }
.content { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Prevent table overflow */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* Fix flex children overflow */
.flex-grow-1 { min-width: 0; }
.min-w-0 { min-width: 0 !important; }

/* =====================================================================
   PRINT RESPONSIVE (enhanced)
   ===================================================================== */
@media print {
    .content { padding: 0 !important; }
    .dash-hero, .status-chips, .toolbar, .fab, .pager { display: none !important; }
    .kpi, .panel { break-inside: avoid; page-break-inside: avoid; }
    .jobs-grid-premium { grid-template-columns: repeat(2, 1fr) !important; }
    .modal { display: none !important; }
}

/* =====================================================================
   STORE CARDS — Premium card grid (mirrors user-cards pattern)
   ===================================================================== */
.store-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: .75rem;
}

.store-card-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.4rem 1.3rem 1.1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
}
body[data-theme="light"] .store-card-premium {
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
}
.store-card-premium:hover {
    transform: translateY(-3px);
    border-color: var(--c-border-strong);
    box-shadow: 0 12px 30px -10px rgba(99,102,241,.2);
}
.store-card-premium.is-inactive {
    opacity: .7;
}
.store-card-premium.is-inactive:hover {
    opacity: .85;
}

/* Top accent strip */
.store-card-strip {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    opacity: .8;
}
.store-card-premium.is-inactive .store-card-strip {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Top section: icon + info */
.store-card-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.store-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(34,211,238,.1));
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(99,102,241,.3);
    transition: transform var(--transition);
}
.store-card-premium:hover .store-card-icon {
    transform: scale(1.05) rotate(-3deg);
}
.store-card-premium.is-inactive .store-card-icon {
    background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.08));
    color: #f59e0b;
    box-shadow: 0 6px 16px -4px rgba(245,158,11,.3);
}

.store-card-info {
    flex: 1;
    min-width: 0;
}
.store-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 .15rem;
    letter-spacing: -.2px;
    line-height: 1.3;
}
.store-card-code {
    font-size: .72rem;
    font-family: ui-monospace, monospace;
    color: var(--c-text-dim);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.store-card-pills {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Meta section */
.store-card-meta {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .75rem .85rem;
    background: var(--c-surface-2);
    border-radius: 12px;
    border: 1px solid var(--c-border);
}
.store-meta-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--c-text-muted);
}
.store-meta-item i {
    color: var(--c-text-dim);
    font-size: .9rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.store-meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.store-meta-item strong {
    color: var(--c-text);
    font-weight: 600;
}

/* Action buttons */
.store-card-actions {
    display: flex;
    gap: .45rem;
}
.store-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem .75rem;
    background: rgba(148,163,184,.08);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
}
.store-action-btn:hover {
    background: rgba(99,102,241,.12);
    border-color: var(--c-primary);
    color: var(--c-primary);
    transform: translateY(-1px);
}
.store-action-btn.warning { color: #f59e0b; }
.store-action-btn.warning:hover { background: rgba(245,158,11,.14); border-color: #f59e0b; color: #f59e0b; }
.store-action-btn.success { color: #10b981; }
.store-action-btn.success:hover { background: rgba(16,185,129,.14); border-color: #10b981; color: #10b981; }
.store-action-btn.danger { color: #ef4444; }
.store-action-btn.danger:hover { background: rgba(239,68,68,.14); border-color: #ef4444; color: #ef4444; }
.store-action-btn i { font-size: .95rem; }

/* Responsive */
@media (max-width: 767.98px) {
    .store-cards-grid {
        grid-template-columns: 1fr;
        gap: .9rem;
    }
    .store-card-premium {
        padding: 1.2rem 1.1rem 1rem;
        border-radius: 16px;
        gap: .75rem;
    }
    .store-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.2rem;
    }
    .store-card-name {
        font-size: .95rem;
    }
    .store-card-meta {
        padding: .65rem .75rem;
    }
    .store-meta-item {
        font-size: .78rem;
    }
    .store-action-btn {
        padding: .5rem .45rem;
        font-size: .78rem;
    }
    .store-action-btn span {
        display: none;
    }
}

/* =====================================================================
   CATEGORY CARDS — Premium card grid with color accent
   ===================================================================== */
.category-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: .75rem;
}

.category-card-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.4rem 1.3rem 1.1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
}
body[data-theme="light"] .category-card-premium {
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
}
.category-card-premium:hover {
    transform: translateY(-3px);
    border-color: var(--cat-color, var(--c-border-strong));
    box-shadow: 0 12px 30px -10px rgba(99,102,241,.25);
}
.category-card-premium.is-inactive {
    opacity: .7;
}
.category-card-premium.is-inactive:hover {
    opacity: .85;
}

/* Top accent strip — uses category color */
.category-card-strip {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cat-color, #6366f1), transparent 80%);
    opacity: .9;
}

/* Top section: icon + info */
.category-card-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.category-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(99,102,241,.15);
    color: var(--cat-color, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(99,102,241,.3);
    transition: transform var(--transition);
}
.category-card-premium:hover .category-card-icon {
    transform: scale(1.05) rotate(-3deg);
}

.category-card-info {
    flex: 1;
    min-width: 0;
}
.category-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 .4rem;
    letter-spacing: -.2px;
    line-height: 1.3;
}
.category-card-pills {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Meta section */
.category-card-meta {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .75rem .85rem;
    background: var(--c-surface-2);
    border-radius: 12px;
    border: 1px solid var(--c-border);
}
.category-meta-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--c-text-muted);
}
.category-meta-item i {
    color: var(--c-text-dim);
    font-size: .9rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.category-meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.category-meta-item strong {
    color: var(--c-text);
    font-weight: 600;
}
.category-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: .25rem;
    box-shadow: 0 2px 6px -2px currentColor;
}

/* Action buttons */
.category-card-actions {
    display: flex;
    gap: .45rem;
}
.category-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem .75rem;
    background: rgba(148,163,184,.08);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
}
.category-action-btn:hover {
    background: rgba(99,102,241,.12);
    border-color: var(--cat-color, var(--c-primary));
    color: var(--cat-color, var(--c-primary));
    transform: translateY(-1px);
}
.category-action-btn.warning { color: #f59e0b; }
.category-action-btn.warning:hover { background: rgba(245,158,11,.14); border-color: #f59e0b; color: #f59e0b; }
.category-action-btn.success { color: #10b981; }
.category-action-btn.success:hover { background: rgba(16,185,129,.14); border-color: #10b981; color: #10b981; }
.category-action-btn.danger { color: #ef4444; }
.category-action-btn.danger:hover { background: rgba(239,68,68,.14); border-color: #ef4444; color: #ef4444; }
.category-action-btn i { font-size: .95rem; }

/* Preview box in modal */
.category-preview-box {
    padding: 1rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 12px;
}
.category-preview-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--c-text-dim);
    font-weight: 700;
    margin-bottom: .6rem;
}
.category-preview-content {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.category-preview-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(99,102,241,.15);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all .25s ease;
}
.category-preview-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-text);
}

/* Responsive */
@media (max-width: 767.98px) {
    .category-cards-grid {
        grid-template-columns: 1fr;
        gap: .9rem;
    }
    .category-card-premium {
        padding: 1.2rem 1.1rem 1rem;
        border-radius: 16px;
        gap: .75rem;
    }
    .category-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.2rem;
    }
    .category-card-name {
        font-size: .95rem;
    }
    .category-card-meta {
        padding: .65rem .75rem;
    }
    .category-meta-item {
        font-size: .78rem;
    }
    .category-action-btn {
        padding: .5rem .45rem;
        font-size: .78rem;
    }
    .category-action-btn span {
        display: none;
    }
}

/* =====================================================================
   BACKUP & RESTORE — Premium components
   ===================================================================== */

/* Info list items */
.backup-info-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.backup-info-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .85rem;
    color: var(--c-text-muted);
    line-height: 1.45;
}
.backup-info-item i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: .9rem;
}
.backup-info-item code {
    background: rgba(99,102,241,.1);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: .78rem;
    color: var(--c-primary);
}

/* Warning box */
.backup-warning-box {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(245,158,11,.04));
    border: 1px solid rgba(245,158,11,.25);
    border-left: 3px solid #f59e0b;
    border-radius: 12px;
    color: var(--c-text-muted);
}
.backup-warning-box > i {
    color: #f59e0b;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.backup-warning-box strong {
    color: var(--c-text);
    display: block;
    margin-bottom: .2rem;
}

/* Backup files list */
.backup-files-list {
    display: flex;
    flex-direction: column;
}
.backup-file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--c-border);
    transition: background var(--transition);
}
.backup-file-item:last-child { border-bottom: 0; }
.backup-file-item:hover { background: rgba(99,102,241,.03); }
.backup-file-item.is-latest { background: rgba(16,185,129,.04); }
body[data-theme="light"] .backup-file-item:hover { background: rgba(99,102,241,.03); }

.backup-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(99,102,241,.12);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.backup-file-item.is-latest .backup-file-icon {
    background: rgba(16,185,129,.12);
    color: #10b981;
}

.backup-file-info {
    flex: 1;
    min-width: 0;
}
.backup-file-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.backup-file-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--c-text-dim);
    margin-top: .2rem;
    flex-wrap: wrap;
}
.backup-file-meta i { font-size: .72rem; }

.backup-file-actions {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 767.98px) {
    .backup-file-item {
        flex-wrap: wrap;
        gap: .75rem;
        padding: .85rem 1rem;
    }
    .backup-file-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1rem;
    }
    .backup-file-name { font-size: .82rem; }
    .backup-file-meta { font-size: .7rem; }
    .backup-file-actions {
        width: 100%;
        padding-top: .5rem;
        border-top: 1px dashed var(--c-border);
    }
    .backup-warning-box {
        flex-direction: column;
        gap: .5rem;
    }
}

/* =====================================================================
   PROFILE & SETTINGS — Premium components
   ===================================================================== */

/* Profile hero avatar */
.profile-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    overflow: hidden;
    box-shadow: 0 10px 30px -8px rgba(99,102,241,.5);
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,.2);
}
.profile-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile avatar section in form */
.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 14px;
}
.profile-avatar-current {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 22px -6px rgba(99,102,241,.4);
}
.profile-avatar-current img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile info list */
.profile-info-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.profile-info-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--c-border);
}
.profile-info-item:last-child { border-bottom: 0; }
.profile-info-item > i {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}
.profile-info-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-dim);
    font-weight: 600;
}
.profile-info-value {
    font-weight: 600;
    color: var(--c-text);
    font-size: .9rem;
}

/* Settings logo upload */
.settings-logo-upload {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 12px;
}
.settings-logo-preview {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.settings-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Settings theme picker */
.settings-theme-picker {
    display: flex;
    gap: .5rem;
}
.settings-theme-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1rem .75rem;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    font-weight: 600;
    font-size: .82rem;
    color: var(--c-text-muted);
}
.settings-theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.settings-theme-option i { font-size: 1.5rem; color: var(--c-text-dim); transition: all var(--transition); }
.settings-theme-option:hover {
    border-color: var(--c-primary);
    color: var(--c-text);
    transform: translateY(-2px);
}
.settings-theme-option:hover i { color: var(--c-primary); }
.settings-theme-option.active {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    color: var(--c-text);
    box-shadow: 0 6px 18px -4px rgba(99,102,241,.3);
}
.settings-theme-option.active i { color: var(--c-primary); }

/* Responsive */
@media (max-width: 767.98px) {
    .profile-hero-avatar {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 1.4rem;
    }
    .profile-avatar-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .85rem;
    }
    .profile-avatar-current {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        font-size: 1.6rem;
    }
    .profile-info-item > i {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: .8rem;
    }
    .settings-theme-option {
        padding: .75rem .5rem;
        font-size: .78rem;
    }
    .settings-theme-option i { font-size: 1.2rem; }
    .settings-logo-upload {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================================
   OFFLINE INDICATOR
   ===================================================================== */
.offline-indicator {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(239,68,68,.3);
    animation: smSlideUp .3s ease both;
}
.offline-indicator i { font-size: 1rem; }
.offline-indicator[hidden] { display: none; }

@supports (padding: env(safe-area-inset-bottom)) {
    .offline-indicator {
        padding-bottom: calc(.65rem + env(safe-area-inset-bottom));
    }
}

/* =====================================================================
   ARCHIVE CARDS — Premium period cards with progress bars
   ===================================================================== */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1px;
    background: var(--c-border);
}

.archive-card {
    background: var(--c-surface);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: background var(--transition);
}
.archive-card:hover {
    background: rgba(99,102,241,.03);
}
body[data-theme="light"] .archive-card:hover {
    background: rgba(99,102,241,.02);
}

/* Header: date badge + title */
.archive-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.archive-card-date {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-600));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(99,102,241,.4);
}
.archive-card-month {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}
.archive-card-year {
    font-size: .6rem;
    opacity: .7;
    font-weight: 600;
    margin-top: 2px;
}
.archive-card-title {
    flex: 1;
    min-width: 0;
}
.archive-card-title h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--c-text);
    letter-spacing: -.2px;
}

/* Stats with mini progress bars */
.archive-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.archive-stat {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .5rem .65rem;
    background: var(--c-surface-2);
    border-radius: 10px;
    border: 1px solid var(--c-border);
}
.archive-stat-bar {
    height: 3px;
    border-radius: 3px;
    background: rgba(148,163,184,.15);
    position: relative;
    overflow: hidden;
}
.archive-stat-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--pct, 0%);
    background: var(--color, var(--c-primary));
    border-radius: 3px;
    transition: width .6s cubic-bezier(.22,1,.36,1);
}
.archive-stat-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.archive-stat-label {
    font-size: .7rem;
    color: var(--c-text-dim);
    font-weight: 500;
}
.archive-stat-value {
    font-size: .82rem;
    font-weight: 700;
    color: var(--c-text);
}

/* Footer: overall progress + action */
.archive-card-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .5rem;
    border-top: 1px solid var(--c-border);
}
.archive-progress {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: rgba(148,163,184,.12);
    overflow: hidden;
}
.archive-progress-bar {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #10b981, #6ee7b7);
    transition: width .8s cubic-bezier(.22,1,.36,1);
}

/* Responsive */
@media (max-width: 767.98px) {
    .archive-grid {
        grid-template-columns: 1fr;
    }
    .archive-card {
        padding: 1rem 1.1rem;
        gap: .85rem;
    }
    .archive-card-date {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .archive-card-month { font-size: .65rem; }
    .archive-card-title h4 { font-size: .95rem; }
    .archive-card-stats {
        grid-template-columns: 1fr 1fr;
        gap: .4rem;
    }
    .archive-stat { padding: .4rem .5rem; }
    .archive-stat-label { font-size: .65rem; }
    .archive-stat-value { font-size: .75rem; }
}

@media (max-width: 480px) {
    .archive-card-header { gap: .75rem; }
    .archive-card-date { width: 40px; height: 40px; border-radius: 10px; }
    .archive-card-footer { flex-direction: column; align-items: stretch; gap: .5rem; }
    .archive-card-footer .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   AUTH v2 — Premium login/register redesign
   ===================================================================== */

/* Alert error */
.auth-alert-error {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.05));
    border: 1px solid rgba(239,68,68,.25);
    border-left: 3px solid #ef4444;
    border-radius: 12px;
    color: var(--c-text);
    font-size: .88rem;
    margin-bottom: 1.25rem;
    animation: smSlideUp .3s ease both;
}
.auth-alert-error i { color: #ef4444; font-size: 1.1rem; flex-shrink: 0; }

/* Auth field wrapper */
.auth-field {
    position: relative;
    margin-bottom: 1rem;
}
.auth-field .field-premium > .form-control {
    padding-right: 3rem;
}

/* Password toggle */
.auth-pass-toggle {
    position: absolute;
    top: 50%; right: .85rem;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--c-text-dim);
    cursor: pointer;
    padding: .25rem;
    border-radius: 6px;
    transition: color var(--transition);
    z-index: 2;
}
.auth-pass-toggle:hover { color: var(--c-primary); }

/* Options row */
.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

/* Custom checkbox */
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .85rem;
    color: var(--c-text-muted);
    user-select: none;
}
.auth-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.auth-checkbox-mark {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 2px solid var(--c-border-strong);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
}
.auth-checkbox-mark::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 3px;
    background: var(--c-primary);
    transform: scale(0);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.auth-checkbox input:checked ~ .auth-checkbox-mark {
    border-color: var(--c-primary);
}
.auth-checkbox input:checked ~ .auth-checkbox-mark::after {
    transform: scale(1);
}

/* Forgot link */
.auth-forgot-link {
    font-size: .82rem;
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.auth-forgot-link:hover { color: var(--c-primary); }

/* Submit button */
.auth-submit-btn {
    width: 100%;
    justify-content: center;
    padding: .75rem 1.5rem;
    font-size: .95rem;
    font-weight: 700;
    border-radius: 12px;
    gap: .5rem;
}

/* Footer link */
.auth-footer-link {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .85rem;
    color: var(--c-text-muted);
}
.auth-footer-link a {
    color: var(--c-primary);
    font-weight: 600;
    text-decoration: none;
}
.auth-footer-link a:hover { text-decoration: underline; }

/* Copyright */
.auth-copyright {
    margin-top: 2rem;
    font-size: .75rem;
    color: var(--c-text-dim);
    text-align: center;
}

/* ---- ASIDE v2 ---- */
.auth-aside-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 1.25rem;
}
.auth-aside-badge i { color: #fcd34d; }

.auth-aside-title {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin-bottom: .75rem;
    color: #fff;
}
.auth-aside-desc {
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

/* Feature cards */
.auth-features {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 2rem;
}
.auth-feature-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    transition: all var(--transition);
}
.auth-feature-card:hover {
    background: rgba(255,255,255,.1);
    transform: translateX(4px);
    border-color: rgba(255,255,255,.18);
}
.auth-feature-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    color: var(--feat-color, #6366f1);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px var(--feat-color, rgba(99,102,241,.4));
}
.auth-feature-card strong {
    display: block;
    color: #fff;
    font-size: .88rem;
    margin-bottom: .1rem;
}
.auth-feature-card small {
    color: rgba(255,255,255,.6);
    font-size: .76rem;
    line-height: 1.3;
}

/* Stats row */
.auth-aside-stats {
    display: flex;
    gap: .75rem;
}
.auth-aside-stat {
    flex: 1;
    text-align: center;
    padding: .75rem .5rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
}
.auth-aside-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
}
.auth-aside-stat-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,.55);
    font-weight: 600;
    margin-top: .15rem;
}

/* Light mode aside */
/* Light mode aside — match light theme */
body[data-theme="light"] .auth-aside-badge {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.15);
    color: #4f46e5;
}
body[data-theme="light"] .auth-aside-badge i { color: #f59e0b; }
body[data-theme="light"] .auth-aside-title { color: #0f172a; }
body[data-theme="light"] .auth-aside-desc { color: #475569; }
body[data-theme="light"] .auth-feature-card {
    background: rgba(99,102,241,.04);
    border-color: rgba(15,23,42,.08);
}
body[data-theme="light"] .auth-feature-card:hover {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.2);
}
body[data-theme="light"] .auth-feature-card strong { color: #0f172a; }
body[data-theme="light"] .auth-feature-card small { color: #64748b; }
body[data-theme="light"] .auth-aside-stat {
    background: #fff;
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
body[data-theme="light"] .auth-aside-stat-value { color: #0f172a; }
body[data-theme="light"] .auth-aside-stat-label { color: #64748b; }
body[data-theme="light"] .auth-feature-icon {
    background: rgba(99,102,241,.1);
}
body[data-theme="light"] .auth-aside-stats {
    border-top-color: rgba(15,23,42,.08);
}

/* Light mode — mock preview */
body[data-theme="light"] .auth-preview-mock {
    background: #fff;
    border-color: rgba(15,23,42,.1);
    box-shadow: 0 20px 50px -15px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.04);
}
body[data-theme="light"] .auth-mock-header {
    background: #f8fafc;
    border-bottom-color: rgba(15,23,42,.06);
}
body[data-theme="light"] .auth-mock-title { color: #64748b; }
body[data-theme="light"] .auth-mock-stat {
    background: #f8fafc;
    border-color: rgba(15,23,42,.06);
}
body[data-theme="light"] .auth-mock-stat-val { color: #0f172a; }
body[data-theme="light"] .auth-mock-stat-lbl { color: #94a3b8; }
body[data-theme="light"] .auth-mock-stat-icon { opacity: .8; }
body[data-theme="light"] .auth-mock-chart {
    background: #f8fafc;
    border-color: rgba(15,23,42,.06);
}

/* Light mode — feature list */
body[data-theme="light"] .auth-feature-item {
    color: #334155;
}
body[data-theme="light"] .auth-feature-item i {
    color: #10b981;
    filter: none;
}

/* Light mode — decorative circles */
body[data-theme="light"] .auth-decor-1 { background: radial-gradient(circle, rgba(99,102,241,.15), transparent 70%); }
body[data-theme="light"] .auth-decor-2 { background: radial-gradient(circle, rgba(34,211,238,.12), transparent 70%); }
body[data-theme="light"] .auth-decor-3 { background: radial-gradient(circle, rgba(167,139,250,.12), transparent 70%); }

/* Responsive auth v2 */
@media (max-width: 992px) {
    .auth-aside-title { font-size: 1.4rem; }
    .auth-features { gap: .5rem; }
    .auth-feature-card { padding: .7rem .85rem; }
    .auth-feature-icon { width: 36px; height: 36px; font-size: 1rem; }
}
@media (max-width: 480px) {
    .auth-field .field-premium > .form-control {
        min-height: 50px;
    }
    .auth-submit-btn { padding: .7rem 1rem; font-size: .9rem; }
    .auth-options { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* =====================================================================
   AUTH ASIDE — Decorative elements & visual polish
   ===================================================================== */

/* Floating decorative circles */
.auth-aside-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.auth-decor-circle {
    position: absolute;
    border-radius: 50%;
    opacity: .15;
    animation: authFloat 8s ease-in-out infinite;
}
.auth-decor-1 {
    width: 300px; height: 300px;
    top: -80px; right: -60px;
    background: radial-gradient(circle, #818cf8, transparent 70%);
    animation-delay: 0s;
}
.auth-decor-2 {
    width: 200px; height: 200px;
    bottom: 10%; left: -40px;
    background: radial-gradient(circle, #22d3ee, transparent 70%);
    animation-delay: -3s;
    animation-duration: 10s;
}
.auth-decor-3 {
    width: 150px; height: 150px;
    top: 40%; right: 20%;
    background: radial-gradient(circle, #a78bfa, transparent 70%);
    animation-delay: -5s;
    animation-duration: 12s;
}

@keyframes authFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(10px, -15px) scale(1.05); }
    50% { transform: translate(-5px, 10px) scale(.95); }
    75% { transform: translate(8px, 5px) scale(1.02); }
}

/* Feature card enhanced hover glow */
.auth-feature-card {
    position: relative;
}
.auth-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--feat-color, #818cf8), transparent 60%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.auth-feature-card:hover::before {
    opacity: .06;
}

/* Feature icon glow effect */
.auth-feature-icon {
    position: relative;
}
.auth-feature-icon::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background: var(--feat-color, #818cf8);
    opacity: .15;
    filter: blur(8px);
    z-index: -1;
}

/* Stats enhanced */
.auth-aside-stats {
    position: relative;
}
.auth-aside-stats::before {
    content: "";
    position: absolute;
    top: -1rem; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.auth-aside-stat {
    position: relative;
    overflow: hidden;
}
.auth-aside-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    opacity: .6;
    border-radius: 2px;
}

/* Aside badge pulse */
.auth-aside-badge i {
    animation: authPulseGlow 2s ease-in-out infinite;
}
@keyframes authPulseGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-decor-circle { animation: none; }
    .auth-aside-badge i { animation: none; }
}

/* =====================================================================
   AUTH ASIDE v3 — Dashboard mock preview + feature checklist
   ===================================================================== */
.auth-aside-content {
    position: relative;
    z-index: 1;
}

/* Dashboard Preview Mock — glassmorphism window */
.auth-preview-mock {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow:
        0 20px 50px -15px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.1);
    margin-bottom: 1.5rem;
    animation: smSlideUp .6s .3s cubic-bezier(.22,1,.36,1) both;
}
.auth-mock-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    background: rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.auth-mock-dots {
    display: flex;
    gap: 5px;
}
.auth-mock-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}
.auth-mock-dots span:first-child { background: #ef4444; }
.auth-mock-dots span:nth-child(2) { background: #f59e0b; }
.auth-mock-dots span:last-child { background: #10b981; }
.auth-mock-title {
    font-size: .68rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    letter-spacing: .5px;
}
.auth-mock-body {
    padding: 1rem;
}
.auth-mock-stats {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}
.auth-mock-stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .6rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
}
.auth-mock-stat-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    color: #fff;
    flex-shrink: 0;
}
.auth-mock-stat-val {
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.3px;
}
.auth-mock-stat-lbl {
    font-size: .55rem;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
}
.auth-mock-chart {
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
}
.auth-mock-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Feature checklist */
.auth-feature-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1.5rem;
}
.auth-feature-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    color: rgba(255,255,255,.8);
    font-weight: 500;
}
.auth-feature-item i {
    color: #34d399;
    font-size: .95rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(52,211,153,.4));
}

/* Stats separator line */
.auth-aside-stats {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: .5rem;
}

/* Responsive mock */
@media (max-width: 1200px) {
    .auth-mock-stats { flex-direction: column; gap: .4rem; }
    .auth-mock-stat { padding: .45rem .5rem; }
}
@media (max-width: 992px) {
    .auth-preview-mock { display: none; }
}

/* =====================================================================
   LOGO IMAGE — proper sizing in sidebar & auth
   ===================================================================== */
.sidebar-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
.auth-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* =====================================================================
   AUTH ALERTS — success & warning variants
   ===================================================================== */
.auth-alert-success {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.05));
    border: 1px solid rgba(16,185,129,.25);
    border-left: 3px solid #10b981;
    border-radius: 12px;
    color: var(--c-text);
    font-size: .88rem;
    margin-bottom: 1.25rem;
    animation: smSlideUp .3s ease both;
}
.auth-alert-success i { color: #10b981; font-size: 1.1rem; flex-shrink: 0; }

.auth-alert-warning {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(245,158,11,.04));
    border: 1px solid rgba(245,158,11,.25);
    border-left: 3px solid #f59e0b;
    border-radius: 12px;
    font-size: .8rem;
    margin-bottom: 1.25rem;
    word-break: break-all;
}
.auth-alert-warning i { color: #f59e0b; font-size: 1.1rem; flex-shrink: 0; }
.auth-alert-warning a { color: var(--c-primary); }

/* =====================================================================
   KEYBOARD SHORTCUTS modal
   ===================================================================== */
.kbd-list { display: flex; flex-direction: column; gap: .5rem; }
.kbd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .85rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-size: .88rem;
    color: var(--c-text-muted);
}
.kbd-row kbd {
    display: inline-block;
    padding: 2px 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: .75rem;
    color: var(--c-text);
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

/* =====================================================================
   BULK SELECT — checkbox, action bar, selected state
   ===================================================================== */

/* Bulk action bar (sticky top) */
.bulk-action-bar {
    position: sticky;
    top: var(--topbar-h);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1.25rem;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-600));
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.15);
    animation: smSlideUp .25s ease both;
}
.bulk-action-bar[hidden] { display: none; }
.bulk-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
}
.bulk-info i { font-size: 1.1rem; }
.bulk-buttons {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.bulk-action-bar .btn {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.25);
    color: #fff;
    font-size: .78rem;
    padding: .35rem .65rem;
}
.bulk-action-bar .btn:hover {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.bulk-action-bar .btn-danger {
    background: rgba(239,68,68,.8);
    border-color: rgba(239,68,68,.9);
}
.bulk-action-bar .btn-danger:hover {
    background: #ef4444;
}
.bulk-action-bar .btn-ghost {
    background: transparent;
    border: 0;
    opacity: .7;
}
.bulk-action-bar .btn-ghost:hover { opacity: 1; }

/* Checkbox column in table head & list */
.col-bulk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
}

/* Custom checkbox */
.bulk-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
}
.bulk-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.bulk-checkbox-mark {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--c-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s cubic-bezier(.22,1,.36,1);
    background: transparent;
}
.bulk-checkbox-mark::after {
    content: '\F26B';
    font-family: 'bootstrap-icons';
    font-size: .7rem;
    color: #fff;
    opacity: 0;
    transform: scale(0);
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.bulk-checkbox input:checked ~ .bulk-checkbox-mark {
    background: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 3px 8px -2px rgba(99,102,241,.5);
}
.bulk-checkbox input:checked ~ .bulk-checkbox-mark::after {
    opacity: 1;
    transform: scale(1);
}
.bulk-checkbox input:indeterminate ~ .bulk-checkbox-mark {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.bulk-checkbox input:indeterminate ~ .bulk-checkbox-mark::after {
    content: '\F2EA';
    opacity: 1;
    transform: scale(1);
}

/* Grid with bulk checkbox column */
.jobs-table-head.has-bulk {
    grid-template-columns: 36px 110px 100px minmax(0, 1fr) 130px 120px 110px 120px;
}
.jobs-list-item.has-bulk {
    grid-template-columns: 4px 36px 110px 100px minmax(0, 1fr) 130px 120px 110px 120px;
}

/* Selected row highlight */
.jobs-list-item.is-selected {
    background: var(--c-primary-soft) !important;
    border-left: 3px solid var(--c-primary);
}
.jobs-list-item.is-selected .jobs-list-accent {
    background: var(--c-primary) !important;
    box-shadow: 0 0 12px var(--c-primary) !important;
}

/* Responsive: hide bulk on small screens (use long-press instead) */
@media (max-width: 1100px) {
    .jobs-table-head.has-bulk { display: none; }
    .jobs-list-item.has-bulk {
        grid-template-columns: 4px 36px 1fr auto;
        grid-template-rows: auto auto auto;
    }
    .jobs-list-item.has-bulk .col-bulk { grid-row: 1 / -1; align-self: center; }
    .jobs-list-item.has-bulk .col-code { grid-column: 3; }
    .jobs-list-item.has-bulk .col-status { grid-column: 4; grid-row: 1; }
    .jobs-list-item.has-bulk .col-customer { grid-column: 3 / 5; }
    .jobs-list-item.has-bulk .col-cat { grid-column: 3; }
    .jobs-list-item.has-bulk .col-date { grid-column: 4; grid-row: 3; text-align: right; }
    .jobs-list-item.has-bulk .col-user { display: none; }
    .jobs-list-item.has-bulk .col-actions { grid-column: 3 / 5; grid-row: 4; justify-content: flex-start; padding-top: .5rem; border-top: 1px dashed var(--c-border); }
}

@media (max-width: 480px) {
    .bulk-action-bar {
        flex-direction: column;
        gap: .5rem;
        padding: .6rem .85rem;
    }
    .bulk-buttons { width: 100%; justify-content: space-between; }
    .bulk-buttons .btn { flex: 1; justify-content: center; font-size: .72rem; padding: .3rem .4rem; }
}

/* =====================================================================
   SWEETALERT2 — Compact & modern overrides
   ===================================================================== */

/* Confirm dialog — compact */
.sm-confirm-popup {
    border-radius: 18px !important;
    padding: 1.25rem !important;
    max-width: 360px !important;
}
.sm-confirm-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto .75rem !important;
    border-width: 2px !important;
}
.sm-confirm-icon .swal2-icon-content {
    font-size: 1.5rem !important;
}
.sm-confirm-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin-bottom: .4rem !important;
}
.sm-confirm-text {
    font-size: .85rem !important;
    color: var(--c-text-muted) !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
}
.sm-confirm-actions {
    gap: .5rem !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
.sm-confirm-btn, .sm-cancel-btn {
    font-size: .82rem !important;
    font-weight: 600 !important;
    padding: .5rem 1.1rem !important;
    border-radius: 10px !important;
    min-height: 38px !important;
}

/* Toast — compact */
.sm-toast-popup {
    padding: .6rem 1rem !important;
    border-radius: 12px !important;
    font-size: .85rem !important;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,.2) !important;
    border: 1px solid var(--c-border) !important;
}
.sm-toast-popup .swal2-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 .5rem 0 0 !important;
    border-width: 2px !important;
}
.sm-toast-popup .swal2-icon .swal2-icon-content {
    font-size: .75rem !important;
}
.sm-toast-title {
    font-size: .82rem !important;
    font-weight: 600 !important;
}
.sm-toast-popup .swal2-timer-progress-bar {
    height: 3px !important;
}