/* ==========================================================================
   INVOICE APP — STYLESHEET
   Tema "Runaway": bersih dan modern — kanvas mint sangat lembut di mode
   terang dengan kartu putih mengambang, aksen teal/mint sebagai warna
   utama, sudut lebih membulat & bayangan lembut. Mode gelap memakai
   nuansa nyaris hitam dengan aksen teal menyala (sama seperti kartu
   login), bukan lagi oranye. Angka Rupiah tetap pakai font tabular-mono
   supaya kolom sejajar rapi.
   Semua library & font dimuat LOKAL (assets/vendor) — tanpa CDN online.
   Dibangun DI ATAS Bootstrap 5 (dipakai luas di halaman PHP) — bukan
   menggantikannya — supaya semua halaman existing otomatis ikut bertema
   tanpa perlu ditulis ulang satu per satu.
   ========================================================================== */

@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../vendor/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../vendor/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../vendor/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../vendor/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url("../vendor/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("../vendor/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root{
  --bg:#f2faf7;
  --surface:#ffffff;
  --surface-2:#eaf6f1;
  --surface-3:#d8ede3;
  --border:#cfe6db;
  --text:#0f231c;
  --text-dim:#51695f;
  --text-faint:#84a296;
  --accent:#12b48c;
  --accent-hover:#0e9773;
  --accent-soft:rgba(18,180,140,.14);
  --on-accent:#ffffff;
  --blue:#2f8fe0;
  --blue-soft:rgba(47,143,224,.12);
  --green:#1f9d6c;
  --green-soft:rgba(31,157,108,.13);
  --red:#e14848;
  --red-soft:rgba(225,72,72,.12);
  --amber:#e79a2c;
  --amber-soft:rgba(231,154,44,.14);
  --radius:14px;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono","Cascadia Code",Consolas,monospace;
  --shadow:0 10px 26px rgba(10,40,32,.10);
}

/* Varian gelap — nilai token yang SAMA (nama sama), warna dibalik untuk
   latar gelap. Diaktifkan dengan atribut data-theme="dark" di <html>,
   diset oleh tombol toggle (lihat app.js) dan/atau preferensi tersimpan. */
[data-theme="dark"]{
  --bg:#05090a;
  --surface:#0c1614;
  --surface-2:#101d1a;
  --surface-3:#16241f;
  --border:#1c2f29;
  --text:#eafff5;
  --text-dim:#8fa89f;
  --text-faint:#5d746c;
  --accent:#3fe0b6;
  --accent-hover:#5ef0c9;
  --accent-soft:rgba(63,224,182,.18);
  --on-accent:#04211a;
  --blue:#4da3e8;
  --blue-soft:rgba(77,163,232,.16);
  --green:#2fd39f;
  --green-soft:rgba(47,211,159,.18);
  --red:#ff7a7a;
  --red-soft:rgba(255,122,122,.16);
  --amber:#eaa63c;
  --amber-soft:rgba(234,166,60,.18);
  --shadow:0 14px 34px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background .25s ease,color .25s ease;
}
::selection{background:var(--accent-soft);color:var(--accent);}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);}
button{font-family:inherit;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;}

/* Fokus keyboard yang jelas di seluruh app (aksesibilitas) */
a:focus-visible,button:focus-visible,.nav-item:focus-visible,
.form-control:focus-visible,.form-select:focus-visible,
.icon-btn:focus-visible,.user-chip:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

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

/* ---------- Sidebar ---------- */
.sidebar{
  width:250px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:1040;
  transition:transform .28s ease;
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 20px 18px;border-bottom:1px solid var(--border);
}
.brand-mark{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.2px;
}
.brand-text{line-height:1.15;}
.brand-text b{display:block;font-size:15.5px;letter-spacing:-.1px;color:var(--text);font-family:var(--sans);font-weight:700;}
.brand-text span{display:block;font-size:10.5px;color:var(--text-faint);font-family:var(--mono);letter-spacing:.5px;}

