/* ============================================================
   AimPOS — Tema A "Executive Dark" untuk area owner
   v1 · 6 Nov 2026 · Novi  ·  adaptasi multi-tenant 12 Nov 2026 (Nova)

   File TAMBAHAN, dimuat PALING AKHIR (setelah app.css + owner-fix.css).
   app.css & owner-fix.css tidak diubah.

   ⚠️ MULTI-TENANT: warna brand TIDAK di-hardcode. --brand / --gold diisi
   runtime oleh branding.js dari /api/config tiap tenant. --brand-2 diturunkan
   otomatis dari --brand. Jangan tambahkan --brand/--gold literal di file ini.
   Revert: hapus baris <link ... owner-theme.css> + <script owner-theme.js>.
   ============================================================ */

/* ---------- 1. TOKEN: semua halaman owner pakai variabel app.css ---------- */
body.newui{
  --bg:#0B0D10;
  --surface:#151A20;
  --surface-2:#1A2027;
  --ink:#E9EEF4;
  --ink-2:#C2CCD8;
  --muted:#8B97A6;
  --line:#252D38;

  /* --brand & --gold: dari branding.js (per tenant) — jangan ditimpa */
  --brand-2:color-mix(in srgb, var(--brand) 78%, #ffffff);
  --gold-soft:color-mix(in srgb, var(--gold) 18%, #12161B);

  --ok:#3DDC97;   --ok-bg:#12281F;
  --warn:#F2B33D; --warn-bg:#2A2318;
  --danger:#FF7A7A; --danger-bg:#2A1618;
  --info:#7FB0FF; --info-bg:#161F2E;

  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 18px 44px rgba(0,0,0,.55);
}
html{color-scheme:dark}
body.newui{background:var(--bg);color:var(--ink)}

/* ---------- 2. HEADER ---------- */
header.appbar{
  background:linear-gradient(180deg,#12171D,#0E1217);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.35);
}
.appbar .title{font-weight:800}
.appbar .title small{color:var(--gold);opacity:.9}
.iconbtn{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink)}
.iconbtn:hover{background:rgba(255,255,255,.1)}

/* ---------- 3. NAV: jadi bar bawah di HP, tetap di atas saat desktop ---------- */
.appnav{background:transparent;border:0}
.appnav a.on,.appnav span.link.on{color:var(--gold);background:transparent;box-shadow:none}
.appnav a.on svg,.appnav span.link.on svg{stroke:var(--gold)}

@media(max-width:600px){
  .appnav{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
    background:rgba(15,19,25,.97);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:7px 4px calc(9px + env(safe-area-inset-bottom,0px));
    max-width:none;margin:0;
  }
  .appnav a,.appnav span.link{
    flex:none;border:0;background:transparent;border-radius:10px;
    padding:4px 2px;font-size:9.5px;line-height:1;letter-spacing:.01em;
    color:#8B97A6;font-weight:700;white-space:nowrap;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:46px;
  }
  .appnav a svg,.appnav span.link svg{
    width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;display:block;
  }
  .appnav a:hover,.appnav span.link:hover{color:#C9D3DF}
  body{padding-bottom:66px}
  body:has(.footbar) main.page,
  body:has(.footbar) main.wrap{padding-bottom:152px}
  body:has(.footbar) .footbar{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}

/* ---------- 4. KARTU & JUDUL SEKSI ---------- */
.newui .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:none;
}
.newui .card h3{font-size:.95rem;letter-spacing:-.01em}
.newui .card .sub{color:var(--muted)}
.newui .sec{color:var(--gold);opacity:.92;font-size:.7rem;letter-spacing:.12em}
.newui .sec::before{background:var(--gold);height:14px}
.newui .divider{background:var(--line)}
.newui .muted{color:var(--muted)}

/* kartu dengan gradient terang bawaan halaman → versi gelap */
.newui .card[style*="linear-gradient"]{
  background:linear-gradient(150deg,#1B222B,#12161B) !important;
  border-color:var(--line) !important;
}

/* ---------- 5. TILE (beranda) ---------- */
.newui .tile{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.newui .tile:hover{border-color:#3A4553;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.newui .tile .ico{background:#1D242C;border:1px solid var(--line);color:var(--gold)}
.newui .tile .t{color:var(--ink)}
.newui .tile .d{color:var(--muted)}

/* ---------- 6. HERO / ANGKA BESAR ---------- */
.newui .big{
  background:linear-gradient(150deg,#242C36,#12161B) !important;
  border:1px solid #2E3845;
  position:relative;overflow:hidden;
}
.newui .big:after{
  content:"";position:absolute;right:-50px;top:-70px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--gold) 24%, transparent),transparent 66%);pointer-events:none;
}
.newui .big .lbl{color:#C6D0DC;letter-spacing:.12em;font-size:.66rem}
.newui .big .val{font-size:2.05rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.newui .big .tg,.newui .big .gap{color:#C6D0DC}
.newui .big .pbar{background:rgba(255,255,255,.14)}
.newui .big .pbar i{background:var(--gold)}
.newui .big .mini{background:rgba(255,255,255,.04);border:1px dashed #3A4553}
.newui .big .mini span{color:var(--muted)}

.newui .sisa-card{
  background:linear-gradient(150deg,#1B2A26,#12161B) !important;
  border:1px solid #2B3A38;box-shadow:none;
}
.newui .sisa-card.neg{background:linear-gradient(150deg,#2B1A1B,#141013) !important;border-color:#402426}

/* ---------- 7. KPI / CHIP ANGKA ---------- */
.newui .kpi,.newui .box,.newui .stat,.newui .sum-card,.newui .chip,.newui .dompet-card,.newui .dompet-wrap,.newui .mini,.newui .sumlaci,.newui .preview{
  background:var(--surface);border-color:var(--line);box-shadow:none;
}
.newui .sum-card.total{background:linear-gradient(150deg,#242C36,#12161B) !important;border-color:#2E3845}
.newui .sum-card .val,.newui .stat b,.newui .chip .v,.newui .dompet-card .v,.newui .box .v,.newui .kpi .v{
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.newui .box .l,.newui .stat span,.newui .chip .l,.newui .dompet-card .nm{color:var(--muted)}

/* ---------- 8. BADGE / TAG STATUS ---------- */
.newui .badge.gold{background:#2C2418;color:#E9C57F}
.newui .badge.blue{background:#16202E;color:#8FBBFF}
.newui .badge.green{background:#12291F;color:#63E0A6}
.newui .badge.red{background:#2C1719;color:#FF9186}
.newui .badge.gray{background:#1E252D;color:#AFBAC7}

/* ---------- 9. FORM ---------- */
.newui .input,.newui .select,textarea.newui .input,input[type=date],input[type=month],input[type=number],input[type=text],input[type=search],select{
  background:#11161C;border-color:var(--line);color:var(--ink);
}
.newui .input:focus,.newui .select:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent)}
.newui .input::placeholder::placeholder{color:#6E7A88}
input::placeholder{color:#6E7A88}
.newui .btn{background:#1A2129;border-color:var(--line);color:var(--ink)}
.newui .btn:hover{background:#202831}
.newui .btn.primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));border-color:var(--brand);color:#fff}
.newui .btn.gold{background:var(--gold);border-color:var(--gold);color:#1A1206}
.newui .btn.ghost{background:transparent}
.newui .btn.danger{background:#8E2F24;border-color:#8E2F24;color:#fff}
.newui .btn.ok{background:#1E7A50;border-color:#1E7A50;color:#fff}

/* ---------- 10. LIST / BARIS ---------- */
.newui .row,.newui .tx,.newui .li,.newui .peng-row,.newui .mutasi,.newui .drow,.newui .brow,.newui .order,.newui .pc,.newui .item,.newui .kw{
  border-color:var(--line);
}
.newui .pc,.newui .order,.newui .item,.newui .kw{background:var(--surface);box-shadow:none}
.newui .item.low{background:#20161A}
.newui .order.belum{border-left-color:var(--danger)}
.newui .hint,.newui .note,.newui .empty{background:#141A21;border-color:var(--line);color:var(--muted)}
.newui .empty{background:transparent;border:0}
.newui .toolbar,.newui .tools{border-color:var(--line)}

/* ---------- 11. FOOTBAR / MODAL / TOAST ---------- */
.footbar{background:#12171D;border-top-color:var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.45)}
.modal{background:rgba(4,6,9,.72)}
.modal .card{background:var(--surface)}
.toast{background:#1B2530;border:1px solid var(--line);color:var(--ink)}
.ag-pin,.pin-screen{background:linear-gradient(150deg,#14181D,#0B0D10)}

/* ---------- 12. TABEL & GRAFIK ---------- */
.newui .table th{color:var(--muted)}
.newui .table td{border-color:var(--line)}
.newui .chart .bar .col{background:var(--gold)}
.newui .chart .bar .v{color:var(--gold)}
.newui .chart .bar .lbl{color:var(--muted)}

/* ---------- 12b. KARTU DAFTAR PANJANG (pelanggan/poin) dibuat ringkas ---------- */
.newui .pc,.newui .order,.newui .kw{padding:11px 12px;margin:8px 0;border-radius:16px}
.newui .pc .meta{margin-top:6px;gap:5px}
.newui .pc .meta .badge{font-size:.55rem;padding:2px 7px}
.newui .pc .act{margin-top:8px;padding-top:8px;gap:5px}
.newui .pc .act .btn,
.newui .pc .act button,
.newui .pc .act a{font-size:.72rem;padding:6px 9px;border-radius:9px;line-height:1}
.newui .pc .hp{font-size:.82rem}
.newui .pc .nm{font-size:.92rem}
.newui .order .top,.newui .kw .top{gap:8px}

/* ---------- 13. SCROLL & SENTUH ---------- */
html{scrollbar-width:thin;scrollbar-color:#2B3542 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#2B3542;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 14. DESKTOP: nav tetap di atas ---------- */
@media(min-width:601px){
  .appnav{gap:6px;padding-bottom:10px}
  .appnav a,.appnav span.link{background:rgba(255,255,255,.05);border:1px solid var(--line);flex-direction:row;gap:6px;padding:6px 11px;font-size:.72rem}
  .appnav a svg,.appnav span.link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .appnav a:hover,.appnav span.link:hover{background:rgba(255,255,255,.1);border-color:#3A4553}
  body{padding-bottom:0}
}