/* =============================================================================
 * skin.css — kulit "Exa" untuk dasbor pulaudomain (/admin + /account).
 *
 * KENAPA CSS, BUKAN HALAMAN BARU
 * Source TypeScript pulaudomain-app hilang (lihat README). Menulis ulang dasbor
 * dari nol = kehilangan fitur. Untungnya app-nya sudah 100% token-driven
 * (`:root{--bg,--ink,--card,--line,...}` + `html[data-theme=dark]`) dan
 * markup-nya semantik (.shell/.sidebar/.nav-link/.topbar/.card/.stat/.table).
 * Jadi tampilannya bisa diganti total dari luar tanpa menyentuh satu pun fitur:
 * halaman, tombol, form, dan JS app tetap persis sama.
 *
 * CARA KERJA SAKELAR
 * Semua aturan di bawah digembok di `html[data-skin="exa"]`. skin.js memasang
 * atribut itu sebelum paint (dibaca dari cookie `pd_skin`, default `exa`).
 * Mode `klasik` = atribut dilepas → file ini tidak menyentuh apa pun, app balik
 * ke tampilan aslinya. Tidak ada reload, tidak ada state di server.
 *
 * Urutan bagian:
 *   0. sakelar tampilan (dipakai di KEDUA mode, sengaja tidak digembok)
 *   1. token
 *   2. sidebar
 *   3. topbar + kerangka konten
 *   4. permukaan umum (card, stat, tabel, badge, tombol, form)
 *   5. dasbor penjual /account
 *   6. rail (sidebar diciutkan) + mobile
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 0. Sakelar tampilan — satu-satunya markup baru yang kita tambahkan.
 *    Harus terbaca di dua dunia: sidebar hitam (klasik) & sidebar terang (exa).
 *    Gaya dasar = klasik; override exa ada di §2.
 * ------------------------------------------------------------------------ */