.nav{padding:14px 12px;flex:1;overflow-y:auto;}
.nav-section-label{
  font-size:10.5px;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:1.2px;font-family:var(--mono);padding:14px 10px 6px;
}
.nav-section-label:first-child{padding-top:2px;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 11px;margin:2px 0;
  border-radius:8px;color:var(--text-dim);cursor:pointer;font-size:13.5px;
  position:relative;transition:background .15s ease,color .15s ease;
  width:100%;box-sizing:border-box;flex-wrap:nowrap;line-height:1.3;
}
.nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.nav-item.nav-sub{
  padding-left:30px;font-size:12.5px;color:var(--text-faint);margin-top:-2px;
}
.nav-item.nav-sub .nav-icon{font-size:12px;opacity:.85;}
.nav-group-toggle{justify-content:space-between;}
.nav-group-toggle .nav-caret{font-size:11px;transition:transform .2s ease;flex:0 0 auto;}
.nav-group-toggle[aria-expanded="true"] .nav-caret{transform:rotate(180deg);}
.nav-group-toggle[aria-expanded="true"]{color:var(--text);background:var(--surface-2);}
.nav-group-body{display:flex;flex-direction:column;}
.nav-group-body .nav-item.nav-sub{margin-top:1px;}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
  background:var(--accent);border-radius:2px;
}
.nav-icon{
  width:16px;height:16px;flex:0 0 16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
}
.nav-icon i{line-height:1;}
.nav-label{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-foot{
  padding:14px 18px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 0 3px var(--green-soft);animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.sidebar-foot-text{line-height:1.3;overflow:hidden;}
.sidebar-foot-text b{display:block;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-foot-text span{display:block;font-size:10.5px;color:var(--text-faint);font-family:var(--mono);letter-spacing:.4px;text-transform:uppercase;}

.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1035;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.sidebar-overlay.show{opacity:1;pointer-events:auto;}

/* ---------- Main / topbar ---------- */
.main{margin-left:250px;flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  height:64px;flex-shrink:0;display:flex;align-items:center;gap:14px;
  padding:0 24px;border-bottom:1px solid var(--border);
  background:var(--bg);position:sticky;top:0;z-index:1020;
}
.burger{
  display:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);
  flex-shrink:0;
}
.topbar-title{min-width:0;}
.topbar-title h1{margin:0;font-size:17px;font-weight:700;font-family:var(--sans);letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.icon-btn{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);
  transition:color .15s ease,border-color .15s ease;flex-shrink:0;
}
.icon-btn:hover{color:var(--text);border-color:var(--text-faint);}
.icon-btn svg{width:16px;height:16px;}
.icon-btn i{font-size:15px;}

.user-menu{position:relative;}
.user-chip{
  display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:24px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer;
}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:11.5px;font-weight:700;color:var(--accent);flex-shrink:0;
}
.user-chip-text{line-height:1.2;display:none;}
.user-chip-text b{display:block;font-size:12.5px;color:var(--text);}
.user-chip-text span{display:block;font-size:10px;color:var(--text-faint);font-family:var(--mono);text-transform:uppercase;}
@media (min-width:640px){.user-chip-text{display:block;}}
.user-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:all .16s ease;z-index:1050;
}
.user-dropdown.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.user-dropdown-item{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;font-size:13px;
  color:var(--red);cursor:pointer;transition:background .12s ease;
}
.user-dropdown-item:hover{background:var(--red-soft);}

.view{padding:24px 26px 60px;max-width:1320px;}
.hidden{display:none !important;}

/* ---------- Cards ---------- */
.card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  color:var(--text);
  box-shadow:var(--shadow) !important;
}
.card .text-muted{color:var(--text-faint) !important;}

/* ---------- Tanda tangan konsumen (touch screen) ---------- */
.signature-pad-frame{
  border:1.5px dashed var(--border);
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
}
.signature-pad-canvas{
  display:block;
  width:100%;
  height:220px;
  touch-action:none;
  cursor:crosshair;
}
.signature-preview-img{
  max-width:100%;
  width:320px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  padding:6px;
}

