/* ==========================================================================
   Login page
   ========================================================================== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px; box-sizing: border-box; position: relative; z-index: 1; }
.login-card {
  width: min(880px, 100%); display: flex; border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, .7); background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.9); animation: gpModalIn .22s ease-out;
}
.login-aside { width: 350px; flex: none; padding: 34px 30px; background: linear-gradient(165deg, rgba(236,48,19,.14), rgba(32,30,29,.06)); display: flex; flex-direction: column; }
.login-aside .tagline { font-size: 27px; letter-spacing: -.03em; line-height: 1.16; margin-top: 26px; }
.login-aside .desc { font-size: 12.5px; color: var(--color-text-muted); margin-top: 8px; line-height: 1.6; }
.login-fact { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-lg); background: rgba(255,255,255,.68); padding: 11px 13px; margin-top: 9px; }
.login-fact .ic { width: 32px; height: 32px; border-radius: 10px; background: rgba(236,48,19,.13); color: var(--color-accent-active); display: flex; align-items: center; justify-content: center; flex: none; }
.login-fact .t1 { font-family: var(--font-heading); font-weight: 800; font-size: 12px; display: block; }
.login-fact .t2 { font-size: 11px; color: var(--color-text-muted); display: block; }
.login-form-side { flex: 1; min-width: 0; padding: 34px 36px; display: flex; flex-direction: column; }
.login-form-side .title { font-size: 22px; letter-spacing: -.03em; }
.login-form-side .sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
/* Jarak ini dulu inline (`style="margin-top:..."` di login.php) — dipindah
   ke sini supaya breakpoint HP di bawah bisa mempersempitnya tanpa
   `!important` (jarak asal wajar di desktop yang lega, tapi kelihatan
   timpang/kosong di layar HP yang sempit, keluhan user via screenshot). */
#login-form { margin-top: 64px; }
#btn-submit { margin-top: 30px; }
/* Logo pengganti `.login-aside` di mobile (disembunyikan total di bawah,
   permintaan user) — DIAM di desktop (logo asli sudah ada di `.login-aside`),
   cuma muncul lewat media query HP supaya brand tetap kelihatan walau panel
   marketing kiri hilang. */
.login-form-logo { display: none; margin-bottom: 18px; }

/* ==========================================================================
   Kasir layout
   ========================================================================== */
.pos-layout { flex: 1; min-width: 0; display: flex; gap: 14px; min-height: 0; }
.pos-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.pos-cart { position: relative; width: 372px; flex: none; display: flex; flex-direction: column; overflow: hidden; }
.pos-cart-head { flex: none; padding: 15px 17px 14px; background: linear-gradient(150deg, rgba(var(--color-accent-rgb),.10), rgba(var(--color-accent-rgb),0) 75%); border-bottom: 1px solid rgba(32,30,29,.06); }
.pos-cart-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 13px; }
.pos-cart-foot { flex: none; padding: 14px 17px 16px; background: rgba(255,255,255,.55); border-top: 1px solid rgba(32,30,29,.08); }

