/* Syandana Construction — lapisan aplikasi di atas ds.css (sistem desain "Modernist").
   ds.css memegang token & komponen dasar; berkas ini HANYA boleh memakai var(--…),
   tidak menulis hex/px mentah kecuali di blok :root di bawah (satu-satunya tempat
   nilai baru boleh lahir). Datar, tanpa sudut membulat, garis 2px, rata kiri. */

:root {
  /* ── Aksen disetel ulang ke oranye merek logo (#EC8F09).
     ds.css dikirim dengan aksen merah #ec3013; menukar hex begitu saja merusak
     keterbacaan karena oranye merek di atas ground terang hanya 2,2:1 — di bawah
     ambang 3:1 untuk elemen antarmuka. Maka: oranye dipakai sebagai BIDANG ISI,
     dan teks beraksen memakai langkah gelap (--color-accent-700, 5,9:1). */
  --color-accent:     #EC8F09;
  --color-accent-100: #FFF6E8;
  --color-accent-200: #FDE8C2;
  --color-accent-300: #F9D189;
  --color-accent-400: #F4B347;
  --color-accent-500: #EC8F09;
  --color-accent-600: #C87700;
  --color-accent-700: #8A4E00;
  --color-accent-800: #603600;
  --color-accent-900: #3D2400;
  --color-accent-2:   #848484;   /* abu-abu logo */

  /* ── Semantik keuangan. ds.css tidak menyertakannya; ditambah seminimal mungkin.
     Warna TIDAK PERNAH jadi satu-satunya penanda — angka bertanda selalu membawa
     +/− dan status selalu punya label teks. Laporan sering dicetak hitam-putih. */
  --pos: #1B7A3E;       /* laba, lunas, dalam anggaran   4,8:1 */
  --neg: #AE1800;       /* rugi, jatuh tempo, over budget 6,4:1 */
  --warn: #C87700;      /* mendekati jatuh tempo — bidang isi + teks tinta */
  --muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --line: var(--color-divider);
  --line-thin: color-mix(in srgb, var(--color-text) 18%, transparent);

  --sidebar-w: 236px;
  --isi-max: 1600px;
}

/* `hidden` harus benar-benar menyembunyikan. Aturan penulis seperti
   `.sheet-bg { display:flex }` mengalahkan aturan UA `[hidden]{display:none}`,
   jadi tanpa baris ini SETIAP lembar bawah tampil sekaligus saat halaman dimuat. */
[hidden] { display: none !important; }

/* Angka uang wajib rata kolom di mana pun */
body { -webkit-text-size-adjust: 100%; }
.num, td.num, th.num, .tile-val, .kv-val, .kartu-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.num, td.num, th.num { text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   Kerangka halaman
   ══════════════════════════════════════════════════════════════════════════ */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--color-neutral-900); color: var(--color-neutral-200);
  border-right: 2px solid var(--color-divider);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand {
  padding: var(--space-4);
  border-bottom: 2px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
}
.sidebar .brand img { width: 100%; max-width: 168px; }
.sidebar nav { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-4); font-size: 14px; text-decoration: none;
  color: var(--color-neutral-300); border-left: 3px solid transparent;
}
.sidebar nav a svg { width: 17px; height: 17px; flex: none; }
.sidebar nav a:hover { background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent); color: #fff; }
.sidebar nav a.on {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: #fff; border-left-color: var(--color-accent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.sidebar .grup {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-neutral-100) 45%, transparent);
  padding: var(--space-4) var(--space-4) var(--space-1);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-bg); position: sticky; top: 0; z-index: 30;
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; text-decoration: none; color: inherit; }
.topbar .who b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.topbar .peran {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-accent-200); color: var(--color-accent-800); padding: 2px 7px;
}
.hamb, .topbar-logo { display: none; }

.content { padding: var(--space-6) var(--space-4) 96px; width: 100%; max-width: var(--isi-max); }

.page-head { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: 13px; margin: 0; }
.page-head .aksi { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

.flash { padding: 10px var(--space-3); margin-bottom: var(--space-3); border-left: 4px solid var(--color-text); background: var(--color-surface); font-size: 14px; }
.flash.ok { border-left-color: var(--pos); }
.flash.err { border-left-color: var(--neg); }
.flash.warn { border-left-color: var(--warn); }

/* ══════════════════════════════════════════════════════════════════════════
   Kartu ringkasan (4 tile)
   ══════════════════════════════════════════════════════════════════════════ */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); margin-bottom: var(--space-4); }
