/* =====================================================================
   CREATIVE GEEK — DESIGN SYSTEM
   Dark Premium + Gold Accent
   ---------------------------------------------------------------------
   Satu-satunya sumber CSS. Tidak ada lagi <style> inline yang
   di-copy-paste ke puluhan halaman.
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
    /* Palet dasar */
    --bg:            #0a0a0f;
    --bg-soft:       #101016;
    --surface:       #15151c;
    --surface-2:     #1b1b24;
    --surface-3:     #23232e;
    --border:        #26262f;
    --border-strong: #34343f;

    /* Teks */
    --text:          #eaeaf1;
    --text-muted:    #9d9dab;
    --text-faint:    #6d6d7a;

    /* Aksen emas */
    --gold:          #f5a623;
    --gold-strong:   #ffc04d;
    --gold-dim:      #b57f1a;
    --gold-bg:       rgba(245, 166, 35, 0.10);
    --gold-border:   rgba(245, 166, 35, 0.35);
    /* ALIAS: kode lama (termasuk halaman baru) memakai `var(--accent)`, tetapi
       variabel itu TIDAK PERNAH didefinisikan — hanya `--gold` yang ada.
       Akibatnya 31 tempat tampil TANPA WARNA (mis. tab aktif jadi transparan).
       Alias ini menyambungkannya tanpa harus mengubah semua pemakaian.
       JANGAN dihapus selama masih ada `var(--accent)` di kode. */
    --accent:        var(--gold);

    /* Semantik */
    --success:       #34d399;
    --success-bg:    rgba(52, 211, 153, 0.10);
    --danger:        #f87171;
    --danger-bg:     rgba(248, 113, 113, 0.10);
    --warning:       #fbbf24;
    --warning-bg:    rgba(251, 191, 36, 0.10);
    --info:          #60a5fa;
    --info-bg:       rgba(96, 165, 250, 0.10);
    --muted:         #9d9dab;

    /* Bentuk */
    --radius:        14px;
    --radius-sm:     10px;
    --radius-xs:     7px;
    --radius-pill:   999px;

    /* Bayangan */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
    --shadow:    0 6px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.55);

    /* Warna scrollbar (di-override per tema di themeCssVars) */
    --scroll-thumb: #34343f;

    /* Font */
    --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;

    /* Transisi */
    --tr: 0.18s cubic-bezier(.4,0,.2,1);

    /* Layout */
    --sidebar-w: 260px;
    --sidebar-mini-w: 72px;
    --navbar-h: 64px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

p { margin: 0 0 1rem; }
a { color: var(--gold); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--gold-strong); }

img, svg { max-width: 100%; vertical-align: middle; }

/* Scrollbar gelap */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* Seleksi */
::selection { background: var(--gold); color: #0a0a0f; }

/* Focus ring yang konsisten & terlihat */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =====================================================================
   3. LAYOUT SHELL
   ===================================================================== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
}

.app-content {
    flex: 1;
    padding: 24px;
}

.container-fluid {
    max-width: 1440px;
    margin: 0 auto;
}

/* =====================================================================
   4. SIDEBAR
   ===================================================================== */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 100;
    transition: transform var(--tr);
}
/* Sidebar disembunyikan penuh (desktop) → konten full */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    border-bottom: 1px solid var(--border);
}

.sidebar-logo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0a0a0f;
    font-size: 19px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 25%, transparent);
}

.sidebar-brand-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-brand-name { font-weight: 800; font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.sidebar-brand-sub { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

.sidebar-close {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-xs);
}
.sidebar-close:hover { color: var(--text); background: var(--surface-3); }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px;
}

.sidebar-section {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-faint);
    padding: 10px 12px 6px;
}

/* ===== GRUP MENU COLLAPSIBLE (dropdown sidebar) ===== */
.sidebar-group { padding: 0; }
.sidebar-group-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 6px;
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: color var(--tr);
}
.sidebar-group-head:hover { color: var(--gold); }
.sidebar-group-caret {
    font-size: 10px;
    transition: transform var(--tr);
}
.sidebar-group.open .sidebar-group-caret { transform: rotate(180deg); }
.sidebar-group-body {
    display: none;
    padding-bottom: 4px;
}
.sidebar-group.open .sidebar-group-body { display: block; }
/* Saat grup tertutup, sembunyikan link di dalamnya agar tidak tampil */
.sidebar-group:not(.open) .sidebar-group-body { display: none; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
    transition: background var(--tr), color var(--tr);
    position: relative;
}
.sidebar-link i { width: 20px; text-align: center; font-size: 15px; }
.sidebar-link:hover { background: var(--surface-2); color: var(--gold); }
.sidebar-link.active {
    background: var(--gold-bg);
    color: var(--gold);
    font-weight: 600;
}
.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--gold);
}
.sidebar-link .menu-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(239,68,68,.25);
}

.sidebar-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-faint);
    font-size: 12.5px;
}

.sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 12px;
}

/* Info sistem (versi + status) di bawah sidebar */
.sidebar-sysinfo {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
/* Baris kepala (status ringkas) — selalu tampil, bisa diklik untuk ciutkan */
.sidebar-sys-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
    text-align: left;
}
.sidebar-sys-head:hover { background: var(--surface-3); }
.sidebar-sys-head-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-sys-caret { margin-left: auto; color: var(--text-faint); font-size: 10px; transition: transform .25s ease; }
.sidebar-sysinfo.collapsed .sidebar-sys-caret { transform: rotate(180deg); }
.sidebar-sysinfo-body { padding: 0 10px 10px; }
.sidebar-sysinfo.collapsed .sidebar-sysinfo-body { display: none; }
.sidebar-version {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.sidebar-version i { color: var(--gold); }
.sidebar-version strong { margin-left: auto; color: var(--gold); font-family: var(--font-mono); }
.sidebar-status { display: flex; align-items: center; gap: 9px; padding-top: 8px; }
.status-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--text-faint);
    box-shadow: 0 0 0 3px rgba(128,128,128,.12);
}
.status-dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); animation: pulse-dot 2s infinite; }
.status-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px var(--success-bg); }
    50% { box-shadow: 0 0 0 6px rgba(52,211,153,.12); }
}
.sidebar-status > div { display: flex; flex-direction: column; min-width: 0; }
.sidebar-status-title { font-size: 11.5px; font-weight: 700; color: var(--text); }
.sidebar-status-sub { font-size: 10px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-logout { color: var(--danger); }
.sidebar-logout:hover { background: var(--danger-bg); color: var(--danger); }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 8px 4px;
    border-top: 1px solid var(--border);
}
.sidebar-user-info { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 12px; color: var(--text-faint); text-transform: capitalize; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 90;
}

/* =====================================================================
   4a. SIDEBAR (desktop) — mode MINI dihapus (2026-08-28).
   Sidebar hanya punya 2 state: tampil penuh / collapse total (hover auto-show).
   Brand/logo di sidebar disembunyikan (navbar sudah punya logo → hindari duplikat)
   ===================================================================== */
.sidebar .sidebar-brand { display: none; }

/* =====================================================================
   4b. SIDEBAR COLLAPSE (desktop) — sembunyikan sidebar → konten full lebar
   ===================================================================== */
.app-main { transition: margin-left var(--tr); }
body.sb-collapsed .sidebar { transform: translateX(-100%); box-shadow: none; }
body.sb-collapsed .app-main { margin-left: 0; }

/* HOVER ZONE: strip tipis di tepi kiri saat sidebar collapsed.
   Saat mouse di-arahkan ke tepi kiri → sidebar auto-show (tanpa klik). */
.sb-hover-zone {
    position: fixed;
    top: 0;
    left: 0;
    width: 7px;
    height: 100vh;
    z-index: 98;
    display: none;
    cursor: pointer;
}
body.sb-collapsed .sb-hover-zone { display: block; }
/* Auto-show sementara (hover) — tidak mengubah preferensi tersimpan */
body.sb-collapsed.sb-hover-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0,0,0,.45);
}
body.sb-collapsed.sb-hover-open .app-main { margin-left: var(--sidebar-w); }
/* Di layar mobile off-canvas → hover zone tidak berlaku */
@media (max-width: 900px) { .sb-hover-zone { display: none !important; } }
/* Tombol collapse di dalam sidebar (desktop) — jelas terlihat di bagian bawah */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 12px 8px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    transition: all var(--tr);
}
.sidebar-collapse-btn:hover { color: var(--gold); border-color: var(--gold-dim); background: var(--bg-soft); }
@media (max-width: 900px) { .sidebar-collapse-btn { display: none; } }
/* Di layar mobile sidebar sudah off-canvas → collapse desktop tidak berlaku */
@media (max-width: 900px) {
    body.sb-collapsed .sidebar { transform: translateX(-100%); }
    body.sb-collapsed .app-main { margin-left: 0; }
}

/* =====================================================================
   5. NAVBAR
   ===================================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--navbar-h);
    padding: 0 20px;
    background: rgba(16, 16, 22, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease, opacity .3s ease;
    animation: navDrop .45s cubic-bezier(.2,.9,.3,1.15);
}
/* Saat halaman di-scroll → navbar meredup (opacity turun); hover mengembalikan */
body.nav-scrolled .navbar { opacity: .3; }
body.nav-scrolled .navbar:hover { opacity: 1; }
@keyframes navDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
body.nav-mode-hide .navbar.nav-hidden { transform: translateY(-100%); box-shadow: none; }
/* Navbar disembunyikan penuh → konten full layar; tombol restore melayang */
body.nav-collapsed .navbar { display: none; }
.navbar-restore {
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 81;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: none;
    place-items: center;
    cursor: pointer;
    font-size: 13px;
    color: var(--gold);
    background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--gold-border);
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
    transition: transform .15s ease, border-color .15s ease;
}
.navbar-restore:hover { transform: translateY(2px); border-color: var(--gold); }
.navbar-mode-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 12px;
    transition: color .15s, background .15s, border-color .15s;
}
.navbar-mode-btn:hover { color: var(--gold); background: var(--surface-2); border-color: var(--gold-dim); }
.navbar-mode-btn.on { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-bg); }

/* Tombol "Ganti unit" (owner) — pindah Percetakan <-> Network */
.navbar-unit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--gold-border);
    background: var(--gold-bg);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .15s;
}
.navbar-unit-btn:hover {
    background: var(--surface-2);
    border-color: var(--gold);
    transform: translateY(-1px);
}
@media (max-width: 720px) {
    .navbar-unit-btn span { display: none; }
    .navbar-unit-btn { padding: 0 10px; }
}

/* Brand */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    min-width: 0;
}
.navbar-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.navbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.navbar-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.navbar-brand-name { font-size: 15px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; color: var(--text); }
.navbar-brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: 2.2px; color: var(--gold); white-space: nowrap; }

/* Pencarian global */
.navbar-search {
    flex: 1;
    min-width: 0; /* cegah overflow: pastikan bisa menyusut di layar kecil */
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 40px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color var(--tr), box-shadow var(--tr);
}
.navbar-search:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-bg);
}
.navbar-search i { color: var(--text-faint); font-size: 13px; flex-shrink: 0; }
.navbar-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.navbar-search input::placeholder { color: var(--text-faint); }
.navbar-search-kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    padding: 1px 7px;
}

.navbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Jam di navbar (sejajar dengan brand) */
.navbar-clock-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
}
.navbar-clock-wrap i { font-size: 12px; color: var(--text-faint); }
/* Jam melayang — tetap tampil saat navbar disembunyikan */
.navbar-clock-float {
    position: fixed;
    top: 14px;
    right: 62px;
    z-index: 81;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
    pointer-events: none;
    animation: navDrop .3s ease;
}
body.nav-collapsed .navbar-clock-float { display: inline-flex; }

.navbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.navbar-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.navbar-user-name { font-size: 12.5px; font-weight: 600; }
.navbar-user-role { font-size: 10.5px; color: var(--text-faint); text-transform: capitalize; }

/* Avatar */
.avatar {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 15px;
}
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
/* Foto user di sidebar — frame emas bulat, konsisten dengan avatar dashboard */
.sidebar-user .avatar {
    width: 36px; height: 36px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent), 0 4px 12px rgba(0,0,0,.25);
    background: var(--surface-3);
    overflow: hidden;
}

/* Avatar user (foto profil di daftar user & form) */
.user-avatar {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 15px;
    overflow: hidden;
    vertical-align: middle;
}
.user-avatar-lg { width: 64px; height: 64px; font-size: 22px; }

/* =====================================================================
   6. FOOTER
   ===================================================================== */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 12px;
    background: var(--surface);
}
.app-footer i { color: var(--gold); margin-right: 6px; }
.app-footer-version { font-family: var(--font-mono); font-size: 11px; }

/* =====================================================================
   7. TYPOGRAPHY & UTILITAS
   ===================================================================== */
.text-gold { color: var(--gold) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-faint { color: var(--text-faint) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-xs { font-size: 11.5px !important; }
.text-sm { font-size: 12.5px !important; }
.text-lg { font-size: 16px !important; }
.text-xl { font-size: 19px !important; }
.font-bold { font-weight: 700 !important; }
.font-medium { font-weight: 500 !important; }
.font-mono { font-family: var(--font-mono) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 24px !important; }
.ml-auto { margin-left: auto !important; }
.mx-auto { margin-left: auto; margin-right: auto; }

.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.text-capitalize { text-transform: capitalize !important; }
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 !important; }
.w-100 { width: 100% !important; }

.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; } /* cegah grid item melebar karena konten nowrap (ticker, dsb) */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.col-span-2 { grid-column: span 2; }

/* =====================================================================
   8. CARD
   ===================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: visible; /* jangan potong dropdown/autocomplete yang mencuat */
}
.card + .card { margin-top: 20px; }
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.card-header .tag { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 520px) {
    .card-header { flex-wrap: wrap; }
}
.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.card-title i { color: var(--gold); font-size: 15px; }
.card-body { padding: 20px; }
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

/* =====================================================================
   9. BUTTON
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--tr);
    user-select: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn i { font-size: 13.5px; }

/* Variant */
.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0a0a0f;
    border-color: var(--gold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 22%, transparent);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
    color: #0a0a0f;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 32%, transparent);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); color: var(--gold); border-color: var(--gold-dim); }

.btn-outline {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold-border);
}
.btn-outline:hover:not(:disabled) { background: var(--gold-bg); color: var(--gold-strong); }

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: rgba(248,113,113,.3);
}
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }

.btn-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: rgba(52,211,153,.3);
}
.btn-success:hover:not(:disabled) { background: var(--success); color: #0a0a0f; }

/* Tombol DP (bayar sebagian) — dipakai di halaman Belum Bayar (piutang.php) */
.btn-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: rgba(251,191,36,.35);
}
.btn-warning:hover:not(:disabled) { background: var(--warning); color: #0a0a0f; }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

/* Ukuran */
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-xs); }
.btn-sm i { font-size: 12px; }
/* btn-xs: tombol paling kecil — dipakai kartu Stor dashboard & tombol cepat
   halaman Pengeluaran (yang sebelumnya memakai kelas ini padahal BELUM ADA
   definisinya, sehingga tombolnya jatuh ke ukuran default dan jadi kebesaran). */
.btn-xs { padding: 3px 9px; font-size: 11px; border-radius: var(--radius-xs); line-height: 1.6; }
.btn-xs i { font-size: 10px; }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 8px 10px; }
.btn-icon.btn-sm { padding: 5px 8px; }

/* =====================================================================
   10. FORM
   ===================================================================== */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }

.form-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}
.form-label .req { color: var(--danger); }
.form-label .hint { color: var(--text-faint); font-weight: 400; font-size: 11.5px; margin-left: 6px; }

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
    appearance: none;
}
.form-textarea { resize: vertical; min-height: 90px; }

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-faint); }

.form-input:hover, .form-select:hover, .form-textarea:hover {
    border-color: var(--text-faint);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-bg);
    background: var(--bg);
}
.form-input:disabled, .form-select:disabled, .form-textarea:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid {
    border-color: var(--danger);
}
.form-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-bg); }

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239d9dab' d='M6 8.8 1.2 4h9.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    cursor: pointer;
}

/* Input warna tema (Pengaturan > Tema & Warna Website) */
.form-color {
    height: 46px;
    padding: 5px;
    cursor: pointer;
    background: var(--surface-2);
}
.theme-color-hex {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 5px;
    text-transform: lowercase;
}

/* Navigasi pengaturan 2 tingkat: dropdown scope + tab kategori */
.settings-scope-tabs {
    margin-bottom: 18px;
}
.settings-scope-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: none;
}
.settings-scope-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.settings-scope-select {
    width: auto;
    min-width: 130px;
    padding: 7px 32px 7px 12px;
    font-size: 12.5px;
}
.settings-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--tr), color var(--tr), box-shadow var(--tr);
    white-space: nowrap;
}
.settings-tab:hover { background: var(--surface-3); color: var(--text); }
.settings-tab.active {
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    color: #0a0a0f;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--gold) 25%, transparent);
}
.settings-tab i { font-size: 12px; }

/* Sub-judul grup di dalam kategori pengaturan (Admin / Owner) */
.settings-subgroup {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 10px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}
.settings-subgroup::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.settings-subgroup .tag { margin-left: auto; }

/* Checkbox & radio */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    appearance: none;
    width: 17px; height: 17px;
    flex-shrink: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: var(--bg-soft);
    cursor: pointer;
    transition: all var(--tr);
    position: relative;
}
.form-check input[type="radio"] { border-radius: 50%; }
.form-check input:checked { background: var(--gold); border-color: var(--gold); }
.form-check input:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: #0a0a0f;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.form-check input[type="radio"]:checked::after { content: ''; background: #0a0a0f; border-radius: 50%; width: 7px; height: 7px; inset: auto; margin: 4px; }
.form-check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ===== GLOBAL: checkbox & radio native → custom (rapi & konsisten) =====
 * Semua checkbox di luar .form-check / .wa-notif-check (mis. ai_groups,
 * menu_settings, notifications, orders selectAll) ikut tampil custom,
 * bukan kotak centang bawaan browser yang jelek. */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 0;
    vertical-align: middle;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: var(--bg-soft);
    cursor: pointer;
    transition: all var(--tr);
    position: relative;
    display: inline-grid;
    place-items: center;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--gold);
    border-color: var(--gold);
}
input[type="checkbox"]:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: #0a0a0f;
    line-height: 1;
}
input[type="radio"]:checked::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0a0a0f;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ===== Toggle notif WhatsApp (order form) ===== */
.wa-notif-box {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(37,211,102,.05), rgba(37,211,102,0) 70%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.wa-notif-info { flex: 1; min-width: 220px; }
.wa-notif-check { gap: 10px; font-weight: 600; }
.wa-notif-check .fab { color: #25d366; font-size: 16px; }
.wa-notif-check input[type="checkbox"] {
    width: 42px; height: 24px;
    border-radius: 999px;
    border: 2px solid var(--border-strong);
    background: var(--bg-soft);
    transition: background var(--tr), border-color var(--tr);
}
.wa-notif-check input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--tr), background var(--tr);
}
.wa-notif-check input[type="checkbox"]:checked {
    background: #1da851;
    border-color: #1da851;
}
.wa-notif-check input[type="checkbox"]:checked::before {
    transform: translateX(18px);
    background: #fff;
}
.wa-notif-check input[type="checkbox"]:checked::after { content: none; }
.wa-notif-check input[type="checkbox"]::after { content: none; } /* tombol toggle: tanpa ikon centang (pakai knob ::before) */
.wa-notif-state {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--success);
    background: rgba(37,211,102,.12);
    border: 1px solid rgba(37,211,102,.35);
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    transition: all var(--tr);
}
.wa-notif-state.off {
    color: var(--text-muted);
    background: var(--surface-2);
    border-color: var(--border-strong);
}
/* Versi di atas wizard — ala banner Selamat Datang (hidup) */
.wa-notif-top {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 85% 25%, rgba(37,211,102,.14), transparent 48%),
        radial-gradient(circle at 8% 130%, color-mix(in srgb, var(--gold) 09%, transparent), transparent 40%),
        linear-gradient(120deg, #181820 0%, #13131a 60%, #0e0e14 100%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
}
.wa-notif-top .wa-notif-info,
.wa-notif-top .wa-notif-state { position: relative; z-index: 3; }
.wa-notif-top .banner-shimmer {
    width: 42%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.035) 45%, rgba(37,211,102,.08) 50%, rgba(255,255,255,.035) 55%, transparent 100%);
    will-change: transform, opacity;
    animation: waShimmerSweep 4.2s ease-in-out infinite;
}
@keyframes waShimmerSweep {
    0%   { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
    4%   { opacity: .65; }
    46%  { opacity: .65; }
    50%  { transform: translateX(250%) skewX(-18deg); opacity: 0; }
    100% { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
}
/* Saat toggle WA dimatikan → banner jadi abu-abu & kilau berhenti */
.wa-notif-top.off {
    background: linear-gradient(120deg, #1a1a21 0%, #14141a 60%, #101015 100%);
    border-color: var(--border);
    box-shadow: none;
}
.wa-notif-top.off .wa-notif-check .fab { color: var(--text-muted); }
.wa-notif-top.off .wa-notif-check span { color: var(--text-muted); }
.wa-notif-top.off .help-text { opacity: .7; }
.wa-notif-top.off .banner-shimmer { display: none; }

/* Mode pesan (AI / tanpa AI) di banner WA */
.wa-mode-row { flex-wrap: wrap; }
.wa-mode-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.wa-mode-label i { color: var(--gold); }
.wa-mode-select {
    width: auto;
    min-width: 200px;
    padding: 6px 30px 6px 10px;
    font-size: 12.5px;
    height: 34px;
}
.wa-mode-select:disabled { opacity: .55; cursor: not-allowed; }

/* ===== Wizard form (Tambah/Edit Pesanan) ===== */
.wizard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 26px;
    padding: 18px 20px 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
}
.wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    position: relative;
    cursor: pointer;
    padding: 0 2px 14px;
    min-width: 0;
    text-align: center;
}
/* Garis penghubung antar lingkaran — dari tepi lingkaran sebelumnya ke tepi lingkaran ini */
.wizard-step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 21px;
    left: calc(-50% + 21px);
    right: calc(50% + 21px);
    height: 3px;
    border-radius: 3px;
    background: var(--border-strong);
    transition: background var(--tr);
    z-index: 0;
}
.wizard-step-num {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--surface-2), var(--bg-soft));
    border: 2px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 15px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
    transition: all var(--tr);
}
/* Warna per langkah (state idle) — badge berwarna, bukan kotak hitam */
.wizard-step[data-step="2"] .wizard-step-num { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 34%, transparent); }
.wizard-step[data-step="3"] .wizard-step-num { color: #6ab0ff; border-color: #6ab0ff; background: rgba(106,176,255,.34); }
@supports (background: color-mix(in srgb, red 30%, transparent)) {
    .wizard-step[data-step="2"] .wizard-step-num { background: color-mix(in srgb, var(--gold) 34%, transparent); }
    .wizard-step[data-step="3"] .wizard-step-num { background: color-mix(in srgb, #6ab0ff 34%, transparent); }
}
.wizard-step:hover .wizard-step-num { transform: scale(1.1); }
.wizard-step:hover .wizard-step-title { color: var(--text); }
.wizard-step-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    min-width: 0;
}
.wizard-step-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--tr);
}
.wizard-step-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    opacity: .65;
    white-space: nowrap;
}
/* State AKTIF */
.wizard-step.active .wizard-step-num {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a0a0f;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 16%, transparent), 0 6px 20px color-mix(in srgb, var(--gold) 35%, transparent);
    transform: scale(1.12);
}
.wizard-step.active .wizard-step-title { color: var(--gold); }
.wizard-step.active .wizard-step-sub { opacity: 1; color: var(--text); }
/* State SELESAI — tampilkan ikon centang */
.wizard-step.done .wizard-step-num {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(37,211,102,.15);
}
.wizard-step.done .wizard-step-num i::before { content: '\f00c' !important; }
.wizard-step.done .wizard-step-title { color: var(--success); }
/* Segmen garis menuju step aktif/selesai = emas */
.wizard-step.done::before,
.wizard-step.active::before {
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}
/* State TERKUNCI (belum bisa diakses) — abu-abu & tidak bisa diklik */
.wizard-step.locked { cursor: not-allowed; }
.wizard-step.locked .wizard-step-num {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-faint);
    box-shadow: none;
    opacity: .75;
}
.wizard-step.locked .wizard-step-title { color: var(--text-muted); opacity: .75; }
.wizard-step.locked .wizard-step-sub { opacity: .45; }
.wizard-step.locked:hover .wizard-step-num { transform: none; }
.wizard-step.locked:hover .wizard-step-title { color: var(--text-muted); opacity: .75; }