.bay-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; min-width: 0; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.bay-strip::-webkit-scrollbar { display: none; }
.bay-card { flex: none; width: 240px; border-radius: var(--radius-xl); padding: 13px; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
@media (min-width: 1700px) { .catalog-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1400px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }
.catalog-item { position: relative; border-radius: var(--radius-lg); border: 1px solid rgba(32,30,29,.1); background: rgba(255,255,255,.78); padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.catalog-item .thumb { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 14px; flex: none; }
.catalog-item .info-btn {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  border: 1px solid var(--color-divider-strong); background: rgba(255,255,255,.85); color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; pointer-events: none; transition: background .14s, color .14s, opacity .14s;
}
.catalog-item:hover .info-btn { opacity: 1; pointer-events: auto; }
.catalog-item .info-btn:hover { background: rgba(32,30,29,.08); color: var(--color-text); }
.catalog-item.out-of-stock .thumb { opacity: .55; }

.cart-line { border-radius: var(--radius-lg); background: rgba(255,255,255,.62); border: 1px solid rgba(32,30,29,.08); padding: 10px 11px; margin-bottom: 8px; }
.cart-line .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 4px; }
/* inline-flex (bukan flex) — supaya pill SELALU shrink-to-fit isinya sendiri,
   bukan melar mengisi lebar penuh kolom tabel yang menampungnya (kolom lebar
   di viewport besar bikin pill jadi lonjong dengan ruang kosong di kanan,
   membuat tombol "+" kelihatan "bablas"/tidak seimbang — ditemukan di
   kolom "Dipesan" Buat PO). */
.qty-stepper { display: inline-flex; align-items: center; gap: 2px; border-radius: 99px; background: rgba(32,30,29,.06); padding: 2px; }
.qty-stepper button { all: unset; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.qty-stepper button:hover { background: rgba(var(--color-accent-rgb),.12); color: var(--color-accent-active); }
.cart-line .del-btn { opacity: 0; transition: opacity .12s; cursor: pointer; color: var(--color-accent-active); font-size: 11px; font-weight: 700; background: none; border: none; margin-left: auto; }
.cart-line:hover .del-btn { opacity: 1; }
@keyframes cartLineIn {
  0% { opacity: 0; transform: translateY(-8px) scale(.96); background: var(--color-accent-soft-2); border-color: var(--color-accent); }
  55% { opacity: 1; transform: translateY(0) scale(1); }
  100% { background: rgba(255,255,255,.62); border-color: rgba(32,30,29,.08); }
}
.cart-line.cart-line-new { animation: cartLineIn .5s ease; }

/* Modal "Cari Sparepart" (Permintaan Pembelian) — modal TIDAK menutup diri
   saat baris diklik (bisa pilih banyak part), jadi baris yang sudah masuk
   daftar kerja dapat tint permanen + badge "N dipilih" (ppk-row-added), dan
   baris yang BARU DIKLIK dapat flash sesaat (ppk-row-flash) biar kelihatan
   responsif — pola sama seperti cartLineIn di atas, dipakai reusable kalau
   ada picker serupa ke depan. */
.ppk-row-added { background: rgba(var(--color-accent-rgb), .05); }
@keyframes ppkRowFlash {
  0% { background: rgba(var(--color-accent-rgb), .28); }
  100% { background: transparent; }
}
.ppk-row-flash { animation: ppkRowFlash .6s ease-out; }

.summary-row { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.summary-row .lbl { color: var(--color-text-muted); }
.summary-row .val { font-weight: 700; }

/* Tombol cepat nominal tunai (+50rb/+100rb/+200rb/Uang Pas, kasir.js) —
   pakai `.pill-btn` dari app.css SUPAYA tetap dapat style dasar+state
   `.active`, TAPI class itu dipakai luas di banyak tempat lain (pagination
   page-size, filter chip, dst) jadi UKURANNYA TIDAK BOLEH diubah global —
   modifier `.pay-quick-btn` di sini cuma timpa padding/font-size buat
   instance ini, pola sama seperti fix tombol `#kd-due` di Kendaraan. */
.pill-btn.pay-quick-btn { padding: 11px 14px; font-size: 13px; }

/* numeric keypad */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.keypad button { all: unset; cursor: pointer; padding: 11px 0; border-radius: var(--radius-sm); background: rgba(32,30,29,.05); font-family: var(--font-heading); font-weight: 800; font-size: 15px; text-align: center; }
.keypad button:hover { background: rgba(var(--color-accent-rgb),.1); }

.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.method-card { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border-radius: var(--radius-lg); border: 1.5px solid var(--color-divider-strong); background: rgba(255,255,255,.6); cursor: pointer; text-align: left; }
.method-card.active { border-color: var(--color-accent); background: var(--color-accent-soft-2); }
.method-card .m-icon { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(32,30,29,.07); color: rgba(32,30,29,.6); }
.method-card.active .m-icon { background: rgba(var(--color-accent-rgb),.16); color: var(--color-accent-active); }
.method-card .m-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--color-divider-strong); margin-top: 2px; flex: none; }
.method-card.active .m-dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 3px #fff; }

.pay-steps { display: flex; align-items: center; gap: 6px; }
.pay-step-pill { display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; padding: 5px 10px; border-radius: 99px; background: rgba(32,30,29,.07); color: rgba(32,30,29,.45); }
.pay-step-pill.done { background: var(--color-text); color: #fff; }
.pay-step-pill.current { background: var(--color-accent-soft-2); color: var(--color-accent-active); }

/* ==========================================================================
   Work order board (kanban)
   ========================================================================== */
.wo-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; min-height: 0; }
.wo-column { display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-xl); background: rgba(255,255,255,.5); border: 1px solid rgba(32,30,29,.07); overflow: hidden; }
.wo-column-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 13px; border-bottom: 1px solid rgba(32,30,29,.08); }
.wo-column-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wo-column-head .lbl { font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; }
.wo-column-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.wo-card { border-radius: var(--radius-lg); background: rgba(255,255,255,.85); border: 1px solid rgba(32,30,29,.09); padding: 12px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.wo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.wo-progress { height: 6px; border-radius: 99px; background: rgba(32,30,29,.1); overflow: hidden; margin: 8px 0; }
.wo-progress-fill { height: 100%; border-radius: 99px; }
@media (max-width: 1300px) { .wo-board { grid-template-columns: repeat(2, 1fr); } }

/* Papan Bay (`workorder-bay.js`) — jumlah bay DINAMIS per cabang (bisa 2,
   bisa 10), beda dari `.wo-board` yang grid PROPORSIONAL 4-kolom tetap
   (cocok karena stage selalu tepat 4) — di sini dipakai flex row + scroll
   horizontal + kolom lebar TETAP, supaya bay-nya banyak pun tetap kebaca,
   bukan diperas jadi sempit. Reuse `.wo-column-head`/`.wo-column-body`/
   `.wo-card`/`.wo-progress` apa adanya (tidak bergantung jumlah kolom). */
.bay-board { display: flex; gap: 12px; flex: 1; min-height: 0; overflow-x: auto; padding-bottom: 4px; }
.bay-column { flex: 0 0 260px; display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-xl); background: rgba(255,255,255,.5); border: 1px solid rgba(32,30,29,.07); overflow: hidden; }