/* ---------- Buttons ---------- */
.btn{border-radius:9px;font-size:13.5px;font-weight:500;transition:transform .1s ease,background .15s ease,border-color .15s ease;}
.btn:active{transform:scale(.97);}
.btn-primary,
.btn-outline-primary:hover{
  background:var(--accent) !important;border-color:var(--accent) !important;color:var(--on-accent) !important;font-weight:600;
}
.btn-primary:hover{background:var(--accent-hover) !important;border-color:var(--accent-hover) !important;}
.btn-outline-primary{color:var(--accent) !important;border-color:var(--accent) !important;background:transparent !important;}
.btn-outline-secondary{color:var(--text-dim) !important;border-color:var(--border) !important;background:var(--surface) !important;}
.btn-outline-secondary:hover{color:var(--text) !important;border-color:var(--text-faint) !important;background:var(--surface-2) !important;}
.btn-danger{background:var(--red) !important;border-color:var(--red) !important;}
.btn-outline-danger{color:var(--red) !important;border-color:var(--red) !important;background:transparent !important;}
.btn-outline-danger:hover{background:var(--red) !important;color:#fff !important;}
.btn-light{background:var(--surface-2) !important;border-color:var(--border) !important;color:var(--text) !important;}
.btn-success{background:var(--green) !important;border-color:var(--green) !important;}
.btn-warning{background:var(--amber) !important;border-color:var(--amber) !important;color:#2b1d05 !important;}

/* ---------- Badges ---------- */
.badge{border-radius:20px;font-weight:600;font-size:11px;letter-spacing:.2px;padding:5px 10px;}
.badge.bg-success{background:var(--green-soft) !important;color:var(--green) !important;}
.badge.bg-danger{background:var(--red-soft) !important;color:var(--red) !important;}
.badge.bg-warning{background:var(--amber-soft) !important;color:var(--amber) !important;}
.badge.bg-secondary{background:var(--surface-3) !important;color:var(--text-dim) !important;}
.badge.bg-primary{background:var(--accent-soft) !important;color:var(--accent) !important;}

/* Selaraskan warna kontekstual bawaan Bootstrap (text-*, border-*) dengan
   palet tema, dipakai mis. di kartu ringkasan Dashboard & Laporan. */
.text-success{color:var(--green) !important;}
.text-warning{color:var(--amber) !important;}
.text-danger{color:var(--red) !important;}
.text-primary{color:var(--accent) !important;}
.border-success{border-color:var(--green) !important;}
.border-warning{border-color:var(--amber) !important;}
.border-danger{border-color:var(--red) !important;}

/* ---------- Alerts (flash messages) ---------- */
.alert{
  border-radius:var(--radius);border:1px solid var(--border);border-left:3px solid var(--green);
  background:var(--surface);color:var(--text);font-size:13.5px;box-shadow:var(--shadow);
}
.alert-success{border-left-color:var(--green);}
.alert-danger{border-left-color:var(--red);}
.btn-close{opacity:.6;}
.btn-close:hover{opacity:.9;}
[data-theme="dark"] .btn-close{filter:invert(1) brightness(1.4);}

/* ---------- Forms ---------- */
.form-control,.form-select{
  background:var(--surface-2) !important;border:1px solid var(--border) !important;color:var(--text) !important;
  border-radius:8px;font-size:13.5px;
}
.form-control:focus,.form-select:focus{
  border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important;
}
.form-control::placeholder{color:var(--text-faint);}
.form-label{font-size:12.5px;color:var(--text-dim);font-weight:600;margin-bottom:6px;}
.form-check-input{background-color:var(--surface-2);border-color:var(--border);}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent);}
.input-group-text{background:var(--surface-3) !important;border:1px solid var(--border) !important;color:var(--text-dim) !important;}

/* ---------- Tables ---------- */
.table-responsive{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table{color:var(--text);}
.table{margin-bottom:0;}
.table > :not(caption) > * > *{
  background:transparent;color:var(--text);border-bottom-color:var(--border);
  box-shadow:none;padding:12px 16px;font-size:13.5px;vertical-align:middle;
}
.table thead th{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-faint);background:var(--surface-2);border-bottom:1px solid var(--border);
  font-weight:600;white-space:nowrap;
}
.table-hover > tbody > tr:hover > *{background:var(--surface-2) !important;}
.table > tbody > tr:last-child > *{border-bottom:none;}

/* ---------- Pesan "belum ada data" di tabel (lihat app.js: language.emptyTable) ----------
   Dirender oleh DataTables sendiri lewat opsi language.emptyTable/zeroRecords,
   BUKAN baris <tr><td colspan> manual (itu bikin DataTables error "Incorrect
   column count" karena colspan di tbody memang tidak didukung DataTables). */
.dt-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:36px 16px;color:var(--text-faint);
}
.dt-empty-state i{font-size:32px;opacity:.5;}
.dt-empty-state-text{font-size:13.5px;max-width:360px;}
table.data-table td.dataTables_empty{border:none !important;}
table.item-table{background:var(--surface-2);border-radius:8px;}

/* Sembunyikan tombol panah naik/turun bawaan browser pada input angka
   (Qty, Diskon, Harga) di tabel item Invoice Cash/Kredit — panah bawaan
   ini kalau di klik/scroll tanpa sengaja bisa mengubah nilai, dan di
   layar sempit/mobile posisinya menutupi sebagian angka yang diketik. */