/* ===== Animasi wizard ===== */
@keyframes wizardPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 22px color-mix(in srgb, var(--gold) 35%, transparent); }
    70%  { box-shadow: 0 0 0 16px transparent, 0 6px 22px color-mix(in srgb, var(--gold) 35%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent, 0 6px 22px color-mix(in srgb, var(--gold) 35%, transparent); }
}
.wizard-step.active .wizard-step-num { animation: wizardPulse 2.2s ease-out infinite; }
/* Foto pelanggan di lingkaran wizard (menggantikan ikon user) */
.wizard-step-num .wizard-step-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

@keyframes wizardFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1.06); }
}
.wizard-step.active .wizard-step-num i { animation: wizardFloat 2.2s ease-in-out infinite; }

@keyframes wizardPop {
    0%   { transform: scale(.45); opacity: .2; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.wizard-step.done .wizard-step-num { animation: wizardPop .45s cubic-bezier(.34,1.56,.64,1); }

@keyframes wizardLine {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.wizard-step.done::before,
.wizard-step.active::before {
    transform-origin: left center;
    animation: wizardLine .5s ease;
}

/* Progress bar wizard */
.wizard-progress {
    height: 5px;
    border-radius: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
    margin: -10px 0 22px;
}
.wizard-progress span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    transition: width .35s ease;
    width: 0%;
}

/* Header kartu wizard */
.wizard-card-header { padding: 14px 20px; }
.wizard-step-count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.wizard-body { padding: 24px; }
.wizard-panel { animation: wizardFade .22s ease; }
@keyframes wizardFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.wizard-panel-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* Toggle Saran AI di wizard (langkah pelanggan) */
.ai-suggest-toggle-wrap { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; flex-shrink: 0; margin-top: 2px; }
.ai-suggest-toggle-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.ai-suggest-toggle-label i { color: var(--gold); }
.ai-suggest-toggle { position: relative; display: inline-flex; align-items: center; }
.ai-suggest-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.ai-suggest-toggle-track {
    width: 36px; height: 20px; border-radius: 999px;
    background: var(--border-strong);
    transition: background .18s ease, border-color .18s ease;
    position: relative;
    display: block;
    border: 1px solid transparent;
}
.ai-suggest-toggle-track i {
    position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-faint);
    transition: transform .18s ease, background .18s ease;
}
.ai-suggest-toggle input:checked + .ai-suggest-toggle-track { background: var(--gold-bg); border-color: var(--gold-border); }
.ai-suggest-toggle input:checked + .ai-suggest-toggle-track i { transform: translateX(16px); background: var(--gold); }
.wizard-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
}
.wizard-panel-title i { color: var(--gold); }
.wizard-panel-desc { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.wizard-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 22px 0;
}
.wizard-nav { gap: 12px; }
.ms-auto { margin-left: auto !important; }

@media (max-width: 640px) {
    .wizard-steps { padding: 14px 8px 4px; }
    .wizard-step { gap: 6px; padding: 0 1px 10px; }
    .wizard-step:not(:first-child)::before { top: 19px; left: calc(-50% + 19px); right: calc(50% + 19px); }
    .wizard-step-sub { display: none; }
    .wizard-step-num { width: 38px; height: 38px; font-size: 13px; }
    .wizard-step-title { font-size: 10px; }
    .wizard-progress { margin-top: -6px; }
    .wizard-body { padding: 16px; }
}

/* Input group (search + button) */
.input-group { display: flex; gap: 8px; }
.input-group .form-input { flex: 1; }

/* Input dengan ikon di kiri */
.input-group .input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    color: var(--text-faint);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: 14px;
}
.input-group:has(.input-icon) .form-input {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Kolom pencarian pelanggan: ikon chevron di DALAM kotak (kanan) agar tidak terpotong */
.input-group.customer-search .form-input {
    border-radius: var(--radius-sm);
    padding-right: 42px;
}
.input-group.customer-search .input-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-faint);
    font-size: 13px;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tr), color var(--tr), transform .2s ease;
}
.input-group.customer-search .input-icon:hover {
    background: var(--surface-3);
    color: var(--gold);
}

/* =====================================================================
   11. TABLE
   ===================================================================== */
/* Bar aksi batch (orders) — muncul hanya saat ada checkbox dicentang */
.batch-action-bar {
    position: sticky;
    top: 68px; /* di bawah navbar (--navbar-h:64px) agar tidak menimpa saat scroll */
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    padding: 10px 14px;
    margin: 0 0 12px;
}
.batch-action-inner { row-gap: 8px; }
.batch-action-bar .btn { white-space: nowrap; }
.batch-action-bar .form-select { padding-top: 6px; padding-bottom: 6px; }
.batch-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* =====================================================================
   TABEL RESPONSIF — mode "kartu" di layar kecil & menengah
   Di layar < 1400px, tabel daftar lebar (banyak kolom) otomatis berubah
   jadi kartu bertumpuk: semua kolom + tombol aksi kebaca TANPA scroll
   horizontal & tanpa kolom sticky yang menutupi kolom lain.
   Setiap <td> wajib punya atribut data-label (nama kolom).
   ===================================================================== */
@media (max-width: 1400px) {
    .table-responsive .table { min-width: 0 !important; }
    .table-responsive .table thead { display: none; }
    .table-responsive .table,
    .table-responsive .table tbody,
    .table-responsive .table tr,
    .table-responsive .table td { display: block; width: 100%; }
    .table-responsive .table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 12px;
        background: var(--surface);
        padding: 8px 0;
    }
    .table-responsive .table td {
        border: none;
        padding: 8px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        position: static !important;
        right: auto !important;
        box-shadow: none !important;
        border-left: none !important;
        white-space: normal;
    }
    .table-responsive .table td::before {
        content: attr(data-label);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--text-faint);
        flex-shrink: 0;
        margin-right: 12px;
    }
    .table-responsive .table td:not([data-label])::before { display: none; }
    /* Sel angka: nominal rupiah jangan pecah jadi beberapa baris
       ("Rp 8.3 / 22. / 560" — terlihat di /piutang pada layar HP 21 Okt 2026).
       Labelnya yang boleh menyusut, nilainya tetap utuh satu baris. */
    .table-responsive .table td.num { text-align: right; white-space: nowrap; }
    .table-responsive .table td.num::before {
        flex: 0 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis;
    }
    /* Baris aksi: label "Aksi" disembunyikan, tombol rata KIRI dan DILIPAT.
       FIX 2026-10-21 — BUG NYATA (dilaporkan pemilik: "menu Belum Bayar tidak
       tampil di HP"). Sebab terukur di halaman /piutang: baris tombol aksi
       lebarnya 614 px di dalam kartu 227 px, sementara aturannya
       `justify-content: flex-end` + `flex-wrap: nowrap` (bawaan .row-actions).
       Karena rata kanan dan tidak boleh dilipat, kelebihan 387 px meluber ke
       KIRI: tombol "Belum Bayar" berada di x −384 px, "Lunas" di x −260 px,
       "Catat Pembayaran" di x −177 px — semuanya di luar layar dan tidak bisa
       digapai (container tidak bisa digeser ke kiri). Sekarang tombol dilipat
       ke baris berikutnya dan rata kiri, jadi semua tombol tetap terlihat
       tanpa geser horizontal. */
    .table-responsive .table td.col-actions { justify-content: flex-start; }
    .table-responsive .table td.col-actions::before { display: none; }
    .table-responsive .table td.col-actions .row-actions {
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }
    /* Checkbox (kolom pilih) rata kiri tanpa label */
    .table-responsive .table td.order-check-cell { justify-content: flex-start; }
    .table-responsive .table td.order-check-cell::before { display: none; }
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Layar HP sempit (≤430 px): pada mode kartu, label kolom ditaruh DI ATAS
   nilainya. Sebab terukur di /piutang 21 Okt 2026: kartu selebar 269 px dibagi
   dua kolom (label ~110 px + nilai) sehingga nama pelanggan pecah di tengah
   kata ("adyt0 / 6mane / ak") dan angka rupiah terbelah. Dengan label di atas,
   nilai memakai lebar penuh dan tidak ada teks yang terpotong. */
@media (max-width: 430px) {
    .table-responsive .table td {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    /* termasuk sel .num (aturannya lebih spesifik, jadi disebut terpisah) */
    .table-responsive .table td::before,
    .table-responsive .table td.num::before {
        flex: 0 0 100%;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 2px;
        overflow: visible;
        text-overflow: clip;
    }
    .table-responsive .table td.num { text-align: left; }
    .table-responsive .table td.col-actions,
    .table-responsive .table td.order-check-cell { row-gap: 0; }
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.table th {
    text-align: left;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-faint);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.table tbody tr { transition: background var(--tr); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================================
   12. BADGE
   ===================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.badge i { font-size: 10px; }
.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(52,211,153,.25); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(248,113,113,.25); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(251,191,36,.25); }
.badge-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(96,165,250,.25); }
.badge-primary { background: var(--gold-bg);    color: var(--gold);    border: 1px solid var(--gold-border); }
.badge-secondary { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-strong); }
.badge-muted   { background: var(--surface-2);  color: var(--text-faint); border: 1px solid var(--border); }

/* =====================================================================
   12b. PAGINATION
   ===================================================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}
.pagination a,
.pagination span.pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pagination a:hover {
    background: var(--surface-3);
    color: var(--gold);
    border-color: var(--gold-dim);
}
.pagination span.pg.active {
    background: var(--gold);
    color: #1a1a1a;
    border-color: var(--gold);
    cursor: default;
}
.pagination a.disabled {
    opacity: .35;
    pointer-events: none;
}
.pagination .pg-info {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: var(--text-faint);
}

/* Pesan percakapan order WA — kotak seperti bubble chat WA (tidak selebar kartu),
 * teks panjang dibungkus di dalam box, dilipat otomatis bila terlalu tinggi.
 * Default 2 baris (~40px) agar banyak kartu chat muat; diklik utk buka penuh. */
.wa-cap-msg {
    max-width: 560px;
    overflow-wrap: break-word;
}
.wa-cap-msg-body {
    max-height: 42px;
    overflow: hidden;
    transition: max-height .25s ease;
    word-break: break-word;
    overflow-wrap: break-word;
}
.wa-cap-msg-body.open {
    max-height: none;
    overflow: visible;
}
.wa-cap-msg-toggle {
    font-size: 12px;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 2px 0;
    margin-top: 6px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
}
.wa-cap-msg-toggle:hover { color: var(--gold-strong); text-decoration: underline; }

/* Kartu Order WA berjejer (grid) — hemat tempat, banyak chat muat sekaligus.
 * 4 kolom di desktop besar, 3 di laptop, 2 di tablet, 1 di HP. Semua kartu
 * setinggi baris (rapi), tombol aksi rata bawah. */
.wa-cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
    align-items: stretch;
}
.wa-cap-card {
    margin-bottom: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Matikan margin antar kartu dari aturan global ".card + .card" — biar semua
 * kartu dalam satu baris grid sejajar (tanpa bergeser 20px). */
.wa-cap-grid .wa-cap-card + .wa-cap-card,
.wa-cap-grid .card + .card {
    margin-top: 0;
}
.wa-cap-card .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.wa-cap-card .card-body > .d-flex:last-child {
    margin-top: auto;
    padding-top: 8px;
}
/* Header compact: baris 1 = badge + NAMA, baris 2 = no telp + waktu */
.wa-cap-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
}
.wa-cap-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.wa-cap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
}
.wa-cap-grid .wa-cap-msg { max-width: 100%; }
@media (max-width: 1199.98px) {
    .wa-cap-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .wa-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .wa-cap-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   13. ALERT (flash)
   ===================================================================== */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    border: 1px solid transparent;
    animation: alert-in .25s ease;
    /* PENTING: teks boleh membungkus & tidak boleh memaksa kotak melebar.
     * Tanpa ini, kalimat panjang di dalam alert membuat seluruh halaman bisa
     * di-scroll ke samping (isi meluber keluar layar di HP). */
    min-width: 0;
    overflow-wrap: anywhere;
}
.alert i { font-size: 15px; flex-shrink: 0; }
/* Isi alert boleh berupa <span> ATAU teks langsung.
 *
 * BUG NYATA (2026-10-09): dulu hanya `.alert > span` yang diberi `flex:1;
 * min-width:0`. Alert yang isinya teks LANGSUNG (tanpa <span> pembungkus) —
 * seperti keterangan di modal "Pinjamkan Bahan" — tidak mendapat aturan itu,
 * sehingga teksnya tidak bisa menyusut dan meluber jauh keluar layar
 * (terukur sampai 465px pada layar 312px). Sekarang elemen APA PUN di dalam
 * alert boleh menyusut, jadi kedua bentuk penulisan aman. */
.alert > * { min-width: 0; }
.alert > span,
.alert > div { flex: 1; overflow-wrap: anywhere; }
/* Di layar sempit, ikon & teks ditumpuk agar tidak berebut lebar. */
@media (max-width: 520px) {
    .alert { align-items: flex-start; }
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(52,211,153,.25); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(248,113,113,.25); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(251,191,36,.25); }
.alert-info    { background: var(--info-bg);    color: var(--info);    border-color: rgba(96,165,250,.25); }

.alert-close {
    background: none;
    border: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    border-radius: 4px;
}
.alert-close:hover { opacity: 1; }

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   14. TOAST
   ===================================================================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    animation: toast-in .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast i.toast-icon { font-size: 16px; margin-top: 1px; }
.toast .toast-body { flex: 1; }
.toast .toast-title { font-weight: 700; margin-bottom: 2px; }
.toast-close { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 2px; }
.toast-close:hover { color: var(--text); }
.toast.success { border-left-color: var(--success); } .toast.success i.toast-icon { color: var(--success); }
.toast.danger  { border-left-color: var(--danger);  } .toast.danger  i.toast-icon { color: var(--danger); }
.toast.warning { border-left-color: var(--warning); } .toast.warning i.toast-icon { color: var(--warning); }
.toast.info    { border-left-color: var(--info);    } .toast.info    i.toast-icon { color: var(--info); }

.toast.out { animation: toast-out .25s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }

/* =====================================================================
   15. MODAL
   ===================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.modal-backdrop.open { display: flex; }

.modal {
    width: 100%;
    max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: modal-in .25s cubic-bezier(.2,.9,.3,1.1);
    margin: auto 0;
}
.modal.modal-lg { max-width: 760px; }
.modal.modal-sm { max-width: 400px; }
.modal.modal-xl { max-width: 960px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
.modal-title { margin: 0; font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.modal-title i { color: var(--gold); }
.modal-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 15px; cursor: pointer; padding: 6px; border-radius: var(--radius-xs);
}
.modal-close:hover { color: var(--text); background: var(--surface-3); }

.modal-body { padding: 20px; }
/* QR reconnect — ukuran default, mengecil otomatis di layar kecil (lihat media query) */
.wa-qr-img { width: 240px; height: 240px; }
.wa-qr-img { width: min(240px, 70vw); height: auto; aspect-ratio: 1/1; }
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

@keyframes modal-in { from { opacity: 0; transform: translateY(-16px) scale(.98); } to { opacity: 1; transform: none; } }

/* =====================================================================
   16. STAT CARD (dashboard)
   ===================================================================== */