/* Grid kalender bulanan (Booking Servis > tab Kalender) — 7 kolom TETAP
   (Minggu-Sabtu), tiap sel py tinggi minimum supaya muat 2 badge booking +
   "+N lainnya". `.empty` (padding hari dari bulan sebelum/sesudah, dipakai
   biar grid selalu genap kelipatan 7) TIDAK py border/background sama
   sekali — beda visual jelas dari sel hari sungguhan. */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; padding-bottom: 6px; }
.cal-cell { min-height: 84px; border: 1px solid var(--color-divider); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell.empty { border: none; }
.cal-cell.has-items { cursor: pointer; }
.cal-cell.has-items:hover { border-color: var(--color-accent); }
.cal-cell.today { border-color: var(--color-accent); background: var(--color-accent-soft-2); }
.cal-day-num { font-size: 11.5px; font-weight: 700; }

/* two-pane detail modal (Kendaraan / Pelanggan / Katalog) */
.detail-split { display: flex; min-height: 0; flex: 1; }
/* `display:flex;flex-direction:column` DITAMBAHKAN (bukan sekadar block
   biasa) supaya modul pemanggil BISA menempelkan `margin-top:auto` ke satu
   anak tertentu buat mendorongnya ke DASAR panel (mis. kartu "Estimasi
   Biaya" di detail Work Order, lihat workorder.js/workorder-list.js) —
   TIDAK mengubah tampilan pemakai LAIN yang cuma menumpuk konten apa adanya
   (mis. Pelanggan/Kendaraan), karena flex-column dgn align-items:stretch
   default terlihat identik dengan block stacking biasa selama tidak ada
   `margin-top:auto` yang dipasang. */
.detail-side { width: 260px; flex: none; padding: 18px; border-right: 1px solid rgba(32,30,29,.08); overflow-y: auto; display: flex; flex-direction: column; }
.detail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.detail-main-head { flex: none; padding: 16px 20px; border-bottom: 1px solid rgba(32,30,29,.08); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.detail-main-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.detail-main-foot { flex: none; padding: 14px 20px 16px; border-top: 1px solid rgba(32,30,29,.08); display: flex; align-items: center; gap: 10px; }

.timeline-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(32,30,29,.06); }
.timeline-item:last-child { border-bottom: none; }

.stat-tile { flex: 1; border-radius: var(--radius-lg); background: rgba(32,30,29,.05); padding: 11px 13px; }
.stat-tile .l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.stat-tile .v { font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: -.02em; margin-top: 1px; }

.pf-identity-card { width: 280px; flex: none; }

/* Struktur Organisasi — pohon CSS murni (indented, garis penghubung
   border-left), SENGAJA bukan diagram grafis SVG/canvas — buat skala
   puluhan karyawan, list bertingkat begini sudah cukup jelas & jauh lebih
   ringan dibangun/dirawat. */
.org-node-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.75); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
}
.org-children { margin: 8px 0 0 18px; padding-left: 18px; border-left: 2px solid var(--color-divider-strong); display: flex; flex-direction: column; gap: 8px; }
.org-node + .org-node { margin-top: 8px; }

/* Diagram Organisasi — TAMBAHAN (2026-09-09) di luar list ".org-node" di atas,
   diminta user biar ada versi "gambar" org-chart yang bisa di-screenshot/
   dipresentasikan (kotak warna per level + garis penghubung), meniru gaya
   template flowchart umum. Teknik CSS-only klasik: <ul>/<li> bersarang, garis
   digambar via ::before/::after pada tiap <li> (bukan SVG/canvas — otomatis
   menyesuaikan berapapun jumlah anak/kedalaman tanpa hitung koordinat manual).
   Satu root = satu ".orgd-tree" berdiri sendiri (root yang tidak terhubung
   TIDAK digambar seolah bersaudara). */
