/* ==========================================================================
   Core Logic Enterprise — Design System (DESIGN.md)
   Corporate Blue + Slate. Inter + JetBrains Mono. Functional minimalism.
   Layered on top of Bootstrap 5 (overrides).
   ========================================================================== */

:root {
    --primary: #0f4c81;
    --primary-dark: #00355f;
    --primary-hover: #073c69;
    --on-primary: #ffffff;

    --surface: #f9f9fe;
    --surface-muted: #f8fafc;
    --surface-container: #ffffff;
    --surface-container-low: #f1f5f9;

    --on-surface: #191c1f;
    --on-surface-variant: #42474f;
    --outline: #727780;
    --border-subtle: #e2e8f0;
    --border-strong: #c2c7d1;

    --status-draft: #94a3b8;
    --status-submitted: #3b82f6;
    --status-approved: #10b981;
    --status-rejected: #ef4444;
    --status-in-transit: #f59e0b;
    --status-pending: #f97316;

    --sidebar-w: 250px;
    --radius: 0.25rem;
    --radius-lg: 0.5rem;

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    color: var(--on-surface);
    background: var(--surface-muted);
}

/* Tabular numbers everywhere numbers live (right-aligned cells, mono helper) */
.data-mono, code, kbd, samp,
.table td.text-end, .table th.text-end,
.metric-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--on-surface);
    letter-spacing: -0.01em;
}
.text-muted { color: var(--on-surface-variant) !important; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* ---------- App shell / sidebar ---------- */
.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--surface-container);
    border-right: 1px solid var(--border-subtle);
    display: flex; flex-direction: column;
    z-index: 1040;
    overflow-y: auto;
}
.sidebar-brand {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.sidebar-brand .name { font-weight: 700; font-size: 1.05rem; color: var(--primary-dark); letter-spacing: -0.02em; }
.sidebar-brand .sub { font-size: 0.72rem; color: var(--on-surface-variant); letter-spacing: 0.02em; }
/* Logo Wisa Coffee: emas + "Coffee" hitam, latar putih/terang —
   tampil langsung tanpa chip gelap. */
.brand-logo { display: block; line-height: 0; }
.brand-logo img { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto; }
.sidebar-brand .brand-logo { margin-bottom: 0.35rem; }

.sidebar-nav { padding: 0.75rem 0.75rem 1rem; flex: 1; }
.nav-section-title {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--outline); padding: 0.9rem 0.75rem 0.35rem;
}
.sidebar-link {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.5rem 0.75rem; margin-bottom: 1px;
    border-radius: var(--radius);
    color: var(--on-surface-variant); font-weight: 500; font-size: 0.875rem;
    line-height: 1.2;
}
.sidebar-link:hover { background: var(--surface-container-low); color: var(--on-surface); text-decoration: none; }
.sidebar-link.active { background: var(--primary); color: #fff; }
.sidebar-link.active .ico { opacity: 1; }
.sidebar-link .ico { width: 18px; text-align: center; opacity: 0.7; font-size: 0.95rem; }

.sidebar-foot { border-top: 1px solid var(--border-subtle); padding: 0.75rem; }

/* Main content offset */
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1030;
    background: var(--surface-container);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.65rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
}
.topbar .user-name { font-weight: 600; font-size: 0.85rem; line-height: 1.1; }
.topbar .user-scope { font-size: 0.72rem; color: var(--on-surface-variant); }
.app-content { padding: 1.5rem; flex: 1; width: 100%; }

/* Hamburger: ikon 3 garis polos (bukan kotak tombol berwarna). */
.hamburger { display: none; }
.btn.hamburger {
    background: transparent; border-color: transparent; box-shadow: none;
    color: var(--on-surface-variant); padding: 0.2rem 0.35rem;
    font-size: 1.5rem; line-height: 1;
}
.btn.hamburger:hover, .btn.hamburger:focus {
    background: var(--surface-container-low); border-color: transparent;
    color: var(--on-surface); box-shadow: none;
}

/* ---------- Cards ---------- */
.card {
    background: var(--surface-container);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.card .card-body { padding: 1.1rem 1.25rem; }
.card h2.h6, .card .card-title { font-size: 0.95rem; }

/* Stat / metric card */
.stat-card .stat-label {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--on-surface-variant);
}
.metric-value { font-size: clamp(1.2rem, 0.85rem + 1.5vw, 1.7rem); font-weight: 700; line-height: 1.15; color: var(--on-surface); white-space: nowrap; }
.stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--on-surface-variant); }
.stat-card .stat-sub { font-size: 0.78rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius); font-weight: 500; font-size: 0.875rem; }
.btn-sm { font-size: 0.8rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-success { background: var(--status-approved); border-color: var(--status-approved); }
.btn-success:hover { background: #0ea472; border-color: #0ea472; }
.btn-outline-secondary { color: var(--on-surface-variant); border-color: var(--border-strong); }
.btn-outline-secondary:hover { background: var(--surface-container-low); color: var(--on-surface); border-color: var(--outline); }
.btn-link { color: var(--primary); font-weight: 500; }
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.15);
}