.item-table input[type="number"]::-webkit-inner-spin-button,
.item-table input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;margin:0;
}
.item-table input[type="number"]{-moz-appearance:textfield;}

/* DataTables chrome */
.dataTables_wrapper{color:var(--text);}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label{color:var(--text-faint);font-size:12.5px;}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:6px !important;color:var(--text-dim) !important;border:1px solid transparent !important;
  background:transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--surface-2) !important;border-color:var(--border) !important;color:var(--text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--accent) !important;border-color:var(--accent) !important;color:var(--on-accent) !important;font-weight:700;
}
.dt-toolbar .btn{font-size:12px;}

/* ---------- Custom search toolbar (mis. halaman Data Barang) ---------- */
.custom-search-box{position:relative;flex:1 1 260px;max-width:360px;}
.custom-search-box i{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-faint);font-size:14px;pointer-events:none;
}
.custom-search-box input.form-control{
  background:var(--surface-2) !important;border:1px solid var(--border) !important;
  color:var(--text) !important;padding-left:36px;font-size:13.5px;
}
.custom-search-box input.form-control::placeholder{color:var(--text-faint);}
.custom-search-box input.form-control:focus{
  border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important;
}
.custom-search-box .clear-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;color:var(--text-faint);cursor:pointer;
  display:none;font-size:14px;line-height:1;padding:2px 4px;
}
.custom-search-box .clear-btn:hover{color:var(--text);}
.custom-filter-select.form-select{
  background:var(--surface-2) !important;border:1px solid var(--border) !important;
  color:var(--text) !important;font-size:13.5px;max-width:180px;
}
.custom-search-toolbar .result-count{color:var(--text-faint);font-size:12.5px;white-space:nowrap;}

/* ---------- Modal ---------- */
.modal-content{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);
  box-shadow:var(--shadow);
}
.modal-header,.modal-footer{border-color:var(--border);}
.modal-title{font-size:15.5px;}

/* Utility posisi generik untuk tombol ganti tema mengambang di halaman
   non-login (mis. 403.php) — TIDAK dipakai oleh login.php (lihat blok
   "Runaway Login" di bawah yang punya class .rlogin-theme-toggle sendiri). */
.theme-toggle-floating{position:absolute;top:18px;right:18px;z-index:2;}

/* ---------- Login screen — "Runaway Login" ----------
   Memakai token tema aplikasi yang sama (--bg, --surface, --accent, dst.)
   supaya toggle terang/gelap benar-benar berefek di halaman ini juga —
   bukan warna yang di-hardcode statis. Di mode gelap otomatis tampil
   persis seperti referensi (nyaris hitam + aksen teal menyala); di mode
   terang tampil versi terangnya dengan aksen teal yang sama. Hanya
   dipakai oleh login.php. */
.rlogin-wrap{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;position:relative;overflow:hidden;background:var(--bg);
  font-family:var(--sans);
}
.rlogin-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 320px at 12% 8%, var(--accent-soft), transparent 60%),
    radial-gradient(480px 300px at 92% 95%, var(--accent-soft), transparent 60%);
}
.rlogin-theme-toggle{
  position:absolute;top:18px;right:18px;z-index:2;
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;
}
.rlogin-theme-toggle:hover{color:var(--accent);border-color:var(--accent);}

.rlogin-card{
  position:relative;width:100%;max-width:380px;background:var(--surface);
  border:1px solid var(--border);border-radius:18px;padding:30px 28px 26px;
  box-shadow:var(--shadow), 0 0 46px var(--accent-soft);
  animation:rloginCardIn .4s ease;
}
@keyframes rloginCardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.rlogin-brand{display:flex;align-items:center;gap:9px;margin-bottom:20px;}
.rlogin-brand-icon{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rlogin-brand-icon .rlogin-brand-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.rlogin-brand-name{font-size:11.5px;font-weight:700;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;}

.rlogin-heading{font-size:26px;font-weight:800;color:var(--text);margin:0 0 6px;letter-spacing:-.4px;}
.rlogin-sub{font-size:13px;color:var(--text-dim);margin:0 0 22px;line-height:1.5;}

.rlogin-alert{
  display:flex;align-items:center;gap:8px;background:var(--red-soft);
  border:1px solid var(--red);color:var(--red);
  padding:9px 12px;border-radius:10px;font-size:12.5px;margin-bottom:16px;
}

.rlogin-field{margin-bottom:15px;}
.rlogin-field-label-row{display:flex;align-items:center;justify-content:space-between;}
.rlogin-field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;font-weight:600;}
.rlogin-forgot{font-size:11.5px;color:var(--accent);cursor:pointer;font-weight:600;margin-bottom:6px;}
.rlogin-forgot:hover{text-decoration:underline;}