.orgd-tree { display: inline-block; min-width: 100%; }
.orgd-tree + .orgd-tree { margin-top: 28px; padding-top: 28px; border-top: 1px dashed var(--color-divider); }
.orgd-tree ul { padding-top: 24px; position: relative; display: flex; justify-content: center; }
.orgd-tree li { display: flex; flex-direction: column; align-items: center; list-style: none; position: relative; padding: 24px 10px 0; }
.orgd-tree li::before, .orgd-tree li::after {
  content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 24px;
  border-top: 2px solid var(--color-divider-strong);
}
.orgd-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--color-divider-strong); }
.orgd-tree li:only-child { padding-top: 0; }
.orgd-tree li:only-child::before, .orgd-tree li:only-child::after { display: none; }
.orgd-tree li:first-child::before, .orgd-tree li:last-child::after { border: 0 none; }
.orgd-tree li:last-child::before { border-right: 2px solid var(--color-divider-strong); border-radius: 0 6px 0 0; }
.orgd-tree li:first-child::after { border-radius: 6px 0 0 0; }
.orgd-tree ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 24px;
  border-left: 2px solid var(--color-divider-strong);
}
.orgd-box {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 16px; border-radius: var(--radius-lg); text-align: center;
  color: #fff; box-shadow: 0 2px 6px rgba(32,30,29,.15); white-space: nowrap;
}
.orgd-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.65); flex: none; }
.orgd-photo-fallback { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.orgd-box .orgd-name { font-weight: 800; font-size: 12px; letter-spacing: .01em; }
.orgd-box .orgd-role { font-size: 10px; opacity: .85; margin-top: -2px; text-transform: uppercase; letter-spacing: .04em; }

/* Matrix karyawan x tanggal (mirip template "Monthly Attendance Report"
   spreadsheet), sengaja BUKAN pola .table biasa karena butuh kolom Nama
   STICKY KIRI + header STICKY ATAS sekaligus (bisa lebar 31 kolom hari +
   banyak baris karyawan, dua sumbu scroll dalam satu tabel). Class-nya
   GENERIK (bukan diprefix "kehadiran") — DIPAKAI BERSAMA oleh Laporan
   Kehadiran (`lkh-*`) DAN Laporan Jam Lembur (`llb-*`), keduanya struktur
   HTML identik cuma isi datanya beda (status huruf vs jam angka). */
.att-matrix { border-collapse: separate; border-spacing: 0; }
.att-matrix th, .att-matrix td { padding: 0; border-bottom: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider); }
.att-matrix th:last-child, .att-matrix td:last-child { border-right: none; }
.att-matrix thead th {
  position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,.96);
  padding: 6px 4px; font-size: 10px; font-weight: 700; color: var(--color-text-muted);
  text-align: center; border-bottom: 1px solid var(--color-divider-strong); white-space: nowrap;
}
.att-matrix thead th.no-col { left: 0; z-index: 4; }
.att-matrix thead th.emp-col { left: 38px; z-index: 4; text-align: left; padding-left: 12px; font-size: 11px; border-right: 1px solid var(--color-divider-strong); }
.att-matrix thead th.holiday-col { background: rgba(100,116,139,.18); color: var(--color-text); }
.att-matrix th.no-col, .att-matrix td.no-col { position: sticky; left: 0; z-index: 1; background: rgba(255,255,255,.96); width: 38px; min-width: 38px; text-align: center; color: var(--color-text-muted); font-size: 11px; }
.att-matrix td.emp-col { position: sticky; left: 38px; z-index: 1; background: rgba(255,255,255,.96); padding: 7px 12px; white-space: nowrap; border-right: 1px solid var(--color-divider-strong); }
.att-matrix td.day-cell { text-align: center; width: 30px; min-width: 30px; }
.att-matrix td.day-cell.holiday-col { background: rgba(100,116,139,.09); }
.att-matrix th.summary-col, .att-matrix td.summary-col { font-weight: 800; text-align: center; font-size: 12px; padding: 0 10px; }
.att-matrix th.summary-col-first, .att-matrix td.summary-col-first { border-left: 1px solid var(--color-divider-strong); }
.att-matrix .day-badge { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 6px; color: #fff; font-size: 9.5px; font-weight: 800; cursor: default; }
.att-matrix .day-badge-hours { width: auto; min-width: 24px; padding: 0 5px; border-radius: 5px; font-size: 9px; }
.att-matrix .day-dash { color: var(--color-text-muted); opacity: .4; font-size: 11px; cursor: default; }
.att-matrix .day-muted { display: inline-block; width: 21px; height: 21px; border-radius: 6px; background: repeating-linear-gradient(45deg, rgba(32,30,29,.05), rgba(32,30,29,.05) 3px, transparent 3px, transparent 7px); }

/* Chart of Accounts — tabel pohon berjenjang, lebih rapat + garis kolom
   (beda dari .table biasa) supaya struktur akun banyak baris tetap padat
   dibaca. Class TERPISAH ("coa-table" ditambahkan di atas "table" dasar,
   bukan mengubah .table global) supaya tabel modul lain tidak ikut berubah. */
.coa-table th, .coa-table td { padding: 6px 12px; border-right: 1px solid var(--color-divider); }
.coa-table th:last-child, .coa-table td:last-child { border-right: none; }
.legend-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

/* ==========================================================================
   Laporan · Ringkasan
   ========================================================================== */
.rk-grid-chart { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
/* Chart Omzet Harian butuh ruang lumayan lebar (7 bar + label) — collapse
   lebih awal (sama breakpoint dengan .grid-3/.grid-4 di app.css) daripada
   .rk-grid-two di bawah, yang isinya cuma dua list sederhana. */
@media (max-width: 1100px) { .rk-grid-chart { grid-template-columns: 1fr; } }

.rk-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .rk-grid-two { grid-template-columns: 1fr; } }

/* Grid item (.page-panel) default min-width:auto pakai max-content anaknya
   untuk sizing — SVG chart Omzet Harian & row list Komposisi Omzet/Metode
   Pembayaran (width tetap dalam px) jadi memaksa panelnya (dan track grid-
   nya) melebar sampai keluar viewport di layar sempit, walau .chart-scroll
   di dalamnya sendiri overflow-x:auto (itu cuma cegah overflow VISUAL DI
   DALAM panel, bukan cegah grid item-nya sendiri ikut membesar). Sama pola
   dengan gotcha min-width:0 flex item di CLAUDE.md, versi CSS Grid. */
.rk-grid-chart > .page-panel, .rk-grid-two > .page-panel { min-width: 0; }

/* #rk-notes-panel: jumlah kolomnya di-set INLINE oleh JS (renderNotes(),
   repeat(min(notes.length,3),1fr)) karena jumlah catatan dinamis dari
   backend — !important WAJIB di sini supaya breakpoint ini menang atas
   inline style itu. */
@media (max-width: 860px) { #rk-notes-panel { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   Responsive (phone) — kept in THIS file, not app.css: these components
   (login, Kasir POS layout) are defined here, and this stylesheet loads
   after app.css, so an override placed in app.css would lose the cascade
   to these files' unconditional base rules even inside a matching @media.
   ========================================================================== */
/* `.pos-cart-close`/`.pos-cart-fab` default `display:none` (SEBELUM @media
   di bawah, bukan sesudah — cascade "later wins" berlaku sama di dalam
   maupun di luar @media, jadi urutan file MENENTUKAN, gotcha nyata sempat
   bikin tombolnya tidak pernah muncul walau breakpoint-nya match) — supaya
   desktop/tablet (>560px, `.pos-cart` selalu panel biasa di samping, tidak
   pernah overlay) tidak pernah menampilkan tombolnya walau markup-nya selalu
   dirender JS. Breakpoint di bawah override balik ke `flex` di HP. */
.pos-cart-close, .pos-cart-fab { display: none; }
/* `!important` WAJIB — satu-satunya cara "keranjang kosong" menang atas
   `display:flex` breakpoint HP di bawah TANPA balik pakai inline
   `style.display` (`.show()`/`.hide()` jQuery), yang justru bikin FAB nongol
   permanen di DESKTOP begitu keranjang tidak kosong (ketahuan nyata
   2026-09-17 — lihat komentar `kasir.js` toggle `.is-empty`). Kelas ini
   CUMA mem-force hidden saat kosong; begitu dilepas, 2 rule display di atas
   (none desktop / flex HP) yang sepenuhnya menentukan, tanpa sisa override. */
.pos-cart-fab.is-empty { display: none !important; }
@media (max-width: 560px) {
  .login-card { flex-direction: column; }
  .login-aside { display: none; }
  .login-form-logo { display: flex; }
  #login-form { margin-top: 26px; }
  #btn-submit { margin-top: 16px; }
  .method-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .pos-layout { flex-direction: column; }
  /* Percobaan pertama (46vh lalu 62vh, `.pos-cart` panel fixed-height berbagi
     layar dengan katalog) TETAP kepepet — `.pos-cart-head`+`.pos-cart-foot`
     (`flex:none`, TIDAK BISA menyusut) sendirian sudah ~413px, jadi separuh
     layar yang tersisa buat katalog SEKALIGUS separuh buat baris item
     keranjang sama-sama kelewat sempit (kartu katalog kepotong/bertumpuk
     visual dgn panel keranjang di bawahnya). Diganti pola bottom-sheet atas
     permintaan user (2026-09-17): `.pos-cart` DEFAULT disembunyikan total,
     katalog dapat SELURUH tinggi `.pos-main`, keranjang cuma muncul sebagai
     overlay FULL-SCREEN (`.ks-cart-open`, toggle JS lewat `#ks-cart-fab`/
     `#ks-cart-close`, lihat kasir.js) begitu operator mau lihat/checkout —
     jadi TIDAK PERNAH ada 2 panel berbagi tinggi lagi. `#ks-catalog` tetap
     dikasih `min-height` sebagai jaring pengaman (bukan lagi penyebab utama
     sekarang katalog dapat ruang penuh, tapi tetap murah buat dijaga). */
  #ks-catalog { min-height: 180px !important; }
  .pos-cart { display: none; }
  .pos-cart.ks-cart-open {
    display: flex; position: fixed; inset: 0; z-index: 150;
    width: 100%; max-height: none; height: 100%; border-radius: 0;
  }
  .pos-cart-close { display: flex; position: absolute; top: 12px; right: 12px; z-index: 2; }
  .pos-cart-fab {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 140;
    height: 50px; border-radius: 99px; border: none; cursor: pointer;
    background: var(--color-accent); color: #fff; font-weight: 700; font-size: 13.5px;
    box-shadow: var(--shadow-lg);
  }
  .kasir-bay-section { display: none; }
  .ks-catalog-head { flex-wrap: wrap; }
  .ks-catalog-head .chip-scroll-inline { margin-left: 0; width: 100%; }
  .pf-identity-card { width: 100%; }
}

/* ==========================================================================
   Dashboard (Ringkasan bengkel) — redesain 2026-09-15 mengikuti mockup
   `Dashboard GearPOS.dc.html`. Reuse token/`.wo-card`/`.wo-column`/`.badge-*`
   yang sudah ada semaksimal mungkin, cuma tambah class BARU yang memang
   belum ada padanannya (presensi widget, papan mini, baris beban mekanik,
   grid bay, baris inbox/feed).
   ========================================================================== */
.dash-layout { display: flex; gap: 12px; align-items: flex-start; }
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-side { width: 336px; flex: none; display: flex; flex-direction: column; gap: 12px; }

.dash-presensi {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 11px; border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-divider-strong); background: var(--glass-bg); box-shadow: var(--shadow-sm);
  cursor: pointer; text-align: left;
}
.dash-presensi .ic { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex: none; background: rgba(32,30,29,.08); color: var(--color-text-muted); }
.dash-presensi .lbl { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; line-height: 1.25; }
.dash-presensi .note { display: block; font-size: 10.5px; line-height: 1.3; color: var(--color-text-muted); }
.dash-presensi.state-in { border-color: var(--color-accent); background: var(--color-accent-soft); }
.dash-presensi.state-in .ic { background: var(--color-accent); color: #fff; }
.dash-presensi.state-in .lbl { color: var(--color-accent-active); }
.dash-presensi.state-out { border-color: rgba(26,127,79,.35); background: var(--color-ok-soft); }
.dash-presensi.state-out .ic { background: var(--color-ok); color: #fff; }
.dash-presensi.state-out .lbl { color: var(--color-ok); }
.dash-presensi.state-done { cursor: default; }

.dash-live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-ok-soft); color: var(--color-ok); flex: none; }
.dash-live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ok); }