.stat-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold-border);
    box-shadow: var(--shadow);
}
.stat-card-icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    font-size: 19px;
    margin-bottom: 14px;
}
.stat-card-icon.gold   { background: var(--gold-bg);   color: var(--gold); }
.stat-card-icon.green  { background: var(--success-bg); color: var(--success); }
.stat-card-icon.red    { background: var(--danger-bg);  color: var(--danger); }
.stat-card-icon.blue   { background: var(--info-bg);    color: var(--info); }
.stat-card-icon.yellow { background: var(--warning-bg); color: var(--warning); }
.stat-card-icon.teal   { background: rgba(45,212,191,.12);  color: #2dd4bf; }

.stat-card-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.stat-card-value { font-size: 26px; font-weight: 800; margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.stat-card-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }

/* =====================================================================
   16a. KARTU STOK BAHAN (public/stock.php)
   ===================================================================== */
.stock-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    background: var(--surface-2, var(--surface));
    transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.stock-card:hover {
    border-color: var(--gold-border);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.stock-bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
    overflow: hidden;
}
.stock-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), #f0b429);
    transition: width .6s ease;
    min-width: 2px;
}
.stock-bar-warn .stock-bar-fill { background: linear-gradient(90deg, var(--danger), #f97316); }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-gold    { color: var(--gold) !important; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

/* =====================================================================
   16b. SISA BAHAN DI FORM ORDER (transparansi stok)
   ===================================================================== */
.stock-strip {
    background: linear-gradient(135deg, rgba(212,175,55,.10), rgba(212,175,55,.04));
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.stock-strip-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.stock-strip-title { font-weight: 700; font-size: 13.5px; color: var(--gold); }
.stock-strip-hint { font-size: 11.5px; color: var(--text-faint); }
.stock-strip-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 9px;
}
.stock-chip {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2, rgba(255,255,255,.04));
    border: 1px solid var(--border);
    border-radius: 9px; padding: 8px 11px; font-size: 12.5px;
    transition: border-color var(--tr), transform var(--tr);
}
.stock-chip i { color: var(--gold); font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.stock-chip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.stock-chip-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-chip-date {
    font-size: 10.5px; color: var(--text-faint);
    display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.stock-chip-date i { font-size: 9.5px; color: var(--text-faint); margin-top: 0; }
.stock-chip-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-chip-sub { font-weight: 400; color: var(--text-faint); font-size: 11px; }
.stock-chip-low { border-color: var(--warning); }
.stock-chip-low .stock-chip-val { color: var(--warning); }
.stock-chip-zero { border-color: var(--danger); }
.stock-chip-zero .stock-chip-val { color: var(--danger); }
.stock-chip-delta { font-size: 11.5px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.stock-chip-used { border-color: var(--info); }
.stock-chip-used .stock-chip-delta { color: var(--info); }
.stock-chip-over { border-color: var(--danger); background: var(--danger-bg); }
.stock-chip-over .stock-chip-delta { color: var(--danger); }
.item-stock-note {
    font-size: 11.5px; margin-top: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.item-stock-ok   { color: var(--info); }
.item-stock-warn { color: var(--warning); font-weight: 600; }
.item-stock-bad  { color: var(--danger); font-weight: 700; }
.item-subgrid-hint {
    grid-column: 1 / -1;
    font-size: 11.5px; color: var(--text-faint);
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}

/* =====================================================================
   16b. LOG GENERATE & GALERI DESAIN AI
   ===================================================================== */
.glog-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.glog-table { width: 100%; min-width: 880px; }
.glog-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.glog-table td { vertical-align: middle; }
.glog-thumb {
    width: 54px; height: 54px; object-fit: cover;
    border-radius: 10px; border: 1px solid var(--border);
    display: block;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a:hover .glog-thumb { transform: scale(1.06); border-color: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.glog-prompt { font-size: 12.5px; color: var(--text-muted); max-width: 340px; line-height: 1.5; }
.glog-prompt.error { color: var(--danger); }
.glog-empty-img { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: var(--bg-soft); border: 1px dashed var(--border-strong); color: var(--text-faint); font-size: 15px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.gallery-item { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-soft); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.gallery-item:hover { transform: translateY(-3px); border-color: var(--gold-border); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.gallery-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.gallery-item .gallery-meta { padding: 8px 10px; }
.gallery-item .gallery-meta .gallery-name { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-item .gallery-meta .gallery-sub { font-size: 10.5px; color: var(--text-faint); }
.gallery-item .gallery-actions { position: absolute; top: 8px; right: 8px; z-index: 2; opacity: 0; transition: opacity .15s ease; }
.gallery-item:hover .gallery-actions { opacity: 1; }
.gallery-item .gallery-actions .btn { box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* Kartu Desain AI */
.design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.design-block { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; word-break: break-word; }
.enhance-preview .msg-body { white-space: pre-wrap; word-break: break-word; }
.enhance-preview .enhance-text { color: var(--text); line-height: 1.7; }
.design-img { max-width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
@media (max-width: 768px) { .design-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   17. PROGRESS
   ===================================================================== */
.progress {
    height: 8px;
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress > .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    border-radius: var(--radius-pill);
    transition: width .4s ease;
}
.progress.progress-sm { height: 5px; }

/* =====================================================================
   18. TIMELINE (tracking order)
   ===================================================================== */
.timeline { display: flex; align-items: center; }
.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    text-align: center;
    gap: 8px;
}
.timeline-dot {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 2px solid var(--border-strong);
    color: var(--text-faint);
    font-size: 14px;
    z-index: 1;
    transition: all var(--tr);
}
.timeline-step.done .timeline-dot {
    background: var(--gold-bg);
    border-color: var(--gold);
    color: var(--gold);
}
.timeline-step.current .timeline-dot {
    background: var(--gold);
    border-color: var(--gold-strong);
    color: #0a0a0f;
    box-shadow: 0 0 0 5px var(--gold-bg);
}
.timeline-line {
    flex: 1;
    height: 3px;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    margin-bottom: 24px;
}
.timeline-line.done { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.timeline-label { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.timeline-step.done .timeline-label { color: var(--gold); }
.timeline-step.current .timeline-label { color: var(--text); }

/* =====================================================================
   19. EMPTY STATE & LOADING
   ===================================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 20px;
    color: var(--text-faint);
}
.empty-state-icon {
    width: 72px; height: 72px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    font-size: 26px;
    color: var(--text-faint);
    margin-bottom: 16px;
}
.empty-state h3 { color: var(--text-muted); font-size: 15px; margin-bottom: 6px; }
.empty-state p { font-size: 13px; margin-bottom: 16px; }

/* Spinner memakai logo Creative Geek — warnanya ikut aksen tema */
.spinner {
    position: relative;
    width: 22px; height: 22px;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-mask-image: var(--cg-brand-mark, url("/assets/img/cg-mark.svg"));
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-image: var(--cg-brand-mark, url("/assets/img/cg-mark.svg"));
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
}
.spinner::before,
.spinner::after { content: ""; position: absolute; inset: 0; }
.spinner::before { background: var(--gold); opacity: .3; }
.spinner::after {
    background: linear-gradient(180deg, var(--gold-strong) 0%, var(--gold) 55%, var(--gold-dim) 100%);
    animation: cgSpinFill 1.6s cubic-bezier(.45,.05,.35,1) infinite;
}
.spinner-sm { width: 15px; height: 15px; }
@keyframes cgSpinFill {
    0%   { clip-path: inset(100% 0 0 0); }
    55%  { clip-path: inset(0 0 0 0); }
    72%  { clip-path: inset(0 0 0 0); opacity: 1; }
    85%  { clip-path: inset(0 0 0 0); opacity: 0; }
    100% { clip-path: inset(100% 0 0 0); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner::after { animation: none; clip-path: none; }
}

.loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-xs);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* =====================================================================
   20. TABS
   ===================================================================== */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    margin-bottom: 20px;
}
.tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--tr);
    font-family: inherit;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* =====================================================================
   21. DROPDOWN
   ===================================================================== */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    z-index: 150;
}
.dropdown.open .dropdown-menu { display: block; animation: modal-in .18s ease; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text);
    border: none;
    background: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all var(--tr);
}
.dropdown-item:hover { background: var(--surface-3); color: var(--gold); }
.dropdown-item i { width: 16px; text-align: center; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-bg); color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* =====================================================================
   22. PAGE TOOLBAR & FILTER
   ===================================================================== */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.page-toolbar-left, .page-toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* =====================================================================
   23. CHAT (WhatsApp)
   ===================================================================== */
.chat-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    height: calc(100vh - 190px);
    min-height: 480px;
}
.chat-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-y: auto;
}
.chat-list-header { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--tr);
    position: relative;
}
.chat-item:hover { background: var(--surface-2); }
.chat-item.active { background: var(--gold-bg); border-left: 3px solid var(--gold); }
.chat-item-avatar,
.chat-item-avatar-img {
    width: 42px; height: 42px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 15px;
    object-fit: cover;
}
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Badge tipe pelanggan (baru / pelanggan / setia) di daftar chat WA */
.cust-type-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; letter-spacing: .3px; padding: 1px 6px; border-radius: 20px; vertical-align: middle; margin-left: 4px; white-space: nowrap; }
.cust-type-badge.baru { background: rgba(37,211,102,.14); color: #4ade80; border: 1px solid rgba(37,211,102,.3); }
.cust-type-badge.lama { background: rgba(245,166,35,.14); color: var(--gold); border: 1px solid rgba(245,166,35,.32); }
.cust-type-badge.regular { background: rgba(255,107,107,.14); color: #ff8a8a; border: 1px solid rgba(255,107,107,.32); }
.chat-item-preview { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tombol sembunyikan chat (spam) — muncul saat hover */
.chat-item-hide {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: none;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
}
.chat-item:hover .chat-item-hide { display: grid; }
.chat-item-hide:hover { color: var(--danger); border-color: var(--danger); }

.chat-window {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.chat-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--gold) 04%, transparent), transparent 45%),
        var(--bg-soft);
}
.msg {
    max-width: 72%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    position: relative;
    word-break: break-word;
}
.msg.in { background: var(--surface-3); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.out { background: linear-gradient(135deg, var(--gold-dim), var(--gold)); color: #0a0a0f; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg-time { display: block; font-size: 10px; opacity: .65; margin-top: 4px; text-align: right; }
.msg img.msg-media { max-width: 240px; border-radius: 8px; margin-bottom: 4px; }
.msg-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 3px;
    max-width: 220px;
}
.msg-file i { color: var(--gold); flex-shrink: 0; }
.msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file { text-decoration: none; }
.msg-file .fa-download { margin-left: 2px; }
/* Media gambar: wrapper + tombol unduh cepat (hover) */
.msg-media-wrap { position: relative; display: inline-block; margin-bottom: 4px; }
.msg img.msg-media { min-width: 110px; min-height: 70px; }
.msg-img-dl {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center;
    background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
    opacity: 0; transition: opacity .15s;
}
.msg-media-wrap:hover .msg-img-dl { opacity: 1; }
/* Lightbox media (zoom + unduh) */
.mm-stage {
    display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
    max-width: 92vw;
}
.mm-stage #mmImg {
    max-width: 90vw; max-height: 78vh; border-radius: 10px;
    transform-origin: center; transition: transform .15s ease;
    cursor: zoom-in;
}
.mm-ctrl {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,.6); border-radius: 999px; padding: 6px 10px;
}
.mm-btn {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer; font-size: 13px;
}
.mm-btn:hover { background: rgba(255,255,255,.25); color: var(--gold); }
.mm-zoom-label { color: #fff; font-size: 12px; min-width: 44px; text-align: center; }

/* Baris pesan (avatar + bubble) */
.msg-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-row.in { justify-content: flex-start; }
.msg-row.out { justify-content: flex-end; }
.msg-row .mini-avatar {
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-size: 10px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    margin-bottom: 2px;
}
.msg-body { white-space: pre-wrap; }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.msg-meta .msg-time { margin-top: 0; }
.msg-status { font-size: 11px; color: rgba(10,10,15,.55); }
.msg-status.read { color: #60a5fa; }
.msg.in .msg-meta .msg-time { color: var(--text-faint); }
.chat-day {
    align-self: center;
    font-size: 11px;
    color: var(--text-faint);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 3px 13px;
    border-radius: 999px;
    margin: 6px 0;
}
/* Placeholder media (OpenWA tidak mengarsipkan media) — halus, seperti area
   gambar WhatsApp asli: ikon sentral, teks kecil hanya bila ada nama file. */
.msg-media-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 200px;
    min-height: 110px;
    background: var(--surface-3);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--text-faint);
    font-size: 11px;
    text-align: center;
    overflow: hidden;
}
.msg-media-ph i { font-size: 26px; color: var(--gold); }
.msg-media-ph span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `hidden` harus benar-benar menyembunyikan (display:flex di atas menimpanya) */
.msg-media-ph[hidden] { display: none !important; }
.msg-media-video { max-width: 240px; border-radius: 8px; display: block; margin-bottom: 4px; }
/* Header chat */
.chat-head-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-size: 14px; font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.chat-head-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.chat-head-status { font-size: 11px; color: var(--text-faint); }
.chat-head-status i { font-size: 8px; margin-right: 3px; }
/* Loading media di modal */
.media-loading {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--text-faint); font-size: 13px;
    padding: 40px;
}

.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.chat-input textarea {
    flex: 1;
    resize: none;
    max-height: 120px;
}

/* =====================================================================
   24. LOGIN PAGE
   ===================================================================== */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--gold) 08%, transparent), transparent 45%),
        radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--gold) 05%, transparent), transparent 40%),
        var(--bg);
}
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 36px;
}
.login-logo {
    width: 76px; height: 76px;
    display: grid; place-items: center;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.login-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.login-subtitle { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 28px; }

/* =====================================================================
   25. DASHBOARD V3 (referensi: dark premium + gold)
   ===================================================================== */

/* --- Judul halaman standar (dari header.php) --- */
.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.page-heading-title { font-size: 20px; font-weight: 800; margin: 0 0 2px; }
.page-heading-sub { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* --- Welcome banner --- */
.welcome-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px 28px;
    margin-bottom: 22px;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 42%),
        linear-gradient(120deg, #181820 0%, #13131a 55%, #0e0e14 100%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
}
.welcome-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--gold) 05%, transparent) 50%, transparent 100%);
    pointer-events: none;
}
.welcome-banner .banner-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* PENTING: jangan beri flex:1 di sini — panel grafik/server di kanan bisa
   terdorong turun ke baris baru (banner jadi tinggi ~380px). Biarkan
   banner-main selebar isinya; di layar HP diatur di media query ≤768px. */
.welcome-banner .banner-text { min-width: 0; }
.welcome-banner .banner-greeting { font-size: 15px; color: var(--text-muted); margin: 0 0 2px; white-space: nowrap; }
.welcome-banner .banner-name { display: block; font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.2; margin: 0 0 4px; }
.welcome-banner .banner-name .hl { color: var(--gold); }
.welcome-banner .banner-sub { font-size: 13px; color: var(--text-muted); margin: 0; white-space: nowrap; }
/* Kata motivasi harian di banner (1-2 baris, gaya santai)
   PENTING: lebar dibatasi 340px supaya panel grafik/server di kanan (300px)
   tetap muat sebaris. Kalau lebih lebar, panel kanan terdorong turun dan
   banner melompat tinggi (274px → 400px+). Kalimat panjang cukup wrap ke
   baris berikutnya; tinggi banner tetap karena panel kanan (220px) lebih
   tinggi daripada blok teks. */
.welcome-banner .banner-pantun {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    white-space: normal;
    max-width: 340px;
}
.welcome-banner .banner-pantun-ico {
    color: var(--gold);
    font-size: 12px;
    margin-top: 4px;
    flex: 0 0 auto;
    opacity: .85;
}
.welcome-banner .banner-pantun-lines { display: block; }
.welcome-banner .banner-pantun-line {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}
/* Foto profil di samping nama pada banner */
.avatar-wrap {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.banner-avatar {
    position: relative;
    width: 78px; height: 78px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 3px solid var(--gold);
    color: var(--text-muted);
    font-size: 26px;
    overflow: hidden;
    /* Gelombang glow emas menyebar (seperti wizardPulse), lebih pelan & elegan */
    animation: avatarPulse 3s ease-out infinite;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent), 0 10px 30px rgba(0,0,0,.35);
}
.banner-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* wajah (bagian atas foto potret) tetap terlihat di lingkaran */
}
.banner-avatar i { border-radius: 50%; }

/* Cincin emas DIAM (tidak berputar) mengelilingi avatar */
.avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg,
        transparent 0%,
        var(--gold) 14%,
        color-mix(in srgb, var(--gold) 55%, transparent) 24%,
        transparent 40%,
        transparent 58%,
        var(--gold) 76%,
        color-mix(in srgb, var(--gold) 50%, transparent) 88%,
        transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
@keyframes avatarPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 40%, transparent), 0 10px 30px rgba(0,0,0,.35); }
    70%  { box-shadow: 0 0 0 22px transparent, 0 10px 30px rgba(0,0,0,.35); }
    100% { box-shadow: 0 0 0 0 transparent, 0 10px 30px rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce) {
    .banner-avatar, .avatar-wrap::before { animation: none; }
}

/* Kilau menyapu banner (animasi via JS) */
.banner-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 34vw;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.07) 45%, color-mix(in srgb, var(--gold) 12%, transparent) 50%, rgba(255,255,255,.07) 55%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    will-change: transform;
}
.welcome-banner .banner-greeting, .welcome-banner .banner-title, .welcome-banner .banner-sub,
.welcome-banner .banner-side { position: relative; z-index: 3; }

/* --- Efek hover canggih (CSS transition aman di webview) --- */
.dash-col .panel { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.dash-col .panel:hover {
    transform: translateY(-3px);
    border-color: var(--gold-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent);
}

.dash-info-item { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.dash-info-item:hover { transform: translateY(-2px); border-color: var(--gold-border); background: var(--surface-2); }

/* --- Resize lebar kolom panel (seret kiri-kanan) --- */
.dash-col { position: relative; }
.col-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -13px;
    width: 26px;
    cursor: col-resize;
    z-index: 7;
    display: grid;
    place-items: center;
}
.col-resizer::before {
    content: '';
    width: 2px;
    height: 34px;
    border-radius: 2px;
    background: transparent;
    box-shadow: 0 0 0 1px transparent;
    transition: background .15s ease, box-shadow .15s ease;
}
.dash-row-top:hover .col-resizer::before,
.dash-row-bottom:hover .col-resizer::before { background: color-mix(in srgb, var(--gold) 35%, transparent); }
.col-resizer:hover::before {
    background: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}
.col-resizer:active::before { background: var(--gold); }

/* Panel header "garis emas" saat hover (khusus dashboard) */
.dash-col .panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transform: scaleX(.3);
    transition: opacity .25s ease, transform .3s ease;
    z-index: 4;
}
.dash-col .panel:hover::before { opacity: 1; transform: scaleX(1); }

/* =====================================================================
   WIDGET WHATSAPP MELAYANG (dashboard) — balas langsung
   ===================================================================== */
.wa-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 27px;
    color: #fff;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    box-shadow: 0 10px 28px rgba(18,140,126,.5), 0 0 0 1px rgba(255,255,255,.08);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(18,140,126,.6); }
.wa-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg);
}
.wa-widget {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 901;
    width: 372px;
    max-width: calc(100vw - 32px);
    height: 540px;
    max-height: calc(100vh - 120px);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.wa-widget.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wa-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #0b4a42 0%, #128c7e 100%);
    color: #fff;
    flex-shrink: 0;
}
.wa-widget-title { display: flex; align-items: center; gap: 10px; }
.wa-widget-title > i { font-size: 22px; }
.wa-widget-title b { font-size: 14px; display: block; }
.wa-widget-status { font-size: 11px; opacity: .85; }
.wa-widget-close {
    background: none; border: none; color: #fff; font-size: 18px; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
}
.wa-widget-close:hover { background: rgba(255,255,255,.15); }
.wa-widget-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-widget-list { flex: 1; overflow-y: auto; padding: 8px; }
/* Pencarian chat di widget */
.wa-widget-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 10px 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.wa-widget-search i { color: var(--text-faint); font-size: 12px; }
.wa-widget-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 12.5px;
    font-family: inherit;
}
.wa-widget-search input::placeholder { color: var(--text-faint); }
.wa-widget-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-faint); font-size: 12px; height: 100%; }
.wa-w-chat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s ease;
    position: relative;
}
.wa-w-chat:hover { background: var(--surface-2); }
.wa-w-chat.active { background: rgba(37,211,102,.1); }
.wa-w-avatar,
.wa-w-avatar-img {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--border);
    color: var(--success);
    font-size: 15px;
    font-weight: 700;
    object-fit: cover;
}
.wa-w-chat-body { flex: 1; min-width: 0; }
.wa-w-chat-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-w-chat-preview { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-w-chat-time { font-size: 10px; color: var(--text-faint); flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.wa-w-chat-unread {
    background: var(--success); color: #06281f; font-size: 10px; font-weight: 800;
    min-width: 18px; height: 18px; border-radius: 18px; display: grid; place-items: center; padding: 0 5px;
}
/* Tombol sembunyikan chat (spam) di widget — muncul saat hover */
.wa-w-chat-hide {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: none;
    place-items: center;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    z-index: 2;
}
.wa-w-chat:hover .wa-w-chat-hide { display: grid; }
.wa-w-chat-hide:hover { color: var(--danger); border-color: var(--danger); }
.wa-widget-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.wa-widget-conv-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}
.wa-widget-back, .wa-widget-conv-refresh {
    background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer;
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
}
.wa-widget-back:hover, .wa-widget-conv-refresh:hover { background: var(--surface-3); color: var(--gold); }
.wa-widget-ai { color: var(--gold-dim); }
.wa-widget-ai:hover { color: var(--gold); }
.wa-widget-ai:disabled { opacity: .5; cursor: wait; }
/* Grid + chip anggota utk "Mention personal" (panel Kirim Ringkasan) */
.wa-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}
.wa-member-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text);
    margin: 0;
    transition: border-color .15s ease, background .15s ease;
}
.wa-member-chip:hover { border-color: var(--gold-dim); background: var(--surface-3); }
.wa-member-chip input { accent-color: var(--gold); width: 14px; height: 14px; flex-shrink: 0; }
.wa-member-chip .wa-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-member-chip .wa-member-num { color: var(--text-faint); font-size: 11px; margin-left: auto; flex-shrink: 0; }
.wa-widget-conv-name { flex: 1; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-widget-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.wa-w-msg {
    max-width: 82%;
    padding: 8px 11px;
    border-radius: 13px;
    font-size: 12.5px;
    line-height: 1.45;
    word-wrap: break-word;
    position: relative;
}
/* Konsisten dengan halaman chat: pesan masuk = surface, keluar = emas */
.wa-w-msg.in { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.wa-w-msg.out { align-self: flex-end; background: linear-gradient(135deg, var(--gold-dim), var(--gold)); color: #0a0a0f; border-bottom-right-radius: 4px; }
.wa-w-msg.out .t { color: rgba(10,10,15,.6); }
.wa-w-msg .t { display: block; font-size: 9.5px; color: var(--text-faint); margin-top: 4px; text-align: right; }
/* Pratinjau media (gambar) di widget WA */
.wa-w-media-img {
    display: block;
    max-width: 220px;
    max-height: 180px;
    min-width: 110px;
    min-height: 70px;
    width: auto;
    height: auto;
    border-radius: 8px;
    margin-bottom: 4px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid var(--border-strong);
}
.wa-w-media-caption { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; word-break: break-word; }
.wa-w-sender { font-size: 10px; font-weight: 700; color: var(--gold); margin-bottom: 3px; }
.wa-w-media-wrap { display: block; }
.wa-w-media-wrap .wa-w-media-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.wa-w-media-missing { font-style: italic; opacity: .75; }
.wa-w-msg .t .tick { margin-left: 3px; font-size: 10px; color: rgba(10,10,15,.55); }
.wa-w-msg .t .tick i { margin-left: 2px; }
.wa-w-media-label i { margin-right: 4px; color: var(--gold); }
/* Kartu file (dokumen) — seperti WA asli: ikon + nama + ukuran + unduh */
.wa-w-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    background: rgba(10,10,15,.35);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    min-width: 170px;
    max-width: 240px;
    transition: border-color .15s ease, background .15s ease;
}
.wa-w-file:hover { border-color: var(--gold-border); background: rgba(10,10,15,.55); }
.wa-w-file-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    color: #0a0a0f;
    font-size: 17px;
}
.wa-w-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-w-file-meta b { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-w-file-meta em { font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.wa-w-file > .fa-download { flex-shrink: 0; font-size: 13px; color: var(--text-muted); }
.wa-w-msg.out .wa-w-file { background: rgba(10,10,15,.25); }
.wa-w-msg.out .wa-w-file:hover { background: rgba(10,10,15,.4); }
.wa-w-msg.out .wa-w-file-meta em { color: rgba(10,10,15,.65); }
.wa-w-msg.out .wa-w-file > .fa-download { color: rgba(10,10,15,.6); }

/* Tombol unduh di pojok gambar widget (muncul saat hover) */
.wa-w-media-wrap { position: relative; display: inline-block; }
.wa-w-img-dl {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 2;
    width: 30px; height: 30px;
    border: none;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(10,10,15,.65);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}
.wa-w-media-wrap:hover .wa-w-img-dl { opacity: 1; }
.wa-w-img-dl:hover { background: var(--gold); color: #0a0a0f; }

/* Lightbox gambar WA (zoom + unduh) */
.wa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    flex-direction: column;
    background: rgba(5,5,10,.92);
    backdrop-filter: blur(4px);
}
.wa-lightbox.open { display: flex; }
.wa-lightbox-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: var(--text);
    flex-shrink: 0;
}
.wa-lightbox-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.wa-lightbox-title i { color: var(--gold); }
.wa-lightbox-actions { display: flex; gap: 8px; }
.wa-lightbox-btn {
    width: 38px; height: 38px;
    border: none;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface-3);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.wa-lightbox-btn:hover { background: var(--gold); color: #0a0a0f; }
.wa-lightbox-stage {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 8px;
    cursor: zoom-in;
}
.wa-lightbox-stage img {
    max-width: 96vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    transform-origin: center center;
    transition: transform .18s ease;
    user-select: none;
}
.wa-lightbox-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px 18px;
    flex-shrink: 0;
}
.wa-lightbox-pct { min-width: 52px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text); }
.wa-lightbox-hint { margin-left: 10px; font-size: 11px; color: var(--text-faint); }
.wa-widget-input {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}
.wa-widget-input textarea {
    flex: 1;
    resize: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 12.5px;
    font-family: inherit;
    max-height: 90px;
    min-height: 38px;
}
.wa-widget-input textarea:focus { outline: none; border-color: var(--gold-border); }
.wa-widget-input button { flex-shrink: 0; border-radius: 10px; padding: 8px 13px; }

/* Kirim gambar: tombol attach + overlay drag & drop (HANYA gambar) */
.wa-widget-attach {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 14px;
    transition: color .15s ease, border-color .15s ease;
}
.wa-widget-attach:hover { color: var(--gold); border-color: var(--gold-border); }
.wa-widget-drop {
    position: absolute;
    inset: 44px 8px 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--gold);
    border-radius: 14px;
    background: rgba(10,10,15,.85);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.wa-widget-drop i { font-size: 30px; }
.wa-widget-drop.on { opacity: 1; }

/* Pratinjau pesan sapaan (settings) */
.wa-tpl-preview {
    margin-top: 8px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 10px 12px;
}
.wa-tpl-preview-title {
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wa-tpl-preview-title i { color: var(--gold); }
.wa-tpl-preview-body {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
    white-space: normal;
    word-break: break-word;
}
@media (max-width: 520px) {
    .wa-widget { right: 10px; bottom: 84px; width: calc(100vw - 20px); height: calc(100vh - 130px); }
    .wa-fab { right: 14px; bottom: 14px; }
    /* Baris tombol di kartu → bungkus agar tidak overflow */
    .card .d-flex.align-center.gap-2 { flex-wrap: wrap; }
}

/* =====================================================================
   PENGINGAT PINTAR DASHBOARD (bell melayang + toast acak)
   ===================================================================== */
.reminder-fab {
    position: fixed;
    right: 92px;
    bottom: 22px;
    z-index: 900;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--gold);
    background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--gold-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
    cursor: grab;
    touch-action: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.reminder-fab:active { cursor: grabbing; }
.reminder-fab:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: var(--gold);
    box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 18px var(--gold-bg);
}
/* Di HP: FAB lonceng lebih besar & lebih terlihat */
@media (max-width: 768px) {
    .reminder-fab {
        width: 56px;
        height: 56px;
        right: 16px;
        bottom: 20px;
        font-size: 24px;
    }
    .reminder-fab-badge {
        min-width: 21px;
        height: 21px;
        font-size: 12px;
        top: -4px;
        right: -4px;
    }
}
.reminder-fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 17px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg);
}
.reminder-toasts {
    position: fixed;
    right: 22px;
    bottom: 94px;
    z-index: 950;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 300px;
    width: calc(100vw - 44px);
    pointer-events: none;
}
.reminder-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 34px 10px 11px;
    background: linear-gradient(160deg, rgba(30,30,38,.92), rgba(20,20,27,.94));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--tone, var(--gold));
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    font-size: 11.5px;
    color: var(--text);
    overflow: hidden;
    animation: reminderIn .35s cubic-bezier(.2,.9,.3,1.2);
}
.reminder-toast.out { animation: reminderOut .25s ease forwards; }
.reminder-toast-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--tone, var(--gold));
    background: color-mix(in srgb, var(--tone, var(--gold)) 14%, transparent);
}
.reminder-toast-body { flex: 1; min-width: 0; }
.reminder-toast-title { font-weight: 700; font-size: 11.5px; margin-bottom: 2px; }
.reminder-toast-msg { opacity: .85; line-height: 1.45; }
.reminder-toast-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-faint);
    font-size: 10px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.reminder-toast-close:hover { background: rgba(255,255,255,.08); color: var(--text); }
