/* ============================================================
   Al-Fatihah Asset — SaaS UI
   Tema: putih / abu-abu / biru  +  Dark mode
   ============================================================ */
:root{
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc; --border:#e6e8ee;
  --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --sidebar:#0f1b33; --sidebar-2:#16233f; --sidebar-text:#c7d2e5; --sidebar-active:#2563eb;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 4px 16px rgba(16,24,40,.08);
  --shadow-lg:0 12px 32px rgba(16,24,40,.12);
  --radius:14px; --radius-sm:10px;
  --green:#16a34a; --green-bg:#dcfce7; --amber:#d97706; --amber-bg:#fef3c7;
  --red:#dc2626; --red-bg:#fee2e2; --purple:#7c3aed; --purple-bg:#ede9fe;
  --teal:#0d9488; --teal-bg:#ccfbf1; --orange:#ea580c; --orange-bg:#ffedd5;
  --gray:#475569; --gray-bg:#e2e8f0;
}
[data-theme="dark"]{
  --bg:#0b1220; --surface:#111a2e; --surface-2:#0f1728; --border:#243149;
  --text:#e8edf7; --muted:#94a3b8; --muted-2:#64748b;
  --sidebar:#0a1120; --sidebar-2:#111a2e; --sidebar-text:#aab6cc;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --green-bg:#0f2e1c; --amber-bg:#3a2c08; --red-bg:#3a1414; --purple-bg:#241b45;
  --teal-bg:#0a2e2a; --orange-bg:#3a2109; --gray-bg:#26324a; --blue-50:#13233f; --blue-100:#172c52;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
img{max-width:100%}
/* Ukuran default semua ikon SVG (dioverride oleh rule yang lebih spesifik) */
svg{width:18px;height:18px;flex:none}
.card__head>svg{width:18px;height:18px;color:var(--blue-600)}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:256px;background:var(--sidebar);color:var(--sidebar-text);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:50;
  transition:transform .25s ease;
}
.sidebar__brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar__logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;flex:none}
.sidebar__brand b{color:#fff;font-size:15px;display:block;line-height:1.1}
.sidebar__brand span{font-size:11px;color:var(--muted-2)}
.nav{padding:14px 12px;overflow-y:auto;flex:1}
.nav__label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#5b6b88;padding:14px 12px 6px}
.nav__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--sidebar-text);font-weight:500;margin-bottom:2px;transition:.15s;cursor:pointer}
.nav__item svg{width:19px;height:19px;flex:none;opacity:.85}
.nav__item:hover{background:var(--sidebar-2);color:#fff}
.nav__item.active{background:var(--sidebar-active);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.nav__badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px}
.sidebar__foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:var(--muted-2)}

/* --- Pengalih modul (Aset & Inventaris <-> Jaringan & IT) ------------------
   Ditaruh DI DALAM sidebar, di atas daftar menu: yang berganti adalah isi
   sidebar, jadi tombolnya harus berada di benda yang berubah. Di topbar tidak
   akan ada petunjuk visual bahwa daftar di kiri itu yang terpengaruh.

   flex:none WAJIB. Induknya (.sidebar) adalah kolom flex dan .nav memakai
   flex:1; tanpa flex:none, blok ini bisa ikut menyusut saat menunya panjang
   dan tombolnya terpotong di layar pendek. */
.modul-switch{display:flex;gap:4px;padding:12px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.06)}
.modul-switch__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:5px;padding:10px 6px;border-radius:10px;
  background:rgba(255,255,255,.04);color:var(--sidebar-text);
  font-size:11px;font-weight:600;text-align:center;line-height:1.25;
  transition:.15s}
.modul-switch__item svg{width:18px;height:18px;flex:none;opacity:.9}
.modul-switch__item:hover{background:var(--sidebar-2);color:#fff}
/* Modul aktif dibedakan dengan warna PENUH, bukan sekadar lebih terang.
   Dua modul yang tampak mirip akan membuat orang tidak yakin sedang di mana —
   dan itu justru masalah yang pemisahan modul ini seharusnya selesaikan. */
.modul-switch__item.active{background:var(--sidebar-active);color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.35)}
/* min-width:0 + wrap: nama modul boleh turun ke baris kedua daripada
   memaksa sidebar melebar atau terpotong. */
.modul-switch__item span{white-space:normal;word-break:break-word}

/* Garis aksen di tepi sidebar saat berada di modul Jaringan & IT.
   Halus dan sengaja tidak mengubah warna dasar: pengalih di atas sudah
   menyatakan modul mana yang aktif, ini hanya penanda periferal supaya
   terlihat tanpa perlu membaca. Mengganti seluruh warna sidebar sempat
   dipertimbangkan dan ditolak — dua tema berbeda membuat aplikasi terasa
   seperti dua produk, padahal datanya saling terhubung. */