/* ---------- Status badges (pill, uppercase, label-sm) ---------- */
.badge {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.35em 0.7em; border-radius: 9999px; line-height: 1;
}
.badge.text-bg-secondary { background: #eef1f5 !important; color: var(--status-draft) !important; }
.badge.text-bg-warning { background: #fff4e6 !important; color: #b45309 !important; }
.badge.text-bg-info { background: #e6f0ff !important; color: var(--status-submitted) !important; }
.badge.text-bg-primary { background: #e3edf9 !important; color: var(--primary) !important; }
.badge.text-bg-success { background: #e7f8f0 !important; color: #067a51 !important; }
.badge.text-bg-danger { background: #feecec !important; color: var(--status-rejected) !important; }
.badge.text-bg-light { background: var(--surface-container-low) !important; color: var(--on-surface-variant) !important; }

/* ---------- Tables ---------- */
.table { color: var(--on-surface); border-color: var(--border-subtle); margin-bottom: 0; }
.table > thead th {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--on-surface-variant); background: var(--surface-muted);
    border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.table > tbody > tr { border-color: var(--border-subtle); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; } /* no zebra */
.table-hover > tbody > tr:hover > * { background: var(--surface-container-low); }
.table td, .table th { padding: 0.6rem 0.75rem; vertical-align: middle; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    color: var(--on-surface); font-size: 0.875rem;
}
.form-control:focus, .form-select:focus { border-color: var(--primary); }
.form-label { font-weight: 500; font-size: 0.82rem; color: var(--on-surface-variant); margin-bottom: 0.25rem; }
.form-text { font-size: 0.78rem; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius-lg); border: 1px solid transparent; font-size: 0.875rem; }
.alert-success { background: #e7f8f0; border-color: #b8ebd4; color: #067a51; }
.alert-danger { background: #feecec; border-color: #f7c6c6; color: #b1101a; }
.alert-info { background: #e6f0ff; border-color: #c4dbff; color: #0b4a86; }

/* ---------- Page header helper ---------- */
.page-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }

/* ---------- Auth (guest) shell: split gambar kiri + form kanan ---------- */
.auth-shell { min-height: 100vh; display: flex; background: var(--surface-muted); }
.auth-side {
    flex: 1 1 52%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex; align-items: flex-end;
}
/* Overlay gelap merata (gaya hero) — gambar meredup halus, teks tetap terbaca */
.auth-side::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(22, 15, 8, 0.78), rgba(22, 15, 8, 0.42) 45%, rgba(22, 15, 8, 0.32));
}
.auth-side-content { position: relative; z-index: 1; padding: 3rem 3.25rem; color: #fff; max-width: 620px; }
.auth-side-content .badge-brand {
    display: inline-block; background: #f2c94c; color: #3d2b12;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.auth-side-content h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.15; margin-bottom: 0.75rem; color: #fff;
}
.auth-side-content p { font-size: 1rem; color: rgba(255,255,255,0.85); margin: 0; }
.auth-main {
    flex: 1 1 48%;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
@media (max-width: 991.98px) {
    .auth-side { display: none; }
}
/* Form tamu ala contoh: lebar, polos di atas panel putih (tanpa kotak kartu) */
.auth-card { width: 100%; max-width: 640px; padding: 2rem 1rem; }
.auth-card .form-control, .auth-card .form-select { padding: 0.7rem 0.95rem; font-size: 0.95rem; }
.auth-card .btn-primary { padding: 0.7rem 1rem; font-size: 1rem; font-weight: 600; }
.auth-card h1, .auth-card h2, .auth-card h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-brand .brand-logo { margin: 0 auto 0.5rem; max-width: 600px; }
.auth-brand .brand-logo img { max-width: 600px; }
.auth-brand .name { font-weight: 700; font-size: 1.25rem; color: var(--primary-dark); letter-spacing: -0.02em; }
.auth-brand .sub { font-size: 0.8rem; color: var(--on-surface-variant); }
.auth-card .row { margin: 0; }
.auth-card [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }

/* ---------- Index tables as contained panels ----------
   Tabel tingkat-atas (langsung di area konten, bukan di dalam .card) dibungkus
   tampilan panel putih ber-border. Tabel di dalam .card tidak terpengaruh. */
.app-content > table.table,
.app-content > .table-responsive {
    background: var(--surface-container);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
/* Pembungkus scroll: JANGAN clip — biar bisa digeser horizontal (tablet/mobile) */
.app-content > .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.app-content > table.table { overflow: hidden; margin-bottom: 0; }
.app-content > .table-responsive > .table { margin-bottom: 0; }
.app-content > table.table > tbody > tr:last-child > * ,
.app-content > .table-responsive > .table > tbody > tr:last-child > * { border-bottom: 0; }
.app-content > table.table > tfoot { background: var(--surface-muted); }
.app-content > table.table > tfoot th { border-top: 1px solid var(--border-subtle); }

/* Semua pembungkus tabel bisa digeser + scrollbar tipis yang terlihat */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }

/* Drag-to-scroll (app.js): kursor grab hanya bila kontennya overflow
   (.can-drag); saat ditarik (.is-dragging) matikan seleksi teks. */
.table-responsive.can-drag { cursor: grab; }
.table-responsive.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.table-responsive.is-dragging * { cursor: grabbing !important; }

/* First column (reference/SKU) reads as a technical code */
.table td:first-child a, .table td:first-child > code { font-family: var(--font-mono); font-size: 0.82rem; }

/* ---------- Pagination ---------- */
.pagination { margin: 1rem 0 0; }
.page-link { color: var(--on-surface-variant); border-color: var(--border-subtle); }
.page-link:hover { background: var(--surface-container-low); color: var(--on-surface); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
.page-link:focus { box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.15); }

/* ---------- Filter button groups ---------- */
.btn-group .btn-outline-secondary.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ---------- Overlays (elevation only here) ---------- */
.dropdown-menu {
    border: 1px solid var(--border-subtle); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); padding: 0.35rem;
}
.dropdown-item { border-radius: var(--radius); font-size: 0.875rem; padding: 0.4rem 0.6rem; }
.dropdown-item:active { background: var(--primary); }
.modal-content { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }

/* ---------- Misc density / links ---------- */
.card + .card, .card + .row, .row + .card { margin-top: 1rem; }
.text-success { color: #067a51 !important; }
.text-danger { color: var(--status-rejected) !important; }
hr { border-color: var(--border-subtle); opacity: 1; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; }

/* ---------- Smoothness: transitions & micro-interactions ---------- */
.btn, .sidebar-link, .form-control, .form-select, .page-link, .badge, .nav-link,
.dropdown-item, .input-group-text { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.card { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.table > tbody > tr { transition: background-color .12s ease; }
.btn:active { transform: translateY(1px); }
.sidebar-link:active { transform: none; }

/* Kartu yang bisa diklik (dibungkus <a>) sedikit "terangkat" saat hover */
a:hover > .card, a:hover .card { border-color: var(--outline); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08); transform: translateY(-2px); }
a { transition: color .15s ease; }

/* Live-search: state saat memuat hasil */
.table.is-loading { opacity: 0.45; transition: opacity .15s ease; pointer-events: none; }

/* ---------- Lebih lega (kurangi kesan kaku) ---------- */
.app-content { padding: 1.75rem 2rem; }
.card .card-body { padding: 1.25rem 1.4rem; }
.table td, .table th { padding: 0.7rem 0.9rem; }
.table > thead th { padding-top: 0.85rem; padding-bottom: 0.85rem; }
h1.h4, .page-title { margin-bottom: 0.25rem; }
.metric-value { margin-top: 0.15rem; }
.stat-label + .metric-value { margin-top: 0.25rem; }
.card { border-radius: 0.625rem; }
.form-control, .form-select, .btn { border-radius: 0.375rem; }
.input-group > .form-control { min-height: 38px; }
/* Search box lebih ramah */
form[role="search"] .input-group-text { border-color: var(--border-strong); color: var(--outline); }
form[role="search"] .form-control { border-left: 0; }
form[role="search"] .form-control:focus { border-color: var(--border-strong); box-shadow: none; }
form[role="search"] .input-group:focus-within { box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.12); border-radius: 0.375rem; }

/* ================= POLES v7 — tampilan lebih profesional =================
   Berlaku untuk semua role (super-admin / admin-gudang / sales). */

/* Kedalaman halus: kartu & panel tabel diberi bayangan tipis */
.card,
.app-content > table.table,
.app-content > .table-responsive { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }

/* Judul halaman lebih tegas */
.app-content h1.h4 { font-weight: 700; letter-spacing: -0.02em; }

/* Topbar: pemisah lembut + user block tanpa underline saat hover */
.topbar { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.topbar a:hover { text-decoration: none; }
.topbar a:hover .rounded-circle { box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.18); }
.topbar .rounded-circle { transition: box-shadow .15s ease; }

/* Sidebar: active jadi tint + garis aksen kiri (lebih kalem dari blok solid) */
.sidebar-link { position: relative; }
.sidebar-link.active {
    background: #e8f0f9;
    color: var(--primary-dark);
}
.sidebar-link.active::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 2px; background: var(--primary);
}
.sidebar-link.active .ico { color: var(--primary); opacity: 1; }
/* Foot menyatu dgn badan sidebar (dulu surface-muted — terlihat belang). */
.sidebar-foot { background: var(--surface-container); }

/* Kartu KPI dashboard: chip ikon berwarna lembut */
.stat-ico {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    background: #e3edf9; color: var(--primary);
}
.stat-ico-success { background: #e7f8f0; color: #067a51; }
.stat-ico-warning { background: #fff4e6; color: #b45309; }
.stat-ico-danger  { background: #feecec; color: var(--status-rejected); }
.stat-ico-muted   { background: var(--surface-container-low); color: var(--on-surface-variant); }

/* Panel operasional yang bisa diklik: aksen kiri + panah, bukan border warna penuh */
.card-action { border-left: 3px solid var(--primary); }
.card-action .card-body { position: relative; }
.card-action .card-body::after {
    content: "\F285"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--border-strong); font-size: 0.9rem; transition: color .15s ease, transform .15s ease;
}
a:hover .card-action .card-body::after { color: var(--primary); transform: translateY(-50%) translateX(2px); }

/* ===== Tombol aksi: solid berbingkai & berwarna sesuai jenisnya =====
   Semua tombol aksi (outline-*) tampil sebagai tombol berisi warna + border
   tegas, bukan "ghost" transparan. Pil filter status (.btn-group) dikembalikan
   ke gaya outline di bawah supaya status aktif/nonaktifnya tetap terlihat. */
.btn-outline-primary {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--primary-hover); border-color: var(--primary-hover); color: #fff;
}
.btn-outline-danger {
    background: var(--status-rejected); border-color: var(--status-rejected); color: #fff;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: #d33a3a; border-color: #d33a3a; color: #fff;
}
.btn-outline-dark {
    background: #374151; border-color: #374151; color: #fff;
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
    background: #1f2937; border-color: #1f2937; color: #fff;
}
.btn-outline-success {
    background: var(--status-approved); border-color: var(--status-approved); color: #fff;
}
.btn-outline-success:hover, .btn-outline-success:focus {
    background: #0ea472; border-color: #0ea472; color: #fff;
}
.btn-outline-info {
    background: var(--status-submitted); border-color: var(--status-submitted); color: #fff;
}
.btn-outline-info:hover, .btn-outline-info:focus {
    background: #2563eb; border-color: #2563eb; color: #fff;
}
/* Sekunder (Ubah, dll.) & Reset/Kembali = abu-abu solid berbingkai. */
.btn-outline-secondary {
    background: #64748b; border-color: #64748b; color: #fff;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: #4b5563; border-color: #4b5563; color: #fff;
}

/* Pengecualian: pil filter status di dalam .btn-group tetap gaya outline
   (transparan saat nonaktif, terisi warna saat .active). */
.btn-group .btn-outline-secondary {
    background: transparent; border-color: var(--border-strong); color: var(--on-surface-variant);
}
.btn-group .btn-outline-secondary:hover {
    background: var(--surface-container-low); border-color: var(--outline); color: var(--on-surface);
}
.btn-group .btn-outline-secondary.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
}

/* Badge status di tabel: titik indikator di depan label */
.table .badge { display: inline-flex; align-items: center; gap: 0.4em; }
.table .badge::before {
    content: ""; width: 0.45em; height: 0.45em; border-radius: 50%;
    background: currentColor; opacity: 0.8;
}

/* Empty-state tabel lebih lapang */
.table td[colspan] { padding: 1.75rem 1rem; color: var(--outline); font-size: 0.85rem; }

/* Chart dashboard (Chart.js) — wadah tinggi tetap agar canvas responsif
   (Chart.js perlu parent dengan tinggi pasti saat maintainAspectRatio:false) */
.chart-wrap { position: relative; width: 100%; height: 220px; margin-top: 0.5rem; }
.chart-wrap.chart-wrap-sm { height: 170px; }
.chart-wrap canvas { max-width: 100%; }
.chart-empty {
    display: flex; align-items: center; justify-content: center;
    height: 220px; color: var(--outline); font-size: 0.85rem; text-align: center;
}
.chart-empty.chart-empty-sm { height: 170px; }

/* Judul seksi di dalam kartu */
.card h2.h6 { color: var(--on-surface); margin-bottom: 0.35rem; }
.card h2.h6 + .table-responsive, .card h2.h6 + p { margin-top: 0.5rem; }

/* Tombol utama sedikit "terangkat" */
.btn-primary { box-shadow: 0 1px 2px rgba(15, 76, 129, 0.25); }
.btn-primary:active { box-shadow: none; }

/* Login / halaman tamu: panel form putih polos (ala contoh Info Coffee) */
.auth-main { background: var(--surface-container); }

/* Form tingkat-atas (create/edit yang tidak dibungkus .card) tampil sebagai
   panel putih — konsisten dengan kartu. Form pencarian dikecualikan. */
.app-content > form:not([role="search"]) {
    background: var(--surface-container);
    border: 1px solid var(--border-subtle);
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 1.5rem 1.6rem;
}

/* ================= RESPONSIVE (tablet & mobile) ================= */

/* Sidebar lebih ramping di desktop kecil / tablet lanskap */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root { --sidebar-w: 224px; }
    .app-content { padding: 1.5rem; }
}

/* Tablet & ke bawah: sidebar jadi off-canvas + hamburger */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 0 0 40px rgba(0,0,0,0.12); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .hamburger { display: inline-flex; }
    .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1035; }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar-backdrop { display: block; }

    .app-content { padding: 1.25rem; }
    .topbar { padding: 0.55rem 1rem; }
    /* Header halaman & grup aksi boleh turun baris (tak overflow) */
    .app-content > .d-flex.justify-content-between { flex-wrap: wrap; row-gap: 0.5rem; }
    .app-content .d-flex.gap-2 { flex-wrap: wrap; }

    /* TABLET & MOBILE: sel tabel TIDAK menyempit → tabel meluber → bisa
       digeser horizontal di dalam .table-responsive (lihat semua kolom). */
    .table td, .table th { white-space: nowrap; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Mobile */
@media (max-width: 767.98px) {
    .app-content { padding: 1rem 0.85rem; }
    .topbar { padding: 0.5rem 0.85rem; gap: 0.5rem; }
    .topbar .user-scope { display: none; }
    .topbar .fw-semibold { font-size: 0.95rem; }

    .app-content h1.h4, .page-title { font-size: 1.15rem; }
    .card .card-body { padding: 1rem 1.05rem; }

    /* Filter status: wrap jadi beberapa baris pill */
    .btn-group.btn-group-sm { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .btn-group.btn-group-sm > .btn { border-radius: var(--radius) !important; }

    /* Kotak cari full-width */
    form[role="search"] .input-group { max-width: 100% !important; }

    /* Target sentuh nyaman untuk jempol (guide: mobile-first) */
    .btn { min-height: 42px; }
    .btn-sm { min-height: 38px; padding-inline: 0.75rem; }
    .form-control, .form-select { min-height: 42px; }
    .form-control-sm, .form-select-sm, .btn-group-sm > .btn { min-height: 36px; }
    .sidebar-link { padding: 0.7rem 0.8rem; }
    .dropdown-item { padding: 0.55rem 0.7rem; }

    /* Tabel: sel tak menyempit; scroll horizontal ditangani .table-responsive */
    .table td, .table th { white-space: nowrap; padding: 0.6rem 0.75rem; }
    /* Form & blok detail menumpuk 1 kolom penuh (perilaku Bootstrap default) */
}

/* Layar sangat kecil: metrik & info detail jadi 1 kolom penuh */
@media (max-width: 400px) {
    .app-content .row.g-3 > .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* ================= Poles 2026-07-21 (update besar) ================= */
/* Field otomatis (kode/SKU readonly) terlihat jelas non-editable. */
.form-control[readonly], .form-control:disabled { background: var(--surface-muted); color: var(--on-surface-variant); }

/* Kotak scan barcode USB: fokus jelas biar operator tahu siap scan. */
#usb-scan-input:focus { box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.18); }
.input-group .input-group-text .bi-upc-scan { color: var(--primary); }

/* SweetAlert mengikuti font tema. */
.swal2-popup { font-family: var(--font-sans) !important; font-size: 0.95rem !important; }

/* Label kolom form: sedikit lebih tegas untuk orang awam. */
.form-label { font-weight: 600; font-size: 0.83rem; color: var(--on-surface); }
.form-text { font-size: 0.75rem; }