/* ============================================================
   Dashboard Produksi — Roto-Rooter Indonesia
   Sistem desain "Instrumen Presisi"
   Radius 3 tingkat · skala huruf 8 · jarak kelipatan 4
   ============================================================ */

:root{
  /* warna */
  --navy:#16204a; --navy-2:#1d2a5e; --navy-3:#2a3872;
  --tinta:#0f172a; --tinta-2:#334155; --tinta-3:#64748b; --tinta-4:#94a3b8;
  --garis:#e2e8f0; --garis-2:#eef2f7;
  --kertas:#ffffff; --latar:#f4f6fb; --latar-2:#f8fafc;

  --merah:#e11b22; --merah-lembut:#fee2e2; --merah-tua:#b91419;
  --biru:#2563c9;  --biru-lembut:#dbeafe;
  --hijau:#0f8a5f; --hijau-lembut:#d6f2e5;
  --kuning:#c2700d; --kuning-lembut:#fdf0d9;
  --ungu:#6d3fc4;  --ungu-lembut:#ece4fb;

  /* radius */
  --r-s:6px; --r-m:10px; --r-f:999px;
  /* bayangan */
  --sh-1:0 1px 2px rgba(15,23,42,.06);
  --sh-2:0 2px 8px rgba(15,23,42,.08);
  --sh-3:0 12px 32px rgba(15,23,42,.16);

  --sidebar:236px;
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f); font-size:14px; line-height:1.55;
  color:var(--tinta); background:var(--latar);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--biru); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.015em; color:var(--tinta)}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