.tile { background: var(--color-bg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.tile:hover { background: var(--color-surface); }
.tile-lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tile-val { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 28px; line-height: 1.1; }
.tile-val.pos { color: var(--pos); } .tile-val.neg { color: var(--neg); }
.tile-note { font-size: 11px; color: var(--muted); }
.tiles-2 { grid-template-columns: repeat(3, 1fr); }

/* ══════════════════════════════════════════════════════════════════════════
   Kartu proyek
   ══════════════════════════════════════════════════════════════════════════ */
.grid-proyek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 1600px) { .grid-proyek { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kartu { background: var(--color-surface); border: 2px solid var(--color-divider); display: flex; flex-direction: column; }
.kartu-head { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.kartu-kode { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); display: flex; align-items: center; gap: 6px; }
.kartu-kode .st { margin-left: auto; color: var(--muted); }
.kartu h3 { font-size: 17px; margin: 0; line-height: 1.2; }
.kartu h3 a { color: inherit; text-decoration: none; }
.kartu h3 a:hover { color: var(--color-accent-700); }
.kartu-klien { font-size: 12px; color: var(--muted); }

.kartu-kv { padding: var(--space-3); border-top: 2px solid var(--color-divider); display: flex; flex-direction: column; gap: 5px; }
.kv { display: flex; align-items: baseline; gap: var(--space-2); font-size: 13px; }
.kv-lbl { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: 1; }
.kv-val { font-weight: 600; }
.kv-val.big { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.kv-val.pos { color: var(--pos); } .kv-val.neg { color: var(--neg); }
.bar { height: 4px; background: var(--color-neutral-300); margin-top: 2px; }
.bar > i { display: block; height: 100%; background: var(--color-accent); }

.kartu-note { padding: 8px var(--space-3); border-top: 1px solid var(--line-thin); font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.kartu-note .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-note .dot { width: 7px; height: 7px; flex: none; background: var(--pos); }
.kartu-note .dot.perhatian { background: var(--warn); }
.kartu-note .dot.terlambat { background: var(--neg); }

.kartu-aksi { display: flex; border-top: 2px solid var(--color-divider); }
.kartu-aksi > * { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 4px; font-size: 12px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); background: transparent; border: 0; border-right: 1px solid var(--line-thin); cursor: pointer; color: inherit; text-decoration: none; }
.kartu-aksi > *:last-child { border-right: 0; flex: 0 0 46px; }
.kartu-aksi > *:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.kartu-aksi svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   Kontrol: sort, filter, date range
   ══════════════════════════════════════════════════════════════════════════ */
.bar-kontrol { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.seg-scroll { display: flex; overflow-x: auto; border: 1px solid var(--color-divider); }
.seg-scroll a { padding: 7px 12px; font-size: 13px; text-decoration: none; color: inherit; white-space: nowrap; border-right: 1px solid var(--color-divider); }
.seg-scroll a:last-child { border-right: 0; }
.seg-scroll a.on { background: var(--color-accent); color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.seg-scroll a:not(.on):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.daterange { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
.daterange .input, .daterange select { min-height: 34px; }
.periode-tag { font-size: 11px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   Tabel — di HP berubah jadi daftar kartu, tidak pernah geser horizontal
   ══════════════════════════════════════════════════════════════════════════ */
.tabel-wrap { overflow-x: auto; border: 2px solid var(--color-divider); background: var(--color-bg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 10px var(--space-2); border-bottom: 2px solid var(--color-divider); white-space: nowrap; background: var(--color-surface); }
table.tbl td { padding: 9px var(--space-2); border-bottom: 1px solid var(--line-thin); vertical-align: top; }
table.tbl tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
table.tbl tfoot td { border-top: 2px solid var(--color-divider); font-family: var(--font-heading); font-weight: var(--font-heading-weight); background: var(--color-surface); }
table.tbl a { color: var(--color-accent-700); }

.pos { color: var(--pos); } .neg { color: var(--neg); }

.lencana { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: 0.04em; padding: 3px 8px; text-transform: uppercase; }
.lencana.ok { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }
.lencana.bahaya { background: color-mix(in srgb, var(--neg) 13%, transparent); color: var(--neg); }
.lencana.tunggu { background: var(--color-accent-200); color: var(--color-accent-800); }
.lencana.netral { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* ══════════════════════════════════════════════════════════════════════════
   Form
   ══════════════════════════════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form-grid .lebar { grid-column: 1 / -1; }
.field > label { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; color: var(--muted); }
.field .bantu { font-size: 11px; color: var(--muted); margin-top: 3px; }
select.input { appearance: auto; }
.input:disabled { opacity: .5; }
.wajib::after { content: " *"; color: var(--neg); }

/* Panel selisih hidup */
.selisih { border: 2px solid var(--color-divider); padding: var(--space-3); background: var(--color-bg); margin-top: var(--space-3); }
.selisih .rumus { font-size: 12px; color: var(--muted); }
.selisih .hasil { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; margin-top: 4px; }
.selisih.piutang { border-color: var(--warn); } .selisih.piutang .hasil { color: var(--warn); }
.selisih.hutang { border-color: var(--neg); } .selisih.hutang .hasil { color: var(--neg); }
.selisih.muka { border-color: var(--pos); } .selisih.muka .hasil { color: var(--pos); }
.selisih.lunas { border-color: var(--pos); } .selisih.lunas .hasil { color: var(--pos); }

.catatan-form { font-size: 12px; color: var(--muted); border-left: 3px solid var(--color-accent); padding-left: 10px; margin-top: var(--space-3); }

/* ══════════════════════════════════════════════════════════════════════════
   Dialog / lembar bawah
   ══════════════════════════════════════════════════════════════════════════ */
.sheet-bg { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.sheet { background: var(--color-bg); border: 2px solid var(--color-text); width: min(620px, 100%); max-height: 92vh; display: flex; flex-direction: column; }
.sheet-head { padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); display: flex; align-items: center; gap: var(--space-3); }
.sheet-head h2 { margin: 0; font-size: 20px; }
.sheet-head .tutup { margin-left: auto; background: none; border: 0; font-size: 22px; cursor: pointer; line-height: 1; }
.sheet-body { padding: var(--space-4); overflow-y: auto; }
.sheet-foot { padding: var(--space-3) var(--space-4); border-top: 2px solid var(--color-divider); display: flex; gap: var(--space-2); justify-content: flex-end; background: var(--color-surface); }

/* ══════════════════════════════════════════════════════════════════════════
   Lain-lain
   ══════════════════════════════════════════════════════════════════════════ */
.kosong { border: 2px dashed var(--color-divider); padding: var(--space-8) var(--space-4); text-align: left; }
.kosong h3 { margin: 0 0 var(--space-1); }
.kosong p { color: var(--muted); font-size: 14px; max-width: 52ch; }

.panel { border: 2px solid var(--color-divider); background: var(--color-bg); margin-bottom: var(--space-4); }
.panel > h2, .panel > .panel-head { margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); font-size: 17px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); display: flex; align-items: center; gap: var(--space-3); }
.panel-head .aksi { margin-left: auto; display: flex; gap: var(--space-2); }
.panel-isi { padding: var(--space-4); }
.panel-isi.rapat { padding: 0; }

.kolom-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.kolom-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.rasio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.rasio { background: var(--color-bg); padding: var(--space-3); }
.rasio-nama { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rasio-val { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; font-variant-numeric: tabular-nums; }
.rasio-rumus { font-size: 11px; color: var(--muted); margin-top: 3px; }
.rasio-seg { font-size: 10px; background: var(--color-neutral-200); color: var(--color-neutral-800); padding: 1px 6px; }

.lini { list-style: none; padding: 0; margin: 0; }
.lini li { border-left: 2px solid var(--color-divider); padding: 0 0 var(--space-3) var(--space-4); position: relative; }
.lini li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; background: var(--color-accent); }
.lini .kapan { font-size: 11px; color: var(--muted); }

.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-divider); overflow-x: auto; margin-bottom: var(--space-4); }
.tabs a { padding: 9px var(--space-3); font-size: 13px; text-decoration: none; color: inherit; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.on { border-bottom-color: var(--color-accent); font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.chip-hak { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 9px; border: 1px solid var(--color-divider); }

.mono { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.kecil { font-size: 12px; }
.tengah { text-align: center; }

.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-kiri { background: var(--color-neutral-900); color: var(--color-neutral-200); padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between; }
.login-kiri img { max-width: 260px; }
.login-kiri h1 { color: #fff; font-size: 38px; }
.login-kiri p { color: var(--color-neutral-400); max-width: 40ch; }
.login-kanan { display: flex; align-items: center; padding: var(--space-8); }
.login-kanan form { width: min(360px, 100%); }

.bottom-nav { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   HP — tabel jadi kartu, navigasi jadi laci + bilah bawah
   ══════════════════════════════════════════════════════════════════════════ */
/* Ambang 1140px, bukan 1100px: lebar minimum satu kartu proyek ditentukan baris
   .kartu-aksi (tiga tombol berlabel + tombol menu). Pada 1101–1135px tiga kolom
   tidak muat dan halaman menggeser ke samping. minmax(0,1fr) mencegah kolom grid
   melebar mengikuti isinya. */
@media (max-width: 1140px) {
  .grid-proyek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kolom-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; }

  /* Laci digeser dengan `left`, bukan `transform`. Pasangan
     translateX(-100%) / translateX(0) sempat gagal terpakai di perangkat uji
     meski aturannya cocok dan spesifisitasnya menang; `left` tidak punya
     seluk-beluk interpolasi dan hasilnya bisa dibaca langsung dari
     getBoundingClientRect saat diperiksa. Untuk panel selebar 236px,
     bedanya dengan transform tidak terasa. */
  .sidebar { position: fixed; z-index: 60; left: calc(var(--sidebar-w) * -1); top: 0;
             transition: left .18s ease-out; }
  body.nav-open .sidebar { left: 0; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); z-index: 55; }
  .hamb { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-divider); background: transparent; font-size: 17px; cursor: pointer; }
  .topbar-logo { display: block; height: 26px; }
  .topbar .who b { display: none; }

  .content { padding: var(--space-4) var(--space-3) 84px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles-2 { grid-template-columns: repeat(2, 1fr); }
  .tile-val { font-size: 22px; }
  .grid-proyek { grid-template-columns: 1fr; }
  .kolom-2, .kolom-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .page-head .aksi { margin-left: 0; width: 100%; }
  .daterange { margin-left: 0; width: 100%; }

  /* Tabel bertanda .tbl--kartu berubah jadi daftar kartu berlabel. Label diambil
     dari atribut data-l pada tiap sel, ditulis sekali di template. */
  table.tbl--kartu, table.tbl--kartu tbody, table.tbl--kartu tr, table.tbl--kartu td { display: block; width: 100%; }
  table.tbl--kartu thead { display: none; }
  table.tbl--kartu tr { border: 2px solid var(--color-divider); margin-bottom: var(--space-2); background: var(--color-bg); padding: var(--space-1) 0; }
  table.tbl--kartu td { border: 0; border-bottom: 1px solid var(--line-thin); display: flex; gap: var(--space-3); padding: 7px var(--space-3); text-align: left !important; }
  table.tbl--kartu td:last-child { border-bottom: 0; }
  table.tbl--kartu td::before { content: attr(data-l); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: 0 0 40%; padding-top: 2px; }
  table.tbl--kartu td.num { justify-content: space-between; }
  table.tbl--kartu td:empty { display: none; }
  .tabel-wrap:has(table.tbl--kartu) { border: 0; overflow: visible; }
  table.tbl--kartu tfoot { display: block; }
  table.tbl--kartu tfoot td { border: 0; }

  /* Lembar bawah menggantikan dialog tengah */
  .sheet-bg { align-items: flex-end; padding: 0; }
  .sheet { width: 100%; max-height: 94vh; border-width: 2px 0 0; }
  .sheet-foot { position: sticky; bottom: 0; }
  .sheet-foot .btn { flex: 1; justify-content: center; }

  .kartu-aksi > * { flex-direction: column; gap: 3px; font-size: 11px; padding: 9px 2px; min-height: 52px; }

  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--color-neutral-900); border-top: 2px solid var(--color-accent); }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 10px; color: var(--color-neutral-300); text-decoration: none; min-height: 52px; justify-content: center; }
  .bottom-nav a.on { color: var(--color-accent); }
  .bottom-nav svg { width: 19px; height: 19px; }

  .login-wrap { grid-template-columns: 1fr; }
  .login-kiri { padding: var(--space-6) var(--space-4); }
  .login-kiri h1 { font-size: 28px; }
  .login-kanan { padding: var(--space-6) var(--space-4); }

  /* Sasaran sentuh minimal 44px. .chip-hak ikut: halaman izin peran berisi
     puluhan kotak centang yang mustahil ditekan kalau setinggi teks. */
  .btn, .seg-scroll a, .tabs a, .chip-hak { min-height: 40px; }
  .chip-hak { padding: var(--space-2) var(--space-3); }
  .input, select.input { min-height: 42px; font-size: 16px; }  /* 16px = iOS tidak auto-zoom */
}

@media print {
  .sidebar, .topbar, .bottom-nav, .kartu-aksi, .bar-kontrol, .page-head .aksi { display: none !important; }
  .content { padding: 0; max-width: none; }
  .panel, .tabel-wrap { border-color: #000; }
  body { background: #fff; }
}