.reminder-toast-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2.5px;
    width: 100%;
    background: linear-gradient(90deg, var(--tone, var(--gold)), color-mix(in srgb, var(--tone, var(--gold)) 45%, transparent));
    transform-origin: left;
}
@keyframes reminderIn  { from { opacity: 0; transform: translateX(40px) scale(.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes reminderOut { to { opacity: 0; transform: translateX(40px) scale(.97); } }
@keyframes reminderBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
    .reminder-fab { right: 16px; bottom: 20px; width: 56px; height: 56px; font-size: 24px; }
    .reminder-fab-badge { min-width: 21px; height: 21px; font-size: 12px; top: -4px; right: -4px; }
    .reminder-toasts { right: 10px; bottom: 80px; width: calc(100vw - 20px); }
}

/* =====================================================================
   RUNNING TEXT PENGINGAT DASHBOARD (ticker di atas section drag)
   ===================================================================== */
.reminder-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 5px 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 5%, transparent) 55%, transparent);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.reminder-ticker-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: #1a1205;
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold-bg);
}
/* Sapaan standby — diam di tempat, tidak ikut animasi pesan */
.reminder-ticker-greet {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border: 1px solid var(--gold-border);
    border-radius: 20px;
    padding: 2px 10px;
    line-height: 1.3;
    box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 18%, transparent);
}
.reminder-ticker-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.reminder-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: reminderTickerScroll 32s linear infinite;
    will-change: transform;
}
.reminder-ticker:hover .reminder-ticker-track { animation-play-state: paused; }
.reminder-ticker-item {
    display: inline-flex;
    align-items: center;
    margin-right: 48px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    opacity: .92;
}
@keyframes reminderTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
    .reminder-ticker { padding: 4px 9px; gap: 8px; }
    .reminder-ticker-icon { width: 19px; height: 19px; font-size: 10px; }
    .reminder-ticker-item { font-size: 11px; }
    .reminder-ticker-greet { font-size: 10.5px; padding: 1px 8px; }
}

/* =====================================================================
   ANIMASI RUNNING TEXT — 2 MODE:
   A. MARQUEE (scroll / scroll-rev): track terus berjalan
   B. ROTATOR (14 pilihan): satu pesan berganti otomatis dgn transisi
   ===================================================================== */

/* ---- A. MODE MARQUEE ---- */
.ticker-marquee .reminder-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: reminderTickerScroll 32s linear infinite;
    will-change: transform;
}
.ticker-marquee.ticker-speed-slow   .reminder-ticker-track { animation-duration: 52s; }
.ticker-marquee.ticker-speed-normal .reminder-ticker-track { animation-duration: 32s; }
.ticker-marquee.ticker-speed-fast   .reminder-ticker-track { animation-duration: 18s; }
.ticker-marquee.ticker-anim-scroll .reminder-ticker-track { animation-name: reminderTickerScroll; }
.ticker-marquee.ticker-anim-scroll-rev .reminder-ticker-track {
    animation-name: reminderTickerScrollRev;
    animation-direction: reverse;
}
@keyframes reminderTickerScrollRev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.ticker-marquee:hover .reminder-ticker-track { animation-play-state: paused; }
.ticker-marquee .reminder-ticker-item {
    display: inline-flex;
    align-items: center;
    margin-right: 48px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    opacity: .92;
}

/* ---- B. MODE ROTATOR (satu pesan berganti) ---- */
.ticker-rotator .reminder-ticker-viewport {
    display: flex;
    align-items: center;
    position: relative;
    height: 20px;
    padding: 0 8px;
}
.ticker-rotator .reminder-ticker-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: start; /* pesan mulai dari kiri → dekat dgn greeting */
    width: 100%;
    height: 100%;
    white-space: nowrap;
    animation: none;
}
.ticker-rotator .reminder-ticker-item {
    grid-area: 1 / 1;
    position: relative;
    left: auto;
    top: auto;
    display: inline-block;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    opacity: 0;
    transform: translateY(0) scale(1) rotateX(0);
    will-change: transform, opacity;
}
.ticker-rotator .reminder-ticker-item.ticker-enter {
    animation: tickerEnterDefault .52s cubic-bezier(.2,.8,.3,1) both;
}
.ticker-rotator .reminder-ticker-item.ticker-exit {
    animation: tickerExitDefault .34s ease both;
}
@keyframes tickerEnterDefault {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tickerExitDefault {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}

/* --- Variasi animasi rotator: SLIDE --- */
.ticker-rotator.ticker-anim-slide-left .reminder-ticker-item.ticker-enter { animation: tickerSlideLeftIn .52s cubic-bezier(.2,.8,.3,1) both; }
.ticker-rotator.ticker-anim-slide-left .reminder-ticker-item.ticker-exit  { animation: tickerSlideLeftOut .34s ease both; }
@keyframes tickerSlideLeftIn  { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tickerSlideLeftOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-80px); } }

.ticker-rotator.ticker-anim-slide-right .reminder-ticker-item.ticker-enter { animation: tickerSlideRightIn .52s cubic-bezier(.2,.8,.3,1) both; }
.ticker-rotator.ticker-anim-slide-right .reminder-ticker-item.ticker-exit  { animation: tickerSlideRightOut .34s ease both; }
@keyframes tickerSlideRightIn  { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tickerSlideRightOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(80px); } }

.ticker-rotator.ticker-anim-slide-up .reminder-ticker-item.ticker-enter { animation: tickerSlideUpIn .52s cubic-bezier(.2,.8,.3,1) both; }
.ticker-rotator.ticker-anim-slide-up .reminder-ticker-item.ticker-exit  { animation: tickerSlideUpOut .34s ease both; }
@keyframes tickerSlideUpIn  { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tickerSlideUpOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-50px); } }

.ticker-rotator.ticker-anim-slide-down .reminder-ticker-item.ticker-enter { animation: tickerSlideDownIn .52s cubic-bezier(.2,.8,.3,1) both; }
.ticker-rotator.ticker-anim-slide-down .reminder-ticker-item.ticker-exit  { animation: tickerSlideDownOut .34s ease both; }
@keyframes tickerSlideDownIn  { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tickerSlideDownOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(50px); } }

/* --- FADE --- */
.ticker-rotator.ticker-anim-fade .reminder-ticker-item.ticker-enter { animation: tickerFadeIn .7s ease both; }
.ticker-rotator.ticker-anim-fade .reminder-ticker-item.ticker-exit  { animation: tickerFadeOut .4s ease both; }
@keyframes tickerFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tickerFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* --- ZOOM --- */
.ticker-rotator.ticker-anim-zoom .reminder-ticker-item.ticker-enter { animation: tickerZoomIn .5s cubic-bezier(.2,.8,.3,1.2) both; }
.ticker-rotator.ticker-anim-zoom .reminder-ticker-item.ticker-exit  { animation: tickerZoomOut .32s ease both; }
@keyframes tickerZoomIn  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tickerZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.3); } }

/* --- FLIP --- */
.ticker-rotator.ticker-anim-flip .reminder-ticker-item.ticker-enter { animation: tickerFlipIn .6s ease both; }
.ticker-rotator.ticker-anim-flip .reminder-ticker-item.ticker-exit  { animation: tickerFlipOut .34s ease both; }
@keyframes tickerFlipIn  { from { opacity: 0; transform: perspective(500px) rotateX(85deg); } to { opacity: 1; transform: perspective(500px) rotateX(0); } }
@keyframes tickerFlipOut { from { opacity: 1; transform: perspective(500px) rotateX(0); } to { opacity: 0; transform: perspective(500px) rotateX(-85deg); } }

/* --- TYPEWRITER (kursor + reveal) --- */
.ticker-rotator.ticker-anim-typewriter .reminder-ticker-item.ticker-enter { animation: tickerTypeIn .6s steps(18, end) both; }
.ticker-rotator.ticker-anim-typewriter .reminder-ticker-item.ticker-exit  { animation: tickerFadeOut .3s ease both; }
@keyframes tickerTypeIn {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.ticker-rotator.ticker-anim-typewriter .reminder-ticker-item::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 13px;
    margin-left: 5px;
    background: var(--gold);
    vertical-align: -2px;
    animation: reminderTypeBlink 1s steps(1) infinite;
}
@keyframes reminderTypeBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- BLINK --- */
.ticker-rotator.ticker-anim-blink .reminder-ticker-item.ticker-enter { animation: tickerBlinkIn 1s steps(1) both; }
.ticker-rotator.ticker-anim-blink .reminder-ticker-item.ticker-exit  { animation: tickerFadeOut .3s ease both; }
@keyframes tickerBlinkIn {
    0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0; } 60% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; }
}

/* --- PULSE --- */
.ticker-rotator.ticker-anim-pulse .reminder-ticker-item.ticker-enter { animation: tickerPulseIn .55s ease both; }
.ticker-rotator.ticker-anim-pulse .reminder-ticker-item.ticker-exit  { animation: tickerFadeOut .3s ease both; }
@keyframes tickerPulseIn {
    0% { opacity: 0; transform: scale(.7); }
    55% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- WAVE --- */
.ticker-rotator.ticker-anim-wave .reminder-ticker-item.ticker-enter { animation: tickerWaveIn .55s ease both; }
.ticker-rotator.ticker-anim-wave .reminder-ticker-item.ticker-exit  { animation: tickerFadeOut .3s ease both; }
@keyframes tickerWaveIn {
    0% { opacity: 0; transform: translateY(14px); }
    60% { opacity: 1; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- BOUNCE --- */
.ticker-rotator.ticker-anim-bounce .reminder-ticker-item.ticker-enter { animation: tickerBounceIn .6s cubic-bezier(.2,.8,.3,1.4) both; }
.ticker-rotator.ticker-anim-bounce .reminder-ticker-item.ticker-exit  { animation: tickerFadeOut .3s ease both; }
@keyframes tickerBounceIn {
    0% { opacity: 0; transform: translateY(-40px); }
    55% { opacity: 1; transform: translateY(8px); }
    75% { transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- SHAKE --- */
.ticker-rotator.ticker-anim-shake .reminder-ticker-item.ticker-enter { animation: tickerShakeIn .55s ease both; }
.ticker-rotator.ticker-anim-shake .reminder-ticker-item.ticker-exit  { animation: tickerFadeOut .3s ease both; }
@keyframes tickerShakeIn {
    0% { opacity: 0; transform: translateX(0); }
    25% { opacity: 1; transform: translateX(-7px); }
    50% { transform: translateX(7px); }
    75% { transform: translateX(-4px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* warna item sesuai tipe */
.ticker-type-danger  { color: #f87171; }
.ticker-type-warning { color: #fbbf24; }
.ticker-type-success { color: #34d399; }
.ticker-type-info    { color: var(--gold); }

/* ---- Animasi TOAST (6 pilihan) ---- */
.reminder-toast { animation: reminderIn .35s cubic-bezier(.2,.9,.3,1.2); }
.reminder-toast.toast-anim-slide   { animation-name: toastInSlide; }
.reminder-toast.toast-anim-slideup { animation-name: toastInSlideUp; }
.reminder-toast.toast-anim-fade    { animation-name: toastInFade; }
.reminder-toast.toast-anim-pop     { animation-name: toastInPop; }
.reminder-toast.toast-anim-flip    { animation-name: toastInFlip; }
.reminder-toast.toast-anim-bounce  { animation-name: toastInBounce; }
@keyframes toastInSlide  { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastInSlideUp{ from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastInFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastInPop    { from { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.08); } to { transform: scale(1); } }
@keyframes toastInFlip   { from { opacity: 0; transform: perspective(600px) rotateX(80deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } }
@keyframes toastInBounce { 0% { opacity: 0; transform: translateY(-50px); } 60% { opacity: 1; transform: translateY(10px); } 80% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

/* =====================================================================
   HALAMAN NOTIFIKASI (public/notifications.php)
   ===================================================================== */
.notif-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.notif-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.notif-check:hover { border-color: var(--gold-border); background: var(--surface-3); }
.notif-check input { accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; }
.notif-check span { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.notif-check span i { color: var(--gold); width: 18px; text-align: center; }

.notif-anim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.notif-anim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.notif-anim-card:hover { border-color: var(--gold-border); transform: translateY(-2px); }
.notif-anim-card.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 6px 18px rgba(0,0,0,.3);
}
.notif-anim-card input { position: absolute; opacity: 0; pointer-events: none; }
.notif-anim-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.notif-anim-card.active .notif-anim-icon { background: var(--gold); color: #1a1205; }
.notif-anim-name { font-size: 12px; font-weight: 700; }
.notif-anim-mode {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    color: #fff;
}
.notif-anim-mode.marquee { background: var(--gold); color: #1a1205; }
.notif-anim-mode.rotator { background: linear-gradient(135deg, #34d399, #3b82f6); }
.notif-mode-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    vertical-align: 1px;
}
.notif-mode-badge.marquee { background: var(--gold); color: #1a1205; }
.notif-mode-badge.rotator { background: linear-gradient(135deg, #34d399, #3b82f6); color: #fff; }

/* Pratinjau live di halaman notifikasi */
.notif-preview { margin: 6px 0 0; }
.notif-preview .reminder-ticker-item { font-size: 12px; }
/* Baris tombol aksi notifikasi — wrap di layar kecil */
#notifForm > .d-flex { flex-wrap: wrap; }
#notifForm > .d-flex .btn { flex: 1 1 auto; min-width: 180px; }

.banner-side { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }

/* =====================================================================
   SLIDESHOW BANNER — grafik pendapatan + status server bergantian
   ===================================================================== */
/* Container slideshow pakai GRID overlap: kedua slide di cell yang sama,
   jadi tinggi container = tinggi slide TERBESAR → saat ganti slide layout
   TIDAK "besar kecil" (tidak melompat). */
.banner-side.banner-slideshow {
    position: relative;
    min-width: 300px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "slide";
}
.banner-side.banner-slideshow .banner-slide {
    grid-area: slide;
    transition: opacity .45s ease, transform .45s ease;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    visibility: hidden;
    /* tempatkan semua slide di titik yang sama (grid overlap) */
    grid-column: 1;
    grid-row: 1;
}
.banner-side.banner-slideshow .banner-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}
.banner-slide-dots {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 6;
}
.banner-slide-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.banner-slide-dot:hover { transform: scale(1.3); border-color: var(--gold); }
.banner-slide-dot.is-active { background: var(--gold); border-color: var(--gold); }
@media (max-width: 640px) {
    .banner-side.banner-slideshow { min-width: 0; width: 100%; }
    .banner-slide-dots { right: 4px; }
}
.banner-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.banner-date .d-day { font-size: 30px; font-weight: 800; color: var(--gold); line-height: 1; }
.banner-date .d-meta { font-size: 10.5px; color: var(--text-muted); text-align: center; }
.banner-chart {
    width: 300px;
    padding: 12px 14px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    position: relative;
    /* Samakan tinggi dgn kartu server di slideshow biar tidak "besar kecil" */
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.banner-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
}
.banner-chart-head i { color: var(--gold); margin-right: 5px; }
.banner-chart-head strong { color: var(--gold); font-family: var(--font-mono); font-size: 12px; }
.banner-chart svg { display: block; }
/* Grafik area banner mengikuti warna tema */
#areaGrad stop:first-child, #lineGrad stop:last-child { stop-color: var(--gold); }
#areaGrad stop:last-child  { stop-color: var(--gold); }
#lineGrad stop:first-child { stop-color: var(--gold-dim); }
.chart-dot { fill: var(--gold); stroke: #0a0a0f; stroke-width: 1.2; cursor: pointer; }
.banner-chart-tip {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-3);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10px;
    line-height: 1.45;
    color: var(--text);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 5;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.banner-chart-tip strong { color: var(--gold); font-size: 10px; }
.banner-chart-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 6px;
}
.dot-legend { display: inline-flex; align-items: center; gap: 5px; }
.dot-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }
#barSweep { pointer-events: none; }

/* =====================================================================
   STATUS SERVER DOCKER (banner) — pengganti grafik pendapatan
   ===================================================================== */
.banner-srv {
    width: 300px;
    padding: 10px 12px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    position: relative;
    overflow: hidden;
}
.banner-srv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
}
.banner-srv-head i { color: var(--gold); margin-right: 5px; }
.banner-srv-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--success);
}
.banner-srv-live i { color: var(--success); animation: srvLivePulse 1.6s ease-in-out infinite; }
.banner-srv-live:not(.on) { color: var(--danger); }
.banner-srv-live:not(.on) i { color: var(--danger); animation: none; }
@keyframes srvLivePulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px currentColor; }
    50%      { opacity: .35; text-shadow: none; }
}
.banner-srv-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 6px;
}
.srv-stat {
    text-align: center;
    padding: 5px 3px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.srv-stat-num { font-size: 14px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.srv-stat-num small { font-size: 9px; color: var(--text-faint); font-weight: 600; }
.srv-stat-lbl { font-size: 8.5px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; }
.banner-srv-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 108px;
    overflow: auto;
    padding-right: 2px;
}
.srv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 7px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 10.5px;
}
.srv-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-faint);
}
.srv-row.srv-running .srv-dot { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); animation: srvDotPulse 1.8s ease-out infinite; }
@keyframes srvDotPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.srv-row.srv-exited .srv-dot, .srv-row.srv-dead .srv-dot, .srv-row.srv-stopped .srv-dot { background: var(--danger); }
.srv-row.srv-restarting .srv-dot { background: var(--warning); animation: srvBlink .7s steps(2) infinite; }
@keyframes srvBlink { 50% { opacity: .3; } }
.srv-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 600;
}
.srv-state {
    flex-shrink: 0;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-faint);
}
.srv-row.srv-running .srv-state { color: var(--success); }
.srv-empty { font-size: 11px; color: var(--text-faint); padding: 8px 4px; text-align: center; }
.banner-srv-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 9.5px;
    color: var(--text-faint);
    margin-top: 6px;
    white-space: nowrap;
}
.banner-srv-foot i { color: var(--gold); margin-right: 4px; }
.srv-refresh i { animation: srvSpin 5s linear infinite; }
@keyframes srvSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
    .banner-srv { width: 100%; }
}


/* --- KPI cards (dengan tren) --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    height: 100%; /* ikuti tinggi baris agar sejajar dgn panel Order WA */
    align-content: stretch;
}
.kpi-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    justify-content: center; /* konten terpusat — bukan terentang dengan gap raksasa */
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold-border);
    box-shadow: var(--shadow);
}
.kpi-card-icon {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 15px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.kpi-card-icon.gold   { background: var(--gold-bg);   color: var(--gold); }
.kpi-card-icon.green  { background: var(--success-bg); color: var(--success); }
.kpi-card-icon.red    { background: var(--danger-bg);  color: var(--danger); }
.kpi-card-icon.blue   { background: var(--info-bg);    color: var(--info); }
.kpi-card-icon.yellow { background: var(--warning-bg); color: var(--warning); }
.kpi-card-icon.purple { background: rgba(167,139,250,.12); color: #a78bfa; }
.kpi-card-icon.teal   { background: rgba(45,212,191,.12);  color: #2dd4bf; }

/* --- Kartu STOR (setoran harian): beda dari kartu lain karena punya tombol --- */
/* Tinggi konten dijaga SAMA dengan kartu lain supaya ikon semua kartu sejajar
   (kartu lain: ikon → label → angka → badge tren → 1 baris keterangan).
   Di sini badge tren TIDAK dipakai; sebagai gantinya baris tombol yang ringkas. */
.kpi-card-stor { cursor: default; }
.kpi-card-stor .kpi-value { margin-bottom: 2px; }
.kpi-stor-actions {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap; margin-top: 7px;
}
.kpi-stor-actions .btn { line-height: 1.5; }

/* --- Modal STOR --- */
.stor-hero {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    text-align: center;
}
.stor-hero-main { display: flex; flex-direction: column; gap: 2px; }
.stor-hero-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.stor-hero-value { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--success); }
.stor-hero-sub { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
/* Dua kotak rincian di dalam modal (Bulan ini & Belum disetor) */
.stor-hero-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; margin-top: 12px;
    text-align: left;
}
/* Untuk ADMIN: hanya ada 1 kotak ("Belum disetor") — kotak "Bulan ini" disembunyikan
   karena itu informasi omzet yang bukan urusan admin. */
.stor-hero-grid.is-single { grid-template-columns: 1fr; }
.stor-hero-grid > div {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 1px;
}
.stor-hero-grid-label {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted);
}
.stor-hero-grid > div > b { font-size: 14px; font-variant-numeric: tabular-nums; }
.stor-hero-grid-sub { font-size: 9.5px; color: var(--text-faint); }
/* Baris "sudah disetor bulan ini" — penegas beda antara UANG MASUK vs SETORAN */
.stor-hero-split {
    font-size: 11px; color: var(--text-faint);
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.stor-hero-split b { color: var(--text); }
.stor-hero-note { font-size: 10.5px; color: var(--text-faint); margin-top: 10px; line-height: 1.4; }
.stor-hero-link { color: var(--gold); font-weight: 600; text-decoration: none; }

/* =====================================================================
   HERO MODAL "CATAT PEMBAYARAN" (piutang.php) — 13 Okt 2026
   Ringkasan tagihan pelanggan di dalam modal. Struktur & tampilan sengaja
   disamakan dengan .stor-hero supaya konsisten.
   ===================================================================== */
.bayar-hero {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 3px;
}
.bayar-hero-label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .6px; color: var(--text-muted);
}
.bayar-hero > div > b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bayar-hero-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; margin-top: 10px; text-align: left;
}
.bayar-hero-grid > div {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 7px 9px;
    display: flex; flex-direction: column; gap: 1px;
}
.bayar-hero-grid > div > b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.stor-hero-link:hover { text-decoration: underline; }
.stor-total-preview {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--success-bg);
    border: 1px dashed var(--success);
    border-radius: var(--radius-sm);
    padding: 8px 12px; margin-bottom: 14px;
    font-size: 12.5px; font-weight: 600; color: var(--success);
}
.stor-total-preview b { font-size: 15px; font-variant-numeric: tabular-nums; }
.stor-total-preview.is-empty { background: var(--surface-3); border-color: var(--border); color: var(--text-faint); }
.stor-msg { margin-top: 10px; font-size: 12px; min-height: 16px; }
.stor-msg.is-ok { color: var(--success); font-weight: 600; }
.stor-msg.is-error { color: var(--danger); font-weight: 600; }
.stor-history { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.stor-history-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px;
}
.stor-history-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.stor-history-list::-webkit-scrollbar { width: 6px; }
.stor-history-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
.stor-history-row {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
}
.stor-history-line1 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.stor-history-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--success); }
.stor-history-line2 { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.stor-history-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 12px; }
.kpi-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    min-height: 26px;      /* 2 baris label muat → angka SEJAJAR di semua kartu */
    display: grid;
    place-items: center;
    line-height: 1.3;
    flex-shrink: 0;
}
.kpi-value { font-size: 23px; font-weight: 800; margin: 6px 0 6px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.kpi-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    white-space: nowrap;   /* teks tidak wrap/terpotong */
    max-width: 100%;
    flex-shrink: 0;
}
.kpi-trend.up { color: var(--success); background: var(--success-bg); }
.kpi-trend.down { color: var(--danger); background: var(--danger-bg); }
.kpi-trend.flat { color: var(--text-faint); background: var(--surface-3); }
.kpi-compare { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 6px; }