.num,td.num,th.num,.kpi-nilai,.bh-nilai,.lg-nilai{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
:focus-visible{outline:2px solid var(--biru); outline-offset:2px; border-radius:var(--r-s)}

/* ================= TATA LETAK ================= */
.cangkang{display:flex; min-height:100vh}

.sisi{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:var(--navy); color:#cdd6f0;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.merek{padding:20px 16px 16px; border-bottom:1px solid rgba(255,255,255,.09)}
.merek-baris{display:flex; align-items:center; gap:10px}
.merek-tanda{
  width:32px; height:32px; flex:0 0 32px; border-radius:var(--r-s);
  background:var(--merah); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:13px; letter-spacing:-.03em;
}
.merek-teks strong{display:block; color:#fff; font-size:14px; letter-spacing:-.01em}
.merek-teks span{display:block; font-size:11px; color:#8f9ec7; letter-spacing:.02em}

.nav{padding:12px 10px; flex:1}
.nav-judul{
  font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:#7183b3; padding:12px 10px 6px; font-weight:600;
}
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin-bottom:2px; border-radius:var(--r-s);
  color:#cdd6f0; font-size:13px; text-decoration:none; transition:background .12s,color .12s;
}
.nav a:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.nav a.aktif{background:var(--navy-3); color:#fff; font-weight:600; box-shadow:inset 2px 0 0 var(--merah)}
.nav a .ic{opacity:.85; flex:0 0 auto}
.nav a.aktif .ic{opacity:1}
.nav .lencana-nav{
  margin-left:auto; background:var(--merah); color:#fff; border-radius:var(--r-f);
  font-size:11px; padding:1px 7px; font-weight:650; font-variant-numeric:tabular-nums;
}

.sisi-kaki{padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.09); font-size:11px; color:#7183b3}
.sisi-kaki a{color:#a8b6dd}

.utama{flex:1; min-width:0; display:flex; flex-direction:column}

.puncak{
  background:var(--kertas); border-bottom:1px solid var(--garis);
  padding:14px 24px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20;
}
.puncak h1{font-size:20px}
.puncak .jejak{font-size:12px; color:var(--tinta-3); margin-top:1px}
.puncak-kanan{margin-left:auto; display:flex; align-items:center; gap:10px}
.jam-kini{font-size:12px; color:var(--tinta-3); font-variant-numeric:tabular-nums; text-align:right}
.jam-kini b{display:block; color:var(--tinta); font-size:13px; font-weight:600}
.pengguna{
  display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px;
  border:1px solid var(--garis); border-radius:var(--r-f); background:var(--latar-2);
}
.avatar{
  width:28px; height:28px; border-radius:var(--r-f); background:var(--navy); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:650; flex:0 0 28px;
}
.pengguna span{font-size:12px; line-height:1.2}
.pengguna span b{display:block; font-size:12.5px}
.pengguna span i{font-style:normal; color:var(--tinta-3); font-size:11px}

.isi{padding:20px 24px 40px; flex:1}
.menu-tombol{display:none}

/* ================= KOMPONEN ================= */
.kartu{
  background:var(--kertas); border:1px solid var(--garis);
  border-radius:var(--r-m); box-shadow:var(--sh-1); padding:16px; margin-bottom:16px;
}
.kartu.rapat{padding:0; overflow:hidden}
.kartu-kepala{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--garis-2);
}
.kartu-kepala h3{font-size:14px}
.kartu-kepala p{font-size:12px; color:var(--tinta-3)}
.kartu-kepala .kanan{margin-left:auto; display:flex; gap:8px; align-items:center}
.kartu-isi{padding:16px}

.bagian{display:flex; align-items:flex-end; gap:16px; margin:24px 0 12px}
.bagian:first-child{margin-top:4px}
.bagian h2{font-size:16px}
.bagian p{font-size:12px; color:var(--tinta-3); margin-top:2px}
.bagian-aksi{margin-left:auto; display:flex; gap:8px; align-items:center}

.kisi{display:grid; gap:16px}
.k-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.k-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.k-23{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.k-32{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

/* Kartu angka */
.kpi{
  background:var(--kertas); border:1px solid var(--garis); border-radius:var(--r-m);
  padding:14px 16px; box-shadow:var(--sh-1); min-width:0;
}
.kpi.sorot{border-color:#cbd5e1; background:linear-gradient(180deg,#fff, var(--latar-2))}
.kpi-atas{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.kpi-label{font-size:11.5px; color:var(--tinta-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.kpi-ikon{margin-left:auto; color:var(--tinta-4)}
.kpi-nilai{font-size:26px; font-weight:680; letter-spacing:-.03em; line-height:1.12; color:var(--tinta)}
.kpi-nilai small{font-size:13px; font-weight:600; color:var(--tinta-3); letter-spacing:0}
.kpi-bawah{display:flex; align-items:center; gap:8px; margin-top:5px; min-height:18px}
.kpi-sub{font-size:12px; color:var(--tinta-3)}
.kpi-tren{
  margin-left:auto; display:inline-flex; align-items:center; gap:3px;
  font-size:11.5px; font-weight:650; padding:1px 6px; border-radius:var(--r-f);
  font-variant-numeric:tabular-nums;
}
.kpi-tren.ok{color:var(--hijau); background:var(--hijau-lembut)}
.kpi-tren.bad{color:var(--merah-tua); background:var(--merah-lembut)}
.kpi-tren.netral{color:var(--tinta-3); background:var(--garis-2)}

/* Lencana */
.lencana{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:2px 8px; border-radius:var(--r-f); white-space:nowrap; border:1px solid transparent;
}
.lencana.ok{background:var(--hijau-lembut); color:#08573b; border-color:#b6e5d0}
.lencana.warn{background:var(--kuning-lembut); color:#8a4d05; border-color:#f3ddb4}
.lencana.bad{background:var(--merah-lembut); color:var(--merah-tua); border-color:#f7c3c5}
.lencana.info{background:var(--biru-lembut); color:#1a4a9c; border-color:#bcd4f7}
.lencana.netral{background:var(--garis-2); color:var(--tinta-2); border-color:var(--garis)}
.lencana.ungu{background:var(--ungu-lembut); color:#4a259c; border-color:#d5c4f5}

.grade{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:var(--r-s);
  font-size:11.5px; font-weight:700; color:#fff;
}
.grade-a{background:var(--hijau)} .grade-b{background:var(--biru)} .grade-c{background:var(--tinta-4)}

/* Bilah kemajuan */
.bilah{display:block; height:6px; background:var(--garis-2); border-radius:var(--r-f); overflow:hidden; min-width:60px}
.bilah-isi{display:block; height:100%; border-radius:var(--r-f); transition:width .3s}
.bilah-isi.ok{background:var(--hijau)} .bilah-isi.warn{background:var(--kuning)}
.bilah-isi.bad{background:var(--merah)} .bilah-isi.biru{background:var(--biru)}

/* Tombol */
.tbl{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--garis); background:var(--kertas); color:var(--tinta-2);
  font:600 12.5px/1 var(--f); padding:7px 12px; border-radius:var(--r-s);
  text-decoration:none; transition:background .12s,border-color .12s,color .12s;
}
.tbl:hover{background:var(--latar-2); border-color:#cbd5e1; text-decoration:none; color:var(--tinta)}
.tbl-utama{background:var(--merah); border-color:var(--merah); color:#fff}
.tbl-utama:hover{background:var(--merah-tua); border-color:var(--merah-tua); color:#fff}
.tbl-navy{background:var(--navy); border-color:var(--navy); color:#fff}
.tbl-navy:hover{background:var(--navy-2); border-color:var(--navy-2); color:#fff}
.tbl-bahaya{color:var(--merah-tua); border-color:#f7c3c5; background:#fff}
.tbl-bahaya:hover{background:var(--merah-lembut); border-color:var(--merah)}
.tbl-kecil{padding:5px 9px; font-size:12px}
.aksi-ubah{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:var(--r-s);
  color:var(--tinta-3); border:1px solid transparent;
}
.aksi-ubah:hover{background:var(--latar); color:var(--biru); border-color:var(--garis); text-decoration:none}

/* Tab */
.tab{display:flex; gap:4px; border-bottom:1px solid var(--garis); margin-bottom:16px; overflow-x:auto}
.tab a{
  padding:8px 14px; font-size:13px; font-weight:600; color:var(--tinta-3);
  border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none;
}
.tab a:hover{color:var(--tinta); text-decoration:none}
.tab a.aktif{color:var(--navy); border-bottom-color:var(--merah)}
.tab a .hit{
  display:inline-block; margin-left:6px; font-size:11px; background:var(--garis-2);
  color:var(--tinta-2); padding:0 6px; border-radius:var(--r-f); font-variant-numeric:tabular-nums;
}

/* Penyaring */
.saring{
  display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;
  background:var(--kertas); border:1px solid var(--garis); border-radius:var(--r-m);
  padding:12px 14px; margin-bottom:16px; box-shadow:var(--sh-1);
}
.saring label{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--tinta-3); font-weight:600}
.saring input,.saring select{
  font:400 13px var(--f); padding:7px 10px; border:1px solid var(--garis);
  border-radius:var(--r-s); background:#fff; color:var(--tinta); min-width:150px;
}
.saring .cari-kotak{position:relative}
.saring .cari-kotak input{padding-left:30px; min-width:220px}
.saring .cari-kotak .ic{position:absolute; left:9px; bottom:9px; color:var(--tinta-4)}
.saring .kanan{margin-left:auto; display:flex; gap:8px; align-items:flex-end}

/* Tabel */
.gulir{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:.06em;
  color:var(--tinta-3); font-weight:650; padding:9px 12px; background:var(--latar-2);
  border-bottom:1px solid var(--garis); white-space:nowrap; position:sticky; top:0;
}
table.data td{padding:10px 12px; border-bottom:1px solid var(--garis-2); vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--latar-2)}
table.data td.num,table.data th.num{text-align:right; font-variant-numeric:tabular-nums}
table.data td.tengah,table.data th.tengah{text-align:center}
table.data .utama-sel{font-weight:600; color:var(--tinta)}
table.data .kecil{font-size:11.5px; color:var(--tinta-3); display:block; font-weight:400}
table.data .baris-bahaya{background:#fff7f7}
table.data .baris-bahaya:hover{background:#ffefef}
table.data tfoot td{
  padding:10px 12px; border-top:1px solid var(--garis); font-weight:650;
  background:var(--latar-2); font-variant-numeric:tabular-nums;
}

/* Kosong */
.kosong{
  padding:36px 16px; text-align:center; color:var(--tinta-3);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.kosong p{font-size:13.5px; font-weight:600; color:var(--tinta-2)}
.kosong span{font-size:12px}
.tak-ada{color:var(--tinta-3); font-size:13px; padding:12px 0}

/* Pesan kilat */
.kilat{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.kilat div{
  display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--r-m);
  font-size:13px; font-weight:600; border:1px solid;
}
.kilat .ok{background:var(--hijau-lembut); border-color:#b6e5d0; color:#08573b}
.kilat .bad{background:var(--merah-lembut); border-color:#f7c3c5; color:var(--merah-tua)}
.kilat .warn{background:var(--kuning-lembut); border-color:#f3ddb4; color:#8a4d05}

/* ================= BAGAN ================= */
.bagan{width:100%; height:auto; display:block}
.bagan .grid{stroke:var(--garis-2); stroke-width:1}
.bagan .sumbu{font:500 10.5px var(--f); fill:var(--tinta-3)}
.bagan .btg-nilai{font:650 10.5px var(--f); fill:var(--tinta-2)}
.bagan .btg{transition:opacity .15s}
.bagan .btg:hover{opacity:.78}
.bagan .btg.biru{fill:var(--biru)}   .bagan .btg.merah{fill:var(--merah)}
.bagan .btg.hijau{fill:var(--hijau)} .bagan .btg.kuning{fill:var(--kuning)}
.bagan .btg.navy{fill:var(--navy)}   .bagan .btg.ungu{fill:var(--ungu)}
.bagan .btg.abu{fill:var(--tinta-4)}
.bagan .garis{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.bagan .garis.putus{stroke-dasharray:5 4; stroke-width:1.8}
.bagan .garis.biru{stroke:var(--biru)}  .bagan .garis.merah{stroke:var(--merah)}
.bagan .garis.hijau{stroke:var(--hijau)} .bagan .garis.abu{stroke:var(--tinta-4)}
.bagan .garis.navy{stroke:var(--navy)}
.bagan .titik{stroke:#fff; stroke-width:1.6}
.bagan .titik.biru{fill:var(--biru)} .bagan .titik.merah{fill:var(--merah)}
.bagan .titik.hijau{fill:var(--hijau)} .bagan .titik.abu{fill:var(--tinta-4)}
.bagan .titik.navy{fill:var(--navy)}
.bagan .area{stroke:none; opacity:.10}
.bagan .area.biru{fill:var(--biru)} .bagan .area.hijau{fill:var(--hijau)}
.bagan .area.merah{fill:var(--merah)} .bagan .area.navy{fill:var(--navy)}

.donat-bungkus{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.donat{width:168px; height:168px; flex:0 0 168px}
.donat .iris{stroke:#fff; stroke-width:1.5}
.donat .iris.biru{fill:var(--biru); stroke:var(--biru)} .donat .iris.merah{fill:var(--merah); stroke:var(--merah)}
.donat .iris.hijau{fill:var(--hijau); stroke:var(--hijau)} .donat .iris.kuning{fill:var(--kuning); stroke:var(--kuning)}
.donat .iris.navy{fill:var(--navy); stroke:var(--navy)} .donat .iris.ungu{fill:var(--ungu); stroke:var(--ungu)}
.donat .iris.abu{fill:var(--tinta-4); stroke:var(--tinta-4)}
.donat-nilai{font:680 20px var(--f); fill:var(--tinta)}
.donat-label{font:500 10.5px var(--f); fill:var(--tinta-3); text-transform:uppercase; letter-spacing:.07em}
.legenda{flex:1; min-width:180px; display:flex; flex-direction:column; gap:7px}
.legenda li{display:flex; align-items:center; gap:8px; font-size:12.5px}
.legenda .kotak{width:10px; height:10px; border-radius:3px; flex:0 0 10px}
.kotak.biru{background:var(--biru)} .kotak.merah{background:var(--merah)}
.kotak.hijau{background:var(--hijau)} .kotak.kuning{background:var(--kuning)}
.kotak.navy{background:var(--navy)} .kotak.ungu{background:var(--ungu)} .kotak.abu{background:var(--tinta-4)}
.lg-nama{flex:1; color:var(--tinta-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lg-nilai{font-weight:650; font-variant-numeric:tabular-nums}
.lg-pct{color:var(--tinta-3); font-size:11.5px; width:46px; text-align:right; font-variant-numeric:tabular-nums}

.bh{display:flex; flex-direction:column; gap:9px}
.bh li{display:flex; align-items:center; gap:10px; font-size:12.5px}
.bh-label{flex:0 0 190px; color:var(--tinta-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bh-jalur{flex:1; height:9px; background:var(--garis-2); border-radius:var(--r-f); overflow:hidden; min-width:60px}
.bh-isi{display:block; height:100%; border-radius:var(--r-f)}
.bh-isi.biru{background:var(--biru)} .bh-isi.merah{background:var(--merah)}
.bh-isi.hijau{background:var(--hijau)} .bh-isi.kuning{background:var(--kuning)}
.bh-isi.navy{background:var(--navy)} .bh-isi.ungu{background:var(--ungu)} .bh-isi.abu{background:var(--tinta-4)}
.bh-nilai{flex:0 0 auto; min-width:64px; text-align:right; font-weight:650; font-variant-numeric:tabular-nums}

/* ================= ISIAN ================= */
.panel-isi{border-color:#cbd5e1; box-shadow:var(--sh-2)}
.panel-kepala{display:flex; align-items:center; margin-bottom:14px}
.panel-kepala h3{font-size:14px}
.panel-kepala .tbl{margin-left:auto}
.isian-kisi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.medan{display:flex; flex-direction:column; gap:4px}
.medan.span-2{grid-column:span 2} .medan.span-3{grid-column:span 3} .medan.span-4{grid-column:span 4}
.medan-l{font-size:11px; font-weight:650; color:var(--tinta-3); text-transform:uppercase; letter-spacing:.05em}
.medan-l i{color:var(--merah); font-style:normal}
.medan input,.medan select,.medan textarea{
  font:400 13px var(--f); padding:8px 10px; border:1px solid var(--garis);
  border-radius:var(--r-s); background:#fff; color:var(--tinta); width:100%;
}
.medan textarea{resize:vertical; line-height:1.5}
.medan-bantu{font-size:11px; color:var(--tinta-4)}
.isian-kaki{display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--garis-2)}
.hapus-form{margin-top:12px; padding-top:12px; border-top:1px solid var(--garis-2)}

/* ================= HALAMAN KHUSUS ================= */

/* Papan status produksi (elemen tanda tangan) */
.papan{
  background:var(--navy); color:#fff; border-radius:var(--r-m);
  padding:18px 20px; margin-bottom:16px; box-shadow:var(--sh-2);
  display:grid; grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr)); gap:20px; align-items:center;
}
.papan-kiri h2{color:#fff; font-size:20px; letter-spacing:-.02em}
.papan-kiri p{color:#9fb0dc; font-size:12.5px; margin-top:4px}
.papan-tanda{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  padding:3px 10px; border-radius:var(--r-f); font-size:11.5px; font-weight:600; color:#dfe6f8;
}
.papan-tanda.awas{background:rgba(225,27,34,.22); border-color:rgba(225,27,34,.45); color:#ffd9da}
.papan-sel{border-left:1px solid rgba(255,255,255,.14); padding-left:18px; min-width:0}
.papan-sel .l{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8f9ec7; font-weight:600}
.papan-sel .n{font-size:26px; font-weight:680; letter-spacing:-.03em; line-height:1.2; font-variant-numeric:tabular-nums}
.papan-sel .s{font-size:11.5px; color:#9fb0dc}
.papan-sel .n.awas{color:#ff8f93}
.papan-sel .n.baik{color:#7fe0b6}

/* Struktur organisasi */
.org{display:flex; flex-direction:column; align-items:center; gap:0; padding:8px 0 4px; overflow-x:auto}
.org-tingkat{display:flex; justify-content:center; gap:14px; flex-wrap:nowrap; padding:0 4px}
.org-sambung{width:1px; height:18px; background:var(--garis); flex:0 0 18px}
.org-palang{height:1px; background:var(--garis); margin:0 auto}
.org-kotak{
  background:var(--kertas); border:1px solid var(--garis); border-radius:var(--r-m);
  padding:10px 14px; min-width:168px; text-align:center; box-shadow:var(--sh-1); position:relative;
}
.org-kotak.pimpinan{border-color:var(--navy); box-shadow:var(--sh-2)}
.org-kotak.pimpinan .org-jabatan{color:var(--navy)}
.org-kotak .org-jabatan{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--merah)}
.org-kotak .org-nama{font-size:13.5px; font-weight:650; margin-top:2px}
.org-kotak .org-divisi{font-size:11.5px; color:var(--tinta-3)}
.org-kotak a{color:inherit}
.org-kotak a:hover{text-decoration:none}
.org-regu{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px;
}
.org-regu .org-kotak{min-width:140px; padding:8px 12px}

/* Kartu profil */
.profil-atas{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.profil-foto{
  width:64px; height:64px; border-radius:var(--r-m); background:var(--navy); color:#fff;
  display:grid; place-items:center; font-size:22px; font-weight:680; flex:0 0 64px; letter-spacing:-.02em;
}
.profil-info h3{font-size:18px}
.profil-info .jabatan{font-size:12px; color:var(--merah); font-weight:700; text-transform:uppercase; letter-spacing:.07em}
.profil-meta{display:flex; flex-wrap:wrap; gap:x 16px; gap:6px 18px; margin-top:8px}
.profil-meta div{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tinta-2)}
.profil-meta .ic{color:var(--tinta-4)}
.profil-teks{margin-top:14px; font-size:13.5px; line-height:1.65; color:var(--tinta-2); max-width:70ch}

.jobdesc{counter-reset:jd; display:flex; flex-direction:column; gap:0}
.jobdesc li{
  display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--garis-2); font-size:13.5px; color:var(--tinta-2);
}
.jobdesc li:last-child{border-bottom:0}
.jobdesc li::before{
  counter-increment:jd; content:counter(jd,decimal-leading-zero);
  font-size:11px; font-weight:700; color:var(--tinta-4); flex:0 0 22px;
  font-variant-numeric:tabular-nums; padding-top:2px;
}

.daftar-orang{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.orang{
  display:flex; gap:12px; align-items:center; padding:12px 14px; background:var(--kertas);
  border:1px solid var(--garis); border-radius:var(--r-m); box-shadow:var(--sh-1);
  text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s;
}
.orang:hover{border-color:#cbd5e1; box-shadow:var(--sh-2); text-decoration:none}
.orang.aktif{border-color:var(--navy); box-shadow:var(--sh-2)}
.orang .avatar{width:38px; height:38px; flex:0 0 38px; font-size:13px}
.orang .n{font-size:13.5px; font-weight:650; display:block}
.orang .j{font-size:11.5px; color:var(--tinta-3)}
.orang .hit{margin-left:auto; text-align:right}
.orang .hit b{display:block; font-size:15px; font-weight:680; font-variant-numeric:tabular-nums}
.orang .hit i{font-style:normal; font-size:10.5px; color:var(--tinta-3); text-transform:uppercase; letter-spacing:.05em}

.rincian{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px 20px}
.rincian div{min-width:0}
.rincian dt{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3); font-weight:650}
.rincian dd{margin:2px 0 0; font-size:13.5px; color:var(--tinta)}

.tabel-mini{width:100%; border-collapse:collapse; font-size:12.5px}
.tabel-mini td{padding:7px 0; border-bottom:1px solid var(--garis-2)}
.tabel-mini tr:last-child td{border-bottom:0}
.tabel-mini td:last-child{text-align:right; font-weight:650; font-variant-numeric:tabular-nums}

.catatan{
  font-size:12.5px; color:var(--tinta-2); background:var(--latar-2);
  border-left:3px solid var(--biru); border-radius:0 var(--r-s) var(--r-s) 0; padding:10px 14px; line-height:1.6;
}
.catatan.awas{border-left-color:var(--merah); background:#fff7f7}
.catatan.baik{border-left-color:var(--hijau); background:#f4fbf8}
.catatan b{color:var(--tinta)}
.catatan-daftar{display:flex; flex-direction:column; gap:10px}

/* Masuk */
.masuk-halaman{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, #22306b 0%, var(--navy) 55%, #0d142f 100%);
}
.masuk-kotak{
  width:100%; max-width:380px; background:#fff; border-radius:var(--r-m);
  box-shadow:var(--sh-3); padding:28px;
}
.masuk-kotak .merek-baris{justify-content:center; margin-bottom:6px}
.masuk-kotak h1{font-size:20px; text-align:center}
.masuk-kotak .sub{font-size:12.5px; color:var(--tinta-3); text-align:center; margin:4px 0 20px}
.masuk-kotak label{display:block; margin-bottom:12px}
.masuk-kotak .medan-l{display:block; margin-bottom:4px}
.masuk-kotak input{
  width:100%; font:400 14px var(--f); padding:10px 12px;
  border:1px solid var(--garis); border-radius:var(--r-s);
}
.masuk-kotak button{width:100%; justify-content:center; padding:11px; font-size:13.5px; margin-top:4px}
.masuk-galat{
  background:var(--merah-lembut); border:1px solid #f7c3c5; color:var(--merah-tua);
  padding:9px 12px; border-radius:var(--r-s); font-size:12.5px; font-weight:600; margin-bottom:14px;
}
.masuk-bantu{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--garis-2);
  font-size:11.5px; color:var(--tinta-3); line-height:1.7;
}
.masuk-bantu code{background:var(--latar); padding:1px 5px; border-radius:4px; color:var(--tinta-2)}

/* ================= MODE PAPAN (layar besar / TV) ================= */
body.papan-mode .sisi,
body.papan-mode .puncak,
body.papan-mode .saring,
body.papan-mode .sisi-kaki{display:none}
body.papan-mode .isi{padding:24px 32px}
body.papan-mode{font-size:16px}
body.papan-mode .kpi-nilai{font-size:34px}
body.papan-mode .papan-sel .n{font-size:34px}
body.papan-mode table.data{font-size:15px}
body.papan-mode .keluar-papan{
  position:fixed; right:20px; top:20px; z-index:50;
}

/* ================= CETAK ================= */
@media print{
  .sisi,.puncak,.saring,.bagian-aksi,.tbl,.aksi-ubah{display:none !important}
  body{background:#fff; font-size:11.5px}
  .isi{padding:0}
  .kartu{box-shadow:none; break-inside:avoid; page-break-inside:avoid}
  .papan{background:#fff; color:var(--tinta); border:1px solid var(--garis)}
  .papan-kiri h2,.papan-sel .n{color:var(--tinta)}
  .papan-sel{border-left-color:var(--garis)}
}

/* ================= RESPONSIF ================= */
@media (max-width:1240px){
  .k-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .k-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .papan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .papan-kiri{grid-column:1 / -1}
  .papan-sel:nth-child(2),.papan-sel:nth-child(4){border-left:0; padding-left:0}
}
@media (max-width:980px){
  .sisi{
    position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:var(--sh-3);
  }
  body.menu-buka .sisi{transform:translateX(0)}
  body.menu-buka::after{
    content:""; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:50;
  }
  .menu-tombol{display:inline-grid; place-items:center; width:34px; height:34px;
    border:1px solid var(--garis); border-radius:var(--r-s); background:#fff; cursor:pointer; color:var(--tinta-2)}
  .k-4,.k-3,.k-23,.k-32{grid-template-columns:repeat(2,minmax(0,1fr))}
  .isian-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .medan.span-3,.medan.span-4{grid-column:span 2}
  .isi{padding:16px}
  .puncak{padding:12px 16px}
}
@media (max-width:640px){
  .k-2,.k-3,.k-4,.k-5,.k-6,.k-23,.k-32{grid-template-columns:minmax(0,1fr)}
  .isian-kisi{grid-template-columns:minmax(0,1fr)}
  .medan.span-2,.medan.span-3,.medan.span-4{grid-column:span 1}
  .papan{grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px}
  .papan-sel{border-left:0; padding-left:0}
  .puncak h1{font-size:17px}
  .jam-kini{display:none}
  .bh-label{flex:0 0 110px}
  .saring input,.saring select,.saring .cari-kotak input{min-width:0; width:100%}
  .saring label{flex:1 1 140px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}


/* ===== Halaman pengaturan: pilihan reset ===== */
.reset-kisi{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.reset-item{
  display:flex; align-items:flex-start; gap:11px; padding:12px 13px;
  border:1px solid var(--garis); border-radius:var(--r-m); background:#fff;
  cursor:pointer; transition:border-color .12s, background .12s;
}
.reset-item:hover{border-color:#cbd5e1; background:var(--latar-2)}
.reset-item input[type=checkbox]{margin-top:3px; width:15px; height:15px; accent-color:var(--merah); flex:none}
.reset-item:has(input:checked){border-color:var(--merah); background:#fff7f7}
.reset-ikon{color:var(--tinta-4); flex:none; margin-top:1px}
.reset-item:has(input:checked) .reset-ikon{color:var(--merah)}
.reset-teks{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.reset-teks b{font-size:13px; font-weight:650}
.reset-teks span{font-size:12px; color:var(--tinta-3); line-height:1.45}
.reset-teks em{font-size:11.5px; color:var(--merah-tua); font-style:normal; margin-top:2px}
.reset-jml{
  font-size:11.5px; font-weight:650; color:var(--tinta-3); white-space:nowrap;
  font-variant-numeric:tabular-nums; align-self:center; flex:none;
}
.reset-kosong{opacity:.5; cursor:default}
.reset-kosong:hover{border-color:var(--garis); background:#fff}

/* Isian lepas di luar mesin CRUD */
.inp{
  font:400 13px var(--f); padding:8px 10px; border:1px solid var(--garis);
  border-radius:var(--r-s); background:#fff; color:var(--tinta);
}
.inp:focus{outline:2px solid var(--biru-lembut); outline-offset:1px; border-color:var(--biru)}

/* Spanduk data contoh */
.spanduk-contoh{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 15px; margin-bottom:16px;
  background:var(--kuning-lembut); border:1px solid #f3ddb4;
  border-left:3px solid #d98806; border-radius:var(--r-m);
}
.spanduk-contoh .sp-ikon{color:#b06f05; flex:none; display:flex}
.spanduk-contoh .sp-teks{flex:1; min-width:220px; font-size:12.5px; color:#7a4a04; line-height:1.5}
.spanduk-contoh .sp-teks b{color:#5c3803}
.papan-mode .spanduk-contoh{display:none}

@media (max-width:980px){ .reset-kisi{grid-template-columns:minmax(0,1fr)} }
@media print{ .spanduk-contoh{display:none} }