.sidebar--jaringan{box-shadow:inset -3px 0 0 var(--teal, #0d9488)}

/* --- Cek cepat: baris "N belum dicek" + tombol Semua Normal --------------
   Ditata flex dengan wrap supaya di HP tombolnya turun ke bawah teks dan
   MELEBAR PENUH — bukan menyempit di kanan. Tombol utama yang harus ditekan
   tiap hari dari HP tidak boleh jadi target kecil. */
.cek-cepat{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cek-cepat__teks{flex:1 1 260px;min-width:0;line-height:1.5}
.cek-cepat form{flex:0 0 auto}

/* Tombol besar untuk aksi utama di layar sentuh. 44px adalah ambang target
   sentuh yang bisa ditekan tanpa melihat — di bawah itu orang mulai salah tap. */
.btn-lg{padding:12px 20px;font-size:14px;min-height:44px;font-weight:600}

@media(max-width:640px){
  .cek-cepat form,.cek-cepat .btn-lg{width:100%}
  .cek-cepat .btn-lg{justify-content:center}

  /* Ceklis pemeriksaan di HP: kotak centang & angka kamera dibuat cukup besar
     untuk ditekan dengan jempol. Ukuran bawaan 18px terlalu kecil saat 40 baris
     harus dilewati satu per satu sambil berdiri. */
  #formPeriksa input[type=checkbox]{width:26px!important;height:26px!important}
  #formPeriksa select,#formPeriksa input[type=text],#formPeriksa input[type=number]{
    min-height:42px;font-size:14px}
  #formPeriksa input[type=number]{width:64px!important}

  /* Tombol simpan MENEMPEL di bawah layar selama mengisi ceklis.
     Tanpa ini, di daftar 40 baris tombol simpannya berada jauh di bawah dan
     orang harus menggulir balik — jeda kecil yang membuat pekerjaan harian
     terasa merepotkan, dan pekerjaan yang merepotkan mulai dilewati. */
  .simpan-lekat{position:sticky;bottom:0;z-index:30;background:var(--surface);
    border-top:1px solid var(--border);padding:10px 14px;
    box-shadow:0 -6px 18px rgba(0,0,0,.10);margin:0 -14px}
  .simpan-lekat .btn{width:100%;justify-content:center;min-height:46px}

  /* Kartu statistik 2 kolom di HP, bukan 1 — empat kartu bertumpuk vertikal
     berarti menggulir jauh sebelum sampai ke daftar yang mau dikerjakan. */
  .stats{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .stat{padding:12px 14px;column-gap:10px}
  .stat__ico{width:38px;height:38px;border-radius:12px}
  .stat__ico svg{width:19px;height:19px}
  .stat__val{font-size:20px}
  .stat__label{font-size:11px;line-height:1.3}
}

/* --- Angka pada chip kategori di Pusat Data ------------------------------
   Chip ini satu-satunya jalan berpindah kategori sejak enam butir sidebar
   diganti satu butir "Pusat Data", jadi angkanya harus terbaca tanpa
   mengalahkan nama kategorinya. */
.chip-n{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700;
  line-height:1.6;min-width:20px;text-align:center}
.btn-primary .chip-n{background:rgba(255,255,255,.22);color:#fff}
/* Kategori kosong tetap DITAMPILKAN, hanya diredupkan — chip yang hilang
   tidak memberi tahu apa pun, "Starlink 0" memberi tahu kategorinya ada
   tapi belum diisi. */
.chip-n--nol{opacity:.55}

/* --- Matriks ceklis mingguan ---------------------------------------------
   Sel berupa tombol persegi, bukan checkbox: satu klik = satu POST, dan
   hasilnya selalu terlihat setelah halaman dimuat ulang. Checkbox yang
   perlu tombol Simpan terpisah membuat orang mengira sudah tersimpan
   padahal belum. */
.matriks .sel-cek{display:inline;margin:0}
.sel-btn{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--border);
  background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;padding:0;transition:.12s}
.sel-btn svg{width:17px;height:17px}
.sel-btn:hover{transform:scale(1.08)}
.sel-btn--kosong{border-style:dashed}
.sel-btn--kosong:hover{border-color:var(--blue-600);background:var(--blue-50)}
.sel-btn--ok{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.sel-btn--rusak{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.sel-kosong{color:var(--muted-2)}
.matriks thead th{vertical-align:top}
.matriks thead .cell-sub{font-weight:500;text-transform:none;letter-spacing:0;font-size:10px}

/* Ringkasan progres per pekan di atas matriks */
.pekan-ringkas{display:flex;gap:10px;flex-wrap:wrap}
.pekan-ringkas__item{flex:1 1 150px;min-width:0;border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;
  align-items:flex-start}
.pekan-ringkas__item.kini{border-color:var(--blue-600);
  box-shadow:0 0 0 2px var(--blue-100) inset}
.pekan-ringkas__item form{margin:0;width:100%}
.pekan-ringkas__item .btn{width:100%;justify-content:center}

@media(max-width:640px){
  /* Matriks TIDAK ditumpuk di HP: bentuk baris-kolomnya justru inti gunanya —
     melihat pekan mana yang bolong. Digulir mendatar saja, dengan kolom nama
     perangkat yang MENEMPEL supaya tidak kehilangan konteks saat menggeser. */
  .matriks{min-width:520px}
  .matriks tbody td:first-child,.matriks thead th:first-child{
    position:sticky;left:0;z-index:2;background:var(--surface);
    box-shadow:2px 0 6px rgba(0,0,0,.06);min-width:150px}
  .sel-btn{width:38px;height:38px}
  .pekan-ringkas__item{flex:1 1 100%}
}

/* Judul kelompok di dropdown profil, mis. "Pindah Modul" */
.dropdown__title{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);padding:8px 12px 4px;font-weight:700}

.main{flex:1;margin-left:256px;display:flex;flex-direction:column;min-width:0}
/* min-height, BUKAN height. Dengan height tetap, judul yang terpaksa jadi dua
   baris akan meluber keluar kotak dan menabrak isi halaman di bawahnya —
   persis yang terjadi di HP sebelum ini. min-height membuat topbar melebar
   ke bawah alih-alih menimpa. */
.topbar{
  min-height:64px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:0 24px;position:sticky;top:0;z-index:40;box-shadow:var(--shadow-sm)
}
/* min-width:0 wajib: tanpa itu, judul panjang MENDORONG tombol aksi keluar dari
   layar alih-alih memendek sendiri — sifat bawaan flex item yang tidak boleh
   lebih kecil dari isinya. */
.topbar__title{min-width:0;flex:0 1 auto}
.topbar__title h1{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__title p{margin:1px 0 0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__search{flex:1;max-width:420px;position:relative}
.topbar__search input{width:100%;height:40px;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:0 14px 0 38px;color:var(--text);font-size:13px}
.topbar__search svg{position:absolute;left:12px;top:11px;width:17px;height:17px;color:var(--muted)}
.topbar__actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--muted);position:relative}
.icon-btn:hover{color:var(--blue-600);border-color:var(--blue-500)}
/* Tombol aksi di topbar yang halamannya sedang dibuka (Scan QR, Pengingat).
   Keduanya bukan lagi butir sidebar, jadi tanpa penanda ini pengguna tidak punya
   petunjuk sedang berada di halaman mana. */
.icon-btn.active{color:#fff;background:var(--blue-600);border-color:var(--blue-600)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--surface)}
.user-chip{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;border:1px solid var(--border);border-radius:30px;cursor:pointer;background:var(--surface-2)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.user-chip__meta b{font-size:13px;display:block;line-height:1.1}
.user-chip__meta span{font-size:11px;color:var(--muted)}
.content{padding:24px;flex:1}

.hamburger{display:none}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.card__head h3{font-size:15px}
.card__head .card__sub{font-size:12px;color:var(--muted);font-weight:400}
.card__body{padding:20px}
.card__foot{padding:14px 20px;border-top:1px solid var(--border)}

/* ---------- Stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center}
.stat::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--accent,var(--blue-500));opacity:.9}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.stat__ico{grid-column:1;grid-row:1 / span 2;align-self:center;width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;line-height:0;
  box-shadow:0 10px 20px var(--accent-glow, rgba(37,99,235,.35)), 0 2px 4px rgba(0,0,0,.15), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.18)}
.stat__ico::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 48%);pointer-events:none}
.stat__ico svg{width:25px;height:25px;display:block;position:relative;z-index:1;filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.28));stroke-width:2.2}
.stat__val{grid-column:2;grid-row:1;align-self:end;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.stat__label{grid-column:2;grid-row:2;align-self:start;font-size:12.5px;color:var(--muted);margin-top:4px;font-weight:500}
.stat__trend{position:absolute;top:18px;right:18px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
/* watermark ikon samar di pojok */
.stat__ico::after{content:"";}
.ic-blue{background:linear-gradient(135deg,#60a5fa,#2563eb)}
.ic-green{background:linear-gradient(135deg,#4ade80,#16a34a)}
.ic-red{background:linear-gradient(135deg,#fb7185,#dc2626)}
.ic-purple{background:linear-gradient(135deg,#c084fc,#7c3aed)}
.ic-amber{background:linear-gradient(135deg,#fcd34d,#d97706)}
.ic-teal{background:linear-gradient(135deg,#5eead4,#0d9488)}
/* accent bar warna mengikuti ikon */
.stat:has(.ic-blue){--accent:#2563eb;--accent-glow:rgba(37,99,235,.30)}
.stat:has(.ic-green){--accent:#16a34a;--accent-glow:rgba(22,163,74,.30)}
.stat:has(.ic-red){--accent:#dc2626;--accent-glow:rgba(220,38,38,.30)}
.stat:has(.ic-purple){--accent:#7c3aed;--accent-glow:rgba(124,58,237,.30)}
.stat:has(.ic-amber){--accent:#d97706;--accent-glow:rgba(217,119,6,.30)}
.stat:has(.ic-teal){--accent:#0d9488;--accent-glow:rgba(13,148,136,.30)}
/* Kartu highlight (Total Nilai Aset) */
.stat-hero{background:linear-gradient(120deg,#1d4ed8,#2563eb 55%,#7c3aed);border:none;border-radius:var(--radius);padding:22px 24px;box-shadow:0 14px 34px rgba(37,99,235,.35);display:flex;align-items:center;gap:18px;color:#fff;position:relative;overflow:hidden}
.stat-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.stat-hero__ico{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;flex:none;position:relative;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.2)}
.stat-hero__ico::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%)}
.stat-hero__ico svg{width:28px;height:28px;position:relative;z-index:1;filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.25))}
.stat-hero__label{font-size:13px;opacity:.9}
.stat-hero__val{font-size:30px;font-weight:800;letter-spacing:-.01em;margin-top:2px}

.grid{display:grid;gap:16px}
/* PERHATIAN: `.grid-2` dan `.grid-3` HANYA menyetel jumlah kolomnya.
   `display:grid` ada di `.grid`, jadi keduanya wajib dipakai berpasangan:
   `class="grid grid-2"`. Menulis `class="grid-2"` saja tidak menghasilkan
   galat apa pun — isinya cuma menumpuk ke bawah selebar penuh, dan itulah
   yang terjadi di dasbor Jaringan & IT sampai ketahuan. */
.grid-2{grid-template-columns:2fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Wadah dasbor Jaringan & IT: jarak tetap antar blok.
   `.card` sengaja tidak punya margin sendiri karena dipakai di puluhan tempat
   dengan jarak yang berbeda-beda; yang mengatur jaraknya adalah wadahnya. */
.jr-dash{display:grid;gap:18px}
.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mt-8{margin-top:8px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-green{background:var(--green-bg);color:var(--green)} .badge-blue{background:var(--blue-100);color:var(--blue-600)}
.badge-amber{background:var(--amber-bg);color:var(--amber)} .badge-purple{background:var(--purple-bg);color:var(--purple)}
.badge-red{background:var(--red-bg);color:var(--red)} .badge-gray{background:var(--gray-bg);color:var(--gray)}
.badge-teal{background:var(--teal-bg);color:var(--teal)} .badge-orange{background:var(--orange-bg);color:var(--orange)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(.94)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-sm{height:34px;padding:0 12px;font-size:12.5px}
.btn-icon{width:36px;padding:0;justify-content:center}
.btn-block{width:100%;justify-content:center}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
table.data td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.data td.nw{white-space:nowrap}
table.data td .cell-sub{white-space:nowrap}
table.data th{white-space:nowrap}
table.data tbody tr:last-child td,table.data tr:last-child td{border-bottom:none}
table.data tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-2) 55%, transparent)}
table.data tbody tr:hover td{background:var(--blue-50)}
.cell-title{font-weight:600}
.cell-sub{font-size:11.5px;color:var(--muted)}
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted-2);flex:none}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:600;color:var(--text)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  height:42px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:0 12px;color:var(--text);font-size:13.5px;font-family:inherit;width:100%
}
.field textarea{height:auto;min-height:90px;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}

/* Checkbox & radio DIKECUALIKAN dari aturan di atas.
   `.field input` menyetel height:42px + width:100%, dan itu ikut mengenai
   checkbox — hasilnya kotak centang sebesar tombol yang memenuhi separuh
   lebar kolom. Selama ini ditambal satu per satu dengan
   style="width:18px;height:18px" di 8 berkas view; satu tempat yang lupa
   ditambal (form Provider) langsung terlihat rusak.
   Ditambal di sumbernya, jadi tambalan berikutnya tidak perlu diingat. */
.field input[type=checkbox],
.field input[type=radio]{
  width:16px;height:16px;min-width:16px;flex:0 0 auto;
  padding:0;border-radius:4px;accent-color:var(--blue-600);cursor:pointer
}

/* Baris "checkbox + keterangan" yang rapi: keduanya sebaris, teks boleh
   membungkus tanpa menggeser kotaknya. */
.field-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--text);line-height:1.45}
.field-check input[type=checkbox]{margin-top:2px}

/* ---------- Grafik SVG (app/core/Grafik.php) ---------- */
/* SVG-nya digambar di server dan memakai `currentColor` untuk teks & garis
   bantu, jadi mode gelap ikut berubah sendiri tanpa aturan tambahan.
   Pembungkusnya menggeser mendatar di layar sempit — grafik yang dipaksa
   mengecil sampai labelnya tidak terbaca lebih buruk daripada grafik yang
   perlu digeser. */
/* Pemilih bertingkat Yayasan -> Cabang di halaman Tagihan.
   flex-wrap WAJIB: di layar 360px dua dropdown + tombol tidak muat sebaris,
   dan tanpa wrap tombol "Hapus filter" terpotong keluar layar — tombol yang
   tidak bisa disentuh sama saja tidak ada. */
.filter-org{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-org select{min-width:150px;max-width:100%}
@media(max-width:520px){ .filter-org select{flex:1 1 100%} }

/* UKURAN GRAFIK HARUS DISEBUT EKSPLISIT.
   Di baris 38 berkas ini ada `svg{width:18px;height:18px}` — aturan untuk
   ikon, dan ikon memang mayoritas SVG di aplikasi ini. Tapi aturan itu juga
   mengenai grafik, dan atribut `width="100%" height="210"` yang ditulis
   Grafik.php di markup TIDAK bisa melawannya: atribut presentasi SVG
   kekhususannya nol, kalah oleh aturan CSS mana pun.
   Akibatnya grafik digambar sebesar ikon. `min-width` saja tidak menolong —
   ia hanya menaikkan lebar, tingginya tetap 18px.
   Karena itu `.g-chart` menyebut lebar DAN tinggi sendiri. `height:auto`
   aman: SVG-nya punya viewBox, jadi perbandingan sisinya terjaga. */
svg.g-chart{width:100%;height:auto}
svg.g-spark{width:auto;height:auto}

.chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;color:var(--text)}
.chart-wrap > svg{display:block;min-width:520px}
.chart-wrap--tengah{display:flex;justify-content:center}
.chart-wrap--tengah > svg{min-width:0;max-width:340px}
.g-spark{display:inline-block;vertical-align:middle;min-width:0}
@media(max-width:640px){ .chart-wrap > svg{min-width:460px} }

/* ---------- Link publik nota (halaman Tagihan) ---------- */
/* <details> bawaan HTML: buka-tutup tanpa JavaScript, sama seperti sisa
   aplikasi ini. Ringkasannya cukup memberi tahu "aktif atau belum"; alamat &
   tombolnya baru muncul saat hendak dikirim — sebelumnya semuanya ditaruh
   langsung di sel tabel dan satu baris jadi setinggi empat baris biasa. */
.link-nota > summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;font-size:12px;padding:2px 0}
.link-nota > summary::-webkit-details-marker{display:none}
.link-nota > summary::after{content:"▾";color:var(--muted);font-size:10px}
.link-nota[open] > summary::after{content:"▴"}
.link-nota__isi{margin-top:8px;display:flex;flex-direction:column;gap:6px;
  min-width:230px}
.link-nota__isi input{width:100%;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  height:32px;border:1px solid var(--border);border-radius:8px;padding:0 8px;
  background:var(--surface-2);color:var(--text)}
.link-nota__aksi{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.link-nota__aksi form{display:inline}

/* ---------- Daftar Tagihan: baris, bukan tabel ---------- */
/* Tabel 6 kolom dengan 3 kotak isian di tiap sel memaksa lebar >1100px dan
   selalu digeser mendatar. Baris berpetak menampung keterangan yang SAMA
   BANYAK dalam empat kolom, dan rincian isian disembunyikan sampai diminta.
   Kolomnya tidak dihilangkan — hanya disusun ulang. */
.tg-list{border-top:1px solid var(--border)}
.tg-row{display:grid;grid-template-columns:minmax(220px,1fr) 190px 130px 200px;
  gap:14px;align-items:center;padding:12px 4px 12px 0;border-bottom:1px solid var(--border);
  border-left:4px solid transparent}
.tg-row:last-child{border-bottom:0}
/* Warna tepi = status. Ini pengulangan lencana status DENGAN SENGAJA: memindai
   30 baris untuk mencari yang merah jauh lebih cepat daripada membaca teksnya
   satu per satu. */
.tg-row--terlambat{border-left-color:var(--red)}
.tg-row--dekat{border-left-color:var(--amber)}
.tg-row--aman{border-left-color:var(--blue-500)}
.tg-row--lunas{border-left-color:var(--green);background:var(--surface-2)}
.tg-row--belum_diatur{border-left-color:var(--border)}
.tg-main{display:flex;align-items:flex-start;gap:11px;padding-left:12px;min-width:0}
.tg-nama{font-weight:700;font-size:13.5px;line-height:1.3}
.tg-sub{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.45}
.tg-sub--kanan{text-align:right;margin:0 0 5px}
.tg-status .badge{margin-bottom:2px}
.tg-rp{text-align:right;font-weight:700;font-size:13.5px}
.tg-aksi{text-align:right}
.tg-ck{margin-top:2px;flex:0 0 auto}
.tg-ck-ok{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--green);
  display:inline-flex;align-items:center;justify-content:center}
.tg-ck-ok svg{width:15px;height:15px}
.tg-ck-ok--kosong{color:transparent}
.tg-det > summary{cursor:pointer;list-style:none;font-size:11px;color:var(--blue-600);
  margin-top:5px;text-align:right}
.tg-det > summary::-webkit-details-marker{display:none}
.tg-det__isi{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.tg-det__isi input{height:30px;font-size:12px;border:1px solid var(--border);
  border-radius:8px;padding:0 8px;background:var(--surface);color:var(--text);width:100%}
/* Bilah aksi massal — menempel di bawah daftar, bukan mengambang: mengambang
   menutupi baris terakhir persis saat orang memeriksanya. */
.tg-bulk{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  flex-wrap:wrap;margin-top:14px;padding:14px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface-2)}
.tg-bulk__kiri{font-size:12px}
.tg-bulk__kanan{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tg-bulk__kanan input{height:36px;font-size:12.5px;border:1px solid var(--border);
  border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text)}
.tg-bulk__kanan input[type=date]{width:140px}
@media(max-width:820px){
  /* Di HP jadi dua baris: keterangan di atas, angka & tombol di bawah. Empat
     kolom yang dipaksakan ke layar 360px membuat nominalnya terpotong. */
  .tg-row{grid-template-columns:1fr 1fr;row-gap:8px}
  .tg-main{grid-column:1/-1}
  .tg-rp{text-align:left}
  .tg-aksi{text-align:right}
  .tg-det > summary{text-align:right}
}
.field .hint{font-size:11px;color:var(--muted)}
.form-section-title{font-size:13px;font-weight:700;color:var(--blue-600);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 4px;grid-column:1/-1;display:flex;align-items:center;gap:8px}
.form-section-title::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- Filter grid (rapi & berlabel) ---------- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;align-items:end}
.filters .fl{display:flex;flex-direction:column;gap:5px;min-width:0}
.filters .fl label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.filters .fl input,.filters .fl select{height:40px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:0 12px;font-size:13px;color:var(--text);width:100%;font-family:inherit}
.filters .fl input:focus,.filters .fl select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.filters .fl.search{position:relative}
.filters .fl.search svg{position:absolute;left:11px;bottom:11px;width:17px;height:17px;color:var(--muted)}
.filters .fl.search input{padding-left:36px}
.filter-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ---------- Filters bar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar .search{position:relative;flex:1;min-width:200px;max-width:340px}
.toolbar .search input{width:100%;height:40px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:0 12px 0 36px;font-size:13px;color:var(--text)}
.toolbar .search svg{position:absolute;left:11px;top:11px;width:17px;height:17px;color:var(--muted)}
.toolbar select{height:40px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:0 10px;font-size:13px;color:var(--text)}
.spacer{flex:1}

/* ---------- Page header ---------- */
.page-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h2{font-size:22px}
.page-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.page-head .spacer{flex:1}
.breadcrumb{display:flex;gap:6px;font-size:12px;color:var(--muted);margin-bottom:6px}
.breadcrumb a:hover{color:var(--blue-600)}

/* ---------- Detail ---------- */
.detail-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.dl{display:grid;grid-template-columns:150px 1fr;gap:0}
.dl dt{color:var(--muted);padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.dl dd{margin:0;padding:9px 0;border-bottom:1px solid var(--border);font-weight:500}
.photo-box{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted-2)}
.photo-box img{width:100%;height:100%;object-fit:cover}
.photo-box svg{width:56px;height:56px}
.thumb svg{width:20px;height:20px}
/* ---------- Kotak QR ----------
   qrcodejs bisa menghasilkan <canvas>, <img>, ATAU <table> tergantung dukungan
   peramban. `text-align:center` saja tidak cukup: <table> bersifat block dan
   mengabaikannya, sehingga QR menempel ke kiri. Karena itu wadahnya dijadikan
   flex + setiap anaknya diberi margin auto — aman untuk ketiga bentuk keluaran. */
.qr-box{text-align:center;padding:16px}
.qr-box #qrcode{display:flex;justify-content:center;align-items:center;min-height:180px}
.qr-box #qrcode>*{margin:0 auto}
.qr-box img,.qr-box canvas,.qr-box table{width:180px;height:180px;display:block;margin:0 auto}
.qr-box table{border-collapse:collapse}
.qr-box table td{padding:0;border:0}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--border)}
.timeline__item{position:relative;padding-bottom:18px}
.timeline__item::before{content:"";position:absolute;left:-22px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--blue-500);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--blue-100)}
.timeline__item b{font-size:13px}
.timeline__item .t{font-size:11.5px;color:var(--muted)}

/* ---------- Flash / Alerts ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:10px;margin-bottom:14px;font-size:13px;font-weight:500}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert-success{background:var(--green-bg);color:var(--green)}
.alert-error{background:var(--red-bg);color:var(--red)}
.alert-info{background:var(--blue-100);color:var(--blue-600)}
.alert-warning{background:var(--amber-bg);color:var(--amber)}

/* ---------- Footer publik ---------- */
.pub-foot{margin-top:22px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.pub-foot a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 4px}
.pub-foot a svg{width:15px;height:15px}
.pub-foot .sep{color:var(--border);font-weight:400}
.pub-foot .muted{color:var(--muted);font-weight:500}

/* ---------- Login ---------- */
.demo-accounts{margin-top:22px;padding:14px;background:var(--surface);border:1px dashed var(--border);border-radius:12px;font-size:12px}
.demo-accounts b{color:var(--blue-600)}
.demo-accounts code{background:var(--surface-2);padding:1px 6px;border-radius:5px;font-size:11.5px}

/* ---------- Tabs (segmented) ---------- */
.tabs{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px;margin-bottom:20px;box-shadow:var(--shadow-sm);flex-wrap:wrap;max-width:100%}
.tabs a{padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-radius:8px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:.15s}
.tabs a svg{width:16px;height:16px}
.tabs a:hover{color:var(--text);background:var(--surface-2)}
.tabs a.active{color:#fff;background:var(--blue-600);box-shadow:0 4px 12px rgba(37,99,235,.28)}
.tabs a.active svg{color:#fff}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input{height:38px}
/* CRUD baris rapi */
.crud-item{display:flex;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.crud-item:last-child{border-bottom:none}
.crud-item form{margin:0}
.crud-edit{display:grid;gap:8px;flex:1;align-items:center;min-width:0}
.crud-edit.cabang{grid-template-columns:96px 1.2fr 1.6fr 44px}
.crud-edit.simple{grid-template-columns:1fr 44px}
.crud-edit input{height:38px}
.crud-note{font-size:11.5px;color:var(--muted);white-space:nowrap;min-width:120px;text-align:right}
.crud-del button{height:38px}
.area-card{border:1px solid var(--border);border-radius:12px;margin-bottom:14px;background:var(--surface)}
.area-card__head{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);border-radius:12px 12px 0 0}
.area-card__head .crud-edit{grid-template-columns:1fr 44px}
.area-card__body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.room-row{display:flex;gap:8px;align-items:center}
.room-row .crud-edit{grid-template-columns:1fr auto 44px}
@media(max-width:720px){.crud-edit.cabang{grid-template-columns:1fr 44px}.crud-note{display:none}}
.logo-preview{width:72px;height:72px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;overflow:hidden}
.logo-preview img{width:100%;height:100%;object-fit:cover}

/* ---------- Organisasi cards ---------- */
.import-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.import-bar .lbl{font-weight:700;display:flex;align-items:center;gap:8px}
.import-bar .hint{font-size:12px;color:var(--muted);flex:1;min-width:180px}
.btn-green{background:#16a34a;border-color:#16a34a;color:#fff}.btn-green:hover{filter:brightness(.95)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.org-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:9px}
.org-card__title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;flex-wrap:wrap}
.org-card__title svg{width:20px;height:20px;color:var(--blue-600)}
.org-card__title .kode{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:2px 8px;border-radius:6px}
.org-card__row{display:flex;align-items:center;gap:7px;font-size:13px}
.org-card__row svg{width:15px;height:15px;color:var(--muted)}
.org-card__desc{font-size:12.5px;color:var(--muted);line-height:1.5}
.org-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.org-actions form{margin:0}
.rbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:none;cursor:pointer;color:#fff;transition:.15s}
.rbtn svg{width:17px;height:17px}
.rbtn.edit{background:#1e3a8a}.rbtn.edit:hover{background:#1e40af}
.rbtn.del{background:#ef4444}.rbtn.del:hover{background:#dc2626}
.org-form{margin-bottom:16px}
.org-form>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;padding:10px 16px;background:var(--blue-600);color:#fff;border-radius:10px}
.org-form>summary::-webkit-details-marker{display:none}
.org-form[open]>summary{border-radius:10px 10px 0 0}

/* ---------- Misc ---------- */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty svg{width:52px;height:52px;color:var(--muted-2);margin-bottom:12px}
.empty h4{font-size:16px;color:var(--text);margin-bottom:6px}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:220px}
.pagination{display:flex;gap:6px;justify-content:flex-end;margin-top:16px}
.pagination a,.pagination span{min-width:36px;height:36px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;font-size:13px;background:var(--surface)}
.pagination a:hover{border-color:var(--blue-500);color:var(--blue-600)}
.pagination .active{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.pagination .disabled{opacity:.4;pointer-events:none}
.dropdown{position:relative}
.dropdown__menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);min-width:200px;padding:6px;display:none;z-index:60}
.dropdown.open .dropdown__menu{display:block}
.dropdown__menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500}
.dropdown__menu a:hover{background:var(--surface-2)}
.dropdown__menu a svg{width:16px;height:16px;color:var(--muted)}
.dropdown__menu hr{border:none;border-top:1px solid var(--border);margin:5px 0}
.text-muted{color:var(--muted)}
.text-red{color:var(--red)}.text-green{color:var(--green)}
.flex{display:flex;align-items:center;gap:10px}
.gap-6{gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.issue-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 10px;border:1px solid var(--border);border-radius:20px;cursor:pointer;background:var(--surface);user-select:none}
.issue-chip:hover{border-color:var(--blue-500)}
.issue-chip input{width:14px;height:14px;margin:0}
.issue-chip:has(input:checked){background:var(--blue-100);border-color:var(--blue-500);color:var(--blue-700)}

/* ---------- Responsive ---------- */
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}}
@media(max-width:820px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:grid}
  .topbar{padding:0 14px;gap:10px}
  .topbar__search{display:none}
  .user-chip__meta{display:none}
  .content{padding:16px}
  .form-grid{grid-template-columns:1fr}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45;display:none}
  .backdrop.show{display:block}
  /* Tabs: geser horizontal, tidak menumpuk */
  .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:none}
  /* Toolbar & pencarian penuh selebar layar */
  .toolbar .search{flex:1 1 100%;max-width:none}
  .toolbar select{flex:1 1 auto}
  /* Halaman login: tumpuk jadi 1 kolom, panel biru disembunyikan */
}
@media(max-width:520px){
  .content{padding:14px 12px}
  /* Topbar di HP kecil. Isinya kini: hamburger, judul, tema, Scan QR, bel, dan
     chip pengguna — tombol Scan QR baru ditambahkan (dipindah dari sidebar),
     jadi ruangnya lebih sempit dari sebelumnya. Tombol diperkecil, subjudul
     disembunyikan, dan judulnya dipotong dengan elipsis. */
  .topbar{gap:8px;padding:0 12px}
  .topbar__actions{gap:6px}
  .icon-btn{width:36px;height:36px;border-radius:9px}
  .icon-btn svg{width:18px;height:18px}
  .topbar__title p{display:none}
  .topbar__title h1{font-size:16px}
  .user-chip{padding:4px 6px 4px 4px}
  .user-chip .avatar{width:30px;height:30px;font-size:12px}
  .user-chip>svg{display:none}
  .stats{grid-template-columns:1fr}
  .page-head{gap:10px}
  .page-head h2{font-size:19px}
  .page-head .spacer{flex-basis:100%;height:0}
  /* Tombol aksi di header halaman mengisi baris rapi */
  .page-head>.btn{flex:1 1 auto;justify-content:center}
  .card__head{padding:14px 16px}
  .card__body{padding:16px}
  .stat-hero{padding:18px 18px}
  .stat-hero__val{font-size:24px}
  .stat__val{font-size:24px}
  .stat__ico{width:46px;height:46px;border-radius:13px}
  .stat__ico svg{width:22px;height:22px}
  /* Filter jadi satu kolom */
  .filters{grid-template-columns:1fr}
  .filter-actions .btn,.inline-form>.btn{flex:1 1 auto;justify-content:center}
  table.data th,table.data td{padding:10px 10px}
}

/* Tabel -> kartu bertumpuk di HP (tanpa scroll samping) */
@media(max-width:640px){
  .table-wrap{overflow-x:visible}
  table.data.data--stack thead{display:none}
  table.data.data--stack,table.data.data--stack tbody{display:block;width:100%}
  table.data.data--stack tr{display:block;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:var(--surface);overflow:hidden}
  table.data.data--stack tbody tr:nth-child(even) td,table.data.data--stack tbody tr:hover td{background:transparent}
  table.data.data--stack td{display:block;position:relative;padding:9px 14px 9px 42%;text-align:right;border-bottom:1px solid var(--border);white-space:normal!important;min-height:37px}
  table.data.data--stack td:last-child{border-bottom:none}
  table.data.data--stack td::before{content:attr(data-label);position:absolute;left:14px;top:9px;width:34%;text-align:left;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);white-space:normal;line-height:1.3}
  table.data.data--stack td .cell-sub,table.data.data--stack td.nw{white-space:normal!important}
  table.data.data--stack td:empty{display:none}
  table.data.data--stack td .flex{justify-content:flex-end}

  /* tfoot (baris TOTAL) sebelumnya TIDAK ikut dijadikan block, padahal tbody
     sudah. Akibatnya di HP baris total keluar dari tumpukan kartu dan lebarnya
     melar sendiri. Baris total juga tidak boleh diberi label kolom — label
     diambil dari urutan <th>, sehingga sel "TOTAL" malah berlabel "Aset". */
  table.data.data--stack tfoot{display:block;width:100%}
  table.data.data--stack tfoot tr{display:flex;justify-content:space-between;gap:10px;
    border:1px solid var(--border);border-radius:12px;background:var(--surface-2);
    padding:10px 14px;margin-bottom:12px}
  table.data.data--stack tfoot td{display:block;padding:0;border:0;text-align:right;min-height:0}
  table.data.data--stack tfoot td:first-child{text-align:left}
  table.data.data--stack tfoot td::before{content:none}
  table.data.data--stack tfoot td:empty{display:none}

  /* Sel bergabung (colspan) dipakai sebagai judul kelompok atau baris kosong.
     Memberinya label kolom justru menyesatkan, dan padding-left 42% membuat
     teksnya terhimpit di kanan. */
  table.data.data--stack td[colspan]{padding-left:14px;text-align:left}
  table.data.data--stack td[colspan]::before{content:none}
}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.toolbar,.no-print{display:none!important}
  .main{margin-left:0}
  .content{padding:0}
  .card{box-shadow:none;border:1px solid #ccc}
  body{background:#fff}
}

/* ---- Chip rekomendasi berkelompok (Software / Hardware) ---- */
.chip-groups .chip-group{margin-bottom:10px}
.chip-groups .chip-group__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.chip-groups .issue-chip{cursor:pointer;user-select:none}
.chip-groups .issue-chip:hover{border-color:var(--blue-600);color:var(--blue-600)}
.chip-groups .issue-chip.is-added{opacity:.45;text-decoration:line-through}
#itemTable td{vertical-align:middle}
#itemTable tr.is-done td:nth-child(2) input{text-decoration:line-through;color:var(--muted)}

/* ---- Panel rekomendasi perbaikan (panduan + riwayat serupa) ---- */
.rekom-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rekom-item{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;
  padding:8px;background:var(--surface);text-decoration:none;color:var(--text);transition:border-color .15s}
.rekom-item:hover{border-color:var(--blue-600)}
.rekom-item__thumb{flex:0 0 96px;height:56px;border-radius:8px;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center}
.rekom-item__thumb img{width:100%;height:100%;object-fit:cover}
.rekom-item__ph{color:#fff;font-size:18px}
.rekom-item__meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.rekom-item__meta b{font-size:13px;line-height:1.3}
.rekom-hist{border:1px solid var(--border);border-left:3px solid var(--blue-600);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;background:var(--surface-2)}
.rekom-hist ul{margin:6px 0 0}

/* =====================================================================
   ASISTEN AI — gelembung mengambang
   =====================================================================
   Dipakai di halaman ber-sidebar MAUPUN di halaman depan publik. Halaman
   publik tidak memakai layout yang sama, jadi gaya di sini tidak boleh
   bergantung pada pembungkus mana pun — semuanya berdiri sendiri.

   z-index 900: di ATAS konten, tapi di BAWAH modal/flash (yang memakai
   1000+). Gelembung yang menutupi pesan galat membuat orang tidak tahu
   kenapa simpanannya gagal. */
.ai-chat{position:fixed;right:16px;bottom:16px;z-index:900;
  font-family:inherit;font-size:14px}

.ai-chat__bulat{display:flex;align-items:center;gap:8px;
  padding:12px 16px;border:none;border-radius:999px;cursor:pointer;
  background:var(--blue-600,#2563eb);color:#fff;font-weight:600;font-size:14px;
  box-shadow:0 6px 20px rgba(37,99,235,.35)}
.ai-chat__bulat:hover{filter:brightness(1.06)}
.ai-chat__label{white-space:nowrap}

.ai-chat__panel{position:absolute;right:0;bottom:56px;width:360px;max-width:calc(100vw - 32px);
  max-height:min(72vh,560px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--card,#fff);color:var(--text,#0f172a);
  border:1px solid var(--border,#e2e8f0);border-radius:14px;
  box-shadow:0 18px 50px rgba(15,23,42,.22)}
.ai-chat__panel[hidden]{display:none}

.ai-chat__head{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--border,#e2e8f0)}
.ai-chat__head > div:first-child{flex:1;min-width:0}
/* Judulnya memuat NAMA APLIKASI yang bisa diubah pengguna di Pengaturan.
   Nama panjang tanpa pemotongan akan mendorong tombol tutup keluar dari
   panel — dan tombol tutup yang tidak terlihat membuat panelnya terasa
   tidak bisa ditutup. */
.ai-chat__head b{display:block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ai-chat__sub{font-size:12px;color:var(--muted,#64748b);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-chat__aksi{display:flex;gap:4px}
.ai-chat__ikon{border:none;background:transparent;cursor:pointer;font-size:18px;
  line-height:1;padding:4px 8px;border-radius:6px;color:var(--muted,#64748b)}
.ai-chat__ikon:hover{background:var(--bg,#f1f5f9)}

.ai-chat__isi{flex:1;overflow-y:auto;padding:12px 14px;display:flex;
  flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}

.ai-msg{padding:9px 12px;border-radius:12px;max-width:88%;
  /* pre-wrap: jawaban AI memuat baris baru & daftar bernomor. Tanpa ini
     semuanya menempel jadi satu paragraf yang tidak terbaca. */
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;line-height:1.5}
.ai-msg--ai{align-self:flex-start;background:var(--bg,#f1f5f9)}
.ai-msg--saya{align-self:flex-end;background:var(--blue-600,#2563eb);color:#fff}
.ai-msg--galat{align-self:flex-start;background:#fef2f2;color:#b91c1c;
  border:1px solid #fecaca}
.ai-msg--tunggu{opacity:.65;font-style:italic}

.ai-chat__contoh{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ai-chip{border:1px solid var(--border,#e2e8f0);background:transparent;
  color:var(--text,#0f172a);border-radius:999px;padding:6px 11px;font-size:12.5px;
  cursor:pointer;text-align:left}
.ai-chip:hover{background:var(--bg,#f1f5f9)}

.ai-chat__form{display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid var(--border,#e2e8f0)}
.ai-chat__form input{flex:1;min-width:0;height:38px;padding:0 12px;
  border:1px solid var(--border,#e2e8f0);border-radius:9px;
  background:var(--card,#fff);color:var(--text,#0f172a);font-size:14px}
.ai-chat__form button{white-space:nowrap}

.ai-chat__kaki{padding:8px 14px 12px;font-size:11.5px;line-height:1.45;
  color:var(--muted,#64748b);border-top:1px solid var(--border,#e2e8f0)}

/* Layar sempit: panel menempel penuh supaya isian tidak terpotong.
   Tanpa ini, di 360px panelnya melebar keluar layar dan tombol Kirim tidak
   bisa disentuh — tombol yang tidak bisa disentuh sama saja tidak ada. */
@media(max-width:520px){
  .ai-chat{right:10px;bottom:10px;left:10px}
  .ai-chat__bulat{margin-left:auto}
  .ai-chat__panel{width:auto;left:0;right:0;max-height:78vh}
  .ai-chat__label{display:none}
}

/* Saat dicetak, gelembung tidak boleh ikut. */
@media print{ .ai-chat{display:none !important} }

/* Blok contoh kode di halaman Pengaturan (isi config-secret.php).
   Ditambahkan karena kelasnya sempat saya pakai di view sebelum ada
   aturannya — dan kelas yang tidak ada tidak menghasilkan galat apa pun,
   hanya tampilan yang salah tanpa ada yang tahu sebabnya. */
.pre-kode{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;margin:10px 0 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.6;color:var(--text);overflow-x:auto}

/* ---------- Kartu terpusat untuk halaman publik sederhana ----------
   Dipakai publik/serahterima.php. Sisa keluarga .auth-* (wrap/hero/form)
   sudah dihapus: halaman Masuk, Lapor Kerusakan, dan Lacak Tiket kini
   memakai app/views/partials/gaya_konsol.php. */
.auth-card{width:100%;max-width:400px}
.auth-card h2{font-size:24px;margin-bottom:6px}
.auth-card>p{color:var(--muted);margin:0 0 26px}