/* --- KPI + Notifikasi Order WA bersebelahan — SAMA TINGGI --- */
.dash-kpi-wrap {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 18px;
    align-items: stretch; /* KPI cards & panel Order WA setinggi satu sama lain */
}
.wa-notif-panel {
    display: flex;
    flex-direction: column;
    max-height: none;   /* ikuti tinggi KPI grid (sama tinggi dgn baris card) */
    height: 100%;
    min-width: 0;
}
.wa-notif-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; }
.wa-notif-body::-webkit-scrollbar { width: 6px; }
.wa-notif-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
.wa-notif-table { display: flex; flex-direction: column; gap: 8px; }
.wa-notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color var(--tr), background var(--tr);
}
.wa-notif-row:hover { border-color: var(--gold-border); background: var(--surface-2); }
@keyframes waNotifPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50% { box-shadow: 0 0 0 4px rgba(239,68,68,.16); }
}
.wa-notif-row.is-new {
    border-color: rgba(239,68,68,.55);
    background: rgba(239,68,68,.08);
    animation: waNotifPulse 2.2s ease-in-out infinite;
}
.wa-notif-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-notif-name { font-weight: 600; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-notif-prods { font-size: 11px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-notif-pickup { font-size: 10.5px; color: #fbbf24; white-space: nowrap; }
.wa-notif-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.wa-notif-time { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 1100px) {
    .dash-kpi-wrap { grid-template-columns: 1fr; }
    .wa-notif-panel { max-height: none; }
    .wa-notif-body { max-height: 420px; }
}

/* --- Grid utama dashboard (sesuai referensi) --- */
.dash-row-top {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Grafik lebih lebar, Pesanan Terbaru di kanan */
    gap: 18px;
    align-items: stretch; /* panel setinggi mungkin → seukuran */
}
.dash-row-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Produk Terlaris / Keuangan / WhatsApp */
    gap: 18px;
    align-items: stretch; /* panel seukuran */
}
/* Role dengan panel terbatas: satu kolom mengisi penuh */
.dash-row-top > .dash-col:only-child,
.dash-row-bottom > .dash-col:only-child { grid-column: 1 / -1; }
.dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; height: 100%; }

/* Panel mengisi penuh tinggi kolom → semua panel dalam satu baris seukuran */
.dash-col .panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.dash-col .panel .panel-body,
.dash-col .panel .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
}
.dash-col .panel .panel-body { display: flex; flex-direction: column; }
.dash-col .panel .panel-body > * { width: 100%; }
/* Grafik mengisi sisa ruang panel */
.dash-col[data-panel-key="grafik"] .panel-body { padding: 10px 18px 14px; }
.dash-col[data-panel-key="grafik"] #salesChart { flex: 1; min-height: 240px; }
/* Konten bawah (keuangan & whatsapp) merata mengisi tinggi */
.dash-col[data-panel-key="keuangan"] .panel-body,
.dash-col[data-panel-key="whatsapp"] .panel-body { justify-content: space-between; }
.dash-col[data-panel-key="keuangan"] .finance-stats,
.dash-col[data-panel-key="whatsapp"] .wa-stats { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
/* Tabel pesanan terbaru: isi lalu scroll bila terlalu tinggi */
.dash-col[data-panel-key="pesanan"] .table-responsive { overflow: auto; }
.dash-col[data-panel-key="pesanan"] .table-responsive .table { min-width: 520px; }

/* --- Strip info tambahan (bukan duplikat kartu KPI) --- */
.dash-info-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.dash-info-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    min-width: 0;
}
.dash-info-item > i { font-size: 17px; flex-shrink: 0; }
.dash-info-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-info-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash-info-meta b { font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* AI kill switch — toggle sebaris, jelas: ON=hijau/kanan, OFF=merah/kiri */
.ai-toggle-form {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    cursor: pointer;
    margin-left: auto;
}
.ai-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.ai-switch-track {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 20px;
    background: var(--danger);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
    transition: background .2s ease;
    flex-shrink: 0;
}
.ai-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    transition: left .2s ease;
}
.ai-switch.on .ai-switch-track { background: var(--success); }
.ai-switch.on .ai-switch-track::after { left: 20px; }
.ai-switch-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--danger);
    transition: color .2s ease;
}
.ai-switch.on .ai-switch-label { color: var(--success); }
.ai-switch:hover .ai-switch-track { box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 10px color-mix(in srgb, var(--gold) 30%, transparent); }
.dash-info-hint { cursor: help; border-style: dashed; }
.dash-drag {
    cursor: grab;
    color: var(--text-faint);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 13px;
    transition: color .15s ease, background .15s ease;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}
.dash-drag:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.dash-drag:active { cursor: grabbing; }
/* Tombol sembunyikan panel (×) */
.dash-close {
    cursor: pointer;
    color: var(--text-faint);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    transition: color .15s ease, background .15s ease, transform .15s ease;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}
.dash-close:hover { color: var(--danger); background: rgba(239,68,68,.14); transform: scale(1.08); }
.panel-header .panel-title { margin-right: auto; }

/* Tombol sembunyikan kartu KPI (×) — kecil, halus, baru muncul saat hover */
.kpi-close {
    position: absolute;
    top: 36px;
    right: 10px;
    z-index: 3;
    cursor: pointer;
    color: var(--text-faint);
    opacity: 0;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.6;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.kpi-card:hover .kpi-close { opacity: 1; }
.kpi-close:hover { color: var(--danger); background: rgba(239,68,68,.14); }

/* Tombol ubah ukuran kartu KPI (besar/kecil) */
.kpi-size {
    position: absolute;
    top: 10px;
    right: 32px;
    z-index: 3;
    cursor: pointer;
    color: var(--text-faint);
    opacity: 0;
    padding: 3px 7px;
    border: none;
    background: rgba(0,0,0,.25);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.6;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.kpi-card:hover .kpi-size { opacity: 1; }
.kpi-size:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); }
.kpi-card.kpi-lg { grid-column: span 2; }

/* --- Drag handle kartu KPI --- */
.kpi-drag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    cursor: grab;
    color: var(--text-faint);
    opacity: 0;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 13px;
    background: rgba(0,0,0,.25);
    transition: opacity .15s ease, color .15s ease, background .15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.kpi-card:hover .kpi-drag { opacity: 1; }
.kpi-drag:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); }
.kpi-drag:active { cursor: grabbing; }

/* --- Seksi dashboard (bisa di-drag, banner dikecualikan) --- */
.dash-section { position: relative; }
.dash-section + .dash-section { margin-top: 20px; }
.section-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 14px;
    margin-bottom: 6px;
    border-radius: 8px;
    font-size: 11px;
    color: var(--text-faint);
    background: transparent;
    border: 1px dashed transparent;
    opacity: .35;
    cursor: grab;
    transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.dash-section:hover .section-drag { opacity: 1; background: var(--surface-2); border-color: var(--border); }
.section-drag:hover { color: var(--gold); border-color: var(--gold-border); background: color-mix(in srgb, var(--gold) 1%, transparent); }
.section-drag:active { cursor: grabbing; }
/* Handle drag di dalam header panel (mis. seksi Aktivitas Terbaru) */
.section-drag.section-drag-head {
    width: 26px;
    height: 22px;
    margin-bottom: 0;
    border-radius: 7px;
    font-size: 12px;
    flex-shrink: 0;
    align-self: center;
}
body.dash-sorting { cursor: grabbing; }
body.dash-sorting .dash-col { transition: none; }
.dash-col-ph {
    background: color-mix(in srgb, var(--gold) 08%, transparent);
    border: 2px dashed var(--gold);
    border-radius: var(--radius);
    opacity: .7;
    pointer-events: none;
    min-width: 0;
}
.dash-col-ghost {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    opacity: .96;
    transform: rotate(1.5deg) scale(1.015);
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    border-radius: var(--radius);
    overflow: hidden;
    will-change: left, top;
}
.dash-col-hidden { display: none !important; }
.dash-col-dropped { transition: transform .26s cubic-bezier(.22,1,.36,1), opacity .26s ease; will-change: transform; }

/* Kartu panel dashboard */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}
.panel-title i { color: var(--gold); font-size: 14px; }
.panel-body { padding: 18px; }
.panel-link { font-size: 12px; color: var(--gold); font-weight: 600; }
.panel-link:hover { color: var(--gold-strong); text-decoration: underline; }

/* Header panel Order WA — tipis & title di tengah */
.wa-notif-panel .panel-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    min-height: 38px;
}
.wa-notif-panel .panel-header .panel-title {
    justify-self: center;
    margin: 0;
    white-space: nowrap;
}
.wa-notif-panel .panel-header .section-drag-head {
    grid-column: 1;
    justify-self: start;
}
.wa-notif-panel .panel-header .btn-ghost {
    grid-column: 3;
    justify-self: end;
}
/* Badge angka notifikasi baru di samping icon bell */
.wa-notif-title-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 18px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 45%, transparent);
}

/* --- Daftar produk terlaris --- */
.product-rank {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.product-rank:last-child { border-bottom: none; }
.rank-no {
    width: 28px; height: 28px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    background: var(--surface-3);
    color: var(--text-muted);
}
.product-rank:first-child .rank-no { background: var(--gold); color: #0a0a0f; }
.product-rank:nth-child(2) .rank-no { background: rgba(203,203,255,.14); color: #cbd5ff; }
.product-rank:nth-child(3) .rank-no { background: rgba(255,178,102,.16); color: #ffb266; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-meta { font-size: 11.5px; color: var(--text-faint); }
.rank-price { font-size: 12.5px; font-weight: 700; color: var(--gold); white-space: nowrap; }

/* --- Ringkasan keuangan --- */
.finance-stats { display: flex; flex-direction: column; gap: 10px; }
.finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}
.finance-row .f-label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted); }
.finance-row .f-label i { font-size: 13px; }
.finance-row .f-value { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.finance-margin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border-radius: var(--radius-sm);
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
}
.finance-margin .f-label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--gold); }
.finance-margin .f-value { font-size: 17px; font-weight: 800; color: var(--gold); }

/* --- WhatsApp mini --- */
.wa-status-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.wa-status-row .wa-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--success-bg);
    color: var(--success);
    font-size: 18px;
}
.wa-status-row .wa-info { flex: 1; min-width: 0; }
.wa-status-row .wa-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.wa-session { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.wa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wa-stat {
    text-align: center;
    padding: 11px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}
.wa-stat .wa-stat-value { font-size: 17px; font-weight: 800; }
.wa-stat .wa-stat-label { font-size: 10px; color: var(--text-faint); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }

/* =====================================================================
   26. RESPONSIVE
   ===================================================================== */
/* KPI: agar kartu SELALU sejajar (tidak ada kartu yatim 3+1):
   - >1280: 4 kolom satu baris
   - 1101–1280 (Order WA masih di samping, area KPI sempit): 2×2 rapi
   - ≤1100 (Order WA turun, KPI area penuh): kembali 4 kolom
   - ≤768 (mobile): 2×2 */
@media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .dash-row-top { grid-template-columns: 1fr; }
    .dash-row-bottom { grid-template-columns: repeat(2, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .chat-layout { grid-template-columns: 250px 1fr; }
    .navbar-search { max-width: 320px; }
}

@media (max-width: 900px) {
    .app-main { margin-left: 0; }
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sidebar-close { display: block; }
    .sidebar-overlay.open { display: block; }
    .app-content { padding: 16px; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-row-top { grid-template-columns: 1fr; }
    .dash-row-bottom { grid-template-columns: 1fr; }
    /* FIX 2026-09-04: dulu chart di-display:none → hilang di HP. Sekarang
       tampil tapi menyesuaikan lebar (lihat .banner-chart width:100% di ≤900). */
    .banner-chart { width: 100%; max-width: 340px; }
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .col-span-2 { grid-column: auto; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .navbar { gap: 10px; padding: 0 12px; }
    .navbar-brand-text { display: none; }
    .navbar-search { max-width: 100%; }
    .navbar-search-kbd { display: none; }
    .navbar-clock-wrap { display: none; }
    .navbar-clock-float { display: none !important; }
    .navbar-user-info { display: none; }
    .welcome-banner { padding: 20px 18px; }
    .welcome-banner .banner-greeting { white-space: normal; }
    .welcome-banner .banner-name { font-size: 22px; }
    .welcome-banner .banner-main { flex-wrap: wrap; }
    .welcome-banner .banner-text { flex: 1 1 100%; }
    .welcome-banner .banner-pantun { max-width: 100%; }
    .banner-side { width: 100%; justify-content: space-between; }
    .wa-stats { grid-template-columns: repeat(3, 1fr); }
    /* Order form item rows */
    .item-row .item-grid, .item-row .item-grid-bottom { grid-template-columns: 1fr 1fr; }
    .item-row .item-col-cat, .item-row .item-col-del { grid-column: span 1; }
    .item-row .item-col-main { grid-column: 1 / -1; }
    /* Panel maklon & sub-grid lain selebar baris, input-nya bertumpuk di HP */
    .item-row .item-grid > .sablon-field,
    .item-row .item-grid > .sablon-meter-field,
    .item-row .item-grid > .manual-field,
    .item-row .item-grid > .sticker-field,
    .item-row .item-grid > .sticker-decal-field,
    .item-row .item-grid > .sticker-label-field,
    .item-row .item-grid > .spanduk-field { grid-column: 1 / -1; }
    .item-row .item-grid > .item-subgrid, .item-row .item-subgrid { grid-template-columns: 1fr; }
    .item-row .item-grid-bottom .item-col-name { grid-column: span 2; }
    .navbar-meta { display: none; }
    .navbar { padding: 0 16px; }
    .chat-layout { grid-template-columns: 1fr; height: auto; }
    .chat-window { min-height: 480px; }
    .chat-list { max-height: 320px; }
    .msg { max-width: 88%; }
    .modal-backdrop { padding: 16px 10px; align-items: flex-start; }
    /* Modal responsif di layar kecil: footer tombol boleh wrap & QR menyesuaikan */
    .modal-footer { flex-wrap: wrap; justify-content: flex-end; }
    .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
    .modal-body { padding: 14px 16px; }
    .modal-header, .modal-footer { padding: 12px 16px; }
    .qr-frame img { max-width: 100%; height: auto !important; }
    .wa-qr-img { width: min(200px, 60vw); height: auto; }
    #waReconnectQrBox { padding: 4px 0; }
    .login-card { padding: 26px 20px; }
    .page-toolbar { flex-direction: column; align-items: stretch; }
    .page-toolbar-left, .page-toolbar-right { justify-content: space-between; }
    .hide-mobile { display: none !important; }
}

/* Layar sangat kecil (≤520px): item order form → satu kolom (harus SETELAH blok 768px) */
@media (max-width: 520px) {
    .item-row .item-grid, .item-row .item-grid-bottom { grid-template-columns: 1fr; }
    .item-row .item-col-cat, .item-row .item-col-del, .item-row .item-col-main, .item-row .item-grid-bottom .item-col-name { grid-column: span 1; }
    /* Panel dinamis tetap selebar baris (override span 1 di atas) */
    .item-row .item-grid > .sablon-field,
    .item-row .item-grid > .sablon-meter-field,
    .item-row .item-grid > .manual-field,
    .item-row .item-grid > .sticker-field,
    .item-row .item-grid > .sticker-decal-field,
    .item-row .item-grid > .sticker-label-field,
    .item-row .item-grid > .spanduk-field,
    .item-row .item-grid > .item-subgrid { grid-column: 1 / -1; }
    /* Modal reconnect WhatsApp di layar sangat kecil */
    .wa-qr-img { width: min(180px, 58vw); height: auto; }
    #waReconnectQrBox .qr-frame { padding: 8px; }
}

/* =====================================================================
   27. ORDER FORM — ITEM ROWS
   ===================================================================== */
.item-row {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 12px;
}
.item-grid {
    display: grid;
    grid-template-columns: 130px 1fr 40px;
    gap: 12px;
    align-items: start;
}
.item-grid-bottom {
    grid-template-columns: 1.4fr 90px 130px 130px 1fr;
    margin-top: 10px;
}
.item-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.item-input {
    width: 100%;
    padding: 8px 11px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    transition: border-color var(--tr), box-shadow var(--tr);
}
.item-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-bg);
}
.item-input[readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: default;
}
.item-subgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    /* minmax(0,1fr) di bawah + min-width:0 memastikan kolom boleh menyusut di
     * bawah lebar isinya. Tanpa ini, isi panjang (mis. nama file besar) bisa
     * memaksa grid melebar keluar layar. */
    min-width: 0;
}
/* Grid 1 kolom penuh — dipakai panel yang isinya satu baris saja
 * (mis. "Jenis Banner"). Menggantikan inline style agar media query tetap
 * bisa menimpanya di layar sempit. */
.item-subgrid-1 { grid-template-columns: 1fr; }

/* =====================================================================
 * TEKS PANJANG TANPA SPASI (nama file desain, dsb)
 * =====================================================================
 * BUG NYATA (2026-10-09): nama file seperti
 * "file_000000009de88207a79afcd69c972f" tidak punya spasi sehingga browser
 * menganggapnya SATU kata yang tidak boleh dipotong. Akibatnya sel tabel
 * melebar melebihi layar dan seluruh halaman bisa di-scroll ke samping di HP
 * (terukur meluber 47px).
 *
 * `overflow-wrap: anywhere` membuat browser boleh memotong di tengah kata
 * HANYA bila perlu — kata normal tetap utuh. Dipasang ke tabel supaya semua
 * halaman yang menampilkan nama file ikut aman, bukan hanya halaman ini.
 */
.table td, .table th { overflow-wrap: anywhere; }
.card-title, .stock-card, .stock-chip-label { min-width: 0; overflow-wrap: anywhere; }
}
.item-hint {
    font-size: 12px;
    color: var(--text-faint);
    font-style: italic;
    padding: 8px 0;
}
.item-col-del { display: flex; justify-content: flex-end; }
.item-col-notes { min-width: 0; }

/* =====================================================================
   PANEL LEBAR PENUH DI DALAM BARIS ITEM
   ---------------------------------------------------------------------
   .item-grid = 130px | 1fr | 40px  (kategori | isi | hapus).
   Blok seperti .sablon-field / .manual-field / .sticker-field ditaruh di
   kolom ke-2, tapi isinya butuh lebar PENUH — jadi direntangkan dari
   kolom 1 sampai 3 (1 / -1) + margin atas agar tidak menempel kategori.
   TANPA aturan ini, blok tersebut jatuh ke kolom 40px (punya tombol hapus)
   → tampilan rusak / sempit. Kolom ke-3 (hapus) tetap di baris pertama.
   ===================================================================== */
.item-col-main { grid-column: 1 / -1; }
.item-col-cat  { grid-row: 1; }
.item-col-del  { grid-row: 1; grid-column: 3; }

/* Panel dinamis (spanduk/sticker/sablon/maklon) HARUS selebar baris juga.
   Blok .sablon-meter-field & .sticker-decal-field hanya punya class
   .item-subgrid (tanpa .item-col-main) — tanpa aturan ini keduanya
   terjepit di kolom 130px dan tampilan jadi bertumpuk/rusak. */
.item-grid > .sablon-field,
.item-grid > .sablon-meter-field,
.item-grid > .manual-field,
.item-grid > .sticker-field,
.item-grid > .sticker-decal-field,
.item-grid > .sticker-label-field,
.item-grid > .spanduk-field { grid-column: 1 / -1; margin-top: 4px; }

/* Sub-grid panel maklon/ukuran: 2 input sejajar + hint selebar baris */
.item-grid > .item-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Drop zone (ambil nama dari file) */
.drop-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-xs);
    padding: 6px 10px;
    text-align: center;
    color: var(--text-faint);
    font-size: 11px;
    transition: all var(--tr);
    cursor: pointer;
    background: var(--bg);
    margin-top: 6px;
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--gold);
    background: var(--gold-bg);
    color: var(--gold);
}
.drop-zone .file-name-preview { color: var(--gold); font-weight: 600; }