.pdsk-sw {
  /* satu baris, serendah mungkin: sidebar admin sudah padat (17 menu) */
  margin: 8px 8px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdsk-sw-l {
  flex: none;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.pdsk-sw-g {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9px;
}
.pdsk-sw-b {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9a9a9a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.pdsk-sw-b:hover:not([aria-pressed="true"]) {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.pdsk-sw-b[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.pdsk-sw-b .pdsk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.pdsk-sw-b[aria-pressed="true"] .pdsk-dot {
  opacity: 1;
  background: var(--teal, #0caba2);
}

/* Sidebar adalah grid item .shell. Default min-height:auto = setinggi isi
   menu, jadi box-nya lebih tinggi dari layar, overflow tidak pernah aktif,
   dan sticky menahan ATAS menu — Keluar di bawah lipatan, tidak bisa digulir.
   min-height:0 memaksa tinggi = viewport, baru overflow-y:auto jalan. */
.sidebar {
  min-height: 0 !important;
  align-self: start;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.sidebar > .foot {
  position: static;
  flex: 0 0 auto;
  background: var(--sidebar-bg);
}
.sidebar > .spacer {
  flex: 1 1 auto;
  flex-shrink: 1;
  min-height: 0;
}

/* =============================================================================
 * 1. TOKEN — seluruh palet app ditulis ulang ke bahasa Exa.
 *    Nilai diambil dari repos/get-id-dashboard/src/app/globals.css
 *    (surface putih, hairline tipis, skala teks abu), warna merek tetap
 *    teal pulaudomain — cuma digelapkan supaya lulus kontras di latar putih:
 *    #0caba2 (2,4:1 di putih) → #0f766e (5,4:1). Lihat memori kontras-oklch.
 * ========================================================================== */
html[data-skin="exa"] {
  color-scheme: light;

  /* permukaan */
  --bg: #ffffff;
  --card: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f5f6f8;
  --field: #ffffff;
  --bar-bg: rgba(255, 255, 255, 0.88);
  --sidebar-bg: #fbfcfd;
  --sidebar-w: 248px;

  /* teks */
  --ink: #111827;
  --ink-2: #374151;
  --ink-soft: rgba(17, 24, 39, 0.72);
  --muted: #6b7280;
  --muted-2: #9ca3af;

  /* garis */
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.06);
  --line-3: rgba(0, 0, 0, 0.04);
  --line-strong: #d4d4d4;

  /* merek */
  --teal: #0f766e;
  --teal-d: #0f766e;
  --teal-strong: #115e59;
  --teal-soft: #f0fdfa;
  --teal-soft-2: #ccfbf1;
  --teal-line: #99f6e4;

  --gold: #b07d2e;
  --gold-soft: #fdf8ec;
  --gold-line: #ecdcb8;
  --gold-strong: #8a5f1c;

  /* status — versi tenang ala Exa/ops desk, bukan neon */
  --green: #067647;
  --green-soft: #ecfdf3;
  --green-soft-2: #d7f4e3;
  --green-line: #abefc6;
  --amber: #b54708;
  --amber-soft: #fffaeb;
  --amber-line: #fedf89;
  --red: #b42318;
  --red-soft: #fef3f2;
  --red-line: #fecdca;
  --blue: #1f40ed;
  --warn-soft: #fffaeb;
  --warn-line: #fedf89;
  --green-chip: #ecfdf3;
  --green-chip-ink: #067647;
  --red-chip: #fef3f2;
  --red-chip-ink: #b42318;

  /* tombol gelap & ornamen */
  --btn-dark-bg: #111827;
  --btn-dark-hover: #1f2937;
  --btn-dark-ink: #ffffff;
  --dots: rgba(0, 0, 0, 0.05);
  --dots-2: rgba(0, 0, 0, 0.03);

  /* token khas kulit ini */
  --pdsk-hover: rgba(0, 0, 0, 0.04);
  --pdsk-hover-strong: rgba(0, 0, 0, 0.05);
  --pdsk-radius: 12px;
  --pdsk-radius-sm: 8px;
  --pdsk-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --pdsk-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mode gelap: SEMUA token di atas wajib ditulis ulang, karena blok
   `html[data-theme=dark]` milik app kalah spesifik dari `html[data-skin=exa]`. */
html[data-skin="exa"][data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0b0d;
  --card: #141416;
  --surface-2: #111113;
  --surface-3: #1c1c20;
  --field: #151517;
  --bar-bg: rgba(11, 11, 13, 0.86);
  --sidebar-bg: #0e0e10;

  --ink: #f4f4f5;
  --ink-2: #d4d4d8;
  --ink-soft: rgba(244, 244, 245, 0.78);
  --muted: #a1a1aa;
  --muted-2: #71717a;

  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.07);
  --line-3: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.28);

  --teal: #2dd4bf;
  --teal-d: #5eead4;
  --teal-strong: #14b8a6;
  --teal-soft: rgba(45, 212, 191, 0.14);
  --teal-soft-2: rgba(45, 212, 191, 0.24);
  --teal-line: rgba(45, 212, 191, 0.4);

  --gold: #d8b06a;
  --gold-soft: rgba(216, 176, 106, 0.14);
  --gold-line: rgba(216, 176, 106, 0.36);
  --gold-strong: #e2c48c;

  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, 0.13);
  --green-soft-2: rgba(74, 222, 128, 0.22);
  --green-line: rgba(74, 222, 128, 0.36);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.13);
  --amber-line: rgba(251, 191, 36, 0.36);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.13);
  --red-line: rgba(248, 113, 113, 0.36);
  --blue: #93b4ff;
  --warn-soft: rgba(251, 191, 36, 0.1);
  --warn-line: rgba(251, 191, 36, 0.3);
  --green-chip: rgba(74, 222, 128, 0.16);
  --green-chip-ink: #4ade80;
  --red-chip: rgba(248, 113, 113, 0.16);
  --red-chip-ink: #f87171;

  --btn-dark-bg: #f4f4f5;
  --btn-dark-hover: #ffffff;
  --btn-dark-ink: #111114;
  --dots: rgba(255, 255, 255, 0.05);
  --dots-2: rgba(255, 255, 255, 0.03);

  --pdsk-hover: rgba(255, 255, 255, 0.05);
  --pdsk-hover-strong: rgba(255, 255, 255, 0.08);
  --pdsk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

html[data-skin="exa"] :is(h1, h2, h3, h4) {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.02em;
}

html[data-skin="exa"] body {
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* =============================================================================
 * 2. SIDEBAR — dari panel hitam jadi kolom terang ala Exa:
 *    248px, hairline kanan, item 30px radius 6px, aktif = abu tipis (bukan blok
 *    teal), label seksi huruf kecil.
 * ========================================================================== */
html[data-skin="exa"] .sidebar {
  background: var(--sidebar-bg);
  color: var(--ink);
  border-right: 1px solid var(--line-2);
  padding: 12px 10px;
  gap: 1px;
  min-height: 0 !important;
  align-self: start;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
html[data-skin="exa"] .sidebar > * {
  flex-shrink: 0;
}
html[data-skin="exa"] .sidebar .spacer {
  flex: 1 1 auto;
  flex-shrink: 1;
  min-height: 0;
}
html[data-skin="exa"] .sidebar .foot {
  position: static;
  flex: 0 0 auto;
  background: var(--sidebar-bg);
}

/* wordmark: font pixel dipertahankan (itu identitas pulaudomain), warnanya saja
   yang ikut latar terang. */
html[data-skin="exa"] .sidebar .brand {
  padding: 6px 8px 14px;
  font-size: 20px;
  color: var(--ink);
}
html[data-skin="exa"] .sidebar .brand .dot {
  background: #0caba2;
  box-shadow: 0 0 0 2px var(--sidebar-bg);
}
html[data-skin="exa"] .sidebar .brand .tag {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: 5px;
  padding: 2px 5px;
  margin-top: 4px;
}
html[data-skin="exa"] .sb-hide {
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
}
html[data-skin="exa"] .sb-hide:hover {
  background: var(--pdsk-hover);
  color: var(--ink);
}

html[data-skin="exa"] .nav-group {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-2);
  padding: 16px 8px 6px;
}
html[data-skin="exa"] .nav-link {
  height: 30px;
  padding: 0 8px;
  gap: 10px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
}
html[data-skin="exa"] .nav-link .ic {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
html[data-skin="exa"] .nav-link:hover {
  background: var(--pdsk-hover);
  color: var(--ink);
}
html[data-skin="exa"] .nav-link.active {
  background: var(--pdsk-hover-strong);
  color: var(--ink);
  font-weight: 500;
}
html[data-skin="exa"] .nav-link.active .ic {
  color: var(--ink);
}
html[data-skin="exa"] .nav-link .count,
html[data-skin="exa"] .nav-link.active .count {
  margin-left: auto;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
html[data-skin="exa"] .nav-link .wa-tag,
html[data-skin="exa"] .nav-link.active .wa-tag {
  background: var(--surface-3);
  color: var(--muted);
}

/* Kaki sidebar. Inline style app mengunci warna terang-di-atas-hitam
   (color:#fff / #9a9a9a / avatar #1f1f1f) → wajib !important di sini saja. */
html[data-skin="exa"] .sidebar .foot {
  border-top: 1px solid var(--line-2);
  padding-top: 8px;
  margin-top: 8px;
}
html[data-skin="exa"] .sidebar .foot .row,
html[data-skin="exa"] .sidebar .foot a,
html[data-skin="exa"] .sidebar .foot button:not(.pdsk-sw-b) {
  color: var(--muted) !important;
}
html[data-skin="exa"] .sidebar .foot .row div:not(.mono) {
  color: var(--ink) !important;
}
html[data-skin="exa"] .sidebar .foot a:hover,
html[data-skin="exa"] .sidebar .foot button:not(.pdsk-sw-b):hover .row {
  color: var(--ink) !important;
}
html[data-skin="exa"] .sidebar .foot a,
html[data-skin="exa"] .sidebar .foot form > button {
  border-radius: 6px;
}
html[data-skin="exa"] .sidebar .foot a:hover {
  background: var(--pdsk-hover);
}
html[data-skin="exa"] .sidebar .avatar {
  background: var(--surface-3) !important;
  color: var(--ink) !important;
}
html[data-skin="exa"] .sidebar .theme-toggle {
  background: var(--card);
  border-color: var(--line);
  color: var(--muted);
}
html[data-skin="exa"] .sidebar .theme-toggle:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
/* lompatan "Konsol Super Admin" di sidebar penjual */
html[data-skin="exa"] .pd-adminjump {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  color: var(--teal-d) !important;
  font-weight: 600;
  border-radius: 8px;
}
html[data-skin="exa"] .pd-adminjump:hover {
  background: var(--teal-soft-2);
}
/* sakelar penjual/pembeli di sidebar */
html[data-skin="exa"] .pd-modesw {
  background: var(--surface-3);
  border-radius: 9px;
}
html[data-skin="exa"] .pd-modesw-b {
  color: var(--muted);
}
html[data-skin="exa"] .pd-modesw-b:not(.on):hover {
  color: var(--ink);
  background: var(--pdsk-hover);
}
html[data-skin="exa"] .pd-modesw-b.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--pdsk-shadow);
}

/* sakelar tampilan versi terang */
html[data-skin="exa"] .pdsk-sw-l {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-2);
}
html[data-skin="exa"] .pdsk-sw-g {
  background: var(--surface-3);
}
html[data-skin="exa"] .pdsk-sw-b {
  color: var(--muted);
}
html[data-skin="exa"] .pdsk-sw-b:hover:not([aria-pressed="true"]) {
  color: var(--ink);
  background: var(--pdsk-hover);
}
html[data-skin="exa"] .pdsk-sw-b[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--pdsk-shadow);
}

/* =============================================================================
 * 3. TOPBAR + KERANGKA KONTEN
 * ========================================================================== */
html[data-skin="exa"] .topbar {
  height: 52px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bar-bg);
}
html[data-skin="exa"] .topbar .crumb {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
html[data-skin="exa"] .content {
  padding: 24px 28px 56px;
  max-width: 1180px;
}
html[data-skin="exa"] .page-head {
  margin-bottom: 20px;
}
html[data-skin="exa"] .page-head h1 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
html[data-skin="exa"] .page-head .sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

/* =============================================================================
 * 4. PERMUKAAN UMUM
 * ========================================================================== */
html[data-skin="exa"] .card,
html[data-skin="exa"] .stat,
html[data-skin="exa"] .table-wrap {
  border-radius: var(--pdsk-radius);
  border-color: var(--line);
  box-shadow: var(--pdsk-shadow);
}
html[data-skin="exa"] .card {
  padding: 18px;
}
html[data-skin="exa"] .stat {
  padding: 16px 18px;
}
html[data-skin="exa"] .stat .label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
html[data-skin="exa"] .stat .label .ic {
  color: var(--muted-2);
}
/* angka: font pixel diganti sans tabular — ini data, bukan logo */
html[data-skin="exa"] .stat .value {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
html[data-skin="exa"] .card h3 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* tabel: header huruf kecil, garis hairline, hover abu tipis */
html[data-skin="exa"] :is(table.tbl, table.table) {
  font-size: 14px;
}
html[data-skin="exa"] :is(table.tbl, table.table) thead th {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
html[data-skin="exa"] :is(table.tbl, table.table) td,
html[data-skin="exa"] :is(table.tbl, table.table) th {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-3);
}
html[data-skin="exa"] :is(table.tbl, table.table) tbody tr:hover {
  background: var(--surface-2);
}

/* badge: mono kapital → label tenang */
html[data-skin="exa"] .badge {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: capitalize;
  border-radius: 6px;
  padding: 2px 8px;
}
html[data-skin="exa"] .badge.gray {
  background: var(--surface-3);
  border-color: var(--line);
}

/* tombol */
html[data-skin="exa"] .btn {
  border-radius: var(--pdsk-radius-sm);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
}
html[data-skin="exa"] .btn-teal {
  background: var(--teal);
  border-color: var(--teal);
}
/* Di mode gelap --teal jadi terang (#2dd4bf); teks putih di atasnya cuma 1,9:1.
   Dibalik: tinta gelap di atas teal terang ≈ 9:1. */
html[data-skin="exa"][data-theme="dark"] .btn-teal {
  color: #06302d;
}
html[data-skin="exa"][data-theme="dark"] .btn-teal:hover {
  color: #04211f;
}
html[data-skin="exa"] .btn-teal:hover {
  background: var(--teal-strong);
  border-color: var(--teal-strong);
}
html[data-skin="exa"] .btn-ghost {
  border-color: var(--line);
  box-shadow: var(--pdsk-shadow);
}
html[data-skin="exa"] .btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

/* form */
html[data-skin="exa"] .field label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin-bottom: 6px;
}
html[data-skin="exa"] .field input,
html[data-skin="exa"] .field select,
html[data-skin="exa"] .field textarea,
html[data-skin="exa"] .field-select,
html[data-skin="exa"] .pd-input,
html[data-skin="exa"] .select {
  border-radius: var(--pdsk-radius-sm);
  border-color: var(--line-strong);
  font-size: 14px;
}
html[data-skin="exa"] .field input:focus,
html[data-skin="exa"] .field select:focus,
html[data-skin="exa"] .field textarea:focus,
html[data-skin="exa"] .pd-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft-2);
}
html[data-skin="exa"] .chip {
  border-color: var(--line-strong);
  border-radius: 8px;
  font-size: 13px;
}
/* .notice dipakai app untuk PERINGATAN (kuota habis, pesanan belum dibayar).
   Warnanya jangan dinetralkan jadi abu — warna = arti. Dipindah ke amber Exa. */