.rlogin-input-group{position:relative;display:flex;align-items:center;}
.rlogin-input-group > i:first-child{position:absolute;left:13px;color:var(--text-faint);font-size:14.5px;pointer-events:none;}
.rlogin-input-group input{
  width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:11px 38px 11px 36px;font-size:13.5px;color:var(--text);font-family:var(--sans);
  transition:border-color .15s, box-shadow .15s;
}
.rlogin-input-group input::placeholder{color:var(--text-faint);}
.rlogin-input-group input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.rlogin-eye{
  position:absolute;right:34px;background:none;border:none;color:var(--text-faint);
  cursor:pointer;font-size:14px;padding:4px;display:flex;
}
.rlogin-eye:hover{color:var(--text-dim);}
.rlogin-check{
  position:absolute;right:11px;color:var(--accent);font-size:13.5px;
  opacity:0;transform:scale(.6);transition:.18s;pointer-events:none;
}
.rlogin-check.show{opacity:1;transform:scale(1);}

.rlogin-btn-zone{position:relative;height:60px;margin:16px 0 4px;}
.rlogin-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:150px;padding:11px 26px;border:none;border-radius:999px;
  background:linear-gradient(180deg, var(--accent), var(--accent-hover));
  color:var(--on-accent);font-weight:800;font-size:14px;font-family:var(--sans);cursor:pointer;
  box-shadow:0 10px 26px var(--accent-soft);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s;
}
.rlogin-btn:hover{box-shadow:0 12px 30px var(--accent-soft);}
.rlogin-btn:focus-visible{outline:2px solid var(--text);outline-offset:3px;}
.rlogin-btn-zone.is-locked .rlogin-btn{animation:rloginPulse 1.6s ease infinite;}
@keyframes rloginPulse{
  0%,100%{box-shadow:0 10px 26px var(--accent-soft);}
  50%{box-shadow:0 10px 34px var(--accent-soft);}
}

.rlogin-status{
  display:flex;align-items:center;gap:7px;justify-content:center;
  font-size:12px;color:var(--text-dim);margin:6px 0 4px;
}
.rlogin-status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);transition:.2s;}
.rlogin-status.is-locked .rlogin-status-dot{background:var(--accent);box-shadow:0 0 8px var(--accent);}
.rlogin-status.is-locked{color:var(--accent);}

.rlogin-hint{text-align:center;font-size:11px;color:var(--text-faint);margin:2px 0 0;}
.rlogin-hint kbd{
  background:var(--surface-2);border:1px solid var(--border);border-radius:5px;
  padding:1px 6px;font-family:var(--mono);font-size:10.5px;color:var(--text-dim);
}
.rlogin-footnote{
  max-width:380px;text-align:center;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-faint);position:relative;
}

/* ---------- Responsive ---------- */
/* Cegah scroll horizontal tak sengaja di seluruh halaman pada perangkat
   mobile (mis. akibat tabel lebar atau elemen yang belum sempat dibungkus
   .table-responsive). Tabel tetap bisa discroll di dalam wadahnya sendiri. */
html{overflow-x:hidden;width:100%;}
body{overflow-x:hidden;width:100%;}
img,svg{max-width:100%;}

/* Tablet & sidebar mulai overlay lebih awal (992px) supaya konten utama
   punya ruang cukup di layar sedang, bukan cuma di ponsel. */