/* Suggestion pelanggan (autocomplete) */
#customer_suggestions,
#design_customer_suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 210px;
    overflow-y: auto;
    z-index: 150;
    display: none;
}
.item-suggestion {
    padding: 9px 13px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    transition: background var(--tr);
}
.item-suggestion i { color: var(--gold); margin-right: 6px; }
.item-suggestion:hover { background: var(--surface-3); }
/* Saran produk dari chat AI di dalam dropdown pelanggan */
.suggestion-intent {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
    border-radius: 7px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}
.suggestion-intent i { color: var(--gold); margin-right: 2px; }
.suggestion-intent .tag { flex-shrink: 0; }

/* Kotak saran AI setelah pelanggan dipilih (order form) */
.intent-suggestion {
    margin-top: 10px;
    padding: 12px 14px;
    background: linear-gradient(160deg, rgba(30,30,38,.92), rgba(20,20,27,.94));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    animation: reminderIn .3s ease;
}
.intent-suggestion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
}
.intent-suggestion-head span { display: inline-flex; align-items: center; gap: 6px; }
.intent-close {
    border: none;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 12px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
}
.intent-close:hover { background: rgba(255,255,255,.08); color: var(--text); }
.intent-msg {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.intent-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   28. MISC / UTILITY COMPONENTS
   ===================================================================== */

/* --- Timeline aktivitas (dashboard) — garis vertikal + ikon di atasnya --- */
.timeline-body { position: relative; padding: 4px 4px 4px 10px; }
/* Gagang seret tinggi panel aktivitas */
.timeline-resize {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
    cursor: ns-resize;
    color: var(--text-faint);
    font-size: 10px;
    border-top: 1px dashed var(--border);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: color .15s, background .15s;
}
.timeline-resize:hover { color: var(--gold); background: var(--gold-bg); }
.timeline-body::before {
    content: '';
    position: absolute;
    left: 41px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 45%, transparent), var(--border-strong) 45%, transparent 100%);
    z-index: 0;
}
/* Pemisah per hari (menutup garis) */
.timeline-day {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 8px 0 6px;
}
.timeline-day span {
    background: var(--surface);
    padding: 2px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    box-shadow: 0 0 0 4px var(--surface);
}
.timeline-day:first-child { margin-top: 2px; }

.side-timeline-section {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    transition: background var(--tr), transform var(--tr);
}
.side-timeline-section:hover { background: var(--surface-2); transform: translateX(2px); }

.side-timeline-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 0 0 4px var(--surface), 0 4px 12px rgba(0,0,0,.28);
}
.side-timeline-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Foto produk di timeline — bergantian (crossfade) jika lebih dari satu */
.timeline-prod { position: absolute; inset: 0; }
.timeline-prod-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: timelineCrossfade 4s linear infinite; }
@keyframes timelineCrossfade {
    0%   { opacity: 0; }
    6%   { opacity: 1; }
    44%  { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
}
.side-timeline-icon.bg-gold  { background: linear-gradient(135deg, var(--gold-dim), var(--gold)); color: #0a0a0f; }
.side-timeline-icon.bg-green { background: linear-gradient(135deg, #0f9d6b, var(--success)); color: #06281f; }
.side-timeline-icon.bg-blue  { background: linear-gradient(135deg, #2f7fe0, var(--info)); color: #0b1e3a; }
.side-timeline-icon.bg-red   { background: linear-gradient(135deg, #e25555, var(--danger)); color: #2b0808; }

.timeline-content { flex: 1; min-width: 0; }
.timeline-content h6 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.timeline-content .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.timeline-content .meta > span:first-child { font-weight: 500; color: var(--text); }
.timeline-content .meta .badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: .3px;
}
.timeline-content .meta .time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-faint);
    background: var(--surface-3);
    border: 1px solid var(--border);
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.timeline-content .meta .link-detail {
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gold-bg);
    transition: background var(--tr);
}
.timeline-content .meta .link-detail:hover { background: color-mix(in srgb, var(--gold) 2%, transparent); text-decoration: none; }

/* --- Item "belum bayar" (dashboard) --- */
.unpaid-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
}
.unpaid-item:last-child { border-bottom: none; }
.unpaid-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.unpaid-item .dot.bg-red { background: var(--danger); }
.unpaid-item .info { flex: 1; min-width: 0; }
.unpaid-item .info .order-number { font-weight: 600; font-size: 13.5px; color: var(--text); }
.unpaid-item .info .customer { font-size: 12.5px; color: var(--text-muted); }
.unpaid-item .info .amount { font-size: 12.5px; color: var(--danger); font-weight: 600; }
.unpaid-item .info .time { font-size: 11px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 5px; }
.unpaid-item .info .detail-link { font-size: 11px; color: var(--gold); text-decoration: none; }
.unpaid-item .info .detail-link:hover { text-decoration: underline; }

/* Pills & tags */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

/* Tag produk di saran AI — bisa diklik untuk tambah item */
.tag-clickable {
    cursor: pointer;
    transition: background var(--tr, .2s), border-color var(--tr, .2s), color var(--tr, .2s), transform var(--tr, .2s), box-shadow var(--tr, .2s);
    user-select: none;
}
.tag-clickable:hover {
    background: color-mix(in srgb, var(--gold) 18%, var(--surface-3));
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--gold) 22%, transparent);
}
.tag-clickable:active {
    transform: scale(.93);
}
/* Kondisi setelah diklik: item berhasil ditambahkan (hijau + centang) */
.tag-clickable.tag-added {
    background: linear-gradient(135deg, color-mix(in srgb, var(--success, #22c55e) 85%, #fff), var(--success, #22c55e));
    border-color: transparent;
    color: #06281f;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--success, #22c55e) 35%, transparent);
    animation: tagPop .38s ease;
}
.tag-clickable.tag-added i { opacity: 1; transform: scale(1.15); }
@keyframes tagPop {
    0%   { transform: scale(.88); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.tag-clickable i { font-size: 9px; opacity: .75; transition: transform var(--tr, .2s), opacity var(--tr, .2s); }
.intent-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.intent-hint {
    font-size: 11px;
    color: var(--text-faint);
    margin: -4px 0 8px;
}
.intent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-faint);
}
.intent-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.intent-meta-item i { color: var(--gold); }
.intent-meta-item.is-warn { color: var(--warning); }
.intent-meta-item.is-warn i { color: var(--warning); }
.intent-quote {
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Divider */
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* Pantun harian — kotak pratinjau di Pengaturan */
.settings-pantun-quote {
    font-style: italic;
    line-height: 1.7;
    color: var(--text);
    padding: 10px 12px;
    background: var(--surface-3);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
}

/* Keterangan kecil */
.help-text { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }

/* Grup aksi baris tabel */
.row-actions { display: flex; align-items: center; gap: 6px; }
.row-actions .btn { padding: 6px 9px; }

/* Panel "Kirim Ringkasan Order ke Grup" — collapsible (default tertutup) */
.wa-summary-collapse summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.wa-summary-collapse summary::-webkit-details-marker { display: none; }
.wa-summary-collapse summary .chev {
    transition: transform .2s ease;
    color: var(--text-faint);
}
.wa-summary-collapse[open] summary .chev {
    transform: rotate(180deg);
}
.wa-summary-collapse .card-body {
    border-top: 1px solid var(--border);
}
/* Avatar foto profil WhatsApp pelanggan */
.customer-cell { display: inline-flex; align-items: center; gap: 8px; }
.customer-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    flex-shrink: 0;
}
.customer-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
}
.customer-avatar-xs { width: 26px; height: 26px; font-size: 11px; }
/* Info pelanggan terpilih di wizard order form */
.selected-customer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.selected-customer .customer-avatar { width: 38px; height: 38px; }
.selected-customer-detail { min-width: 0; }
.selected-customer-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.selected-customer-meta { font-size: 11.5px; color: var(--text-muted); }
/* Pemisah antar grup aksi (mis. hapus vs bersihkan chat AI) */
.row-action-sep {
    width: 1px;
    height: 18px;
    background: var(--gold);
    margin: 0 4px;
    opacity: .45;
    align-self: center;
    flex-shrink: 0;
    box-shadow: 0 0 4px color-mix(in srgb, var(--gold) 40%, transparent);
}
/* Tombol Purge (bersihkan chat AI) — jelas berbeda dari hapus */
.row-actions .btn-purge {
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.row-actions .btn-purge:hover {
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    border-color: var(--gold);
}

/* Kode/pre */
.code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-soft); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; }

/* --- Gambar produk --- */
.product-thumb {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
}
.product-thumb-empty {
    display: inline-grid; place-items: center;
    color: var(--text-faint);
    font-size: 15px;
}
.product-img-preview {
    width: 76px; height: 76px;
    display: grid; place-items: center;
    border-radius: 12px;
    border: 1px dashed var(--border-strong);
    background: var(--surface-2);
    overflow: hidden;
    color: var(--text-faint);
    font-size: 22px;
    flex-shrink: 0;
}
.product-img-preview img { width: 100%; height: 100%; object-fit: cover; }
.bs-thumb {
    width: 38px; height: 38px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    flex-shrink: 0;
}
.bs-thumb-empty {
    display: grid; place-items: center;
    color: var(--text-faint);
    font-size: 14px;
}

/* Teks wrap aman */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Print */
@media print {
    .sidebar, .navbar, .app-footer, .no-print { display: none !important; }
    .app-main { margin-left: 0; }
    .app-content { padding: 0; }
    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: none; }
}

/* =====================================================================
   ANIMASI & MIKRO-INTERAKSI
   ===================================================================== */
@keyframes cg-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes cg-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cg-shine {
    0%   { transform: translateX(-140%) skewX(-18deg); }
    100% { transform: translateX(340%) skewX(-18deg); }
}
@keyframes cg-sweep {
    0%   { transform: translateX(-170%) rotate(6deg); }
    60%, 100% { transform: translateX(340%) rotate(6deg); }
}
@keyframes cg-glow {
    0%, 100% { box-shadow: 0 0 0 1px var(--border), 0 4px 18px rgba(0,0,0,.25); }
    50%      { box-shadow: 0 0 0 1px var(--gold-border), 0 8px 32px color-mix(in srgb, var(--gold) 16%, transparent); }
}

/* Welcome banner: kilau emas menyapu lembut (frozen di env terbatas = tak terlihat, aman) */
.welcome-banner::after {
    content: '';
    position: absolute;
    top: -30%; bottom: -30%; left: 0;
    width: 60%;
    background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--gold) 07%, transparent) 50%, transparent 100%);
    transform: translateX(-170%) rotate(6deg);
    animation: cg-sweep 8s ease-in-out infinite;
    pointer-events: none;
}
/* Entrance dijalankan via JS (app.js) supaya tetap berjalan di semua lingkungan. */

/* ===== EFEK GLASS DASHBOARD (premium) ===== */
.dash-wrap {
    position: relative;
    overflow-x: hidden; /* blob dekoratif tidak bikin scroll horizontal */
}
/* Blob dekoratif lembut di balik kaca */
.dash-wrap::before,
.dash-wrap::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.dash-wrap::before {
    width: 460px; height: 460px;
    top: -90px; right: -120px;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 17%, transparent), transparent 65%);
}
.dash-wrap::after {
    width: 520px; height: 520px;
    bottom: -160px; left: -140px;
    background: radial-gradient(circle, rgba(37,211,102,.12), transparent 65%);
}
.dash-wrap > * { position: relative; z-index: 1; }

/* Panel, KPI, info-strip ala kaca (glassmorphism) */
.dash-wrap .panel,
.dash-wrap .kpi-card,
.dash-wrap .dash-info-item {
    background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
}
.dash-wrap .panel-header {
    background: rgba(255,255,255,.035);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===== KPI MANIS — glow emas, ikon gradient, value bergradien ===== */
.dash-wrap .kpi-card {
    overflow: hidden; /* glow lingkaran terpotong rapi di border — tidak keluar kotak */
    background:
        radial-gradient(130% 95% at 100% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 55%),
        linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--gold) 20%, rgba(255,255,255,.10));
    box-shadow: 0 10px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Glow lingkaran lembut di pojok kanan atas kartu — TETAP DI DALAM kotak */
.dash-wrap .kpi-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%);
    transform: translate(28%, -28%);
    pointer-events: none;
    z-index: 0;
}
/* Bungkus isi kartu di atas glow agar teks tetap terbaca jelas */
.dash-wrap .kpi-card > * { position: relative; z-index: 1; }

/* Ikon dalam kotak gradient emas + glow (di atas kartu) */
.dash-wrap .kpi-card-icon,
.dash-wrap .kpi-card-icon.gold, .dash-wrap .kpi-card-icon.green,
.dash-wrap .kpi-card-icon.red, .dash-wrap .kpi-card-icon.blue,
.dash-wrap .kpi-card-icon.yellow, .dash-wrap .kpi-card-icon.purple {
    width: 44px; height: 44px;
    border-radius: 13px;
    font-size: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 34%, var(--surface-2)), color-mix(in srgb, var(--gold) 12%, var(--surface-3)));
    color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gold) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.16);
}
/* Nilai: besar & teks emas terang — SELALU terlihat & TIDAK terpotong.
   line-height longgar + overflow visible + nowrap agar angka panjang
   (mis. 2.190.000) tidak terpotong atas/bawah oleh overflow kartu. */
.dash-wrap .kpi-value {
    display: block;
    width: 100%;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: visible;
    color: #fff;
    text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent);
    animation: kpiHeartbeat 2.6s ease-in-out infinite;
}
/* Responsive: angka mengecil di layar kecil agar tidak terpotong */
@media (max-width: 640px) {
    .dash-wrap .kpi-value { font-size: 22px; }
    .dash-wrap .kpi-card.kpi-lg .kpi-value { font-size: 26px; }
}
@media (max-width: 400px) {
    .dash-wrap .kpi-value { font-size: 19px; }
}
/* Efek detak jantung via CAHAYA (glow) — TANPA scale, agar angka tetap sejajar
   pada garis lurus (tidak naik-turun). */
@keyframes kpiHeartbeat {
    0%, 15%  { filter: drop-shadow(0 0 1px transparent); opacity: 1; }
    23%      { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold) 65%, transparent)); opacity: 1; }
    31%      { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gold) 28%, transparent)); opacity: 1; }
    39%      { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 48%, transparent)); opacity: 1; }
    47%      { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gold) 28%, transparent)); opacity: 1; }
    100%     { filter: drop-shadow(0 0 1px transparent); opacity: 1; }
}
/* Label lebih lembut */
.dash-wrap .kpi-label { color: color-mix(in srgb, var(--text-muted) 88%, var(--gold)); }

/* Trend pill halus (warna naik/turun tetap semantik) */
.kpi-trend {
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.35);
    border: 1px solid transparent;
}

/* Hover: angkat + glow emas + kilau menyapu */
.kpi-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--gold) 55%, var(--gold-border));
    box-shadow: 0 16px 38px rgba(0,0,0,.4), 0 0 0 1px var(--gold-border), 0 0 30px color-mix(in srgb, var(--gold) 24%, transparent);
}
.kpi-card .kpi-card-icon { transition: transform .3s cubic-bezier(.2,.7,.3,1.4); }
.kpi-card:hover .kpi-card-icon { transform: scale(1.1) rotate(-5deg); }
.kpi-card::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    transform: translateX(-140%) skewX(-18deg);
    pointer-events: none;
}
.kpi-card:hover::after { animation: cg-shine .85s ease; }

/* Panel & stat card: hover halus */
.panel { transition: border-color var(--tr), box-shadow var(--tr); }
.panel:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.stat-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.stat-card:hover { transform: translateY(-3px); border-color: var(--gold-border); box-shadow: 0 10px 26px rgba(0,0,0,.3); }