.dash-segmented { display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: var(--radius-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); flex: none; }
.dash-segmented button { border: none; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-family: var(--font-heading); font-weight: 800; font-size: 12px; }
.dash-segmented button.active { background: var(--color-text); color: #fff; }

.dash-board-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-board-mini .wo-column { background: rgba(32,30,29,.035); border: none; }
.dash-board-mini .wo-column-head { padding: 10px 11px; border-bottom: none; }
.dash-board-mini .wo-column-body { padding: 0 9px 9px; gap: 6px; max-height: 260px; }
.dash-board-mini .wo-card { padding: 8px 9px; border-left: 3px solid transparent; cursor: default; }
.dash-board-mini .wo-card:hover { transform: none; box-shadow: none; }
.dash-board-mini .wo-card .plate { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-board-mini .wo-card .meta { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-board-mini .more { font-size: 10.5px; color: var(--color-text-faint); padding-left: 2px; }
@media (max-width: 1300px) { .dash-board-mini { grid-template-columns: repeat(2, 1fr); } }

.dash-queue-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-top: 1px solid var(--color-divider); }
.dash-queue-row:first-child { border-top: none; }
.dash-queue-row .time { width: 46px; flex: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--color-text-muted); }
.dash-queue-row .main { min-width: 0; flex: 1; }
.dash-queue-row .main .l1 { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-queue-row .main .l2 { display: block; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-mech-row .head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.dash-mech-row .head .name { min-width: 0; flex: 1; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-mech-row .head .detail { flex: none; font-size: 11px; color: var(--color-text-muted); }
.dash-mech-row .head .pct { flex: none; font-weight: 700; font-size: 11.5px; }
.dash-bar { height: 7px; border-radius: 99px; background: rgba(32,30,29,.09); margin-top: 5px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 99px; }

.dash-bay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dash-bay-tile { border-radius: var(--radius-sm); padding: 9px 9px 10px; }
.dash-bay-tile .name { font-family: var(--font-heading); font-weight: 800; font-size: 11px; }
.dash-bay-tile .who, .dash-bay-tile .eta { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bay-tile .eta { opacity: .75; }

.dash-stock-row .head { display: flex; align-items: baseline; gap: 8px; }
.dash-stock-row .head .name { min-width: 0; flex: 1; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stock-row .head .qty { flex: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.dash-stock-row .note { font-size: 10.5px; color: var(--color-text-muted); margin-top: 4px; }
.dash-stock-row + .dash-stock-row { margin-top: 12px; }

.dash-inbox-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-divider-strong); text-decoration: none; color: var(--color-text); }
.dash-inbox-row .count { width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 13px; color: #fff; }
.dash-inbox-row .main { min-width: 0; flex: 1; }
.dash-inbox-row .main .l1 { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; }
.dash-inbox-row .main .l2 { display: block; font-size: 11px; color: var(--color-text-muted); }
.dash-inbox-row + .dash-inbox-row { margin-top: 10px; }

.dash-feed-row { display: flex; gap: 10px; }
.dash-feed-row + .dash-feed-row { margin-top: 12px; }
.dash-feed-row .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; margin-top: 5px; }
.dash-feed-row .main { min-width: 0; flex: 1; }
.dash-feed-row .main .l1 { display: block; font-size: 12.5px; line-height: 1.45; }
.dash-feed-row .main .l2 { display: block; font-size: 10.5px; color: var(--color-text-faint); margin-top: 2px; }

.dash-po-row { display: flex; align-items: center; gap: 9px; padding: 9px 5px; border-top: 1px solid var(--color-divider); text-decoration: none; color: var(--color-text); }
.dash-po-row:first-child { border-top: none; }
.dash-po-row .main { min-width: 0; flex: 1; }
.dash-po-row .main .l1 { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; }
.dash-po-row .main .l2 { display: block; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-po-row .side { flex: none; text-align: right; }
.dash-po-row .side .val { display: block; font-size: 10.5px; color: var(--color-text-faint); margin-top: 3px; }

@media (max-width: 1300px) {
  .dash-layout { flex-direction: column; }
  .dash-side { width: 100%; }
  #dash-kpi { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 860px) {
  #dash-kpi { grid-template-columns: repeat(2, 1fr) !important; }
  .dash-bay-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-board-mini { grid-template-columns: 1fr; }
  /* Sama pola dgn `.table-wrap.scroll-y` di app.css breakpoint ini — lepas
     scroll+batas-tinggi INTERNAL `.dash-layout` (flex:1;min-height:0 bikin
     dia diperas jadi cuma sisa ruang flex-column, konten meluber ke DALAM
     scroll internal yg cuma setinggi ~150px alih-alih mendorong tinggi
     `.main-area`), biar tinggi ngikut konten asli & SELURUH halaman
     (`.main-area`, sudah overflow-y:auto di breakpoint ini) yang scroll. */
  .dash-layout { flex: none !important; min-height: 0 !important; overflow-y: visible !important; }
  /* Sama alasannya — tiap kolom papan mini (`.wo-column-body`, punya
     max-height+overflow-y:auto sendiri di app.css) jangan scroll SENDIRI
     lagi di HP, biarkan kartunya apa adanya mengikuti scroll halaman. */
  .dash-board-mini .wo-column-body { max-height: none; overflow-y: visible; }
}

/* ==========================================================================
   Bantuan & Panduan (halaman dokumentasi statis, 2026-09-15) — konten SEMUA
   ditulis langsung di View PHP (bukan dari DB/API), JS cuma urusan
   interaksi (chip jump, accordion toggle, filter pencarian client-side).
   ========================================================================== */
.bantuan-list { display: flex; flex-direction: column; gap: 2px; }
.bantuan-section { border-bottom: 1px solid var(--color-divider); }
.bantuan-section:last-child { border-bottom: 0; }
.bantuan-section-head {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 16px 14px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 15.5px;
}
.bantuan-section-head:hover { background: rgba(32,30,29,.03); }
.bantuan-chevron { flex: none; color: var(--color-text-muted); transition: transform .18s ease; }
.bantuan-section.open .bantuan-chevron { transform: rotate(180deg); }
.bantuan-section-body { display: none; padding: 0 14px 18px; }
.bantuan-topic { padding: 12px 0; border-top: 1px solid var(--color-divider); }
.bantuan-topic:first-child { border-top: 0; padding-top: 0; }
.bantuan-topic h4 { font-size: 13.5px; margin: 0 0 5px; }
.bantuan-topic p { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 8px; line-height: 1.55; }
.bantuan-topic ol, .bantuan-topic ul { margin: 0; padding-left: 19px; font-size: 12.5px; line-height: 1.7; color: var(--color-text); }
.bantuan-topic li + li { margin-top: 2px; }
.bantuan-topic .bantuan-note {
  margin-top: 8px; padding: 8px 11px; border-radius: var(--radius-sm); background: rgba(var(--color-accent-rgb),.07);
  font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
}
.bantuan-empty { text-align: center; padding: 40px 20px; color: var(--color-text-muted); font-size: 13px; }
.bantuan-wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(37,211,102,.4); transition: transform .15s ease, box-shadow .15s ease;
}
.bantuan-wa-float:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(37,211,102,.5); }
@media (max-width: 640px) {
  .bantuan-wa-float { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .bantuan-wa-float svg { width: 22px; height: 22px; }
}

/* ---- Urutan Pemakaian (flow onboarding di atas daftar kategori, 2026-09-18) ----
   Vertical stepper murni CSS (bukan diagram SVG) — konsisten dgn app ini yang
   hindari dependency berat. Tiap step independen buka/tutup sendiri (BUKAN
   accordion eksklusif seperti .bantuan-section) supaya user bisa baca beberapa
   tahap sekaligus berdampingan. Link di dalam body me-reuse setCategory()
   yang sama dipakai klik chip kategori (lihat bantuan.js) — BUKAN duplikat
   konten, cuma pointer terurut ke topik yang sudah ada di bawahnya. */
.bantuan-flow { padding: 20px 20px 8px; margin: 14px 4px; }
.bantuan-flow-title { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.bantuan-flow-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.5; }
.bantuan-flow-steps { margin-top: 18px; }
.bantuan-flow-step { position: relative; padding-left: 40px; }
.bantuan-flow-step:not(:last-child) { padding-bottom: 2px; }
.bantuan-flow-step:not(:last-child)::before {
  content: ''; position: absolute; left: 15px; top: 33px; bottom: -2px; width: 2px; background: var(--color-divider);
}
.bantuan-flow-num {
  position: absolute; left: 0; top: 0; width: 31px; height: 31px; border-radius: 50%; flex: none;
  background: rgba(var(--color-accent-rgb),.1); color: var(--color-accent); font-family: var(--font-heading);
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.bantuan-flow-step.open .bantuan-flow-num { background: var(--color-accent); color: #fff; }
.bantuan-flow-step-head {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 31px; cursor: pointer; padding: 4px 0;
}
.bantuan-flow-step-head:hover .bantuan-flow-label { color: var(--color-accent); }
.bantuan-flow-label { font-weight: 700; font-size: 13.5px; flex: 1; transition: color .15s ease; }
.bantuan-flow-chevron { flex: none; color: var(--color-text-muted); transition: transform .18s ease; }
.bantuan-flow-step.open .bantuan-flow-chevron { transform: rotate(180deg); }
.bantuan-flow-step-body { display: none; padding: 8px 0 22px; }
.bantuan-flow-step-body ol { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.75; color: var(--color-text); }
.bantuan-flow-step-body li + li { margin-top: 4px; }
.bantuan-flow-step-body a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.bantuan-flow-step-body a:hover { text-decoration: underline; }

/* ==========================================================================
   Langganan (self-service billing, 2026-09-17) — kartu paket. Jumlah kartu
   GENUINELY dinamis (tergantung berapa paket aktif dikelola superadmin),
   jadi dirender JS (lihat langganan.js) — pengecualian sah pola MVC hybrid
   (lihat CLAUDE.md), bukan pelanggaran "PHP render struktur form statis".
   ========================================================================== */
.lg-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
/* Catatan (opsional, diatur superadmin) TAMPIL DI DALAM kartu paket yang
   bersangkutan, italic + font lebih kecil dari teks lain di kartu (yang
   terkecil `.lg-plan-price small` 11px) supaya tetap kebaca sebagai
   keterangan tambahan, bukan bagian utama isi kartu. */
.lg-plan-note { font-size: 10.5px; line-height: 1.5; font-style: italic; color: var(--color-warn); background: var(--color-warn-soft); border-radius: 10px; padding: 8px 10px; }
.lg-plan-card {
  position: relative; border: 1px solid var(--color-divider); border-radius: var(--radius-lg, 16px); padding: 20px;
  display: flex; flex-direction: column; gap: 10px; background: #fff;
}
.lg-plan-card.current { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft-2); }
/* Paket "unggulan" (diatur superadmin, 2026-09-18) — TERPISAH dari `.current`
   (paket aktif tenant SEKARANG), keduanya BOLEH tampil bersamaan (border sama
   persis, warna tidak dobel-ganda) kalau kebetulan tenant sedang pakai paket
   yang sama yang ditandai unggulan. */
.lg-plan-card.featured { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft-2); }
.lg-plan-featured-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: #fff; font-family: var(--font-heading); font-weight: 800;
  font-size: 10.5px; letter-spacing: .02em; padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.lg-plan-card .lg-plan-name { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.lg-plan-card .lg-plan-price { font-size: 21px; font-weight: 800; }
.lg-plan-card .lg-plan-price small { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.lg-plan-card .lg-plan-pitch { font-size: 12px; color: var(--color-text-muted); }
.lg-plan-features { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.lg-plan-features li { display: flex; gap: 8px; align-items: flex-start; }
.lg-plan-features li svg { flex: none; margin-top: 2px; color: var(--color-ok); }

.lg-usage-list { display: flex; flex-direction: column; gap: 16px; }
.lg-usage-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.lg-usage-label { font-weight: 700; }
.lg-usage-value { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.lg-usage-bar { height: 8px; border-radius: 99px; background: rgba(32,30,29,.08); overflow: hidden; }
.lg-usage-bar-fill { height: 100%; border-radius: 99px; transition: width .25s ease; }
.lg-usage-bar-ok { background: var(--color-ok); }
.lg-usage-bar-warn { background: var(--color-warn); }
.lg-usage-bar-danger { background: var(--color-danger); }
.bantuan-hl { background: rgba(var(--color-accent-rgb),.28); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Panel "Batas Pemakaian Paket" — header (judul + tombol Tambah Bengkel) boleh turun baris di layar sempit. */
.lg-usage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lg-usage-head-text { flex: 1 1 200px; min-width: 0; }
.lg-add-wrap { flex: none; text-align: right; max-width: 100%; }
.lg-add-hint { font-size: 11.5px; margin-top: 5px; max-width: 280px; margin-left: auto; }
@media (max-width: 640px) {
  .lg-add-wrap { flex: 1 1 100%; text-align: left; }
  .lg-add-hint { max-width: none; margin-left: 0; }
}

/* Hero "Aktif Sampai" — panel Masa Aktif Langganan (2026-09-23), tanggal
   jatuh tempo langganan ditampilkan MENONJOL (bukan cuma teks kecil di
   hint tombol) supaya tenant langsung sadar kapan harus perpanjang, warna
   badge sisa-hari ikut ambang sama seperti progress bar Batas Pemakaian
   (ok/warn/danger). Gaya gradient sama pola hero kartu invoice
   (`openInvoiceDetail()` langganan.js). */
.lg-active-until {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, var(--color-accent-soft), rgba(32,30,29,.02));
  border-radius: 14px; padding: 14px 18px; margin-top: 14px;
}
.lg-active-until-label { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; }
.lg-active-until-date { font-family: var(--font-heading); font-weight: 800; font-size: 21px; margin-top: 2px; color: var(--color-accent-active); }
.lg-active-until-badge { flex: none; font-size: 11.5px; padding: 6px 12px; }
@media (max-width: 480px) {
  .lg-active-until { flex-direction: column; align-items: flex-start; }
}