@media (max-width: 992px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow);}
  .main{margin-left:0;}
  .burger{display:flex;}
  .view{padding:18px 14px 50px;}
  .topbar{padding:0 14px;}
}
@media (max-width: 640px){
  .topbar-title h1{font-size:14.5px;}
  .topbar{gap:10px;height:58px;}
  .icon-btn,.burger{width:38px;height:38px;} /* target sentuh lebih besar */
  .card{padding:14px !important;}
  .btn{padding:.5rem .85rem;}

  /* Header halaman ("Judul" + tombol aksi, mis. "Invoice Saya" + "Buat
     Invoice") dipakai di hampir semua halaman list — pastikan judul &
     tombol tidak berdesakan/terpotong di layar sempit, tombol jadi
     full-width supaya mudah disentuh jempol. */
  .view > .d-flex.justify-content-between.align-items-center.mb-3,
  .view > .d-flex.justify-content-between.align-items-center.mb-4{
    flex-wrap:wrap;gap:10px;
  }
  .view > .d-flex.justify-content-between.align-items-center.mb-3 > .btn,
  .view > .d-flex.justify-content-between.align-items-center.mb-4 > .btn{
    flex:1 1 100%;text-align:center;
  }

  /* Tombol aksi di kolom tabel (Detail/PDF/Edit/Hapus) — beri jarak &
     jaga agar tetap nyaman disentuh walau tabel discroll horizontal. */
  td.text-end .btn,
  td .btn + .btn{margin-left:4px;}
  td.text-end .btn{padding:.4rem .55rem;}

  /* Toolbar DataTables (search + tombol CSV/Excel/Print) ditumpuk rapi
     alih-alih berdesakan sejajar. */
  .dt-toolbar{flex-direction:column;align-items:stretch !important;gap:8px;}
  .dt-toolbar .dataTables_filter{text-align:left !important;}
  .dt-toolbar .dataTables_filter input{width:100% !important;margin-left:0 !important;}
  .dt-toolbar .dt-buttons{display:flex;flex-wrap:wrap;gap:6px;}
  .dt-toolbar .dt-buttons .btn{flex:1 1 auto;}

  /* Toolbar pencarian (mis. Data Barang) full-width & mudah disentuh */
  .custom-search-toolbar{gap:10px;}
  .custom-search-box{flex:1 1 100%;max-width:none;}
  .custom-filter-select.form-select{flex:1 1 auto;max-width:none;}
  .custom-search-toolbar .result-count{flex:1 1 100%;order:99;margin-left:0 !important;}
  .table > :not(caption) > * > *{padding:10px 12px;font-size:12.5px;}
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info{font-size:12px;}

  /* Form dua-kolom (mis. form Invoice/Kredit: ringkasan & catatan)
     sudah stack lewat grid Bootstrap col-md-*, cukup rapatkan jarak. */
  .row.g-3 > div,.row > .col-md-6,.row > .col-md-4{margin-bottom:2px;}

  /* ---------- Tabel item Invoice Cash & Invoice Kredit ----------
     Di layar sempit, tabel item (Barang/Harga/Qty/Diskon-Keterangan/
     Subtotal) terlalu lebar untuk ditampilkan sejajar — kolom Qty jadi
     "ngumpet" di sisi kanan dan perlu discroll horizontal untuk kelihatan.
     Di breakpoint ini, tabel diubah jadi tampilan KARTU bertumpuk per
     baris barang: setiap kolom ditumpuk vertikal dengan label di
     depannya, jadi Qty selalu langsung terlihat tanpa perlu scroll. */
  table.item-table thead{display:none;}
  table.item-table,
  table.item-table tbody,
  table.item-table tr,
  table.item-table td{display:block;width:100% !important;}
  table.item-table tr{
    margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);
    border-radius:10px;background:var(--surface);
  }
  table.item-table tr:last-child{margin-bottom:0;}
  table.item-table td{
    display:flex;align-items:center;gap:10px;
    padding:7px 0 !important;border:none !important;
  }
  table.item-table td[data-label]::before{
    content:attr(data-label);flex:0 0 84px;
    font-family:var(--mono);font-size:10px;text-transform:uppercase;
    letter-spacing:.5px;color:var(--text-faint);font-weight:600;
  }
  table.item-table td[data-label] > *{flex:1 1 auto;min-width:0;}
  table.item-table td.text-center{justify-content:flex-end;padding-top:2px !important;}
}
@media (max-width: 420px){
  .view{padding:14px 10px 46px;}
  .rlogin-card{padding:26px 20px 22px;}
  .rlogin-btn{min-width:130px;padding:10px 20px;}
}

/* ---------- Semua tabel data (DataTables) jadi tampilan KARTU di mobile ----------
   Supaya SELURUH isi baris (semua kolom) langsung terlihat penuh di layar HP
   tanpa perlu discroll ke samping — tiap baris tabel diubah jadi kartu
   bertumpuk vertikal, dengan label kolom muncul otomatis di depan tiap nilai.
   Label diisi otomatis dari teks <th> lewat fungsi applyResponsiveCardLabels()
   di app.js — TIDAK perlu ubah markup di tiap halaman satu-satu, berlaku
   otomatis untuk semua tabel ber-class "data-table" di seluruh admin/staff/
   sales/survey. (Pola kartunya sama dengan tabel item Invoice di atas.) */