/* ===== Halaman KPI Kerja (ringkasan owner & admin) ===== */
.kpi-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}
.kpi-page-icon {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 10px;
}
.kpi-page-icon.gold   { background: var(--gold-bg);   color: var(--gold); }
.kpi-page-icon.green  { background: var(--success-bg); color: var(--success); }
.kpi-page-icon.red    { background: var(--danger-bg);  color: var(--danger); }
.kpi-page-icon.blue   { background: var(--info-bg);    color: var(--info); }
.kpi-page-icon.purple { background: var(--gold-bg);    color: var(--gold); }
.kpi-page-label {
    font-size: 12px;
    color: var(--text-muted);
    min-height: 32px;
    line-height: 1.3;
}
.kpi-page-value {
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Tombol: efek tekan */
.btn { transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(1px) scale(.98); }

/* Entrance panel dashboard dijalankan via JS (app.js). */

/* Hormati preferensi gerakan berkurang */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =====================================================================
   TERMINAL CLI — Inbox Perintah (gaya terminal)
   ===================================================================== */
.term-window {
    background: #0b0f14;
    border: 1px solid #1e293b;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.term-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #131a24;
    border-bottom: 1px solid #1e293b;
}
.term-dots { display: flex; gap: 6px; }
.term-dots i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.term-dots .td-r { background: #ff5f57; }
.term-dots .td-y { background: #febc2e; }
.term-dots .td-g { background: #28c840; }
.term-title { font-family: var(--font-mono); font-size: 12px; color: #94a3b8; letter-spacing: .4px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-live { font-family: var(--font-mono); font-size: 10px; color: #28c840; letter-spacing: 1px; white-space: nowrap; }
.term-body {
    padding: 12px 14px;
    min-height: 220px;
    max-height: 520px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.75;
    background-image: repeating-linear-gradient(0deg, rgba(46,255,241,.025) 0 1px, transparent 1px 22px);
    background-size: 100% 22px;
}
.term-body::-webkit-scrollbar { width: 6px; }
.term-body::-webkit-scrollbar-thumb { background: #1e293b; border-radius: var(--radius-pill); }
.term-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(30,41,59,.6);
    flex-wrap: wrap;
}
.term-line:hover { background: rgba(46,255,241,.04); }
.term-time { color: #475569; font-size: 10.5px; flex-shrink: 0; }
.term-user { color: #f59e0b; font-weight: 700; flex-shrink: 0; }
.term-sign { color: #28c840; flex-shrink: 0; }
.term-cmd { color: #e2e8f0; white-space: pre-wrap; word-break: break-word; flex: 1; min-width: 160px; }
.term-status { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; flex-shrink: 0; }
.term-status.st-baru { color: #ff5f57; }
.term-status.st-diproses { color: #febc2e; }
.term-status.st-selesai { color: #28c840; }
.term-actions { display: inline-flex; gap: 4px; flex-shrink: 0; align-items: center; }
.term-actions button {
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1;
    padding: 3px 7px;
    background: #131a24;
    color: #94a3b8;
    border: 1px solid #263449;
    border-radius: 5px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.term-actions button:hover { color: #e2e8f0; border-color: #28c840; background: #1a2230; }
.term-actions button.on { color: #28c840; border-color: #28c840; background: rgba(40,200,64,.1); }
.term-actions button.td-del:hover { color: #ff5f57; border-color: #ff5f57; background: rgba(255,95,87,.08); }
.term-empty { color: #475569; font-size: 12.5px; padding: 20px 0; text-align: center; }
.term-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #0d131b;
    border-top: 1px solid #1e293b;
}
.term-prompt { font-family: var(--font-mono); font-size: 12.5px; color: #28c840; white-space: nowrap; flex-shrink: 0; }
.term-input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 4px 0;
}
.term-input input::placeholder { color: #475569; }
.term-input button {
    font-family: var(--font-mono);
    font-size: 12px;
    background: #1a2230;
    color: #28c840;
    border: 1px solid #2a3a52;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.term-input button:hover { background: #243247; color: #4ade80; }
.term-filters { display: flex; gap: 6px; padding: 8px 14px; background: #0d131b; border-top: 1px solid #141c28; flex-wrap: wrap; }
.term-filters a {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #94a3b8;
    padding: 3px 9px;
    border: 1px solid #263449;
    border-radius: 5px;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}
.term-filters a:hover { color: #e2e8f0; }
.term-filters a.on { color: #28c840; border-color: #28c840; }

/* --- Log proses perintah (streaming live) --- */
.term-log {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 1px 0 1px 26px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.7;
    flex-wrap: wrap;
}
.term-log-time { color: #475569; font-size: 10px; flex-shrink: 0; }
.term-log-arrow { color: #28c840; flex-shrink: 0; }
.term-log-msg { color: #94a3b8; word-break: break-word; }
.term-cursor {
    display: inline-block;
    width: 7px;
    height: 14px;
    margin-left: 2px;
    background: #28c840;
    animation: termBlink 1s steps(1) infinite;
    flex-shrink: 0;
}
@keyframes termBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.term-filter-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: #475569;
    margin-left: auto;
}

/* =====================================================================
   FIX AUTO-ZOOM iPhone (Safari) — font input < 16px bikin browser ngezoom
   saat fokus. Pada perangkat sentuh (coarse pointer), paksa font ≥ 16px.
   ===================================================================== */
@media (pointer: coarse) {
    .form-input,
    .form-select,
    .form-textarea,
    .term-input input,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* =====================================================================
   FRESH UI — Tabel Order & Stat Cards (halaman orders, dsb)
   ===================================================================== */

/* Tabel: header sticky + lebih tegas */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
    box-shadow: inset 0 -1px 0 var(--border);
}

/* Baris: zebra + hover lebih hidup */
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.table tbody tr:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--gold); }

/* Badge status: lebih tegas & berwarna solid */
.badge.badge-info    { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #93c5fd; border: 1px solid rgba(59,130,246,.35); }
.badge.badge-warning { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #fcd34d; border: 1px solid rgba(245,158,11,.35); }
.badge.badge-primary { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #ffe66d; border: 1px solid rgba(245,158,11,.4); }
.badge.badge-secondary { background: color-mix(in srgb, #8b5cf6 18%, transparent); color: #c4b5fd; border: 1px solid rgba(139,92,246,.35); }
.badge.badge-success { background: color-mix(in srgb, #10b981 18%, transparent); color: #6ee7b7; border: 1px solid rgba(16,185,129,.35); }
.badge.badge-danger  { background: color-mix(in srgb, #ef4444 18%, transparent); color: #fca5a5; border: 1px solid rgba(239,68,68,.35); }
.badge.badge-muted   { background: color-mix(in srgb, #64748b 18%, transparent); color: #94a3b8; border: 1px solid rgba(100,116,139,.35); }

/* Stat cards: gradient lembut + angka menonjol */
.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 14px);
    background: linear-gradient(160deg, var(--surface-2), var(--bg-soft));
    padding: 18px 20px;
    transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold-border);
    box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent);
}
.stat-card::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%);
    pointer-events: none;
}
.stat-card-icon {
    border-radius: 12px;
}
.stat-card-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
}
.stat-card-sub {
    color: var(--text-faint);
}

/* Nomor pesanan: lebih kontras */
.font-mono.text-gold {
    font-weight: 700;
    letter-spacing: .3px;
}

/* Tombol aksi baris: bulat & konsisten */
.row-actions .btn {
    border-radius: 8px;
    border: 1px solid transparent;
}
/* Hover NETRAL — hanya untuk tombol yang TIDAK punya warna khusus.
   FIX 2026-10-13 — BUG NYATA (dilaporkan pemilik: "tombol Catat Pembayaran
   kalau disorot langsung hitam").
   Sebab: aturan ini ADA DI BAWAH aturan `.btn-primary:hover` /
   `.btn-success:hover` / `.btn-danger:hover` / `.btn-warning:hover` dengan
   SPESIFISITAS SAMA (0,3,0) → di CSS yang menang adalah yang BELAKANGAN,
   sehingga `background: var(--surface-2)` (#1b1b24 = hampir hitam) menimpa
   warna hover tombol berwarna. Akibatnya SEMUA tombol berwarna di kolom Aksi
   (seluruh aplikasi) berubah gelap saat disorot.
   Sekarang tombol berwarna dibiarkan memakai hover-nya sendiri; hover netral
   hanya berlaku untuk tombol polos. */
.row-actions .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-outline):not(.btn-ghost):hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

/* =====================================================================
   TEMA TERANG (LIGHT MODE)
   ---------------------------------------------------------------------
   Body class .theme-light di-set server-side (theme_mode = light, GLOBAL).
   CSS variables inti (bg/surface/text/dll) sudah di-override lewat
   <style id="theme-vars">; di bawah ini menangani elemen yang memakai
   warna hardcode atau desain khusus dark agar tetap terbaca di mode terang.
   ===================================================================== */
body.theme-light {
    color-scheme: light;
}

/* Scrollbar terang */
body.theme-light ::-webkit-scrollbar-track { background: var(--bg-soft); }
body.theme-light ::-webkit-scrollbar-thumb { background: var(--scroll-thumb, var(--border-strong)); }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* Badge status — teks gelap agar kontras di latar terang */
body.theme-light .badge.badge-info    { background: color-mix(in srgb, #3b82f6 14%, #fff); color: #1e40af; border: 1px solid rgba(59,130,246,.4); }
body.theme-light .badge.badge-warning { background: color-mix(in srgb, #f59e0b 16%, #fff); color: #7c4a03; border: 1px solid rgba(245,158,11,.45); }
body.theme-light .badge.badge-primary { background: color-mix(in srgb, #f59e0b 16%, #fff); color: #7c4a03; border: 1px solid rgba(245,158,11,.5); }
body.theme-light .badge.badge-secondary { background: color-mix(in srgb, #8b5cf6 14%, #fff); color: #5b21b6; border: 1px solid rgba(139,92,246,.4); }
body.theme-light .badge.badge-success { background: color-mix(in srgb, #10b981 14%, #fff); color: #065f46; border: 1px solid rgba(16,185,129,.4); }
body.theme-light .badge.badge-danger  { background: color-mix(in srgb, #ef4444 14%, #fff); color: #991b1b; border: 1px solid rgba(239,68,68,.4); }
body.theme-light .badge.badge-muted   { background: color-mix(in srgb, #64748b 12%, #fff); color: #475569; border: 1px solid rgba(100,116,139,.35); }

/* Stat cards & KPI — nilai harus gelap di mode terang */
body.theme-light .stat-card-value,
body.theme-light .kpi-value,
body.theme-light .kpi-card .kpi-value {
    color: #14141c !important;
    text-shadow: none;
}

/* Sisi kanan teks (angka) yang pakai .text-gold tetap emas → bisa dipakai */
body.theme-light .dash-wrap .kpi-card-icon,
body.theme-light .dash-wrap .kpi-card-icon.gold,
body.theme-light .dash-wrap .kpi-card-icon.green,
body.theme-light .dash-wrap .kpi-card-icon.red,
body.theme-light .dash-wrap .kpi-card-icon.blue,
body.theme-light .dash-wrap .kpi-card-icon.yellow,
body.theme-light .dash-wrap .kpi-card-icon.purple {
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Sidebar — pastikan teks kontras */
body.theme-light .sidebar {
    background: var(--surface);
    border-color: var(--border);
}

/* Input & select — latar putih, teks gelap */
body.theme-light .form-input,
body.theme-light .form-select,
body.theme-light .form-textarea,
body.theme-light .term-input input,
body.theme-light input[type="text"],
body.theme-light input[type="search"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="tel"],
body.theme-light input[type="number"],
body.theme-light input[type="date"],
body.theme-light textarea,
body.theme-light select {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

/* Navbar — background ikut surface agar kontras dengan konten */
body.theme-light .navbar {
    background: var(--surface);
    border-color: var(--border);
}

/* Chat bubble WA (pesan keluar pakai gradient emas) — teks tetap gelap */
body.theme-light .msg.out,
body.theme-light .wa-w-msg.out {
    color: #1a1a1a;
}

/* Lightbox / overlay yang memakai warna gelap solid tetap dipertahankan.
   Area yang memakai warna semi-transparan putih dipastikan kontras. */
body.theme-light .modal-content,
body.theme-light .dropdown-menu,
body.theme-light .popover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

/* =====================================================================
   MODAL CROP GAMBAR (cg-cropper.js) — reusable di semua upload
   ===================================================================== */
.cg-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5,5,10,.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cg-crop-modal.open { display: flex; }
.cg-crop-box {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in .22s cubic-bezier(.2,.9,.3,1.1);
}
.cg-crop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.cg-crop-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}
.cg-crop-title i { color: var(--gold); }
.cg-crop-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
}
.cg-crop-close:hover { color: var(--text); background: var(--surface-3); }
.cg-crop-body {
    padding: 14px;
    background: var(--bg-soft);
}
.cg-crop-img {
    display: block;
    max-width: 100%;
    max-height: 55vh;
    margin: 0 auto;
}
.cg-crop-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.cg-crop-foot button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--tr);
}
.cg-crop-cancel {
    background: var(--surface-3);
    color: var(--text-muted);
    border-color: var(--border-strong) !important;
}
.cg-crop-cancel:hover { color: var(--text); background: var(--surface); }
.cg-crop-apply {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0a0a0f;
    border-color: var(--gold) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 25%, transparent);
}
.cg-crop-apply:hover { transform: translateY(-1px); }

/* =====================================================================
   TERIMA STOK — TAB & BARIS LEBAR (hasil potong memanjang / slit)
   =====================================================================
   Bahan spanduk datang sebagai roll lebar 3,2 m, lalu dipotong memanjang
   menjadi 2,1 m / 1,6 m / 1,1 m supaya saat mencetak ukuran kecil (mis.
   1x1 m) sisanya tidak terbuang banyak. Form ini menerima beberapa lebar
   sekaligus karena yang MASUK GUDANG adalah roll hasil potongan.
   ===================================================================== */
.rcv-tab { display:flex; gap:6px; margin-bottom:14px; background:var(--surface-2);
           border:1px solid var(--border); border-radius:11px; padding:4px; }
.rcv-tab-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
               padding:8px 10px; border:none; background:transparent; cursor:pointer;
               border-radius:8px; font-size:.78rem; font-weight:600; color:var(--text-muted);
               transition:background .18s, color .18s; }
.rcv-tab-btn:hover { color:var(--text); }
.rcv-tab-btn.active { background:var(--surface); color:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.08); }

.rcv-grup-head, .rcv-grup { display:grid; gap:6px; align-items:center; }
.rcv-grup-head { grid-template-columns:1fr 1fr; font-size:.68rem; font-weight:700;
                 text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint);
                 padding:0 2px 4px; }
.rcv-grup { grid-template-columns:1fr 1fr; margin-bottom:6px; }
/* Kolom harga muncul hanya untuk owner → grid melebar jadi 3 kolom.
   Catatan: `.rcv-h` ada PADA elemen head itu sendiri, jadi jangan pakai
   `:has(.rcv-h)` (itu mencari anak, bukan dirinya) — head jadi 2 kolom dan
   label tidak sejajar dengan inputnya. */
.rcv-grup-head.rcv-h, .rcv-grup:has(.g-harga) { grid-template-columns:1fr 1fr 1.3fr; }
.rcv-grup .form-input-sm { padding:6px 8px !important; font-size:.8rem !important; }
.rcv-grup .g-lebar, .rcv-grup .g-jml, .rcv-grup .g-harga { text-align:right; }

/* =====================================================================
   OPNAME BERTINGKAT PER LEBAR
   =====================================================================
   Kalau bahan punya >1 lebar (hasil slit), isian "total meter" saja tidak
   cukup: sistem tidak tahu lebar mana yang berkurang. Karena itu petugas
   mengisi sisa nyata PER LEBAR.
   ===================================================================== */
.opn-baris { display:grid; grid-template-columns:1.2fr .9fr 1fr; gap:8px; align-items:center;
             padding:7px 9px; border:1px solid var(--border); border-radius:9px;
             margin-bottom:6px; background:var(--surface); }
.opn-baris-baru { border-style:dashed; background:var(--surface-2); }
.opn-lebar { font-size:.8rem; }
.opn-sistem { font-size:.8rem; text-align:right; font-variant-numeric:tabular-nums; }
.opn-baris .opn-mtr, .opn-baris .opn-mtr-lebar { text-align:right; }
.opn-baris .form-input-sm { padding:6px 8px !important; font-size:.8rem !important; }

/* ===== Opname PER ROLL (2026-10-12) =====================================
   Pemilik: "ini kan per roll ya sedangkan kamu permeter … bisa ga ya
   di tambah per roll jadi bisa di kurangi rollnya gt".
   Satu baris = satu LEBAR, isinya: [roll utuh] roll + [sisa] m = total m.
   Kolom ke-3 jadi lebih lebar karena memuat 2 isian + hasil. */
.opn-baris { grid-template-columns:1fr .75fr 1.85fr; }
.opn-inp { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; }
.opn-inp .form-input-sm { width:52px !important; flex:0 0 auto; }
.opn-inp-lbl { font-size:.68rem; color:var(--text-faint,#8a93a6); white-space:nowrap; }
.opn-inp-unit { font-size:.68rem; color:var(--text-faint,#8a93a6); margin-right:2px; }
.opn-total { margin-left:auto; font-size:.74rem; font-variant-numeric:tabular-nums;
             white-space:nowrap; }
.opn-sama { color:var(--success,#2f9e6e); font-size:.68rem; }
.opn-beda { color:var(--warning,#f5a623); font-size:.68rem; font-weight:600; }

@media (max-width:640px){
    .opn-baris { grid-template-columns:1fr 1fr; }
    .opn-baris .opn-lebar { grid-column:1 / -1; }
    .opn-baris .opn-inp { grid-column:1 / -1; justify-content:flex-start; }
}

/* ===== Catatan panel "Bahan vs Mesin Cetak" (2026-10-12) ================
   Menggantikan paragraf panjang + peringatan yang di layar sempit menjadi
   dinding teks. Sekarang: pemisah "·" otomatis jadi baru (satu per baris)
   di layar sempit, sehingga terbaca sebagai poin pendek, bukan satu blok. */
.verif-note { line-height:1.55; }
.verif-note-pisah { opacity:.45; padding:0 2px; }
@media (max-width:640px){
    .verif-note { line-height:1.65; }
    /* Pemisah jadi baru supaya terbaca sebagai 3 poin pendek, bukan satu blok.
       (Dulu peringatan panjang di sini mencapai 249 px di layar 420 px.) */
    .verif-note-pisah { display:block; height:0; overflow:hidden; margin:0; padding:0; }
}

/* ===== Daftar alasan selisih di modal Rincian Bahan vs Mesin (12 Okt 2026) ==
   BUG NYATA: poin dulu ditulis dengan pola <br> + titik tengah LANGSUNG di
   dalam .alert. Karena .alert memakai display:flex, setiap potongan teks dan
   <b> di dalamnya menjadi anonymous flex item yang BERJAJAR sendiri-sendiri
   dengan gap 12px — itulah sebabnya tulisan di modal terlihat aneh dan tidak
   rapi di layar sempit (keluhan pemilik 12 Okt 2026).
   Perbaikan: isi alert dibungkus <div> (lihat public/stock.php) dan poinnya
   memakai <ul> asli, jadi membungkus normal seperti paragraf di lebar apa pun. */
.verif-alasan { margin:6px 0 0; padding-left:18px; }
.verif-alasan li { margin-bottom:3px; }
.verif-alasan li:last-child { margin-bottom:0; }
.verif-alasan b { white-space:nowrap; }
@media (max-width:640px){
    .verif-alasan { padding-left:16px; }
    .verif-alasan li { margin-bottom:6px; line-height:1.6; }
    /* Label tebal tidak dipaksa satu baris di layar sempit (biar tidak melebar). */
    .verif-alasan b { white-space:normal; }
}

/* ===== Header panel "Bahan vs Mesin Cetak" (2026-10-12) =================
   Terukur SEBELUM perbaikan: di layar 380 px header mencapai 203 px dan
   judulnya TERPECAH 131 px, karena .card-title memakai flex nowrap sementara
   dua badge panjang (67 px + 126 px) + tombol 207 px ikut berdesakan.
   Pola yang benar: judul + tombol di baris atas, badge turun ke baris sendiri
   di layar sempit. */
.verif-head { display:flex; flex-wrap:wrap; align-items:center;
              justify-content:space-between; gap:8px; }
.verif-head-judul { display:flex; align-items:center; gap:8px;
                    min-width:0; line-height:1.3; }
.verif-head-judul span { overflow-wrap:anywhere; }
.verif-head-kanan { display:flex; align-items:center; gap:6px;
                    flex-wrap:wrap; min-width:0; }
.verif-head-tombol { white-space:nowrap; }
.verif-head .badge { white-space:nowrap; }
.verif-hasil-rincian { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.verif-mini-link { appearance:none; border:0; padding:0; background:transparent;
                   color:var(--info,#62b6cb); font:inherit; font-weight:700;
                   cursor:pointer; text-align:left; }
.verif-mini-link:hover { text-decoration:underline; }
.verif-mini-warning { color:var(--warning,#f5a623); }
.verif-mini-rincian { width:100%; margin-top:3px; }

@media (max-width:640px){
    .verif-head { gap:6px; }
    /* Tombol ikut baris judul (mengambang ke kanan), badge turun ke baris bawah */
    .verif-head-kanan { width:100%; justify-content:flex-start; gap:6px; }
    .verif-head-tombol { margin-left:auto; order:-1; }
    .verif-head .badge { font-size:.66rem; padding:3px 8px; }
}

/* ===== Panduan opname per roll (2026-10-12) ============================
   Menggantikan satu paragraf panjang yang di layar 420 px mencapai 249 px
   (dinding teks). Sekarang: judul + 2 langkah + rumus + 1 catatan, dan
   otomatis menjadi satu kolom pada layar sempit. */
.opn-panduan { background:var(--surface-2); border:1px solid var(--border);
               border-radius:10px; padding:9px 11px; margin-bottom:10px;
               font-size:.74rem; line-height:1.45; }
.opn-panduan-judul { font-weight:700; font-size:.78rem; margin-bottom:5px;
                     display:flex; align-items:center; gap:6px; }
.opn-panduan-judul i { color:var(--gold); }

.opn-panduan-langkah { list-style:none; margin:0 0 6px; padding:0;
                       display:grid; grid-template-columns:1fr 1fr; gap:3px 12px;
                       counter-reset:opnLangkah; }
.opn-panduan-langkah li { display:flex; align-items:flex-start; gap:6px; min-width:0; }
.opn-panduan-langkah li::before {
    counter-increment:opnLangkah; content:counter(opnLangkah);
    flex:0 0 auto; width:15px; height:15px; margin-top:1px; border-radius:50%;
    background:var(--gold); color:#1a1a1a; font-size:.62rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; }
.opn-panduan-langkah span { min-width:0; }

.opn-panduan-rumus { display:inline-block; max-width:100%;
                     background:var(--surface); border:1px dashed var(--border);
                     border-radius:7px; padding:3px 8px; margin-bottom:4px;
                     font-variant-numeric:tabular-nums; white-space:normal; }
.opn-panduan-rumus b { color:var(--gold); }
.opn-panduan-pisah { opacity:.5; }
.opn-panduan-catatan { color:var(--text-faint); font-size:.7rem; }

@media (max-width:640px){
    .opn-panduan { padding:8px 9px; font-size:.72rem; }
    .opn-panduan-langkah { grid-template-columns:1fr; gap:3px; }
    .opn-panduan-rumus { display:block; }
    .opn-panduan-pisah { display:none; }
    .opn-panduan-catatan { display:block; margin-top:3px; }
}

/* ===== Daftar hasil pemeriksaan kembar (nota supplier) ===== */
.nota-lap-list { margin: 6px 0 0; padding-left: 18px; }
.nota-lap-list li { font-size: .78rem; margin-bottom: 3px; line-height: 1.5; }

/* =====================================================================
   BAHAN BELUM BERGERAK (stok 0, belum ada pembelian)
   =====================================================================
   Sebelumnya SEMUA bahan yang didaftarkan langsung muncul sebagai kartu,
   termasuk yang stoknya masih 0 dan belum pernah dibeli. Akibatnya halaman
   penuh kartu "0" (mis. 4 varian tinta 1 L + 3 eyelet + 3 powder) sehingga
   bahan yang benar-benar perlu diawasi tenggelam.
   Sekarang yang belum bergerak diringkas di sini.
   ===================================================================== */
.stock-kosong-wrap { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
                     gap:8px; margin-top:10px; }
.stock-kosong-item { display:flex; align-items:center; justify-content:space-between; gap:10px;
                     padding:8px 11px; border:1px dashed var(--border); border-radius:10px;
                     background:var(--surface-2); font-size:.8rem;
                     /* min-width:0 wajib: tanpa ini, grid item menolak menyusut
                      * di bawah lebar minimum isinya → halaman bisa di-scroll
                      * ke samping di HP (terukur meluber 35px). */
                     min-width:0; flex-wrap:wrap; }
.stock-kosong-item > span:first-child { font-weight:600; min-width:0; word-break:break-word; }

/* Di layar sempit, kolom grid stok-kosong diturunkan jadi 1 kolom dan
 * tombolnya boleh turun ke baris berikutnya. */
@media (max-width: 640px) {
    .stock-kosong-wrap { grid-template-columns: 1fr; }
}

/* =====================================================================
 * 27b. KARTU STOK — FORM FILTER & GRID FORM PINJAMAN (2026-10-09)
 * =====================================================================
 * MENGGANTIKAN INLINE STYLE. Sebelumnya lebar input diatur lewat
 * `style="width:auto"` dan grid form pinjaman lewat
 * `style="grid-template-columns:1fr 1fr"`.
 *
 * MASALAHNYA: inline style MENANG atas media query. Jadi walau halaman sudah
 * punya aturan layar sempit, inline style tetap memaksa lebarnya dan isinya
 * meluber keluar layar (terukur 34px pada layar 312px) → halaman bisa
 * di-scroll ke samping di HP.
 *
 * SEKARANG lebarnya diatur di sini, jadi media query bisa menimpanya.
 * ===================================================================== */
.stock-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.stock-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.stock-filter-field .form-input,
.stock-filter-field .form-select { width: auto; min-width: 170px; }
.stock-filter-field-wide .form-select { min-width: 220px; max-width: 320px; }
.stock-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Grid 2 kolom untuk form pinjaman (jumlah + tanggal).
 * `minmax(0,1fr)` penting: tanpa angka 0 sebagai minimum, kolom menolak
 * menyusut di bawah lebar isinya sehingga grid bisa melebihi lebar modal. */
.loan-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* =====================================================================
 * PENCARIAN PELANGGAN DI MODAL PINJAMKAN (2026-10-09)
 * =====================================================================
 * Menggantikan <select> berisi ratusan pelanggan yang harus digeser satu per
 * satu. Kotak cari + daftar saran, polanya sama dengan form order supaya
 * operator tidak perlu belajar cara baru.
 * ===================================================================== */
.loan-cust-search { position: relative; }
.loan-cust-search .form-input { padding-left: 36px; padding-right: 36px; }
.loan-cust-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); font-size: 13px; pointer-events: none;
}
.loan-cust-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-faint);
    cursor: pointer; padding: 4px 6px; line-height: 1; border-radius: 6px;
}
.loan-cust-clear:hover { color: var(--danger); background: var(--danger-bg); }

/* Daftar saran: dibatasi tingginya supaya modal tidak jadi sangat panjang,
 * dan WAJIB bisa di-scroll sendiri (bukan mendorong seluruh modal). */
.loan-cust-suggest {
    margin-top: 6px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); max-height: 230px; overflow-y: auto;
    box-shadow: var(--shadow);
}
.loan-cust-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
    font-size: 13px; min-width: 0;
}
.loan-cust-opt:last-child { border-bottom: none; }
.loan-cust-opt:hover, .loan-cust-opt:focus { background: var(--surface-2); }
.loan-cust-opt img, .loan-cust-opt .loan-cust-ava {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--text-faint);
}
.loan-cust-opt-body { min-width: 0; flex: 1; }
.loan-cust-opt-name { font-weight: 600; overflow-wrap: anywhere; }
.loan-cust-opt-sub { font-size: 11.5px; color: var(--text-faint); overflow-wrap: anywhere; }
.loan-cust-empty { padding: 12px; font-size: 12.5px; color: var(--text-faint); text-align: center; }

/* Kartu pelanggan yang sudah dipilih */
.loan-cust-picked {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px; padding: 9px 12px;
    border: 1px solid var(--success); background: var(--success-bg);
    border-radius: var(--radius-sm); font-size: 13px; min-width: 0;
}
.loan-cust-picked i.fa-circle-check { color: var(--success); flex-shrink: 0; }
.loan-cust-picked .loan-cust-opt-body { min-width: 0; }

@media (max-width: 640px) {
    /* Filter menumpuk penuh selebar layar */
    .stock-filter-field,
    .stock-filter-field .form-input,
    .stock-filter-field .form-select,
    .stock-filter-field-wide .form-select { width: 100%; min-width: 0; max-width: none; }
    .stock-filter-actions { width: 100%; }
    .stock-filter-actions .btn { flex: 1 1 auto; justify-content: center; }
    /* Form pinjaman: 1 kolom supaya isian tidak terjepit */
    .loan-grid-2 { grid-template-columns: 1fr; }
}

/* =====================================================================
 * NOTA SUPPLIER, ONGKIR EKSPEDISI & RIWAYAT HARGA BAHAN
 * =====================================================================
 * KENAPA DIPINDAH KE SINI (2026-10-09)
 * ---------------------------------------------------------------------
 * Kelas `.nota-*` dan `.nq-*` SEBELUMNYA didefinisikan sebagai <style>
 * di dalam `public/nota_supplier.php` saja. Akibatnya halaman LAIN yang
 * memakai kelas sama — misalnya `public/ongkir_ekspedisi.php` yang memakai
 * `.nota-drop` untuk kotak unggah — tampil TANPA GAYA (kotaknya hilang,
 * teks berantakan). Gejala yang dilaporkan pemilik usaha:
 *   "jlek bgt tampilanya apakah sudah bootstrap cek dong secara menyeluruh"
 *
 * Karena kelas-kelas ini dipakai bersama, tempatnya memang di app.css —
 * dimuat semua halaman lewat header.php.
 *
 * JANGAN menaruh definisi `.nota-*` / `.nq-*` kembali ke dalam satu halaman
 * saja: halaman lain akan kehilangan gayanya lagi.
 * ===================================================================== */

.nq-papan{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.nq-stat{ padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.nq-stat span{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-faint); }
.nq-stat b{ display:block; font-size:1.15rem; margin-top:2px; }
.nq-stat.nq-tunggu b{ color:var(--accent); }
.nq-stat.nq-ok b{ color:var(--success); }
.nq-stat.nq-gagal b{ color:var(--danger); }
.nq-stat.nq-kembar b{ color:var(--warning); }

.nq-bar-wrap{ margin-top:12px; }
.nq-bar{ height:9px; border-radius:6px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); }
.nq-bar-isi{ height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .3s; }
.nq-bar-teks{ font-size:.72rem; color:var(--text-faint); margin-top:5px; }

.nq-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nq-table{ min-width:760px; }
.nq-table td{ vertical-align:top; }
.nq-nama{ font-weight:600; font-size:.82rem; word-break:break-word; }
.nq-pesan{ font-size:.72rem; line-height:1.45; margin-top:3px; }
.nq-kode{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem;
          padding:2px 6px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border);
          white-space:nowrap; }

/* ---- Unggah ---- */
.nota-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
            padding:24px 16px; border:2px dashed var(--border); border-radius:14px; background:var(--surface);
            cursor:pointer; text-align:center; transition:border-color .2s, background .2s; }
.nota-drop:hover{ border-color:var(--accent); background:rgba(245,166,35,.05); }
.nota-drop i{ font-size:30px; color:var(--accent); }
.nota-drop .t{ font-weight:700; font-size:.95rem; }
.nota-drop .s{ font-size:.75rem; color:var(--text-faint); }
.nota-drop input{ display:none; }
.nota-nama{ margin-top:10px; font-size:.85rem; font-weight:600; color:var(--success); display:none;
            max-height:180px; overflow:auto; }
.nota-nama ul{ margin:6px 0 0; padding-left:18px; font-weight:500; color:var(--text-muted); }
.nota-nama li{ font-size:.78rem; }
.nq-unggah-log{ margin-top:10px; max-height:190px; overflow:auto; }
.nq-unggah-log div{ font-size:.76rem; padding:3px 0; border-bottom:1px dashed var(--border); }

/* ---- Biaya kirim ---- */
.nota-kirim{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:14px;
             background:var(--surface); }
.nota-kirim-judul{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.nota-kirim-judul i{ color:var(--accent); }
.nota-kirim-judul span{ font-size:.72rem; color:var(--text-faint); line-height:1.5; }
.nota-kirim-isi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.nota-kirim-field{ display:flex; flex-direction:column; gap:4px; }
.nota-kirim-field span{ font-size:.74rem; font-weight:600; color:var(--text-muted); }

/* ---- Mode ---- */
.nota-mode{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:10px; margin-bottom:12px; }
.nota-mode-opt{ display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border);
                border-radius:12px; background:var(--surface); cursor:pointer; transition:border-color .2s, background .2s; }
.nota-mode-opt:hover{ border-color:var(--accent); }
.nota-mode-opt input{ margin-top:4px; flex:0 0 auto; }
.nota-mode-opt b{ display:block; font-size:.86rem; }
.nota-mode-opt span{ display:block; font-size:.72rem; color:var(--text-faint); line-height:1.45; margin-top:3px; }
.nota-mode-opt:has(input:checked){ border-color:var(--accent); background:rgba(245,166,35,.06); }

/* ---- Berkas periksa ---- */
.nota-berkas{ border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:14px; background:var(--surface); }
.nota-berkas-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.nota-berkas-judul{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.nota-berkas-judul b{ font-size:.85rem; word-break:break-word; }
.nota-head{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
            padding:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; margin-bottom:14px; }
.nota-head span{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.5px;
                 text-transform:uppercase; color:var(--text-faint); }
.nota-head b{ display:block; font-size:.84rem; word-break:break-word; }
.nota-head .nominal b{ color:var(--accent); font-size:1rem; }

.nota-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nota-table{ min-width:900px; }
.nota-table td{ vertical-align:top; }
.nota-table tr.nota-cek{ background:rgba(245,166,35,.07); }
.nota-table tr.nota-cek td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }
.nota-nama-barang{ font-weight:600; font-size:.82rem; line-height:1.4; word-break:break-word; }
.form-input-sm{ padding:6px 8px !important; font-size:.8rem !important; }
.nota-qty, .nota-harga{ text-align:right; }
.nota-alt{ border:1px solid var(--border); background:var(--surface); border-radius:7px;
           padding:2px 7px; font-size:.7rem; cursor:pointer; color:var(--text-muted); }
.nota-alt:hover{ border-color:var(--accent); color:var(--accent); }
.nota-alt-baru{ border-style:dashed; }

.nota-foot{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-top:14px;
            padding-top:14px; border-top:1px solid var(--border); }
.nota-total{ text-align:right; }
.nota-total span{ display:block; font-size:.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; }
.nota-total b{ font-size:1.15rem; color:var(--accent); }
.nota-teks{ max-height:280px; overflow:auto; font-size:.7rem; line-height:1.45; white-space:pre-wrap;
            background:var(--surface-2); padding:12px; border-radius:10px; border:1px solid var(--border);
            margin-top:8px; color:var(--text-muted); }
.nota-lap-list{ margin:6px 0 0; padding-left:18px; }
.nota-lap-list li{ font-size:.78rem; margin-bottom:3px; line-height:1.5; }
.hp-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:1400px){
    .nota-table, .nq-table{ min-width:0; }
    .nota-table thead, .nq-table thead{ display:none; }
    .nota-table, .nota-table tbody, .nota-table tr, .nota-table td,
    .nq-table, .nq-table tbody, .nq-table tr, .nq-table td{ display:block; width:100%; }
    .nota-table tr, .nq-table tr{ border:1px solid var(--border); border-radius:11px; margin-bottom:10px; padding:8px 0; }
    .nota-table td, .nq-table td{ display:flex; justify-content:space-between; align-items:center; gap:10px;
                    padding:6px 12px; border:none; text-align:right; }
    .nota-table td::before, .nq-table td::before{ content:attr(data-label); font-size:.68rem; font-weight:700;
                            text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint);
                            flex:0 0 auto; margin-right:10px; text-align:left; }
    .nota-table td:first-child, .nq-table td:first-child{ justify-content:flex-start; }
    .nota-table td:first-child::before, .nq-table td:first-child::before{ display:none; }
    .nota-table td[data-label="Nama Barang"], .nota-table td[data-label="Kode Barang"]{ display:block; text-align:left; }
    .nota-table td[data-label="Nama Barang"]::before, .nota-table td[data-label="Kode Barang"]::before{ display:none; }
    .nota-table td[data-label="Produk di Sistem"]{ display:block; text-align:left; }
    .nota-table td[data-label="Produk di Sistem"]::before{ display:block; margin-bottom:4px; }
    .nota-table .nota-qty, .nota-table .nota-harga{ max-width:130px; }
}

.hp-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.hp-table td{ vertical-align:top; }
.hp-table th.num, .hp-table td.num{ text-align:right; white-space:nowrap; }

@media (max-width:1400px){
    .hp-table{ min-width:0 !important; }
    .hp-table thead{ display:none; }
    .hp-table, .hp-table tbody, .hp-table tr, .hp-table td{ display:block; width:100%; }
    .hp-table tr{ border:1px solid var(--border); border-radius:11px; margin-bottom:10px; padding:8px 0; }
    .hp-table td{ display:flex; justify-content:space-between; align-items:center; gap:10px;
                  padding:6px 12px; border:none; text-align:right; }
    .hp-table td::before{ content:attr(data-label); font-size:.68rem; font-weight:700;
                          text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint);
                          flex:0 0 auto; margin-right:10px; text-align:left; }
    .hp-table td[data-label="Bahan"]{ display:block; text-align:left; }
    .hp-table td[data-label="Bahan"]::before{ display:none; }
    .hp-table td[data-label="Barang di Nota"]{ display:block; text-align:left; }
    .hp-table td[data-label="Barang di Nota"]::before{ display:none; }
    .hp-table td[data-label="Supplier"]{ display:block; text-align:left; }
    .hp-table td[data-label="Supplier"]::before{ display:block; margin-bottom:4px; }
}

/* =====================================================================
 * KARTU METRIK RIWAYAT HARGA BAHAN (.hp-kartu)
 * =====================================================================
 * Ringkasan cepat di atas tabel: bahan dipantau, total belanja, jumlah
 * bahan yang harganya naik/turun, harga tertinggi, rata-rata per pembelian.
 * Memakai variabel warna yang sama dengan kartu lain agar konsisten.
 * ===================================================================== */
.hp-kartu-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px;
}
.hp-kartu{
    padding:14px 15px; border:1px solid var(--border); border-radius:14px;
    background:var(--surface); position:relative; overflow:hidden;
    transition:border-color .18s, transform .18s;
}
.hp-kartu:hover{ border-color:var(--accent); transform:translateY(-1px); }
.hp-kartu-icon{
    width:32px; height:32px; border-radius:9px; display:flex; align-items:center;
    justify-content:center; font-size:.86rem; margin-bottom:9px;
    background:var(--surface-2); color:var(--text-muted);
}
.hp-kartu-icon.gold{ background:rgba(245,166,35,.14); color:var(--accent); }
.hp-kartu-icon.merah{ background:rgba(239,68,68,.14); color:var(--danger); }
.hp-kartu-icon.hijau{ background:rgba(34,197,94,.14); color:var(--success); }
.hp-kartu-label{
    font-size:.66rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    color:var(--text-faint); margin-bottom:3px;
}
.hp-kartu-nilai{ font-size:1.3rem; font-weight:800; line-height:1.2; }
.hp-kartu-sub{ font-size:.72rem; color:var(--text-faint); margin-top:4px; line-height:1.45; }

/* =====================================================================
 * PEMANDU ALUR BAHAN (.alur-bahan)
 * =====================================================================
 * Strip 3 tahap yang tampil di Nota Supplier, Ongkir Ekspedisi, dan
 * Riwayat Harga Bahan. Gunanya supaya petugas tidak perlu menghafal
 * urutannya dan langsung tahu tahap mana yang masih ada antrean.
 *
 * Kelas `ada-kerjaan` = tahap itu masih menyimpan pekerjaan (disorot),
 * `aktif` = sedang dibuka. Jadi "mau ke mana berikutnya" terlihat sendiri.
 * ===================================================================== */
.alur-bahan{
    border:1px solid var(--border); border-radius:14px; background:var(--surface);
    padding:12px 14px; margin-bottom:16px;
}
.alur-bahan-judul{
    display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap;
}
.alur-bahan-judul i{ color:var(--accent); }
.alur-bahan-judul > span:first-of-type{ font-weight:700; font-size:.86rem; }
.alur-bahan-hint{ font-size:.72rem; color:var(--text-faint); }
.alur-bahan-strip{
    display:flex; align-items:stretch; gap:6px; flex-wrap:wrap;
}
.alur-bahan-panah{
    display:flex; align-items:center; color:var(--text-faint); font-size:.7rem; padding:0 2px;
}
.alur-bahan-tahap{
    flex:1 1 210px; display:flex; align-items:center; gap:10px;
    padding:10px 12px; border:1px solid var(--border); border-radius:11px;
    background:var(--surface-2); text-decoration:none; color:inherit;
    transition:border-color .18s, background .18s, transform .18s;
}
.alur-bahan-tahap:hover{ border-color:var(--accent); transform:translateY(-1px); }
.alur-bahan-tahap.aktif{ border-color:var(--accent); background:rgba(245,166,35,.08); }
.alur-bahan-tahap.ada-kerjaan{ border-color:var(--accent); }
.alur-bahan-no{
    flex:0 0 auto; width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:800;
    background:var(--surface); color:var(--text-muted); border:1px solid var(--border);
}
.alur-bahan-tahap.aktif .alur-bahan-no,
.alur-bahan-tahap.ada-kerjaan .alur-bahan-no{
    background:var(--accent); color:#111; border-color:var(--accent);
}
.alur-bahan-isi{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.alur-bahan-nama{ font-size:.82rem; font-weight:700; display:flex; align-items:center; gap:5px; }
.alur-bahan-nama i{ font-size:.74rem; color:var(--accent); }
.alur-bahan-ket{ font-size:.68rem; color:var(--text-faint); line-height:1.4; }
.alur-bahan-badge{
    flex:0 0 auto; font-size:.64rem; font-weight:700; padding:3px 7px; border-radius:20px;
    background:var(--accent); color:#111; white-space:nowrap;
}
.alur-bahan-badge.halus{ background:var(--surface); color:var(--text-faint); border:1px solid var(--border); font-weight:600; }
.alur-bahan-ingat{
    margin-top:10px; font-size:.74rem; color:var(--text-muted);
    padding:7px 10px; border-radius:9px; background:rgba(239,68,68,.09);
    border:1px solid rgba(239,68,68,.25);
}
.alur-bahan-ingat i{ color:var(--danger); }
@media (max-width:720px){
    .alur-bahan-panah{ display:none; }
    .alur-bahan-tahap{ flex:1 1 100%; }
}

/* =====================================================================
 * PELENGKAP: sel gambar produk & kop halaman
 * =====================================================================
 * `.product-thumb-cell` dipakai halaman Produk untuk kolom gambar. Tidak
 * punya definisi sebelumnya, sehingga kolomnya melebar tidak tentu. Lebar
 * dikunci di sini supaya tabel tetap rapi.
 *
 * `.nota-aktif` / `.nota-produk` / `.nota-jumlah` / `.nq-badge` / `.rp-input`
 * / `.price-input` SENGAJA tidak diberi gaya: keempatnya cuma PENANDA untuk
 * JavaScript (mencari baris lewat `data-row`), dan elemennya sudah memakai
 * kelas bergaya (`badge`, `form-input`, `form-select-sm`).
 * ===================================================================== */
.product-thumb-cell{ width:64px; }

/* Keadaan tahap pada pemandu alur:
   .beres      = tahap sudah selesai (angka diganti centang)
   .alur-bahan-kaki = catatan bahwa hasil akhir ada di Riwayat Harga
   Ditambahkan 2026-10-09 setelah pemilik menegur alurnya "aneh". */
.alur-bahan-tahap.beres{ border-color:rgba(34,197,94,.35); }
.alur-bahan-tahap.beres .alur-bahan-no{
    background:rgba(34,197,94,.16); color:var(--success);
    border-color:rgba(34,197,94,.4);
}
.alur-bahan-tahap.beres .alur-bahan-nama i{ color:var(--success); }
.alur-bahan-kaki{
    margin-top:10px; font-size:.73rem; color:var(--text-faint);
    padding-top:9px; border-top:1px dashed var(--border);
}
.alur-bahan-kaki i{ color:var(--accent); }

/* =====================================================================
 * TAB MENU (.menu-tab)
 * =====================================================================
 * Beberapa menu sidebar yang sejenis digabung jadi SATU menu, lalu di
 * dalamnya ada tab untuk berpindah halaman (mis. Pesanan → Daftar | Tambah).
 * Tujuannya memangkas sidebar dari 35 menjadi 28 menu.
 *
 * Tab ini TIDAK mengubah logika halaman — hanya strip navigasi di atasnya,
 * jadi form/otorisasi tiap halaman tetap utuh.
 * ===================================================================== */
.menu-tab{
    display:flex; gap:6px; flex-wrap:wrap; align-items:center;
    padding:6px; margin-bottom:16px;
    border:1px solid var(--border); border-radius:12px;
    background:var(--surface);
}
.menu-tab-item{
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 13px; border-radius:9px;
    font-size:.82rem; font-weight:600; text-decoration:none; color:var(--text-muted);
    transition:background .16s, color .16s;
}
.menu-tab-item i{ font-size:.78rem; }
.menu-tab-item:hover{ background:var(--surface-2); color:var(--text); }
.menu-tab-item.aktif{
    background:var(--accent); color:#111; font-weight:700;
}
.menu-tab-item.aktif i{ color:#111; }
@media (max-width:600px){
    .menu-tab{ gap:4px; padding:5px; }
    .menu-tab-item{ padding:7px 10px; font-size:.76rem; }
}

/* =====================================================================
 * 37. ANTI-MELUBER — DASAR RESPONSIVE GLOBAL (2026-10-09)
 * =====================================================================
 * Pemilik: "kalau ada form atau apapun yang tidak responsive di web ini
 * benarkan dong biar responsive".
 *
 * Setelah diaudit pada layar 390px, ditemukan 6 halaman yang isinya meluber
 * keluar layar sehingga seluruh halaman bisa di-scroll ke samping:
 *   ai (70px), iklan (50px), landing_settings (140px), link_tracker (132px),
 *   nota_supplier (136px), settings (254px)
 *
 * SEBABNYA SATU POLA YANG SAMA, bukan 6 bug berbeda:
 *   Wadah FLEX/GRID secara bawaan punya `min-width: auto` — artinya wadah itu
 *   MENOLAK menyusut lebih kecil dari isinya. Kalau di dalamnya ada tabel lebar
 *   atau teks panjang tanpa spasi, wadahnya ikut melebar melebihi layar, dan
 *   isinya "offside" (keluar layar).
 *
 * SOLUSI: `min-width: 0` pada wadah flex/grid supaya boleh menyusut.
 *
 * Ini SENGAJA dipasang lebar (bukan per halaman) supaya halaman baru tidak
 * mengulang masalah yang sama. Efeknya hanya mengizinkan penyusutan — tata
 * letak di layar lebar TIDAK berubah.
 * ===================================================================== */

/* Wadah utama tidak boleh melebar melebihi area konten.
 *
 * `overflow-x: clip` di app-content adalah KUNCI-nya.
 * BUG NYATA yang ditemukan (2026-10-09): wadah scroll (`.lt-table-wrap`,
 * `.hp-wrap`, `.table-responsive`) sudah benar — lebarnya 270px dengan
 * `overflow-x:auto`, dan tabel 900px ada DI DALAMNYA. Tetapi halaman TETAP
 * bisa di-scroll ke samping 132px. Sebabnya: browser tetap menyumbang lebar
 * isi wadah scroll itu ke lebar dokumen karena tidak ada satu pun leluhur yang
 * memutusnya. `overflow-x: clip` menutup kebocoran itu di level halaman.
 *
 * Dipakai `clip` (bukan `hidden`) karena `clip` TIDAK membuat elemen jadi
 * wadah scroll baru, sehingga `position: sticky` di dalamnya tetap bekerja. */
.app-content, .app-main, main { min-width: 0; }
.app-content { overflow-x: clip; }

/* Jaring pengaman terakhir: apa pun yang masih meluber tidak boleh menggeser
 * seluruh halaman. Wadah scroll yang memang sengaja (tabel lebar) tetap bisa
 * di-scroll karena mereka punya overflow-x:auto sendiri. */
.app-shell { min-width: 0; overflow-x: clip; }
.card, .card-body, .card-header, .card-footer { min-width: 0; }

/* Wadah flex/grid: izinkan menyusut, kalau tidak isi lebar akan mendorongnya */
.d-flex, .grid, .grid-2, .grid-3, .grid-4, .grid-5,
.dash-grid, .dash-row-top, .dash-row-bottom, .dash-col,
.item-grid, .item-subgrid, .item-grid-bottom { min-width: 0; }
.d-flex > *, .grid > * { min-width: 0; }

/* TABEL LEBAR: di layar sempit boleh di-scroll SENDIRI (bukan menggeser
 * seluruh halaman). Wrapper `.table-responsive` & `.hp-wrap` sudah punya
 * overflow-x:auto — di sini hanya dipastikan lebarnya tidak melebihi induk. */
.table-responsive, .hp-wrap { max-width: 100%; min-width: 0; }

/* Tabel yang TIDAK dibungkus wrapper: beri kemampuan scroll sendiri lewat
 * pembungkus otomatisnya di layar sempit. */
@media (max-width: 768px) {
    .card-body > table.table,
    .card > table.table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Teks panjang tanpa spasi (URL, Place ID, token, hash) tidak boleh
 * memaksa halaman melebar. */
code, kbd, samp, pre { overflow-wrap: anywhere; word-break: break-word; }
code { word-break: break-all; }

/* Semua media & iframe dibatasi lebar induknya */
iframe { max-width: 100%; }

/* Tabel: header & sel boleh membungkus teks (sudah ada, ditegaskan) */
table { max-width: 100%; }

/* ===================================================================
   MODAL: LANGKAH BERTAHAP + GALERI BUKTI + TABEL GULIR
   Dipakai halaman Belum Bayar (modal Catat Pembayaran & Cek Daftar).
   Dulu diletakkan inline HANYA di dalam modal Catat Pembayaran, sehingga
   modal Cek Daftar tampil tanpa gaya saat modal itu tidak dirender.
   =================================================================== */
.bayar-step{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:12px;}
.bayar-step-title{font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bayar-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:12px;font-weight:700;flex:0 0 auto;}
.nota-wrap{max-height:270px;overflow:auto;border:1px solid var(--border);border-radius:8px;}
.nota-wrap table{margin:0;}
.bukti-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;}
.bukti-item{position:relative;display:block;border:2px solid var(--border);border-radius:8px;overflow:hidden;
  cursor:pointer;background:var(--surface-2);}
.bukti-item.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(99,102,241,.35);}
.bukti-item input{position:absolute;opacity:0;pointer-events:none;}
.bukti-item img{display:block;width:100%;height:86px;object-fit:cover;}
.bukti-item span{display:block;font-size:10px;text-align:center;padding:3px 2px;color:var(--text-muted,#888);}