html[data-skin="exa"] .notice {
  border-radius: var(--pdsk-radius-sm);
  background: var(--amber-soft);
  border-color: var(--amber-line);
  color: var(--ink-2);
}

/* =============================================================================
 * 5. DASBOR PENJUAL /account — kelas pd-* punya bahasa sendiri, disamakan.
 * ========================================================================== */
html[data-skin="exa"] .pd-app-content {
  padding: 24px 28px 56px;
  max-width: 1180px;
}
html[data-skin="exa"] .pd-dtop h1,
html[data-skin="exa"] .pd-dhead h1 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
html[data-skin="exa"] .pd-dtop p,
html[data-skin="exa"] .pd-dhead p {
  font-size: 14px;
}
html[data-skin="exa"] .pd-dstat,
html[data-skin="exa"] .pd-dcard,
html[data-skin="exa"] .pd-dshort a,
html[data-skin="exa"] .pd-mini,
html[data-skin="exa"] .pd-dsearch {
  border-radius: var(--pdsk-radius);
  border-color: var(--line);
  box-shadow: var(--pdsk-shadow);
}
html[data-skin="exa"] .pd-dstat .iw,
html[data-skin="exa"] .pd-dshort .iw {
  background: var(--surface-3);
  color: var(--muted);
  border-radius: 8px;
}
html[data-skin="exa"] .pd-dstat .v {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
html[data-skin="exa"] .pd-dstat .k {
  font-size: 13px;
}
html[data-skin="exa"] .pd-mini:hover,
html[data-skin="exa"] .pd-dshort a:hover {
  transform: none;
  border-color: var(--line-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
html[data-skin="exa"] .pd-mini-meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
html[data-skin="exa"] .pd-mini-dn {
  font-weight: 500;
}
html[data-skin="exa"] .pd-mini-price,
html[data-skin="exa"] .pd-drow .pri {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
html[data-skin="exa"] .pd-drow .dn {
  font-weight: 500;
}

/* Kalkulator saldo — rincian penjualan / ditahan / ditarik / sisa. */
.pd-saldo-calc .pd-dcard-hd h2 {
  font-size: 15px;
  font-weight: 600;
}
.pd-saldo-isi {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 14px;
}
.pd-saldo-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
.pd-saldo-row:last-of-type,
.pd-saldo-total {
  border-bottom: 0;
}
.pd-saldo-kiri {
  min-width: 0;
}
.pd-saldo-label {
  color: var(--ink, #0a0a0a);
  font-weight: 500;
}
.pd-saldo-hint {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted, #777);
  line-height: 1.35;
}
.pd-saldo-amt {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink, #0a0a0a);
  white-space: nowrap;
}
.pd-saldo-amt.plus { color: var(--teal-strong, #077a74); }
.pd-saldo-amt.min { color: var(--amber, #b45309); }
.pd-saldo-row-tahan .pd-saldo-label { color: var(--amber, #b45309); }
.pd-saldo-total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1.5px solid var(--ink, #0a0a0a);
}
.pd-saldo-total .pd-saldo-label,
.pd-saldo-total .pd-saldo-amt {
  font-size: 15px;
  font-weight: 650;
}
.pd-saldo-foot {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted, #777);
  line-height: 1.45;
}
html[data-skin="exa"] .pd-saldo-calc {
  border-radius: var(--pdsk-radius);
}

.pd-serah-card {
  border-left: 3px solid var(--amber, #b45309) !important;
}
.pd-serah-lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--muted, #777);
  line-height: 1.45;
}
.pd-serah-item {
  padding: 12px 0;
  border-top: 1px solid var(--line, rgba(0,0,0,.08));
}
.pd-serah-item:first-of-type { border-top: 0; padding-top: 0; }
.pd-serah-dn {
  font-weight: 650;
  font-size: 15px;
  color: var(--ink, #0a0a0a);
}
.pd-serah-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted, #777);
}
.pd-serah-ok {
  margin-top: 8px;
  font-size: 13px;
  color: var(--green, #047857);
}
.pd-serah-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.pd-serah-err {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--red, #d44);
}
@media (max-width: 720px) {
  .pd-serah-form { grid-template-columns: 1fr; }
}
html[data-skin="exa"] .pd-dquick a {
  border-radius: 6px;
  font-weight: 400;
  font-size: 15px;
}
html[data-skin="exa"] .pd-dquick a:hover {
  background: var(--pdsk-hover);
  color: var(--ink);
}
html[data-skin="exa"] .pd-dquick a .ic {
  color: var(--muted);
}
html[data-skin="exa"] .pd-dquick .cnt {
  background: var(--surface-3);
  color: var(--ink-2);
  font-weight: 500;
}
html[data-skin="exa"] .pd-dupsell {
  background: var(--surface-2);
  border-color: var(--line);
}
html[data-skin="exa"] .pd-dupsell h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* tab mode di halaman /account/sell */
html[data-skin="exa"] .pd-modetab {
  font-size: 14px;
  font-weight: 500;
  border-radius: 7px;
}
html[data-skin="exa"] .pd-modetab.on,
html[data-skin="exa"] .pd-modetab.on .ic {
  background: var(--card);
  color: var(--ink);
}
html[data-skin="exa"] .pd-modetab.on {
  box-shadow: var(--pdsk-shadow);
}
html[data-skin="exa"] .pd-modetab.on .cnt {
  background: var(--teal);
  color: #fff;
}

/* =============================================================================
 * 6. RAIL (sidebar diciutkan) + MOBILE
 *
 * 🔑 Kontrak app yang wajib dihormati (dibaca dari bundel `app/admin/layout-*.js`):
 *     .sb-hide  → HANYA MENAMBAH class `sb-collapsed` di <html>
 *     .sb-show  → HANYA MELEPASNYA
 *   Buka dan tutup itu dua tombol berbeda, bukan satu toggle. Versi pertama kulit
 *   ini menyembunyikan `.sb-show` dan mengira `.sb-hide` di dalam rail bisa dipakai
 *   untuk membuka lagi — akibatnya sidebar bisa diciutkan tapi TIDAK BISA dibuka.
 *   Sekarang mengikuti pola Exa: dua lapisan bertukar di tempat yang sama —
 *   saat lebar, tombol ciutkan duduk di kanan wordmark; saat rail, `.sb-show`
 *   milik app mengambil alih posisi itu, rata tengah rail.
 *
 * Semua perpindahan dianimasikan 320ms cubic-bezier(.4,0,.2,1) seperti template
 * Exa. Lebar sidebar TIDAK diset sendiri — dia mengikuti kolom grid `.shell`
 * yang dianimasikan, supaya sidebar dan area konten bergerak sebagai satu benda
 * (kalau sidebar diberi `width` sendiri, dia loncat duluan dan kontennya
 * ketinggalan). Label nav = teks polos tanpa <span>, jadi memudar lewat
 * `color:transparent` lalu terklip lebar sidebar — bukan `display:none` yang loncat.
 *
 * Ciutkan hanya ada di /admin; /account tidak punya `.sb-hide` sama sekali.
 * ========================================================================== */
@media (min-width: 901px) {
  html[data-skin="exa"] .shell {
    transition: grid-template-columns 320ms var(--pdsk-ease);
  }
  html[data-skin="exa"] .sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transition: padding 320ms var(--pdsk-ease);
  }
  html[data-skin="exa"] .content,
  html[data-skin="exa"] .pd-app-content {
    transition: padding 320ms var(--pdsk-ease);
  }
  html[data-skin="exa"] .nav-link,
  html[data-skin="exa"] .sidebar .foot a,
  html[data-skin="exa"] .sidebar .foot .row,
  html[data-skin="exa"] .sidebar .foot form > button {
    transition: background 0.12s ease, color 240ms var(--pdsk-ease),
      padding 320ms var(--pdsk-ease);
  }
  html[data-skin="exa"] .nav-group {
    /* 16+18+6 = 40px persis; dilebihkan supaya tidak terpotong kalau font
       jatuh sedikit lebih tinggi. Nilainya cuma batas atas untuk animasi. */
    max-height: 52px;
    overflow: hidden;
    transition: max-height 320ms var(--pdsk-ease), opacity 180ms var(--pdsk-ease),
      padding 320ms var(--pdsk-ease), margin 320ms var(--pdsk-ease);
  }
  html[data-skin="exa"] .brand .sb-logo,
  html[data-skin="exa"] .brand .tag,
  html[data-skin="exa"] .sidebar .foot .row > div,
  html[data-skin="exa"] .pdsk-sw,
  html[data-skin="exa"] .pd-modesw {
    max-width: 220px;
    max-height: 90px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 320ms var(--pdsk-ease), max-height 320ms var(--pdsk-ease),
      opacity 120ms var(--pdsk-ease), margin 320ms var(--pdsk-ease),
      padding 320ms var(--pdsk-ease);
  }

  /* --------------------------------------------------- keadaan rail 60px -- */
  html[data-skin="exa"].sb-collapsed .shell {
    grid-template-columns: 60px 1fr;
  }
  html[data-skin="exa"].sb-collapsed .sidebar {
    display: flex;
    padding: 12px 8px;
  }
  html[data-skin="exa"].sb-collapsed .content {
    padding-left: 28px;
  }

  /* header rail: wordmark menciut, .sb-hide pamit, .sb-show app masuk */
  html[data-skin="exa"].sb-collapsed .brand {
    height: 44px;
    padding: 0;
    gap: 0;
  }
  html[data-skin="exa"].sb-collapsed .brand .sb-logo,
  html[data-skin="exa"].sb-collapsed .brand .tag,
  html[data-skin="exa"].sb-collapsed .sidebar .foot .row > div,
  html[data-skin="exa"].sb-collapsed .pdsk-sw,
  html[data-skin="exa"].sb-collapsed .pd-modesw {
    max-width: 0;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  html[data-skin="exa"].sb-collapsed .sb-hide {
    display: none;
  }
  /* Tombol buka muncul seketika di posisi header rail. Latarnya SOLID (warna
     sidebar), bukan transparan: selama ~120ms wordmark masih memudar di
     belakangnya, dan tanpa latar solid keduanya kelihatan bertumpuk.
     Sengaja TIDAK pakai animasi masuk — kalau animasinya tidak jalan (tab
     latar, prefers-reduced-motion, mesin render aneh), tombol ini bisa
     tertinggal di opacity 0 dan sidebar mustahil dibuka lagi. */
  html[data-skin="exa"].sb-collapsed .sb-show {
    display: flex;
    position: fixed;
    left: 8px;
    top: 12px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--sidebar-bg);
    color: var(--muted);
    box-shadow: none;
  }
  html[data-skin="exa"].sb-collapsed .sb-show:hover {
    background: var(--pdsk-hover);
    color: var(--ink);
  }

  /* baris: ikon meluncur ke sumbu rail (x=30px), teksnya memudar lalu terklip */
  html[data-skin="exa"].sb-collapsed .nav-link,
  html[data-skin="exa"].sb-collapsed .sidebar .foot a,
  html[data-skin="exa"].sb-collapsed .sidebar .foot .row,
  html[data-skin="exa"].sb-collapsed .sidebar .foot form > button > .row {
    color: transparent !important;
    padding-left: 14px !important;
    padding-right: 0 !important;
  }
  /* ikon kaki sidebar mewarisi warna barisnya → dikembalikan eksplisit,
     kalau tidak ikut jadi transparan. */
  html[data-skin="exa"].sb-collapsed .sidebar .foot .ic {
    color: var(--muted) !important;
  }
  html[data-skin="exa"].sb-collapsed .nav-link .count,
  html[data-skin="exa"].sb-collapsed .nav-link .wa-tag,
  html[data-skin="exa"].sb-collapsed .sidebar .foot .mono {
    opacity: 0;
    transition: opacity 160ms var(--pdsk-ease);
  }
  html[data-skin="exa"].sb-collapsed .nav-group {
    max-height: 0;
    opacity: 0;
    padding: 12px 0 0;
    margin: 0 4px;
    border-top: 1px solid var(--line-2);
  }
  html[data-skin="exa"].sb-collapsed .sidebar .foot .between {
    flex-direction: column;
    gap: 6px;
  }
  html[data-skin="exa"].sb-collapsed .sidebar .foot form {
    width: 100%;
  }
}

@media (max-width: 900px) {
  /* tombol hamburger & tombol "tampilkan sidebar" ikut latar terang */
  html[data-skin="exa"] .sb-burger {
    color: var(--ink);
    border-color: var(--line);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }
  html[data-skin="exa"] .sidebar {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    border-right: 1px solid var(--line);
  }
  html[data-skin="exa"] .sb-backdrop {
    background: rgba(17, 24, 39, 0.28);
  }
  /* Tombol hamburger melayang di kiri-atas (44px @ left:14px): topbar wajib
     menyisakan ruang, kalau tidak judul halaman ketutup. */
  html[data-skin="exa"] .topbar {
    padding-left: 64px;
    padding-right: 16px;
  }
  html[data-skin="exa"] .content {
    padding: 16px 14px 48px;
  }
  /* /account tidak punya topbar: app menyisakan 64px di atas supaya judul
     halaman tidak tertutup tombol hamburger yang melayang. Jangan ditimpa. */
  html[data-skin="exa"] .pd-app-content {
    padding: 64px 14px 48px;
  }
}