@media (max-width: 767px){
  .table-responsive{overflow-x:visible;background:transparent;border:none;}

  table.data-table thead{display:none;}
  table.data-table,
  table.data-table tbody,
  table.data-table tr,
  table.data-table td{display:block;width:100% !important;}

  table.data-table tbody tr{
    margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);
    border-radius:10px;background:var(--surface);
  }
  table.data-table tbody tr:last-child{margin-bottom:0;}
  table.data-table tbody tr:hover{background:var(--surface) !important;} /* nonaktifkan hover-highlight tabel biasa di mode kartu */

  table.data-table td{
    display:flex;align-items:flex-start;gap:10px;
    padding:7px 2px !important;border:none !important;
    white-space:normal !important;word-break:break-word;
  }
  table.data-table td[data-label]::before{
    content:attr(data-label);flex:0 0 42%;max-width:150px;
    font-family:var(--mono);font-size:10px;text-transform:uppercase;
    letter-spacing:.5px;color:var(--text-faint);font-weight:600;
    padding-top:2px;
  }
  table.data-table td[data-label] > *{flex:1 1 auto;min-width:0;}

  /* Kolom tanpa judul teks (mis. checkbox pilih-baris di kolom pertama) —
     tidak perlu label kosong di depannya, cukup sejajar rapat ke kiri. */
  table.data-table td.ctable-nolabel{padding-top:4px !important;}
  table.data-table td.ctable-nolabel::before{content:none;}

  /* Kolom "Aksi": tombol-tombolnya boleh melebar & turun baris kalau perlu,
     tetap enak disentuh jempol. */
  table.data-table td[data-label]:last-child > *{flex-wrap:wrap;}
  table.data-table td.text-end{flex-wrap:wrap;}

  /* Baris "Belum ada data ..." bawaan DataTables (td.dataTables_empty) —
     jangan ikut dibungkus jadi kartu kosong bergaris, cukup tampil polos. */
  table.data-table tbody tr.ctable-empty-row,
  table.data-table tbody tr:has(td.dataTables_empty){
    border:none;background:transparent;padding:0;margin:0 0 12px;
  }
  table.data-table tbody tr.ctable-empty-row td,
  table.data-table td.dataTables_empty{
    display:block;text-align:center;padding:16px 0 !important;
  }

  /* Nilai teks panjang (alamat, keterangan, dll — ditandai .ctable-clamp di
     PHP-nya) dipotong 2 baris di kartu mobile, supaya satu baris data TIDAK
     memenuhi seluruh layar dan tidak perlu scroll panjang untuk sampai ke
     data berikutnya. Ketuk untuk membuka teks penuhnya (lihat app.js). */
  table.data-table td[data-label] > .ctable-clamp{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    overflow:hidden;cursor:pointer;
  }
  table.data-table td[data-label] > .ctable-clamp.ctable-expanded{
    display:block;overflow:visible;
  }
  table.data-table td[data-label] > .ctable-clamp.ctable-clampable::after{
    content:"Lihat selengkapnya";display:block;margin-top:2px;
    font-size:10.5px;font-weight:600;color:var(--accent);
  }
  table.data-table td[data-label] > .ctable-clamp.ctable-clampable.ctable-expanded::after{
    content:"Sembunyikan";
  }
}

/* ---------- Compare Pasar (komparasi konsumsi pasar per 2 bulan) ---------- */
.cp-wilayah-row{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.cp-wilayah-row::-webkit-scrollbar{height:5px;}
.cp-wilayah-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
.cp-wilayah-pill{
  flex:0 0 auto;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);
  cursor:pointer;white-space:nowrap;transition:.15s;
}
.cp-wilayah-pill:hover{color:var(--text);}
.cp-wilayah-pill.aktif{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

.cp-ringkas-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.cp-ringkas-item{flex:1 1 130px;min-width:100px;}
.cp-ringkas-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;text-align:center;
}
.cp-ringkas-card .label{font-size:11px;color:var(--text-faint);margin-bottom:4px;}
.cp-ringkas-card .angka{font-size:19px;font-weight:800;color:var(--text);}
.cp-ringkas-card .angka.naik{color:var(--green);}
.cp-ringkas-card .angka.turun{color:var(--red);}

.cp-judul-komparasi{font-size:12.5px;color:var(--text-dim);margin:0 0 14px;}
.cp-judul-komparasi b{color:var(--accent);}

.cp-pasar-card{
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border);
  border-radius:var(--radius);padding:13px 14px;margin-bottom:10px;cursor:pointer;transition:.15s;
}
.cp-pasar-card:hover{box-shadow:var(--shadow);}
.cp-pasar-card.naik{border-left-color:var(--green);}
.cp-pasar-card.turun{border-left-color:var(--red);}
.cp-pasar-card .baris-atas{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
.cp-pasar-card .nama{font-weight:700;font-size:14px;color:var(--text);}
.cp-pasar-card .meta{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.cp-badge-gap{
  flex:0 0 auto;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;
  background:var(--surface-2);color:var(--text-dim);
}
.cp-badge-gap.naik{background:var(--green-soft);color:var(--green);}
.cp-badge-gap.turun{background:var(--red-soft);color:var(--red);}
.cp-pasar-card .baris-angka{display:flex;justify-content:space-between;gap:6px;}
.cp-pasar-card .satuan{text-align:center;flex:1;}
.cp-pasar-card .satuan .nilai{display:block;font-weight:700;font-size:13.5px;color:var(--text);}
.cp-pasar-card .satuan .nilai.naik{color:var(--green);}
.cp-pasar-card .satuan .nilai.turun{color:var(--red);}
.cp-pasar-card .satuan .label-kecil{font-size:10px;color:var(--text-faint);}
.cp-progress-penguasaan{height:5px;background:var(--surface-2);border-radius:99px;margin-top:10px;overflow:hidden;}
.cp-progress-penguasaan .isi{height:100%;background:var(--accent);border-radius:99px;}

.cp-status-kosong{text-align:center;padding:40px 20px;color:var(--text-faint);}
.cp-status-kosong .ikon{font-size:32px;margin-bottom:8px;}
.cp-skeleton{height:92px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:cpShimmer 1.3s infinite;margin-bottom:10px;}
@keyframes cpShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.cp-grid-detail{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;}
.cp-sel-detail{background:var(--surface-2);border-radius:10px;padding:10px 12px;}
.cp-sel-detail .label{font-size:11px;color:var(--text-faint);}
.cp-sel-detail .nilai{font-size:15px;font-weight:700;color:var(--text);}
.cp-contoh-csv{
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  font-family:var(--mono);font-size:11.5px;color:var(--text-dim);white-space:pre;overflow-x:auto;
}
@media (max-width: 640px){
  .cp-grid-detail{grid-template-columns:1fr 1fr;}
  .cp-pasar-card .satuan .nilai{font-size:12.5px;}
}

/* ---------- Searchable Select (dropdown yang bisa diketik) ----------
   Dipakai untuk dropdown Konsumen & Barang di form Invoice Cash/Kredit.
   <select> aslinya TETAP ada di DOM (disembunyikan secara visual saja,
   BUKAN display:none) supaya validasi "required" & event 'change' yang
   sudah ada tetap berjalan normal tanpa perlu ubah logika backend.

   CATATAN: .searchable-select-menu dipasang position:fixed & ditempel
   ke <body> (bukan absolute di dalam kolom tabel) — posisi (top/left/
   width)-nya dihitung & disinkronkan lewat JS (lihat enhanceSearchableSelect
   di app.js). Ini supaya menu TIDAK ikut terpotong oleh .table-responsive
   yang meng-clip overflow saat tabel item discroll horizontal di layar
   mobile, dan tidak menutupi kolom lain (mis. Qty) di sebelahnya. */
.searchable-select-wrap{position:relative;}
.searchable-select-native{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.searchable-select-menu{
  position:fixed;z-index:2000;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow);max-height:230px;overflow-y:auto;display:none;
}
.searchable-select-menu.show{display:block;}
.searchable-select-menu.drop-up{margin-top:0;}
.searchable-select-item{
  padding:8px 12px;font-size:13.5px;color:var(--text);cursor:pointer;line-height:1.35;
}
.searchable-select-item:hover,.searchable-select-item.active{background:var(--accent-soft);color:var(--accent);}
.searchable-select-item.empty{color:var(--text-faint);cursor:default;font-style:italic;}
.searchable-select-item.empty:hover{background:none;color:var(--text-faint);}
.searchable-select-text.is-invalid{border-color:var(--red);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}