/* ===== 01-dasar.css ===== */
:root{
  --bg:#0a0e13; --panel:#111820; --panel-2:#161f2a; --line:#223040;
  --text:#dbe6ef; --muted:#7c8ba0; --accent:#29b6f6; --accent-dim:#134a63;
  --accent-teks:#04222f;
  --ok:#2ecc71; --warn:#ffb300; --fail:#e5484d;
  --konsol-1:#0d141b; --konsol-2:#0a0e13;
  --garis-pindai:rgba(41,182,246,0.035);
  --zebra:rgba(255,255,255,0.015);
  --bayang:0 10px 30px rgba(0,0,0,0.45);
  --kaca:rgba(255,255,255,0.04);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
html[data-tema="terang"]{
  --bg:#eef2f6; --panel:#ffffff; --panel-2:#f4f7fa; --line:#ccd6e0;
  --text:#16202b; --muted:#5b6b7d; --accent:#0277bd; --accent-dim:#b9dcf0;
  --accent-teks:#ffffff;
  --ok:#1b8a4b; --warn:#a86500; --fail:#c62828;
  --konsol-1:#ffffff; --konsol-2:#e7eef4;
  --garis-pindai:rgba(2,119,189,0.045);
  --zebra:rgba(0,0,0,0.022);
  --bayang:0 10px 30px rgba(22,32,43,0.16);
  --kaca:rgba(22,32,43,0.04);
}
*{box-sizing:border-box;}
/* Latar seluruh dashboard: satu foto Kepulauan Indonesia dari orbit malam
   yang menempel di tepi peramban (fixed) dan tidak ikut menggulir bersama
   isinya. Sekarang memakai pseudo-element supaya bisa dicerahkan lewat
   `filter: brightness()` — sama seperti latar layar masuk. Tint di atasnya
   dibuat tipis biar warna foto tetap keluar; --bg dipasang sebagai jaring
   pengaman bila gambarnya tidak sampai. */
body{margin:0;color:var(--text);font-family:var(--font-body);
     -webkit-font-smoothing:antialiased;
     background:var(--bg);}
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  /* .jpg, bukan .png: fotonya sama persis (1672×941), cuma formatnya. Sebagai
     PNG ia 2,1 MB dan sendirian butuh satu detik penuh tiap halaman dimuat;
     sebagai JPEG mutu 92 ia 341 KB dengan beda piksel rata-rata 0,7%. */
  background:url('/images/indonesia-orbit-bg.jpg') center center / cover no-repeat;
  filter:brightness(1.35) saturate(1.12) contrast(1.02);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,12,26,.35) 0%,
    rgba(6,12,26,.15) 40%,
    rgba(4,7,16,.55) 100%);
}
html[data-tema="terang"] body::after{
  background:linear-gradient(180deg,
    rgba(238,242,246,.55) 0%,
    rgba(238,242,246,.25) 40%,
    rgba(238,242,246,.65) 100%);
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600;letter-spacing:-.01em;}
::-webkit-scrollbar{height:8px;width:8px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
button{font:inherit;}

/* Ikon kalender/jam di isian tanggal: peramban menggambarnya menurut
   color-scheme, dan halaman ini mengaku "light dark" — warnanya jadi ikut mode
   HP, bukan tema aplikasi (HP gelap + tema terang = ikon putih di kotak
   terang). Dipaku per tema; menggantikan filter:invert yang dulu dipasang per
   panel dan hanya benar kalau HP-nya mode terang. */
input[type=date], input[type=time], input[type=datetime-local], input[type=month]{color-scheme:dark;}
html[data-tema="terang"] input[type=date], html[data-tema="terang"] input[type=time],
html[data-tema="terang"] input[type=datetime-local], html[data-tema="terang"] input[type=month]{color-scheme:light;}

/* ===== 02-layar-masuk.css ===== */
/* =====================================================================
   LAYAR MASUK — kartu login sederhana di atas Indonesia dari orbit malam

   Tata rupa mengikuti mock-up "Login Header.dc.html" (E:\2026\test\Login
   Page): panji AVENGERS raksasa dengan huruf Lora italic dan bayangan
   navy, kartu login gelap-transparan bersudut kecil, tombol utama sian
   #35e0c4, latar bumi diterangkan lewat filter brightness+saturate pada
   gambarnya sendiri (bukan overlay tebal seperti versi sebelumnya).

   Semua kelas berawalan `lm` (layar masuk). ID di kartu (iUser, iPass,
   btnMasuk, kmPanelMasuk, kmPanelDaftar, dst.) tidak disunting supaya JS
   di 07-kartu-masuk.js & 12-jembatan-elogbook.js jalan tanpa perubahan.
   ===================================================================== */

:root{
  --lm-sian:#35e0c4;
  --lm-sian-terang:#6ef0da;
  --lm-jingga:#f6971d;
  --lm-jingga-terang:#ffb52e;
  --lm-teks:#f2f6ff;
  --lm-teks-redup:#9fb0cd;
  --lm-teks-remang:#8fa2c4;
  --lm-teks-kabur:#6d7f9e;
  --lm-kartu-bg:rgba(9,17,33,.82);
  --lm-kartu-garis:rgba(90,130,190,.28);
  --lm-input-bg:rgba(16,27,49,.7);
  --lm-input-garis:rgba(100,135,195,.32);
}

#layarMasuk{
  position:fixed; inset:0; z-index:100; overflow-y:auto; overflow-x:hidden;
  color:var(--lm-teks);
  font-family:'Barlow','IBM Plex Sans',system-ui,sans-serif;
  min-height:100vh;
  /* Satu layar penuh: kepala, panji, kartu, lalu kaki menempel di dasar
     layar. Ukuran panji dan jarak-jaraknya ikut TINGGI layar (vh), jadi di
     laptop/PC kaki halaman langsung terlihat tanpa menggulir. Layar yang
     memang terlalu pendek tetap bisa digulir (overflow-y:auto di atas). */
  display:flex; flex-direction:column;
  transition:opacity .6s ease, visibility .6s ease;
  background:#04070f;
}
#layarMasuk.pergi{opacity:0; visibility:hidden; pointer-events:none;}

/* --- Latar bumi dari orbit. Gambarnya dipasang sebagai <img> di JS/CSS
   supaya bisa dicerahkan lewat filter (brightness/saturate/contrast) —
   overlay hitam di atasnya dibuat tipis, jadi warna aslinya keluar.  */
.lm-langit{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    url('/images/indonesia-orbit-bg.jpg') center center / cover no-repeat,
    #04070f;
  filter:brightness(1.35) saturate(1.12) contrast(1.02);
}
.lm-langit::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,12,26,.35) 0%,
    rgba(6,12,26,.15) 40%,
    rgba(4,7,16,.55) 100%);
}

/* --- Kepala: merek kiri, jam UTC kanan.  */
.lm-kanvas{
  position:relative; z-index:3;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:clamp(14px, 2.6vh, 26px) 34px;
}
.lm-merek{display:flex; align-items:center; gap:14px;}
.lm-tanda{
  width:54px; height:54px; flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  transition:transform .25s ease, filter .25s ease;
}
.lm-tanda img{
  width:100%; height:100%; object-fit:contain; display:block;
  /* "Timbul": bayangan gelap memberi kedalaman/mengangkat logo dari latar,
     lalu glow toska tipis menyatukannya dengan tema kartu. */
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,.55))
    drop-shadow(0 1px 2px rgba(0,0,0,.4))
    drop-shadow(0 0 12px rgba(53,224,196,.35));
}
.lm-tanda:hover{transform:translateY(-2px) scale(1.04);}
.lm-tanda:hover img{
  filter:
    drop-shadow(0 7px 16px rgba(0,0,0,.6))
    drop-shadow(0 1px 2px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(53,224,196,.5));
}
.lm-merek-teks{display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.35;}
.lm-merek-teks b{
  font-family:'Rajdhani','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:18px; letter-spacing:.12em; color:var(--lm-teks);
}
.lm-merek-teks span{
  font-family:'Share Tech Mono','IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.18em; color:var(--lm-teks-remang);
}
.lm-jam{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-align:right;
}
.lm-jam span{
  font-family:'Trebuchet MS','Barlow',sans-serif;
  font-weight:700; font-size:15px; letter-spacing:.3em;
  color:var(--lm-teks-remang);
}
.lm-jam b{
  font-family:'Poppins','Barlow',sans-serif;
  font-weight:600; font-size:23px; letter-spacing:.06em;
  color:var(--lm-sian);
  text-shadow:0 0 16px rgba(53,224,196,.5);
}

/* --- Panji AVENGERS. Judul memakai Lora italic tebal; isian huruf
   gradien kuning ke jingga; bayangan navy berlapis (drop-shadow) meniru
   poster film — dua lapis warna gelap kebiruan lalu satu blur lembut. */
.lm-panji{
  position:relative; z-index:2;
  text-align:center;
  margin:clamp(8px, 2.4vh, 44px) 0 0;
  padding:0 22px;
  user-select:none;
}
.lm-panji-judul{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic; font-weight:800;
  /* Lantai clamp dibuat kecil (40px) supaya judul menyusut mengikuti lebar
     layar di HP — dengan lantai 76px lama, judul membeku terlalu besar dan
     meluber keluar layar di bawah ~600px. Faktor vw menjaganya tetap gagah
     di tablet/desktop, dan atap 176px tak berubah. */
  font-size:clamp(40px, min(13.2vw, 14vh), 176px);
  line-height:.9; letter-spacing:.015em;
  background:linear-gradient(180deg,
    #ffd257 0%,
    #ffb52e 42%,
    #f6971d 62%,
    #e07d10 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:
    drop-shadow(2px 3px 0 #2f4a70)
    drop-shadow(4px 6px 0 #223449)
    drop-shadow(6px 8px 6px rgba(0,0,0,.6));
}
.lm-panji-anak{
  margin:clamp(6px, 1.4vh, 14px) 0 0;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-style:italic; font-weight:800;
  font-size:clamp(16px, min(2.2vw, 3vh), 30px); letter-spacing:.02em; line-height:1.2;
  color:var(--lm-jingga-terang);
  text-decoration:none;
  text-shadow:
    2px 2px 0 #24384f,
    3px 3px 6px rgba(0,0,0,.6),
    0 0 24px rgba(246,151,29,.4);
}

/* --- Tengah: pemusat kartu login (panji berdiri sendiri di baris atasnya
   pada grid #layarMasuk). Padding atas 56px = jarak dari sub-judul panji
   ke kartu, persis seperti mock-up. */
.lm-tengah{
  position:relative; z-index:3;
  display:flex; justify-content:center;
  padding:clamp(16px, 3.6vh, 56px) 24px clamp(8px, 2vh, 40px);
}

/* --- Kartu login. Panel gelap navy, sudut kecil, tepi tipis biru.
   Kesan "timbul": gradien vertikal halus (atas sedikit terang) + bingkai
   ganda (garis biru + garis highlight putih tipis di dalam), bayangan
   dua-lapis (bayangan jauh besar untuk kedalaman + ambient dekat untuk
   pijakan), dan sorotan lampu lembut di tepi atas. */
.lm-kartu{
  width:100%; max-width:400px; position:relative;
  padding:34px 34px 38px;
  background:
    linear-gradient(180deg, rgba(28,44,74,.32) 0%, rgba(9,17,33,0) 45%),
    var(--lm-kartu-bg);
  border:1px solid var(--lm-kartu-garis);
  border-radius:6px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.45) inset,
    0 0 0 1px rgba(53,224,196,.08),
    0 40px 100px -20px rgba(0,0,0,.85),
    0 18px 40px -18px rgba(0,0,0,.7),
    0 0 60px -20px rgba(53,224,196,.25);
  animation:lm-datang .5s ease both;
}
.lm-kartu::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(53,224,196,.12) 0%, rgba(53,224,196,0) 70%);
}
@keyframes lm-datang{
  from{opacity:0; transform:translateY(12px);}
  to  {opacity:1; transform:none;}
}
.lm-eyebrow{
  font-family:'Share Tech Mono','IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.3em;
  color:var(--lm-jingga); text-transform:uppercase;
  margin-bottom:14px;
}
.lm-kartu h2{
  margin:0 0 16px;
  font-family:'Rajdhani','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:30px; line-height:1.1;
  color:var(--lm-teks);
}
.lm-sub{
  margin:0 0 18px;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:14px; line-height:1.65;
  color:var(--lm-teks-redup); text-wrap:pretty;
}
/* Status sambungan server duduk di posisi paragraf ke-2 milik mock
   (empty placeholder). Diberi margin bawah 26px agar jarak ke kolom
   USERNAME persis. */
.lm-sumber-ket + .lm-kolom{margin-top:0;}

/* --- Kolom isian.  */
.lm-kolom{margin-bottom:20px;}
.lm-kolom + .lm-kolom{margin-top:0;}
.lm-kolom label{
  display:block; margin-bottom:6px;
  font-family:Helvetica,'Barlow',sans-serif;
  font-size:11px; letter-spacing:.2em;
  color:var(--lm-teks-remang); text-transform:uppercase;
}
.lm-kolom input{
  width:100%; box-sizing:border-box;
  padding:13px 15px;
  background:var(--lm-input-bg);
  border:1px solid var(--lm-input-garis);
  border-radius:3px;
  color:#eef3ff;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:15px;
  outline:0;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.lm-kolom input::placeholder{color:#54677a;}
.lm-kolom input:focus{
  border-color:var(--lm-sian);
  box-shadow:0 0 0 3px rgba(53,224,196,.18);
}

/* --- Pemilih unit pada formulir daftar. Meniru kolom isian, hanya menukar
   kursor teks dengan tanda panah dan menyisakan ruang untuknya di kanan. */
.lm-kolom select{
  width:100%; box-sizing:border-box;
  padding:13px 40px 13px 15px;
  background:var(--lm-input-bg);
  border:1px solid var(--lm-input-garis);
  border-radius:3px;
  color:#eef3ff;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:15px;
  outline:0; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  /* Panah sian digambar sendiri — appearance:none menghapus panah bawaan. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2335e0c4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.lm-kolom select:focus{
  border-color:var(--lm-sian);
  box-shadow:0 0 0 3px rgba(53,224,196,.18);
}
/* Daftar buka biasanya digambar sistem, tetapi paksa warna gelap di peramban
   yang menghormatinya supaya tidak menyilaukan di kartu bertema malam. */
.lm-kolom select option{background:#0d1a26; color:#eef3ff;}

/* --- Tombol utama.  */
.lm-tombol{
  width:100%; margin-top:6px; padding:15px;
  background:var(--lm-sian); color:#04231e;
  border:0; border-radius:3px;
  font-family:'Rajdhani','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:16px; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(53,224,196,.6);
  transition:filter .16s, transform .16s, box-shadow .16s;
}
.lm-tombol:hover{filter:brightness(1.08); box-shadow:0 12px 34px -10px rgba(53,224,196,.75);}
.lm-tombol:active{transform:translateY(1px);}

/* --- Kaki kartu: tautan pindah tab (masuk / daftar).  */
.lm-kaki-tautan{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 14px; margin-top:20px;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:13px; color:var(--lm-teks-remang);
  line-height:1;
}
.lm-tautan{
  background:transparent; border:0; padding:0; cursor:pointer;
  color:var(--lm-sian); font:inherit;
  text-decoration:underline; text-underline-offset:3px;
}
.lm-tautan:hover{color:var(--lm-sian-terang);}
.lm-tautan:disabled{opacity:.5; cursor:progress; text-decoration:none;}
.lm-tautan[hidden]{display:none;}

/* --- Baris status sambungan server. Titik kecil di kiri, teks di kanan.  */
.lm-sumber-ket{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 26px;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:12px; line-height:1.55; letter-spacing:.02em; font-weight:600;
  color:#d7e2f4;
}
/* Ketika status baik & pesan sengaja dikosongkan (lihat srvKet di
   12-jembatan-elogbook.js), baris ini disembunyikan biar tidak menyisakan
   jarak kosong sebelum label USERNAME. */
.lm-sumber-ket:has(span:empty){display:none;}
.lm-sumber-ket i{
  margin-top:5px; width:6px; height:6px; flex:none; border-radius:50%;
  background:var(--lm-teks-remang);
}
.lm-sumber-ket.lm-baik i{background:var(--lm-sian);}
.lm-sumber-ket.lm-awas i{background:var(--lm-jingga-terang);}
.lm-sumber-ket.lm-sibuk i{animation:lm-kedip 1s steps(2,end) infinite;}
@keyframes lm-kedip{50%{opacity:.25;}}
/* Kelas versi lama (km-*) — 12-jembatan-elogbook.js masih membubuhkannya
   pada elemen yang sama. Ditulis biar berkas JS-nya tidak perlu ikut disunting. */
.lm-sumber-ket.km-baik i{background:var(--lm-sian);}
.lm-sumber-ket.km-awas i{background:var(--lm-jingga-terang);}
.lm-sumber-ket.km-sibuk i{animation:lm-kedip 1s steps(2,end) infinite;}

/* --- Kaki halaman: dua baris pendek, transparan.  */
.lm-kaki{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:clamp(10px, 2vh, 22px) 34px;
  margin-top:auto;
  font-family:'Share Tech Mono','IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.12em;
  color:var(--lm-teks-kabur);
}

/* --- Layar kecil.  */
@media (max-width:640px){
  .lm-kanvas{padding:18px 20px;}
  .lm-merek-teks b{font-size:14px; letter-spacing:.1em;}
  .lm-merek-teks span{display:none;}
  .lm-jam span{font-size:11px; letter-spacing:.22em;}
  .lm-jam b{font-size:18px;}
  .lm-panji{margin-top:24px;}
  .lm-tengah{padding:36px 18px 28px;}
  .lm-kartu{padding:26px 22px 28px;}
  .lm-kartu h2{font-size:24px;}
  .lm-kaki{padding:14px 20px; flex-wrap:wrap; justify-content:center; text-align:center;}
}

/* --- Layar pendek (laptop 1366x768, PC 1080p dengan bilah tab dan
   taskbar): kartu dirapatkan supaya kaki halaman tetap terlihat. */
@media (max-height:1000px){
  .lm-kartu{padding:24px 30px 26px;}
  .lm-eyebrow{margin-bottom:10px;}
  .lm-kartu h2{margin-bottom:10px; font-size:27px;}
  .lm-sub{margin-bottom:14px; font-size:13.5px; line-height:1.55;}
  .lm-sumber-ket{margin-bottom:16px;}
  .lm-kolom{margin-bottom:14px;}
  .lm-kolom input, .lm-kolom select{padding-top:11px; padding-bottom:11px;}
  .lm-tombol{padding:13px;}
  .lm-kaki-tautan{margin-top:14px;}
}
@media (max-height:740px){
  .lm-sub{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .lm-kartu{animation:none;}
  .lm-sumber-ket.lm-sibuk i, .lm-sumber-ket.km-sibuk i{animation:none;}
}

/* ===== 03-kerangka.css ===== */
/* =====================================================================
   2. KERANGKA APLIKASI
   ===================================================================== */
#app{display:none;}
#app.tampil{display:block;}

/* Header konsol sedikit tembus supaya orbit di body menyembul menembusnya —
   tanpa ini header akan menjadi pita gelap solid yang memotong latar dua. */
header.konsol{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(150deg, rgba(13,20,27,.78), rgba(10,14,19,.88));
  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);}
html[data-tema="terang"] header.konsol{
  background:linear-gradient(150deg, rgba(255,255,255,.85), rgba(231,238,244,.9));}
header.konsol::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,var(--garis-pindai) 0 1px,transparent 1px 3px);}
.konsol-isi{position:relative;z-index:1;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:14px 22px;max-width:1500px;margin:0 auto;}
.logo{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,var(--accent),var(--accent-dim));color:var(--accent-teks);
  box-shadow:0 6px 18px rgba(41,182,246,.28);}
.brand{flex:1;min-width:190px;}
.brand .eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}
.brand h1{font-size:19px;margin-top:2px;}
.eyebrow-baris{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.versi-app{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;color:var(--accent);
  border:1px solid var(--line);border-radius:6px;padding:0 5px;line-height:1.5;}
.versi-app:empty{display:none;}
/* Boleh melipat. Tanpa ini, deretan jam + kartu akun + lima tombol ikon
   menyusut sampai di bawah lebarnya sendiri di layar HP, dan tombol paling
   kanan — Keluar — terpotong keluar layar tanpa bisa dicapai sama sekali. */
.jam{display:flex;gap:13px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.jam .blok{text-align:right;}
.jam .nilai{font-family:var(--font-mono);font-size:18px;font-weight:600;color:var(--accent);line-height:1.1;}
/* Zona menempel sebaris dengan waktunya sebagai penanda kecil, bukan angka. */
.jam .zona{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muted);}
.jam .label{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;}
/* Dipakai <button> maupun <a> — tanpa text-decoration:none, tautannya
   membawa garis bawah yang menyeberang di bawah ikonnya. */
.tombol-ikon{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:9px;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;transition:.16s;
  text-decoration:none;}
.tombol-ikon:hover{border-color:var(--accent);color:var(--accent);}
/* Sakelar bahasa memakai huruf, bukan ikon: bendera salah karena bahasa bukan
   negara, dan gambar bola dunia tidak memberi tahu bahasa apa yang akan dituju. */
.tombol-ikon.teks{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;}

.kartu-akun{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;
  padding:5px 10px 5px 6px;background:var(--panel);}
.kartu-akun .av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--accent-dim);color:var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:600;}
.kartu-akun .nm{font-size:12.5px;font-weight:500;line-height:1.2;}
.kartu-akun .pr{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.05em;}

/* Dulu di atas rel ini ada pita peringatan yang tingginya berubah-ubah, dan
   rel harus diberi jarak sebesar pita itu — diukur, karena angka matinya cuma
   benar pada satu lebar layar. Pitanya sudah dibuang; relnya menempel langsung
   di puncak jendela, dan pengukurannya ikut hilang. */
/* Rel navigasi juga sedikit tembus — sudah sticky di puncak layar, dan pita
   gelap solid selebar viewport akan menutup orbit persis di garis mata. */
nav.rel{position:sticky;top:0;z-index:50;
  background:rgba(17,24,32,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);}
html[data-tema="terang"] nav.rel{background:rgba(255,255,255,.85);}
.rel-isi{display:flex;gap:2px;overflow-x:auto;max-width:1500px;margin:0 auto;padding:0 14px;}
.rel button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;
  font-family:var(--font-display);font-size:13px;font-weight:500;padding:13px 15px;white-space:nowrap;transition:.16s;}
.rel button:hover{color:var(--text);}
.rel button.aktif{color:var(--accent);border-bottom-color:var(--accent);}
.rel .lencana{font-family:var(--font-mono);font-size:10px;background:var(--fail);color:#fff;
  border-radius:20px;padding:1px 6px;margin-left:6px;vertical-align:1px;}

main{max-width:1500px;margin:0 auto;padding:22px 22px 70px;}
section.layar{display:none;animation:masuk .3s ease;}
section.layar.aktif{display:block;}
@keyframes masuk{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.judul-seksi{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px;}
.judul-seksi h2{font-size:17px;}
.judul-seksi .ket{color:var(--muted);font-size:12.5px;}
.pemisah{height:1px;background:var(--line);margin:14px 0 20px;}


/* ===== 04-cincin-peralatan.css ===== */
/* =====================================================================
   3. KARTU PERALATAN — tampil bergantian di depan

   Dulu ini cincin 3D yang berputar sendiri, satu putaran 36 detik. Harga
   gerakan itu ternyata mahal: unit yang dicari harus ditunggu lewat, dan
   separuh kartu selalu terlihat membelakangi di sisi jauh cincin. Yang
   tinggal sekarang satu kartu di depan — sisanya tidak ada di layar sama
   sekali — dan gilirannya berganti sendiri tiap 5 detik.

   Perspective-nya bukan sisa yang lupa dibuang: kartu yang datang muncul
   dari kedalaman dan yang habis giliran mundur ke sana. Itu yang membuat
   pergantiannya terasa maju ke depan, bukan sekadar bertukar gambar.
   ===================================================================== */
/* Tinggi panggung = 14px (top kartu) + tinggi kartu (±284px) ≈ 298px, ditambah
   ruang untuk bayangannya. Kartu depan tidak lagi diperbesar (lihat aturCincin
   di 17-cincin-peralatan.js: pembesaran lewat transform 3D membuat rasternya
   lembut), jadi tingginya tinggi kartu apa adanya. */
.orbit{position:relative;height:330px;margin:6px 0 0;overflow:hidden;
  perspective:1400px;perspective-origin:50% 46%;}
/* Lapis yang memegang kartunya. preserve-3d wajib: tanpa itu translateZ kartu
   tidak kebagian perspective .orbit dan kedalamannya hilang sama sekali. */
.cincin{position:absolute;inset:0;transform-style:preserve-3d;}

.kartu-orbit{position:absolute;left:50%;top:14px;margin-left:-115px;width:230px;cursor:pointer;
  border:1px solid var(--line);border-radius:15px;background:var(--panel);overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  transition:transform .62s cubic-bezier(.22,.68,.3,1),opacity .45s linear;}
/* Yang belum giliran benar-benar hilang, bukan sekadar diredupkan: tidak ada
   sisa kartu belakang yang ikut terbaca, dan tidak ada yang bisa tersentuh. */
.kartu-orbit[data-sembunyi="1"]{opacity:0;pointer-events:none;}
.kartu-orbit:hover{border-color:var(--accent);}
/* Terkunci = bukan unit akun ini; masih bisa diklik untuk melihat jadwal dinasnya. */
.kartu-orbit.terkunci{cursor:pointer;}

/* Bingkai 4:3 (230×172) untuk SEMUA kartu — foto unit dari kamera/HP umumnya 4:3, jadi muat utuh. */
.bingkai{position:relative;height:172px;overflow:hidden;border-bottom:1px solid var(--line);}
.bingkai .adegan{display:block;width:100%;height:100%;}
/* Foto pengenal unit menutup ilustrasi di bawahnya (ilustrasi tetap ada sebagai cadangan kalau
   berkas fotonya gagal dimuat); lampu dan gembok (z-index 2) tetap di atas. */
.bingkai .foto-unit{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.bingkai .lampu{position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;z-index:2;}
.lampu.hijau{background:var(--ok);box-shadow:0 0 12px var(--ok);}
.lampu.kuning{background:var(--warn);box-shadow:0 0 12px var(--warn);animation:denyut 2s infinite;}
.lampu.merah{background:var(--fail);box-shadow:0 0 12px var(--fail);animation:denyut 1.1s infinite;}
@keyframes denyut{50%{opacity:.28;}}
.bingkai .gembok{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  background:rgba(4,7,11,.62);color:#cfe2ef;}
.bingkai .tanda-ilus{position:absolute;left:8px;bottom:7px;z-index:2;font-family:var(--font-mono);
  font-size:8.5px;letter-spacing:.1em;color:rgba(255,255,255,.62);
  background:rgba(0,0,0,.4);border-radius:4px;padding:2px 6px;}
.kartu-orbit .isi{padding:11px 13px 13px;}
.kartu-orbit .nama{font-family:var(--font-display);font-size:13.5px;font-weight:600;line-height:1.25;}
.kartu-orbit .alat{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;min-height:31px;}
.kartu-orbit .kaki{display:flex;gap:6px;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
.cip{font-family:var(--font-mono);font-size:10px;padding:2px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted);}
.cip.bahaya{color:var(--fail);border-color:var(--fail);}
.cip.awas{color:var(--warn);border-color:var(--warn);}
.cip.aman{color:var(--ok);border-color:var(--ok);}
/* Cip yang menuju formulirnya di E-Logbook. Dibedakan dari cip biasa supaya
   tidak ada yang menekan cip MINGGUAN dan mengira dashboardnya rusak: yang
   bisa ditekan berpanah, berubah warna waktu disentuh, dan berkursor tangan. */
a.cip{text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s;}
a.cip::after{content:' \2197';font-size:9px;opacity:.75;}
a.cip:hover{color:var(--ink);border-color:var(--ink);}

.kendali-orbit{display:flex;justify-content:center;gap:9px;align-items:center;
  margin-top:2px;flex-wrap:wrap;}
.kendali-orbit .ket{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);
  text-align:center;}
.kendali-orbit .bundar{width:30px;height:30px;padding:0;border-radius:50%;
  display:grid;place-items:center;font-size:16px;line-height:1;}
/* Nama unit yang sedang di depan. Lebarnya dikunci: tanpa itu tombol panah
   bergeser tiap kali namanya berganti panjang — "Radtel" lalu "Pendaratan
   Presisi & Alat Bantu Navigasi" — dan yang mau menekan panah jadi meleset. */
.nama-depan{font-family:var(--font-display);font-size:13px;font-weight:600;
  min-width:17ch;text-align:center;}
/* Titik giliran: sekaligus penunjuk unit ke berapa dari delapan dan tombol
   lompat, supaya tidak ada unit yang harus ditunggu giliran datang. */
.titik-giliran{display:flex;gap:6px;align-items:center;}
.titik-giliran button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:var(--line);cursor:pointer;transition:background .2s,transform .2s;}
.titik-giliran button:hover{background:var(--muted);}
.titik-giliran button[aria-current="true"]{background:var(--accent);transform:scale(1.5);}


/* ===== 05-ubin-panel-tabel.css ===== */
/* =====================================================================
   4. UBIN, PANEL, TABEL
   ===================================================================== */
.ubin-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:22px;}
.ubin{position:relative;border:1px solid var(--line);border-radius:13px;padding:15px 16px;background:var(--panel);
  transition:transform .22s,box-shadow .22s;box-shadow:0 4px 0 -1px var(--panel-2),0 8px 0 -2px var(--line),var(--bayang);}
.ubin:hover{transform:translateY(-4px);box-shadow:0 8px 0 -1px var(--panel-2),0 14px 0 -2px var(--line),0 22px 34px rgba(0,0,0,.42);}
.ubin .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;}
.ubin .angka{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.05;margin-top:8px;}
.ubin .sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.ubin.merah .angka{color:var(--fail);} .ubin.kuning .angka{color:var(--warn);}
.ubin.hijau .angka{color:var(--ok);}   .ubin.biru .angka{color:var(--accent);}

.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start;}
.panel{border:1px solid var(--line);border-radius:13px;background:var(--panel);overflow:hidden;box-shadow:var(--bayang);}
.panel > .kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 15px;border-bottom:1px solid var(--line);background:var(--panel-2);}
.panel > .kepala h3{font-size:13.5px;}
.panel > .kepala .ket{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}
.panel .badan{padding:14px 15px;}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel-2);}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
tbody tr:nth-child(even){background:var(--zebra);}
tbody tr:hover{background:var(--kaca);}
.mono{font-family:var(--font-mono);font-size:11.5px;}
.gulir{max-height:400px;overflow:auto;}

.tag{font-family:var(--font-mono);font-size:10px;padding:2px 8px;border-radius:20px;display:inline-block;white-space:nowrap;}
.tag.open{background:rgba(229,72,77,.14);color:var(--fail);border:1px solid rgba(229,72,77,.4);}
.tag.proses{background:rgba(255,179,0,.14);color:var(--warn);border:1px solid rgba(255,179,0,.4);}
.tag.closed{background:rgba(46,204,113,.14);color:var(--ok);border:1px solid rgba(46,204,113,.4);}

.umur{display:flex;align-items:center;gap:7px;}
.umur .batang{height:5px;border-radius:3px;background:var(--line);width:60px;overflow:hidden;flex:none;}
.umur .batang i{display:block;height:100%;border-radius:3px;}


/* ===== 06-pita-berjalan.css ===== */
/* =====================================================================
   PITA BERJALAN — daftar yang menggeser dirinya sendiri ke atas
   Isinya dicetak dua kali; setelah bergeser tepat setengah tinggi jalur,
   yang terlihat adalah salinan kedua pada posisi yang sama persis dengan
   awal, jadi perulangannya tidak pernah tampak meloncat.
   ===================================================================== */
.tiker{position:relative;height:404px;overflow:hidden;}
.tiker::before,.tiker::after{content:"";position:absolute;left:0;right:0;height:44px;z-index:3;pointer-events:none;}
.tiker::before{top:0;background:linear-gradient(var(--panel),transparent);}
.tiker::after{bottom:0;background:linear-gradient(transparent,var(--panel));}
/* Jaraknya dipasang sebagai margin-bottom tiap kartu, bukan gap + padding
   tegak pada jalur. Dengan gap, jarak antara salinan pertama dan kedua ikut
   terhitung sekali saja, sementara padding atas-bawah terhitung penuh — geser
   50% jadi meleset belasan piksel dan sambungannya terlihat tersentak.
   Dengan margin per kartu, tinggi tiap satuan sama rata dan 50% tepat. */
/* Tanpa will-change dengan sengaja. Jalur dinas tingginya bisa 3.400 px, dan
   will-change:transform memaksa peramban menyiapkan tekstur selebar panel dan
   setinggi itu terus-menerus. Animasi transform sudah mendapat lapisan
   komposit sendiri tanpa perlu diminta. */
.jalur{display:flex;flex-direction:column;padding:0 13px;
  animation:naik 30s linear infinite;}
.jalur > *{margin-bottom:9px;}
@keyframes naik{to{transform:translateY(-50%);}}
.tiker:hover .jalur,.tiker.jeda .jalur{animation-play-state:paused;}
.tiker-kaki{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 13px;border-top:1px solid var(--line);background:var(--panel-2);}
.tiker-kaki .ket{font-family:var(--font-mono);font-size:10px;color:var(--muted);}

/* ---------- Baris trouble di dalam pita ---------- */
.trouble-baris{position:relative;flex:none;border:1px solid var(--line);border-radius:11px;
  background:var(--panel-2);padding:10px 12px 10px 15px;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .3s;
  transform-style:preserve-3d;}
.trouble-baris .pita-status{position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;}
.trouble-baris.open .pita-status{background:var(--fail);}
.trouble-baris.proses .pita-status{background:var(--warn);}
.trouble-baris:hover{border-color:var(--accent);box-shadow:0 14px 26px rgba(0,0,0,.4);
  transform:perspective(800px) rotateX(3.5deg) translateZ(16px);}
.trouble-baris .atas{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.trouble-baris .unit{font-family:var(--font-display);font-size:12.5px;font-weight:600;color:var(--accent);}
.trouble-baris .ket-isi{font-size:12px;line-height:1.45;margin-top:5px;}
.trouble-baris .bawah{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;}
.trouble-baris .jejak{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.lencana-umur{font-family:var(--font-mono);font-size:10.5px;font-weight:600;border-radius:20px;
  padding:2px 9px;border:1px solid currentColor;white-space:nowrap;}

/* ---------- Kartu personel 3D ---------- */
.kartu-orang{position:relative;flex:none;display:flex;align-items:center;gap:11px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:10px 13px;
  overflow:hidden;transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .35s;}
.kartu-orang::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--w);}
/* Kilau yang menyapu saat kartunya dimiringkan — memberi kesan permukaan
   yang memantul, bukan kotak datar yang sekadar diputar. */
.kartu-orang::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.13) 48%,transparent 62%);
  transform:translateX(-60%);transition:opacity .35s,transform .55s;}
.kartu-orang:hover{border-color:var(--w);box-shadow:0 18px 34px rgba(0,0,0,.45);
  transform:perspective(760px) rotateX(6deg) rotateY(-7deg) translateZ(24px);}
.kartu-orang:hover::after{opacity:1;transform:translateX(60%);}
.av3d{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--w);
  background:var(--panel);border:1px solid var(--line);
  transform:translateZ(30px);box-shadow:0 6px 14px rgba(0,0,0,.4);}
.kartu-orang .teks{flex:1;min-width:0;transform:translateZ(15px);}
.kartu-orang .nm{font-size:13px;font-weight:500;line-height:1.25;display:block;}
.kartu-orang .pr{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.kartu-orang .kanan{text-align:right;flex:none;transform:translateZ(9px);}
.kartu-orang .jam-kecil{font-family:var(--font-mono);font-size:10px;color:var(--muted);display:block;}
.nyala{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.09em;color:var(--ok);
  border:1px solid var(--ok);border-radius:20px;padding:1px 6px;display:inline-block;margin-top:3px;}
.nyala.diam{color:var(--muted);border-color:var(--line);}

/* ---------- Dinas ---------- */
/* Tabel jadwal bulanan: 31 kolom, jadi ia digulir mendatar di dalam kotaknya
   sendiri — halaman tidak boleh ikut melebar. Dua kolom pertama dibekukan di
   tempat, kalau tidak nama orangnya hilang begitu digulir ke tanggal 20. */
.jdw-gulir{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--panel);}
table.jdw{border-collapse:separate;border-spacing:0;font-size:11.5px;width:max-content;min-width:100%;}
table.jdw th,table.jdw td{border-bottom:1px solid var(--line);padding:5px 4px;text-align:center;
  white-space:nowrap;}
/* Baris tanggal ikut turun selama halaman digulir. sticky saja tidak cukup:
   .jdw-gulir menggulir mendatar, jadi "top:0" di sini mengacu ke kotak itu,
   bukan ke layar. Gesernya dihitung jdwLengketKepala() dan dititipkan lewat
   --jdw-kepala. z-index 3 = di atas pegangan pojok sel (2), setara kolom nama
   yang membeku — yang belakangan di DOM (kolom nama) tetap menutupinya saat
   digulir mendatar. */
table.jdw thead th{position:sticky;top:0;background:var(--panel-2);font-family:var(--font-mono);
  font-size:10px;color:var(--muted);font-weight:500;z-index:3;transform:translateY(var(--jdw-kepala,0px));}
/* Kolom nomor urut personel. Sticky di paling kiri supaya angkanya tetap
   terbaca saat tabelnya digulir horizontal sepanjang tanggal. Lebarnya
   dipatok 36px — muat sampai baris ke-99, dan tetap ramping. */
table.jdw th.jdw-no,table.jdw td.jdw-no{position:sticky;left:0;z-index:3;background:var(--panel);
  text-align:right;min-width:36px;padding:5px 8px;color:var(--muted);font-family:var(--font-mono);}
table.jdw thead th.jdw-no{background:var(--panel-2);z-index:4;}
table.jdw th.jdw-nama,table.jdw td.jdw-nama{position:sticky;left:36px;z-index:3;background:var(--panel);
  text-align:left;min-width:150px;padding-left:11px;}
/* Dulu kolom Peran, sekarang NIK. Lebarnya dipertahankan supaya penataan
   tabel dan kolom hari yang menyusul tidak bergeser. */
table.jdw th.jdw-nik,table.jdw td.jdw-nik{position:sticky;left:186px;z-index:3;background:var(--panel);
  text-align:left;min-width:110px;color:var(--muted);font-family:var(--font-mono);}
table.jdw thead th.jdw-nama,table.jdw thead th.jdw-nik{background:var(--panel-2);z-index:4;}
table.jdw td{font-family:var(--font-mono);color:var(--muted);}
/* Mode sunting: kolom No memuat pegangan seret ⠿ dan nomor yang bisa diklik,
   jadi dilebarkan — dan dua kolom beku di kanannya ikut bergeser. */
table.jdw.sunting th.jdw-no,table.jdw.sunting td.jdw-no{min-width:64px;padding:3px 4px;white-space:nowrap;text-align:left;}
table.jdw.sunting th.jdw-nama,table.jdw.sunting td.jdw-nama{left:64px;}
table.jdw.sunting th.jdw-nik,table.jdw.sunting td.jdw-nik{left:214px;}
.jdw-seret{display:inline-block;padding:4px 6px;color:var(--muted);cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none;font-size:14px;line-height:1;}
.jdw-seret:active{cursor:grabbing;color:var(--accent);}
.jdw-nomor{background:none;border:1px solid transparent;border-radius:5px;color:var(--muted);cursor:pointer;
  font-family:var(--font-mono);font-size:11.5px;min-width:24px;padding:3px 4px;}
.jdw-nomor:hover{border-color:var(--line);color:var(--text);}
table.jdw tr.jdw-diseret td{opacity:.45;}
table.jdw tr.jdw-sisip-atas td{box-shadow:inset 0 2px 0 var(--accent);}
table.jdw tr.jdw-sisip-bawah td{box-shadow:inset 0 -2px 0 var(--accent);}
/* Baris judul grup (tanpa nomor): namanya ditebalkan, di layar lihat maupun sunting. */
table.jdw tr.jdw-judul td.jdw-nama,table.jdw tr.jdw-judul td.jdw-nama input{font-weight:700;color:var(--text);}
/* Tanggal merah: kolomnya diblok dari kepala sampai baris terakhir. Kepalanya
   dicampur dengan warna latarnya sendiri (bukan tembus pandang) karena ia
   menempel saat digulir dan baris di bawahnya tidak boleh tembus. Ditaruh
   SEBELUM .jdw-hari-ini dan .jdw-pilih supaya keduanya tetap menang. */
table.jdw td.jdw-merah{background:color-mix(in srgb,var(--fail) 13%,var(--panel));}
table.jdw thead th.jdw-merah{background:color-mix(in srgb,var(--fail) 22%,var(--panel-2));color:var(--fail);font-weight:700;}
table.jdw .jdw-hari-ini{background:var(--kaca);box-shadow:inset 0 0 0 1px var(--accent);}
table.jdw select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:3px 2px;font-family:var(--font-mono);font-size:11px;min-width:52px;}
table.jdw input{background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:4px 7px;font-family:var(--font-body);font-size:12px;width:100%;}
table.jdw select:focus,table.jdw input:focus{outline:none;border-color:var(--accent);}
/* Mode sunting ala Excel (21-jadwal-dinas.js): sel biasa yang bisa diblok,
   diketik, dan ditarik pojoknya. Teks tidak ikut terblok saat menyeret. */
table.jdw.sunting td.jdw-sel{position:relative;min-width:40px;height:26px;cursor:cell;user-select:none;
  -webkit-user-select:none;border-left:1px solid var(--line);color:var(--text);}
table.jdw.sunting td.jdw-sel.jdw-pilih{background:color-mix(in srgb,var(--accent) 22%,transparent);}
table.jdw.sunting td.jdw-sel.jdw-jangkar{box-shadow:inset 0 0 0 2px var(--accent);}
table.jdw.sunting td.jdw-sel.jdw-pratinjau{outline:1px dashed var(--accent);outline-offset:-3px;}
.jdw-pegangan{position:absolute;right:-4px;bottom:-4px;width:9px;height:9px;background:var(--accent);
  border:1px solid var(--panel);border-radius:2px;cursor:crosshair;z-index:2;touch-action:none;}
/* Jari butuh sasaran lebih besar dari 9px. */
.jdw-pegangan::after{content:'';position:absolute;inset:-10px;}
.jdw-gulir:focus{outline:none;}
.jdw-gulir:focus-visible{box-shadow:0 0 0 2px var(--accent);}
/* Tombol kode menempel di bawah rel navigasi selama tabel digulir — jadwal
   belasan orang lebih tinggi dari layar, dan tanpa ini tiap mau ganti kode
   harus menggulir balik ke atas. --jdw-atas = tinggi nav.rel (jdwPasang). */
.jdw-alat{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 0 8px;
  position:sticky;top:var(--jdw-atas,0px);z-index:20;padding:7px 9px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--bayang);}
.jdw-alat .ket{font-size:11.5px;color:var(--muted);margin-right:4px;}
.jdw-alat .btn.kecil{font-family:var(--font-mono);min-width:38px;}
#jdwKetik{font-family:var(--font-mono);color:var(--accent);}
/* Saran kode di bawah sel yang sedang diketik (jdwPasangExcel). */
.jdw-saran{position:fixed;z-index:60;min-width:150px;max-height:240px;overflow-y:auto;padding:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:var(--bayang);}
.jdw-saran[hidden]{display:none;}
.jdw-saran button{display:flex;align-items:baseline;gap:9px;width:100%;padding:5px 8px;border:0;
  border-radius:6px;background:none;color:var(--text);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;}
.jdw-saran button b{font-family:var(--font-mono);min-width:38px;}
.jdw-saran button span{color:var(--muted);font-size:11.5px;}
.jdw-saran button:hover,.jdw-saran button.aktif{background:var(--panel-2);}
.jdw-saran button.aktif{box-shadow:inset 2px 0 0 var(--accent);}
/* Total dinas sebulan per orang, di kanan tabel saat menyunting. */
table.jdw td.jdw-rekap,table.jdw th.jdw-rekap{min-width:30px;color:var(--text);font-weight:600;
  background:var(--zebra);}
table.jdw .jdw-rekap.awal{border-left:2px solid var(--line);}
table.jdw .jdw-rekap.jml{color:var(--accent);}
.atur-data input[type=month]{background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:5px 9px;font-family:var(--font-mono);font-size:11.5px;}

.dinas-baris{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.dinas-kartu{position:relative;border:1px solid var(--line);border-radius:13px;background:var(--panel);
  padding:14px 15px;overflow:hidden;transition:transform .25s;box-shadow:var(--bayang);}
.dinas-kartu:hover{transform:translateY(-3px);}
.dinas-kartu .pita-sisi{position:absolute;left:0;top:0;bottom:0;width:4px;}
.dinas-kartu .kode{font-family:var(--font-display);font-size:25px;font-weight:700;line-height:1;}
.dinas-kartu .jam-shift{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-top:4px;letter-spacing:.06em;line-height:1.55;}
/* Jam UTC yang jadi patokan; WIB di bawahnya hanya untuk yang melihat jam dinding. */
.dinas-kartu .jam-lokal{opacity:.62;}
.orang{display:flex;align-items:center;gap:9px;margin-top:10px;}
/* Nomor urut personel di kartu shift. Bentuknya mono kecil, warna redup:
   dia penanda urutan, bukan bagian utama yang harus terbaca dulu — nama
   personelnya yang tetap dominan. Lebarnya dipatok supaya angka satuan
   dan angka belasan tetap sejajar antar baris (18px muat sampai "10."). */
.orang .no-urut{flex:none;min-width:18px;font-family:var(--font-mono);font-size:10.5px;
  color:var(--muted);text-align:right;line-height:1;}
.avatar{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;background:var(--panel-2);border:1px solid var(--line);}
.orang .nm{font-size:12.5px;line-height:1.25;}
.orang .pr{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.sedang-dinas{position:absolute;right:12px;top:12px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  color:var(--ok);border:1px solid var(--ok);border-radius:20px;padding:2px 7px;}

.pita-jam{position:relative;height:34px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel-2);}
.pita-jam .blok-shift{position:absolute;top:0;bottom:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:10px;border-right:1px solid var(--bg);}
.pita-jam .sekarang{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);z-index:2;}
.skala-jam{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--muted);margin-top:4px;}
.matriks td,.matriks th{padding:6px 8px;text-align:center;}
.matriks td:first-child,.matriks th:first-child{text-align:left;white-space:nowrap;}
.sel-shift{font-family:var(--font-mono);font-size:10.5px;font-weight:600;border-radius:5px;padding:3px 0;display:block;}
.s-P,.s-Pagi{background:rgba(41,182,246,.16);color:var(--accent);}
.s-S,.s-Siang{background:rgba(255,179,0,.16);color:var(--warn);}
.s-M,.s-MJ,.s-MN,.s-Malam{background:rgba(124,139,160,.2);color:var(--text);}
.s-PS,.s-PSJ,.s-PSN{background:rgba(46,204,113,.16);color:var(--ok);}
.s-L{color:var(--muted);opacity:.5;}

/* ---------- Sparepart ---------- */
.stok-bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;width:84px;margin-top:5px;}
.stok-bar i{display:block;height:100%;}
.rak-kode{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;}
/* Tabel berkolom lembar SAP — dua belas kolom, jadi lebih rapat dari tabel
   biasa dan tanggal/angka tidak dipatahkan; yang tidak muat digeser .gulir. */
table.tabel-spr td,table.tabel-spr th{padding:8px 9px;}
table.tabel-spr td.mono,table.tabel-spr td .mono,table.tabel-spr td .rak-kode{white-space:nowrap;}
table.tabel-spr tfoot td{border-top:2px solid var(--line);border-bottom:none;}


/* ===== 07-dashboard-unit.css ===== */
/* =====================================================================
   5. DASHBOARD UNIT
   ===================================================================== */
/* Label pemisah di pemilih unit: sesudahnya unit lain, jadwal dinasnya saja. */
.pilih-unit-lain{align-self:center;color:var(--muted);font-size:12px;margin-left:8px;}
/* Tombol unit yang tidak sedang dibuka diberi latar padat, sama dengan
   .subtab di bawahnya: pemilih ini duduk di atas gambar latar, dan tombol
   tembus pandang tenggelam di sana. */
#pilihUnit .btn.garis{background:var(--panel);border-color:var(--line);color:var(--muted);}
#pilihUnit .btn.garis:hover{color:var(--text);border-color:var(--muted);}
/* Tombol garis di dalam halaman unit (Cetak, Rekap, Impor, ...) ikut padat
   dengan alasan yang sama. Warna teksnya tetap: ini tombol aksi, bukan tab. */
#isiUnit .btn.garis{background:var(--panel);}
.kepala-unit{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;background:linear-gradient(145deg,var(--panel-2),var(--panel));
  box-shadow:var(--bayang);}
.kepala-unit .ikon-unit{position:relative;width:96px;height:60px;border-radius:10px;overflow:hidden;
  flex:none;border:1px solid var(--line);}
.kepala-unit .ikon-unit svg{display:block;width:100%;height:100%;}
/* Gambar yang diunggah menempati kotak yang sama persis dengan ilustrasinya —
   dipotong, bukan diperas, supaya logo persegi dan foto lanskap sama-sama utuh
   bentuknya. */
.kepala-unit .ikon-unit img{display:block;width:100%;height:100%;object-fit:cover;}
/* Bisa diganti: seluruh kotaknya jadi tombol. padding dan background dilepas
   karena elemennya <button>, dan bawaan peramban akan menambahkan keduanya. */
.kepala-unit .ikon-unit.bisa{padding:0;background:none;cursor:pointer;}
.kepala-unit .ikon-unit .tutup{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(6,12,20,.72);color:#fff;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.07em;text-transform:uppercase;text-align:center;padding:0 6px;
  opacity:0;transition:opacity .15s;}
.kepala-unit .ikon-unit.bisa:hover .tutup,
.kepala-unit .ikon-unit.bisa:focus-visible .tutup,
.kepala-unit .ikon-unit.sibuk .tutup{opacity:1;}
/* Layar sentuh tidak punya kursor yang bisa lewat, jadi tulisannya tidak
   pernah muncul di sana. Ditampilkan sejak awal, lebih samar. */
@media (hover:none){ .kepala-unit .ikon-unit.bisa .tutup{opacity:1;background:rgba(6,12,20,.42);} }
.kepala-unit h2{font-size:19px;}
.kepala-unit .sub{font-size:12.5px;color:var(--muted);margin-top:3px;}

/* Baris subtab. Dulu sederet tombol yang melayang tanpa alas, dan begitu
   jumlahnya lewat dari lima ia terlihat menempel ke kepala unit di atasnya
   sementara isinya jatuh terlalu jauh di bawah. Sekarang barisnya punya garis
   alas — jadi jelas bahwa isi di bawahnya milik tab yang menyala — dan tinggi
   tombolnya disamakan supaya yang berlencana angka tidak lebih jangkung
   daripada tetangganya. */
.subtab{display:flex;gap:7px;overflow-x:auto;margin:22px 0 0;padding:0 2px 10px;
  border-bottom:1px solid var(--line);scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;}
/* Batang gesernya ikut gaya umum di 01-dasar.css (tipis, gelap) — sama dengan
   tabel Jadwal Dinas. Dulu di sini ada scrollbar-width:thin, dan di Chrome
   properti itu mematikan ::-webkit-scrollbar, jadi yang tampil batang putih
   bawaan Windows. Sekarang hanya untuk peramban tanpa ::-webkit-scrollbar. */
@supports not selector(::-webkit-scrollbar){
  .subtab{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
}
.subtab button{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:9px;
  padding:0 14px;min-height:38px;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;font-family:var(--font-display);font-size:12.5px;font-weight:500;
  white-space:nowrap;transition:.16s;scroll-snap-align:start;}
.subtab button:hover{color:var(--text);border-color:var(--muted);}
.subtab button.aktif{background:var(--accent);border-color:var(--accent);color:var(--accent-teks);}
.subisi{display:none;padding-top:18px;} .subisi.aktif{display:block;animation:masuk .25s ease;}

/* Kartu peralatan — miring sedikit saat disentuh kursor, tanpa JS per bingkai */
.alat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px;perspective:1000px;}
.alat-kartu{border:1px solid var(--line);border-radius:13px;background:var(--panel);overflow:hidden;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .3s;box-shadow:var(--bayang);
  transform-style:preserve-3d;}
.alat-kartu:hover{transform:rotateX(5deg) rotateY(-5deg) translateY(-5px) scale(1.02);
  border-color:var(--accent);box-shadow:0 22px 40px rgba(0,0,0,.45);}
.alat-kartu.terpilih{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--bayang);}
.alat-kartu .bingkai{height:104px;}
.alat-kartu .isi{padding:11px 13px 12px;}
.alat-kartu .nm{font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1.3;}
.alat-kartu .tp{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-top:3px;}
.alat-kartu .kaki{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line);}

/* GALERI — foto kegiatan unit.
   Bingkainya aspect-ratio, bukan tinggi tetap: foto datang dari kamera dan HP
   dengan rasio bermacam-macam, dan tinggi tetap membuat barisnya bergerigi.
   object-fit:cover memotong ke tengah, jadi ubinnya rata tanpa foto penyok. */
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
/* margin:0 wajib — <figure> membawa margin bawaan peramban 40px kiri-kanan.
   Di kolom HP selebar 150px itu menyisakan kartu ~70px, dan nama berkasnya
   turun satu huruf per baris. */
.foto-kartu{margin:0;border:1px solid var(--line);border-radius:13px;background:var(--panel);overflow:hidden;
  cursor:zoom-in;box-shadow:var(--bayang);transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .2s;}
.foto-kartu:hover{transform:translateY(-4px);border-color:var(--accent);}
.foto-kartu .bing{position:relative;aspect-ratio:4/3;background:var(--panel-2);overflow:hidden;
  border-bottom:1px solid var(--line);}
.foto-kartu img{display:block;width:100%;height:100%;object-fit:cover;}
/* Ditampilkan lewat .hilang saat berkasnya belum ada — lihat onerror di gambarGaleri(). */
.foto-kartu .hilang{position:absolute;inset:0;display:none;place-items:center;text-align:center;
  padding:14px;font-family:var(--font-mono);font-size:10px;line-height:1.6;color:var(--muted);
  background:repeating-linear-gradient(45deg,transparent 0 8px,var(--kaca) 8px 16px);}
/* Ubin kosong tetap bisa ditekan — ia jadi tombol pilih berkas untuk slot itu. */
.foto-kartu.kosong{cursor:pointer;}
.foto-kartu.kosong .hilang{display:grid;}
.foto-kartu.kosong .hilang b{color:var(--accent);letter-spacing:.08em;}
.foto-kartu.kosong img{visibility:hidden;}
.foto-kartu.sibuk{cursor:progress;opacity:.55;}
.foto-kartu .isi{padding:10px 13px 12px;position:relative;}
.foto-kartu .ket{font-size:12.5px;line-height:1.45;}
.foto-kartu .meta{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:5px;
  padding-right:64px;word-break:break-all;}
/* Muncul hanya saat ubinnya disentuh tetikus — daftar foto tidak boleh
   berjejer tombol hapus yang mengundang kecelakaan. */
.foto-kartu .buang{position:absolute;right:8px;bottom:8px;opacity:0;transition:opacity .15s;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--line);border-radius:7px;
  padding:7px 11px;min-height:32px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.06em;cursor:pointer;}
.foto-kartu:hover .buang,.foto-kartu .buang:focus{opacity:1;}
.foto-kartu .buang:hover{border-color:var(--fail);color:var(--fail);}
/* Menyembunyikan tombol sampai disentuh tetikus hanya masuk akal kalau ada
   tetikusnya. Di layar sentuh tidak ada :hover — tombolnya tidak pernah
   muncul, dan satu-satunya jalan tersisa adalah menyodok-nyodok sampai
   fokusnya kebetulan mendarat di situ. Di sana ia tampil sejak awal. */
@media (hover:none),(pointer:coarse){
  /* Tombolnya ikut mengalir di bawah nama berkas, bukan menumpang di pojok:
     kartu HP terlalu sempit untuk menyisihkan 64px bagi tombol yang melayang. */
  .foto-kartu .buang{opacity:1;position:static;margin-top:8px;}
  .foto-kartu .meta{padding-right:0;}
}

.gal-kabar{margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted);}
.gal-kabar b{color:var(--text);font-weight:600;}
.gal-kabar .gagal{color:var(--fail);}

.foto-besar{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:28px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(3px);cursor:zoom-out;}
.foto-besar.buka{display:grid;}
.foto-besar img{max-width:100%;max-height:82vh;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.foto-besar .kap{margin-top:14px;text-align:center;color:#dbe6ef;font-size:13px;line-height:1.5;
  max-width:620px;}
.foto-besar .kap span{display:block;font-family:var(--font-mono);font-size:10.5px;opacity:.62;margin-top:5px;}

.riwayat{position:relative;padding-left:26px;}
.riwayat::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--accent),var(--line));}
.riwayat .butir{position:relative;padding:0 0 18px;}
.riwayat .butir::before{content:"";position:absolute;left:-23px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--panel);border:2px solid var(--accent);}
.riwayat .butir.merah::before{border-color:var(--fail);}
.riwayat .butir.kuning::before{border-color:var(--warn);}
.riwayat .tgl{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em;}
.riwayat .kepala-butir{font-family:var(--font-display);font-size:13px;font-weight:600;margin-top:2px;}
.riwayat .rinci{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;}

.spek{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;}
.spek div{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--panel-2);}
.spek .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted);text-transform:uppercase;}
.spek .v{font-size:13px;margin-top:3px;font-weight:500;}

/* ---------- Dokumen unit ----------
   Satu-satunya bagian halaman ini yang menerima masukan dari pemakai.
   Kotak jatuhnya <label>, bukan <div>+JS: menekannya membuka pemilih berkas
   tanpa satu baris skrip pun, jadi papan tik dan pembaca layar mendapat
   perilaku yang sama dengan tetikus. */
.jatuh{display:block;border:1.5px dashed var(--line);border-radius:12px;padding:22px 18px;text-align:center;
  background:var(--panel-2);cursor:pointer;transition:.18s;}
.jatuh:hover{border-color:var(--accent);}
.jatuh.siap{border-color:var(--accent);background:var(--accent-dim);border-style:solid;}
.jatuh .ajak{font-family:var(--font-display);font-size:13.5px;font-weight:600;}
.jatuh .ket2{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.6;}
.jatuh input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
/* Di dalam kartu ubah, kotak jatuh setinggi ini mendorong seluruh isian ke
   bawah lipatan — kartunya jadi dibuka dengan kotak kosong, bukan dengan
   isian yang mau diisi. Yang di sana dibuat serendah tombol biasa. */
.jatuh.rapat{padding:12px 14px;}
.jatuh.rapat .ajak{font-size:12.5px;}
.jatuh.rapat .ket2{margin-top:3px;font-size:11px;}

.brk-atur{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px;}
.brk-atur label{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.brk-atur select,.brk-atur input{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font-family:var(--font-body);font-size:12.5px;}
.brk-atur select:focus,.brk-atur input:focus{outline:none;border-color:var(--accent);}
/* Ikon pemilih tanggal bawaan peramban hitam pekat — tak terbaca di tema gelap. */

/* Kotak tautan. Lebih pelan daripada kotak jatuh di atasnya — berbingkai
   utuh, bukan putus-putus — supaya jelas ia jalan kedua, bukan pilihan yang
   setara: yang lewat sini tidak ikut terjaga bersama rak dokumen. */
.brk-tautan{margin-top:12px;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;background:var(--panel-2);}
.brk-tautan .judul{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.brk-tautan .baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
/* Alamat Drive panjangnya melewati lebar kotak mana pun, jadi kotak alamat
   diberi jatah tumbuh dua kali lipat kotak namanya. */
.brk-tautan #brkUrl{flex:2 1 260px;}
.brk-tautan #brkUrlNama{flex:1 1 170px;}
.brk-tautan input{min-width:0;background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-family:var(--font-body);font-size:12.5px;}
.brk-tautan input:focus{outline:none;border-color:var(--accent);}
.brk-tautan .ket2{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.6;}
.brk-tautan.mati{opacity:.45;pointer-events:none;}

.brk-rupa{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);overflow:hidden;flex:none;
  display:grid;place-items:center;background:var(--panel-2);}
.brk-rupa img{width:100%;height:100%;object-fit:cover;display:block;}
.brk-rupa span{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--muted);}
/* Baris tautan diberi warna aksen di kotak rupanya, bukan di seluruh barisnya:
   yang perlu terlihat sekilas adalah "yang ini ada di tempat lain", dan itu
   sudah cukup disampaikan lencana DRIVE yang menyala. */
.brk-rupa.taut{border-style:dashed;background:var(--accent-dim);}
.brk-rupa.taut span{color:var(--accent);}
.brk-nama{display:flex;gap:10px;align-items:center;}
.brk-nama > span:last-child{min-width:0;}
.brk-nama .n{display:block;font-size:12.5px;font-weight:500;word-break:break-word;}
.brk-nama .j{display:block;font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:2px;}
td select.brk-kat{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:6px;
  padding:4px 6px;font-family:var(--font-mono);font-size:10.5px;}
.brk-buang{background:none;border:1px solid var(--line);color:var(--muted);border-radius:7px;
  padding:4px 9px;cursor:pointer;font-family:var(--font-mono);font-size:10.5px;transition:.16s;}
.brk-buang:hover{border-color:var(--fail);color:var(--fail);}

/* ---------- Kelola akun ----------
   Kartu ubahnya lapisan tetap di atas halaman, bukan panel yang menyisip di
   dalam tabel. Mengubah peran atau unit sebuah akun bukan pekerjaan sambil
   lalu: satu akun sekali waktu, dengan sisa layar diredupkan, jadi tidak ada
   baris sebelah yang tanpa sengaja ikut tersunting. */
.pil{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;padding:2px 8px;border-radius:20px;
  display:inline-block;white-space:nowrap;border:1px solid var(--line);color:var(--muted);}
.pil.admin{background:rgba(229,72,77,.13);color:var(--fail);border-color:rgba(229,72,77,.4);}
.pil.pejabat{background:rgba(255,179,0,.13);color:var(--warn);border-color:rgba(255,179,0,.4);}
.pil.teknisi{background:rgba(41,182,246,.13);color:var(--accent);border-color:rgba(41,182,246,.4);}
/* Peran satu unit — admin unit condong ke merah administrator supaya urutan
   wewenangnya terbaca dari warnanya, bukan cuma dari tulisannya. */
.pil.adminunit{background:rgba(229,72,77,.10);color:#e8836f;border-color:rgba(229,72,77,.28);}
.pil.aktif-ya{background:rgba(46,204,113,.13);color:var(--ok);border-color:rgba(46,204,113,.4);}
.pil.awas{background:rgba(229,72,77,.13);color:var(--fail);border-color:rgba(229,72,77,.4);}
.pil.aktif-tidak{opacity:.75;}
/* Kolom Login di Kelola Akun (14-kelola-akun.js, selLogin). */
.login{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);white-space:nowrap;}
.login::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;}
.login.online{color:var(--ok);font-weight:600;}
.login.online::before{background:var(--ok);box-shadow:0 0 0 3px rgba(46,204,113,.2);}
.login.diam::before{background:var(--muted);}
.login.keluar{opacity:.8;}
/* Baris akun nonaktif diredupkan, bukan disembunyikan — yang dinonaktifkan
   justru yang paling perlu terlihat saat memutuskan siapa yang boleh dihapus. */
tr.akun-mati td:not(:last-child){opacity:.55;}
/* Kepala kelompok peran di tabel akun (kelompokAkun di 14-kelola-akun.js). */
tr.kelompok-akun td{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);padding-top:16px;border-bottom:1px solid rgba(41,182,246,.3);}
tr.kelompok-akun .jumlah{color:var(--muted);margin-left:8px;letter-spacing:.04em;text-transform:none;}
/* Nomor urut akun — bersambung melewati kelompok peran. */
#tblAkun .no-urut,#tblAktivasiUnit .no-urut{width:1%;white-space:nowrap;text-align:right;
  font-family:var(--font-mono);color:var(--muted);padding-right:4px;}
.unit-pil{display:flex;flex-wrap:wrap;gap:4px;}

.lapis-ubah{position:fixed;inset:0;z-index:180;display:none;place-items:center;padding:24px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(3px);overflow:auto;}
.lapis-ubah.buka{display:grid;}
/* Tingginya dibatasi dan badannya yang digulir — SELURUH kartu, bukan cuma
   kartu impor seperti dulu. Lapisnya memusatkan isinya (place-items:center),
   dan isi yang lebih tinggi daripada layar pada tata letak seperti itu menjulur
   ke ATAS juga: bagiannya yang di atas titik pusat tidak bisa dicapai dengan
   menggulir sama sekali. Kartu peralatan yang berisi sebelas isian persis
   sepanjang itu, dan yang hilang di atas justru kotak foto papan nama. */
.kartu-ubah{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 60px rgba(0,0,0,.55);overflow:hidden;
  display:flex;flex-direction:column;max-height:calc(100vh - 48px);}
.kartu-ubah .badan{overflow:auto;flex:1;}
/* Kartu impor: isinya pratinjau selebar sebulan, jadi lebarnya mengikuti layar. */
.kartu-ubah.lebar{width:min(1040px,100%);}
/* Kartu data unit: sebelas isian pendek. Dalam satu lajur ia jadi kartu
   sepanjang dua layar; dua lajur membuatnya terbaca sekali pandang. */
.kartu-ubah.data{width:min(720px,100%);}
.kartu-ubah .kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);}
/* Ruang untuk tombol tutup di pojok. Tanpa ini keterangan yang panjang lewat
   di bawahnya dan terbaca setengah. */
.kartu-ubah .kepala{padding-right:46px;}
.kartu-ubah .kepala h3{font-size:14px;}
.kartu-ubah .kepala .ket{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}
.kartu-ubah .badan{padding:15px 16px;}
.kartu-ubah .kaki{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--line);background:var(--panel-2);}

.isian{margin-bottom:13px;}
/* Isian pendek berjajar dua lajur selama masih muat. minmax(215px,1fr) yang
   memutuskannya, bukan lebar layar: kartu ini juga dipakai di tablet. */
.isian-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:0 14px;}
.isian-grid > .penuh{grid-column:1/-1;}

/* Formulir lebar peralatan: kotak bernomor berisi isian empat lajur, label
   biasa di atas isiannya. Tetap memakai warna tema, jadi gelap di mode biasa. */
.kartu-ubah.data.formulir{width:min(1120px,100%);}
.kartu-ubah.formulir .badan{background:var(--bg);padding:18px;}
.bagian{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px 8px;margin-bottom:16px;}
.bagian > h4{font-family:var(--font-display);font-size:14.5px;font-weight:600;margin:0 0 18px;}
.isian-grid.empat{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 16px;}
.isian-grid.empat > .dua{grid-column:span 2;}
.formulir .isian{margin-bottom:14px;}
.formulir .isian > label:not(.jatuh){font-family:var(--font-body);font-size:12.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--text);margin-bottom:7px;}
.formulir .isian > label .wajib{color:var(--muted);}
.formulir .isian input,.formulir .isian select{padding:9px 12px;font-size:13px;min-height:38px;}
.formulir .isian input::placeholder{color:var(--muted);opacity:.6;}
@media (max-width:900px){
  .isian-grid.empat{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .isian-grid.empat{grid-template-columns:minmax(0,1fr);}
  .isian-grid.empat > .dua{grid-column:auto;}
  .kartu-ubah.formulir .badan{padding:12px;}
  .bagian{padding:14px 14px 4px;}
}
/* Isian yang baru saja diisikan dari foto papan nama. Ditandai supaya yang
   perlu diperiksa terlihat tanpa harus mengingat mana yang diketik sendiri. */
.isian input.dari-foto,.isian select.dari-foto{border-color:var(--accent);
  background:linear-gradient(var(--accent-dim),var(--accent-dim)),var(--panel-2);}
.isian > label{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.isian input,.isian select,.isian textarea{width:100%;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--font-body);font-size:12.5px;}
.isian textarea{font-family:var(--font-mono);font-size:11.5px;line-height:1.6;resize:vertical;}
.isian input:focus,.isian select:focus,.isian textarea:focus{outline:none;border-color:var(--accent);}
.isian input:disabled,.isian select:disabled{opacity:.5;cursor:not-allowed;}

/* Baris pengatur di kartu impor: empat kendali yang dipakai berbarengan sambil
   melihat pratinjau di bawahnya, jadi berjajar selama masih muat. */
.imp-atur{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  align-items:end;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.imp-centang{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  line-height:1.45;cursor:pointer;}
.imp-centang input{width:15px;height:15px;flex:none;accent-color:var(--accent);}
.isian .bantu{font-size:11px;color:var(--muted);line-height:1.55;margin-top:5px;}
/* Pratinjau papan nama dan hasil bacaannya. Teks mentah disembunyikan di
   dalam <details>: ia perlu ada supaya yang salah baca bisa diperbaiki, tapi
   tidak perlu memenuhi kartu setiap kali. */
.pn-pratinjau{display:flex;align-items:center;gap:10px;margin-top:9px;padding:8px 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel-2);}
.pn-pratinjau img{width:74px;height:52px;object-fit:cover;border-radius:6px;flex:none;
  background:var(--panel);}
.pn-pratinjau span{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;}
.pn-mentah{margin-top:8px;}
.pn-mentah summary{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);cursor:pointer;}
.pn-mentah pre{margin-top:7px;padding:9px 11px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--text);
  white-space:pre-wrap;max-height:190px;overflow:auto;}

/* Pemilih gambar kartu peralatan: ilustrasi di kiri, foto unit di bawahnya. */
.gambar-atur{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
/* display:flex di atas mengalahkan bawaan display:none milik atribut hidden.
   Tanpa baris ini, baris "Baca ulang foto ini" sudah terpampang sebelum ada
   satu foto pun yang dimasukkan. */
.gambar-atur[hidden]{display:none;}
.gambar-atur select{flex:1;min-width:150px;}
.gambar-pilih{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.gambar-pilih:empty{display:none;}
.gambar-cip{padding:0;border:2px solid var(--line);border-radius:9px;background:var(--panel-2);
  cursor:pointer;overflow:hidden;line-height:0;transition:border-color .15s;}
.gambar-cip img{width:74px;height:50px;object-fit:cover;display:block;}
.gambar-cip:hover{border-color:var(--accent);}
.gambar-cip.terpilih{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
/* Foto yang menggantikan ilustrasi di kartu peralatan. Rasio dan potongannya
   dibuat sama persis dengan adegan vektornya supaya kartunya tidak berubah
   tinggi saat gambarnya ditukar. */
.bingkai-foto{width:100%;height:100%;object-fit:cover;display:block;}

/* Foto dokumentasi yang sudah tertambat pada satu baris peralatan. */
.foto-lampir{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;}
.foto-lampir:empty{display:none;}
.foto-cip{display:inline-flex;align-items:center;gap:7px;padding:4px 8px 4px 4px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel-2);
  font-family:var(--font-mono);font-size:10px;color:var(--muted);max-width:100%;}
.foto-cip img{width:26px;height:26px;object-fit:cover;border-radius:50%;flex:none;}
.foto-cip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;padding:0 2px;}
.foto-cip button:hover{color:var(--fail);}

.kotak-unit{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px;
  border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:var(--panel-2);}
.kotak-unit.mati{opacity:.45;pointer-events:none;}
.kotak-unit label{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;}
.kotak-unit input{width:auto;accent-color:var(--accent);}

/* Papan TTD di kartu akun pejabat (Kelola Akun). Latar gelap tetap, senada
   .cetak-ttd-bing: goresannya putih di atas kanvas tembus pandang. */
.akun-ttd-papan{display:block;width:100%;max-width:460px;height:130px;border:1px dashed var(--line);
  border-radius:6px;background:#0d1319;touch-action:none;cursor:crosshair;}

/* Wilayah hapus sengaja dipisah dan diberi garis merah: satu-satunya tombol di
   seluruh aplikasi ini yang membuang sesuatu di E-Logbook untuk selamanya. */
.bahaya{border:1px solid rgba(229,72,77,.4);border-radius:10px;padding:11px 13px;margin-top:4px;
  background:rgba(229,72,77,.05);}
.bahaya .jdl{font-family:var(--font-display);font-size:12.5px;font-weight:600;color:var(--fail);}
.bahaya p{font-size:11.5px;color:var(--muted);line-height:1.6;margin:5px 0 9px;}
.bahaya input{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-family:var(--font-mono);font-size:12px;margin-bottom:9px;}
.btn.bahaya-tombol{background:none;border:1px solid var(--fail);color:var(--fail);}
.btn.bahaya-tombol:hover{background:var(--fail);color:#fff;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;}

.btn{background:var(--accent);color:var(--accent-teks);border:0;border-radius:9px;padding:9px 15px;cursor:pointer;
  font-family:var(--font-display);font-size:12.5px;font-weight:600;text-decoration:none;display:inline-block;transition:.18s;}
/* display:inline-block di atas mengalahkan bawaan display:none milik atribut
   hidden. Tanpa baris ini, `<button class="btn" hidden>` tetap terpampang
   sebagai kotak kosong di baris tombol — lihat #btnSetujuiKirim di modal
   Cetak yang cuma dipakai di kartu review Manager Teknik. */
.btn[hidden]{display:none;}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px);}
.btn.garis{background:var(--panel);border:1px solid var(--line);color:var(--text);}
.btn.garis:hover{border-color:var(--accent);color:var(--accent);}
.btn.kecil{padding:6px 11px;font-size:11.5px;}

/* Baris tombol di atas daftar peralatan dan sparepart. Keterangannya di kiri
   supaya tombolnya tetap di kanan sekalipun kalimatnya panjang; di layar sempit
   keduanya menumpuk, tombol lebih dulu tidak akan terbaca sebagai judul. */
/* Saringan daftar akun. Dulu ini ada di dalam E-Logbook; sejak Kelola Akun
   pindah ke sini, saringannya ikut — mencari satu orang di antara seluruh
   pegawai teknik tanpa saringan berarti menggulung tabel sampai ketemu. */
.saring{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.saring .isian{margin-bottom:0;flex:1;min-width:150px;}
.saring .isian.lebar{flex:2;min-width:190px;}
.saring .btn{flex:0 0 auto;}
.ringkas-unit{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;}
.ringkas-unit button{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  border-radius:20px;padding:5px 11px;font-size:11.5px;cursor:pointer;font-family:var(--font-body);
  transition:border-color .16s,color .16s;}
.ringkas-unit button:hover{border-color:var(--accent);color:var(--text);}
.ringkas-unit button b{color:var(--text);font-family:var(--font-mono);font-size:12px;margin-right:3px;}
.ringkas-unit button.terpilih{border-color:var(--accent);color:var(--accent);}
.ringkas-unit button.terpilih b{color:var(--accent);}
.ringkas-unit button.awas{border-color:rgba(229,72,77,.45);}
.ringkas-unit button.awas b{color:var(--fail);}

.atur-data{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:14px;}
.atur-data .ket{color:var(--muted);font-size:12px;font-family:var(--font-mono);}
/* Keterangan di baris alat ("Jadwal Oktober 2026 · Radtel", "3 peralatan ...")
   duduk langsung di atas gambar latar dan tenggelam di sana. Diberi kotak
   berlatar panel: gelap di mode gelap, putih di mode terang. Yang sudah berada
   di dalam panel tidak perlu kotak lagi. */
.atur-data .ket{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;}
.panel .atur-data .ket{background:none;border:0;border-radius:0;padding:0;}
.atur-data .tombol{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- Kegiatan berkala ---------- */
.bkl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:13px;}
.bkl-kartu{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:12px;
  background:var(--panel);padding:13px 14px;box-shadow:var(--bayang);}
.bkl-kartu.aman{border-left-color:var(--ok);}
.bkl-kartu.awas{border-left-color:var(--warn);}
.bkl-kartu.bahaya{border-left-color:var(--fail);}
/* Cip-cipnya berkumpul di kiri, keterangan kapan didorong ke kanan lewat
   margin, bukan space-between. Jumlah cip di baris ini berubah-ubah — jenis
   selalu ada, sumber dan shift kadang-kadang — dan space-between akan
   membagikan sisa ruang ke sela antar cip, jadi jarak antar kartu di kolom
   yang sama tidak pernah sejajar. */
.bkl-atas{display:flex;justify-content:flex-start;align-items:center;gap:8px;margin-bottom:8px;
  flex-wrap:wrap;}
.bkl-kapan{font-size:10.5px;color:var(--muted);margin-left:auto;}
.cip.bkl-shift{color:var(--accent);border-color:var(--accent);}
.bkl-kartu h4{font-size:13.5px;line-height:1.35;}
.bkl-kartu p{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.55;}
.bkl-kaki{display:flex;justify-content:space-between;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--line);}
.bkl-status{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);line-height:1.5;}
.bkl-status.aman{color:var(--ok);} .bkl-status.awas{color:var(--warn);} .bkl-status.bahaya{color:var(--fail);}
/* Baris sunting kegiatan: berjajar selama muat, menumpuk begitu tidak. */
.bkl-sunting{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:11px 0;
  border-bottom:1px solid var(--line);}
.bkl-sunting:last-child{border-bottom:none;}
/* ---------- Kotak Masuk ---------- */
/* Satu baris per pekerjaan. Berjajar di layar lebar, menumpuk begitu tidak —
   kolom kanan berisi status dan tombol, dan itu yang paling dulu kehabisan
   tempat. */
.kmk{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;
  padding:11px 13px;background:var(--panel-2);}
.kmk.saya{border-left-color:var(--accent);}
.kmk.beres{border-left-color:var(--ok);opacity:.72;}
.kmk-kiri{flex:1 1 320px;min-width:0;display:grid;gap:5px;}
.kmk-jd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;line-height:1.35;}
.kmk-rn{font-size:11.5px;color:var(--muted);line-height:1.55;}
.kmk-orang-baris{font-size:11.5px;color:var(--muted);display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;line-height:1.6;}
.kmk-orang{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:20px;
  background:var(--kaca);border:1px solid var(--line);font-size:11px;color:var(--text);}
/* Nama Anda sendiri ditegaskan: di unit berisi delapan orang, baris penerima
   terbaca sebagai kabut kalau tidak ada satu pun yang menonjol. */
.kmk-orang.saya{border-color:var(--accent);color:var(--accent);font-weight:600;}
.kmk-orang .mono{font-size:9.5px;opacity:.7;}
.kmk-samar{color:var(--muted);font-style:italic;}
.kmk-kanan{display:grid;gap:7px;justify-items:flex-end;text-align:right;}
.kmk-tombol{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
a.btn.kecil{text-decoration:none;display:inline-flex;align-items:center;}
@media (max-width:640px){
  .kmk-kanan{justify-items:flex-start;text-align:left;width:100%;}
  .kmk-tombol{justify-content:flex-start;}
}

/* Penanda kegiatan di baris atas tabel jadwal. */
.bkl-titik{display:inline-grid;place-items:center;min-width:15px;height:15px;border-radius:8px;
  font-family:var(--font-mono);font-size:9px;line-height:1;padding:0 3px;}
.bkl-titik.mingguan{background:rgba(46,204,113,.2);color:var(--ok);}
.bkl-titik.bulanan{background:rgba(255,179,0,.2);color:var(--warn);}
tr.jdw-berkala td{background:var(--zebra);}
tr.jdw-berkala .jdw-nama{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);}

/* ---------- Personel dan sertifikat ---------- */
.sert-baris{display:flex;flex-wrap:wrap;gap:5px;}
.sert-pil{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);
  color:var(--muted);white-space:nowrap;background:var(--panel-2);}
.sert-pil b{color:var(--text);font-weight:600;}
.sert-pil .mono{font-size:10px;opacity:.8;}
.sert-pil.aman{border-color:rgba(46,204,113,.4);}
.sert-pil.awas{border-color:rgba(255,179,0,.5);color:var(--warn);}
.sert-pil.awas b{color:var(--warn);}
.sert-pil.bahaya{border-color:rgba(229,72,77,.5);color:var(--fail);background:rgba(229,72,77,.08);}
.sert-pil.bahaya b{color:var(--fail);}
.sert-sisa{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.sert-sisa.awas{color:var(--warn);} .sert-sisa.bahaya{color:var(--fail);font-weight:600;}
.sert-sunting{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:11px 0;
  border-bottom:1px solid var(--line);}
.sert-sunting:last-of-type{border-bottom:none;}

/* Bukti sertifikat. Garis pemisahnya pindah ke pembungkus: berkas yang
   menempel pada satu baris harus terlihat berada DI DALAM baris itu, bukan
   mengambang di antara dua baris yang berbeda orang sertifikatnya. */
.sert-bungkus{border-bottom:1px solid var(--line);}
/* Kotak centang Pelatihan (pilih untuk dikirim ke eChain): kotak bersudut
   bergaya tema, bukan kotak putih bawaan peramban. */
.plt-pilih{display:flex;flex-direction:column;align-items:center;gap:13px;align-self:flex-end;
  padding-bottom:8px;cursor:pointer;flex:none;}
.plt-pilih-ket{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);}
.plt-cek{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:4px;
  border:1.5px solid var(--muted);background:var(--panel-2);display:inline-grid;place-content:center;cursor:pointer;
  transition:background .15s,border-color .15s;}
.plt-cek:hover{border-color:var(--accent);}
.plt-cek:checked{background:var(--accent);border-color:var(--accent);}
.plt-cek:checked::after{content:'\2713';color:var(--bg);font-size:13px;font-weight:800;line-height:1;}
.plt-cek:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sert-bungkus:last-of-type{border-bottom:none;}
.sert-bungkus .sert-sunting{border-bottom:none;padding-bottom:4px;}
.psn-berkas{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:0 0 11px;}
.psn-berkas-ket{font-size:11px;color:var(--muted);}
.psn-cip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:7px;
  border:1px solid var(--line);background:var(--kaca);max-width:100%;}
.psn-cip a,.psn-cip .psn-cip-tunda{font-size:11px;color:var(--text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;}
.psn-cip a:hover{text-decoration:underline;}
/* Bukti yang masih menunggu Simpan: belum bisa dibuka, jadi belum terlihat
   seperti tautan. */
.psn-cip .psn-cip-tunda{color:var(--muted);font-style:italic;}
.psn-cip-buang{background:none;border:0;color:var(--muted);cursor:pointer;font-size:11px;padding:0 1px;}
.psn-cip-buang:hover{color:var(--fail);}
.psn-lampiran{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}

/* ---------- Perlu Perhatian di beranda ---------- */
.hal-baris{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:11px;}
.hal{display:grid;gap:4px;text-align:left;border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:11px;background:var(--panel-2);padding:11px 13px;cursor:pointer;transition:.16s;}
.hal:hover{border-color:var(--accent);transform:translateY(-2px);}
/* Kartu yang tidak menuju ke mana pun — sertifikat orang yang unitnya belum
   ditetapkan. Tetap ditampilkan, tapi tidak berpura-pura bisa ditekan. */
.hal:not([data-hal-unit]){cursor:default;}
.hal:not([data-hal-unit]):hover{border-color:var(--line);transform:none;}
.hal.awas{border-left-color:var(--warn);} .hal.bahaya{border-left-color:var(--fail);}
.hal .cip{justify-self:start;}
.hal .jd{font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1.35;}
.hal .rn{font-size:11.5px;color:var(--muted);line-height:1.5;}
.hal-kosong{color:var(--muted);font-size:12.5px;line-height:1.7;}

/* ---------- Lonceng pemberitahuan ---------- */
.lonceng-bungkus{position:relative;display:flex;}
.lonceng-angka{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--fail);color:#fff;font-family:var(--font-mono);font-size:9.5px;
  display:grid;place-items:center;line-height:1;border:1.5px solid var(--panel);}
/* display:grid di atas mengalahkan bawaan display:none milik atribut hidden,
   jadi lencananya tetap terpampang merah bertuliskan 0 saat tidak ada
   pemberitahuan sama sekali — persis kebalikan dari yang dimaksudkannya. */
.lonceng-angka[hidden]{display:none;}
#tombolLonceng.ada{border-color:var(--fail);color:var(--fail);}
/* Panelnya BUKAN anak dari tombolnya, dan itu bukan kerapian melainkan syarat.
   Sebagai anak kepala halaman ia tidak pernah terlihat utuh, karena dua hal di
   atasnya sekaligus:
     · header.konsol punya overflow:hidden — panel yang menjulur ke bawah
       kepala dipotong tepat di garis bawahnya
     · .konsol-isi punya z-index:1, dan itu membuat konteks penumpukan sendiri.
       Di dalamnya z-index:150 tidak berarti apa-apa terhadap dunia luar: yang
       diadu dengan rel navigasi (z-index:50) adalah induknya yang bernilai 1,
       jadi panelnya selalu kalah dan tampil DI BELAKANG rel.
   Karena itu ia duduk di akar dokumen bersama lapis-lapis kartu, dengan
   position:fixed, dan letaknya dihitung dari tombolnya tiap kali dibuka —
   lihat loncengLetakkan(). */
.lonceng{position:fixed;top:0;left:0;z-index:170;width:min(340px,88vw);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--bayang);
  display:none;overflow:hidden;}
.lonceng.buka{display:block;}
.lonceng-kepala{padding:10px 13px;border-bottom:1px solid var(--line);background:var(--panel-2);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.lonceng-isi{max-height:min(60vh,420px);overflow:auto;}
.lonceng-butir{display:grid;gap:3px;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--line);border-left:3px solid transparent;padding:11px 13px;cursor:pointer;
  color:inherit;font-family:inherit;transition:background .15s;}
.lonceng-butir:hover{background:var(--kaca);}
.lonceng-butir:last-child{border-bottom:none;}
.lonceng-butir.awas{border-left-color:var(--warn);}
.lonceng-butir.bahaya{border-left-color:var(--fail);}
.lonceng-butir .jd{font-size:12.5px;font-weight:600;line-height:1.35;}
.lonceng-butir .rn{font-size:11px;color:var(--muted);line-height:1.5;}
.lonceng-kosong{padding:14px 13px;font-size:12px;color:var(--muted);line-height:1.65;}

.catatan{border-left:3px solid var(--accent);background:var(--kaca);border-radius:0 9px 9px 0;
  padding:11px 14px;font-size:12px;color:var(--muted);line-height:1.6;margin-top:16px;}
.catatan b{color:var(--text);}

.bahaya-garis{border-color:var(--fail);color:var(--fail);}
.bahaya-garis:hover{background:var(--fail);color:#fff;}

/* Tab sub-unit di dalam panel Identity. Basisnya .subtab yang sama dengan
   Peralatan/Personel di atas — sengaja, supaya seragam — kecuali margin
   atasnya dilepas karena tab ini tepat di bawah kepala panel, dan tinggi
   tombolnya ditipiskan sedikit supaya panel Identity tidak sekaligus jadi
   lebih tinggi dari panel Sejarah di sebelahnya. */
.id-subtab{margin:0 0 14px;padding:0 2px 8px;}
.id-subtab button{min-height:32px;padding:0 12px;font-size:12px;}

/* Tab grup lokasi peralatan — di antara baris tombol Tambah/Cetak dan grid
   kartu. Sama-sama pakai basis .subtab tapi marginnya diperas supaya tidak
   memisah baris ket. terlalu jauh dari kartu di bawahnya. Tombol "⋯" untuk
   ubah/hapus grup dibedakan dengan garis merah — jarang ditekan, dan kalau
   iya konsekuensinya besar. */
.grup-subtab{margin:8px 0 12px;padding:0 2px 8px;}
.grup-subtab button{min-height:34px;padding:0 13px;font-size:12px;}
.grup-subtab button.bahaya-garis{margin-left:auto;}

#pesan{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:120;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:10px;
  padding:11px 16px;font-size:12.5px;box-shadow:var(--bayang);opacity:0;transition:.25s;pointer-events:none;}
#pesan.tampil{opacity:1;transform:translateX(-50%) translateY(0);}


/* ---------- Kartu Profil (js/38-profil.js) ---------- */
.profil-identitas{display:grid; gap:6px; margin-bottom:14px;}
.profil-baris{display:flex; gap:10px; font-size:13px; align-items:baseline;}
.profil-label{flex:0 0 110px; color:var(--muted);}
.profil-isi{font-weight:600; word-break:break-word;}
.profil-telegram{border-top:1px solid var(--line); padding-top:12px;}
.profil-telegram h4{font-size:13px; margin:0 0 4px;}
.profil-sandi{margin-bottom:14px;}
.profil-sandi .bantu{margin-bottom:10px;}
.profil-tg-status{font-size:13px; margin:8px 0;}
.profil-tg-aksi{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
/* Lencana keadaan sambungan. Warnanya dari token tema, bukan hijau/merah
   mentah, supaya ikut berganti di mode gelap. */
.tg-lencana{display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px;
            border:1px solid var(--line); margin-right:4px;}
.tg-lencana.on{border-color:var(--ok); color:var(--ok);}
.tg-lencana.off{color:var(--muted);}

/* ---------- Tombol tutup di pojok kartu jendela ----------
   Kartunya sering sepanjang dua layar — kartu data unit punya sebelas isian —
   dan satu-satunya jalan keluar selama ini tombol Batal di kakinya: yang
   salah buka harus menggulir sampai habis dulu.

   Diletakkan absolut terhadap kartu, bukan disisipkan ke dalam aliran kepala,
   supaya susunan judul + keterangan yang sudah ada tidak bergeser sedikit pun.

   Tombol ini tidak memanggil fungsi apa pun sendiri — ia menekan tombol
   keluar yang sudah ada di kaki kartu (lihat [data-tutup] di js/08-bantu.js).
   Jadi apa pun yang dikerjakan tombol itu tetap terjadi, dan tidak ada jalan
   keluar kedua yang bisa lupa diperbarui. */
.kartu-ubah{position:relative;}
.tutup-x{position:absolute;top:9px;right:10px;z-index:2;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:8px;cursor:pointer;
  color:var(--muted);font-size:15px;line-height:1;padding:0;}
.tutup-x:hover{color:var(--text);background:var(--panel);}

/* ---------- Spanduk HP: pasang Avengers / aktifkan notifikasi ----------
   Menempel di bawah layar HP sesudah masuk (40-notif-hp.js). Di bawah lapis
   jendela (180) supaya Profil yang terbuka tetap di atasnya, di atas isi
   dashboard. Jarak bawah ikut batas aman layar HP berponi/bergaris. */
.hp-spanduk{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));z-index:160;
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line);box-shadow:0 12px 30px -10px rgba(0,0,0,.55);
  max-width:560px;margin:0 auto;}
/* display:flex di atas mengalahkan atribut hidden bawaan peramban — tanpa
   baris ini spanduk kosong tetap tampil sebelum (dan tanpa) ada tawaran. */
.hp-spanduk[hidden]{display:none;}
.hp-spanduk img{flex:none;border-radius:10px;}
.hp-spanduk .teks{flex:1;min-width:0;font-size:12.5px;line-height:1.4;color:var(--muted);}
.hp-spanduk .teks b{display:block;color:var(--text);font-size:13.5px;margin-bottom:1px;}
.hp-spanduk .aksi{display:flex;flex-direction:column;gap:6px;flex:none;}
.hp-spanduk .aksi .btn{padding:7px 12px;font-size:12.5px;white-space:nowrap;}
@media (max-width:380px){
  .hp-spanduk{flex-wrap:wrap;}
  .hp-spanduk .aksi{flex-direction:row;width:100%;justify-content:flex-end;}
}

/* =====================================================================
   KOTAK UNTUK TEKS DI ATAS GAMBAR LATAR

   Halaman ini berlatar foto. Apa pun yang duduk langsung di atasnya - judul
   layar, kendali putaran kartu, catatan, label - tenggelam, terutama di mode
   terang. Semuanya diberi kotak berlatar panel: gelap di mode gelap, putih di
   mode terang. Tombol garis (.btn.garis, di atas) ikut berlatar panel dengan
   alasan yang sama. Ditaruh di ujung berkas supaya menang atas gaya asalnya
   di 03-kerangka.css dan 04-cincin-peralatan.css.
   ===================================================================== */
.judul-seksi,.kendali-orbit,.kepala-dinas-unit,.pilih-unit-lain{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;}
.judul-seksi{padding:9px 14px;margin:0 0 12px;}
.kendali-orbit{padding:7px 12px;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;}
.kepala-dinas-unit{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:6px 12px;margin-bottom:10px;}
.pilih-unit-lain{padding:5px 9px;border-radius:8px;}
.catatan{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);}

/* ===== 08-tablet-hp.css ===== */
/* =====================================================================
   TABLET DAN HP

   Layar ini dipakai sambil berdiri di depan rak, bukan cuma di meja. Yang
   dijaga di bawah ini tiga hal, dan urutannya memang itu:

   1. Tidak ada tombol yang terpotong keluar layar. Yang tidak terlihat sama
      dengan tidak ada — dan yang paling gampang hilang justru yang paling
      kanan, yaitu Keluar dan lonceng.
   2. Halaman tidak pernah bergeser mendatar. Tabel selebar sebulan digulir di
      dalam kotaknya sendiri, bukan dengan menyeret seluruh halaman.
   3. Sasaran sentuh tidak lebih kecil daripada ujung jari.
   ===================================================================== */

@media (max-width:1000px){ .grid2{grid-template-columns:1fr;} }

/* Tablet tegak ke bawah: kepala konsol pecah jadi dua baris — merek di atas,
   jam beserta tombolnya di bawah. Dijejalkan dalam satu baris, keduanya
   sama-sama menyusut sampai tidak terbaca. */
@media (max-width:820px){
  .konsol-isi{padding:12px 16px;gap:12px;}
  .brand{min-width:calc(100% - 56px);}
  .jam{width:100%;justify-content:flex-start;gap:10px;}
  .jam .blok{text-align:left;}
  /* Kartu akun mendorong tombol-tombol ke tepi kanan, jadi panel lonceng yang
     berlabuh di kanan tombolnya tidak pernah keluar layar di sebelah kiri. */
  .jam .kartu-akun{margin-right:auto;}
  .kepala-unit .ikon-unit{width:72px;height:46px;}
  .rel button{padding:12px 12px;font-size:12.5px;}
}

@media (max-width:620px){
  .konsol-isi{padding:11px 14px;} main{padding:16px 14px 60px;}
  /* Tinggi .orbit tidak lagi diturunkan di sini: kartunya cuma satu dan
     ukurannya tidak ikut menyempit, jadi 344px berlaku di semua layar. */
  .jam .blok:first-child{display:none;}
  .jam .nilai{font-size:15px;}
  /* Nama panjang tidak boleh melebarkan barisnya sampai tombolnya terdorong
     ke baris sendiri-sendiri. */
  .kartu-akun{min-width:0;max-width:52vw;}
  .kartu-akun .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lapis-ubah{padding:12px;}
  .kartu-ubah{max-height:calc(100vh - 24px);}
  .kartu-ubah .kepala,.kartu-ubah .kaki{padding:11px 13px;}
  .kartu-ubah .badan{padding:13px;}
  .kartu-ubah .kaki .btn{flex:1;}
  .ubin-baris{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
  .ubin{padding:13px 13px;} .ubin .angka{font-size:26px;}
  .hal-baris,.bkl-grid{grid-template-columns:1fr;}
  .alat-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px;}
  .foto-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  /* Tabel yang langsung duduk di panel (Trouble, Cuplikan Logbook, dst.)
     tidak punya .gulir, dan .panel memotong luapannya — kolom kanan hilang
     tanpa bisa digeser. Tabelnya dijadikan kotak gulir mendatar sendiri. */
  .panel > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Uraian logbook tetap selebar kalimat yang terbaca, bukan diperas jadi
     dua-tiga kata per baris; sisanya digeser. */
  .panel > table td.log-uraian{min-width:240px;}
  /* Kolom Berkas di Dokumen: lencana (DRIVE/PDF/foto) di atas, nama di
     bawahnya. Berdampingan, lencana 44px memakan separuh kolom dan nama
     dipatahkan per huruf ("Sharin / g"). Kata tidak dipatahkan lagi kecuali
     memang lebih panjang dari kolomnya. */
  .brk-nama{flex-direction:column;align-items:flex-start;gap:7px;min-width:150px;}
  .brk-nama .n{word-break:normal;overflow-wrap:break-word;}
  .judul-seksi h2{font-size:16px;}
  /* Sasaran sentuh: 38px sudah cukup untuk ibu jari, dan subtab yang digulir
     mendatar perlu jarak antar tombol supaya tidak salah tekan saat menggeser. */
  .subtab{gap:8px;} .subtab button{min-height:40px;padding:0 13px;}
  .btn.kecil{padding:8px 12px;}
  .atur-data .tombol{width:100%;} .atur-data .tombol .btn{flex:1;}
  /* Panel lonceng menempel ke tepi layar, bukan menggantung 340px dari sebuah
     tombol yang lebarnya 34px. */
  .lonceng{width:min(340px,calc(100vw - 28px));}
  .saring .isian{min-width:100%;}
  .saring .isian.lebar{min-width:100%;}
}

/* Tabel jadwal dan tabel personel sama-sama lebih lebar daripada layar HP.
   Keduanya sudah digulir di dalam kotaknya; yang ditipiskan di sini kolom
   namanya yang melekat di kiri, supaya masih ada ruang tersisa untuk isinya. */
@media (max-width:560px){
  /* Dipersempit, bukan disembunyikan: baris penanda kegiatan berkala memakai
     colspan pada kolom nama, dan menghilangkan kolom peran dengan display:none
     akan menggeser seluruh baris itu sejauh satu tanggal. */
  table.jdw th.jdw-nama,table.jdw td.jdw-nama{max-width:104px;}
  table.jdw th.jdw-nik,table.jdw td.jdw-nik{max-width:78px;}
  .imp-atur{grid-template-columns:1fr;}
  .bkl-sunting .isian,.sert-sunting .isian{min-width:100%!important;}
  .plt-pilih{flex-direction:row-reverse;justify-content:flex-end;align-self:auto;width:100%;gap:9px;padding-bottom:0;}
  .plt-pilih-ket{font-size:10.5px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.01s!important;}
  /* Aturan di atas akan melompatkan pita ke akhir animasinya — separuh isinya
     hilang di atas layar. Untuk pita, animasinya dimatikan sama sekali dan
     daftarnya dikembalikan menjadi daftar biasa yang bisa digulir sendiri. */
  .jalur{animation:none!important;transform:none!important;}
  .tiker{overflow-y:auto;}
}

/* ===== 09-cetak.css ===== */
/* ==============================================================
   CETAK — kartu pilihan + area cetak

   Dashboard ini punya tiga lembar cetak: Sparepart, Peralatan,
   dan Jadwal Dinas. Yang di layar sengaja tetap gelap-terang seperti
   sisanya; yang ke kertas selalu hitam di atas putih. Aturan @media
   print di bawah membalik semuanya sekali jalan: seluruh isi halaman
   dinas dashboard disembunyikan, dan hanya #printArea yang keluar.

   Kartu pilih pejabat memakai bentuk .lapis-ubah yang sudah ada, jadi
   berkas ini cuma menambah sedikit isian dan kanvas TTD. Bentuk kartu,
   tombol, dan gulirnya diwarisi dari 07-dashboard-unit.css.
   ============================================================== */

/* Area cetak — tempat HTML lembarnya ditempel sesaat sebelum
   window.print(). Tersembunyi di layar; muncul hanya saat mencetak. */
#printArea {
  display: none;
}

/* Kartu cetak: pilihan pejabat + kanvas TTD kalau perlu.
   Sengaja lebih ringan daripada kartu data — sisanya tidak perlu
   digambar ulang, hanya pilihan sederhana. */
.cetak-baris {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cetak-baris label {
  font-size: 12px;
  color: var(--muted);
  min-width: 128px;
}
.cetak-baris select,
.cetak-baris input,
.cetak-baris textarea {
  flex: 1;
  min-width: 180px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
}
.cetak-baris textarea {
  resize: vertical;
  font-family: var(--font-body);
}
.cetak-baris textarea::placeholder,
.cetak-baris input::placeholder {
  color: var(--muted);
  font-family: var(--font-body);
  font-style: normal;
  opacity: 0.75;
}
.cetak-baris select:focus,
.cetak-baris input:focus,
.cetak-baris textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.cetak-ket {
  font-size: 12px;
  color: var(--muted);
  margin-top: -4px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.cetak-ket.awas { color: var(--warn); }
.cetak-ket.baik { color: var(--ok); }

/* Pratinjau lembar di dalam kartu review — pejabat harus lihat isi
   dulu sebelum menekan Setujui. Kotaknya bergulir dua arah supaya
   matriks dinas lebar tetap muat, dan latarnya putih supaya baca
   tabelnya identik dengan hasil cetak. */
.cetak-pratinjau {
  max-height: 380px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.cetak-pratinjau .cetak-lembar {
  padding: 6mm 5mm;
  max-width: none;
}
/* Pratinjau lembar Jadwal Dinas: lebar lanskap dan font/padding tabel diperas
   supaya yang terlihat di layar sudah seperti yang akan keluar dari printer.
   Kalau kelasnya tidak dipasang (mode non-dinas), pratinjaunya tetap seperti
   sedia kala — lebar bebas, font normal. */
.cetak-pratinjau .cetak-lembar.lanskap {
  min-width: 275mm;
  padding: 4mm 4mm;
}
.cetak-pratinjau .cetak-lembar.lanskap h1 { font-size: 12pt; margin-bottom: 2pt; }
.cetak-pratinjau .cetak-lembar.lanskap h2 { font-size: 10pt; margin-bottom: 6pt; }
.cetak-pratinjau .cetak-lembar.lanskap table.jdw { font-size: 7pt; table-layout: fixed; width: 100%; }
.cetak-pratinjau .cetak-lembar.lanskap table.jdw th,
.cetak-pratinjau .cetak-lembar.lanskap table.jdw td { padding: 1pt 1pt; }
.cetak-pratinjau .cetak-lembar.lanskap table.jdw td.no    { padding: 1pt 2pt; }
.cetak-pratinjau .cetak-lembar.lanskap table.jdw td.nama  { padding: 1pt 3pt; font-size: 7.5pt; }
.cetak-pratinjau .cetak-lembar.lanskap table.jdw td.nik   { padding: 1pt 3pt; font-size: 7pt; }
.cetak-pratinjau .cetak-lembar.lanskap table.jdw thead th { font-size: 7pt; }
.cetak-pratinjau .cetak-lembar.lanskap table.ttd-blok { margin-top: 6pt; }

/* Bergaya sama seperti modal Detail Catatan Logbook di E-Logbook:
   deretan cip di atas untuk status/jenis/unit/tanggal, isi menonjol
   di kotak besar, meta pembuat & pejabat dikelompokkan dua kolom di
   bawah supaya "siapa mengesahkan siapa" jelas sekali pandang. */
.cetak-review-cip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.cetak-review-sek {
  margin-bottom: 14px;
}
.cetak-review-lab {
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.cetak-review-catatan {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
  font-style: italic;
  line-height: 1.5;
}
.cetak-review-orang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
}
.cetak-review-nama {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.cetak-review-sub {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
}
@media (max-width: 560px){
  .cetak-review-orang { grid-template-columns: 1fr; }
}

/* Kanvas TTD — muncul di baris pejabat atau baris diri sendiri kalau
   TTD tersimpan belum ada. Dua kanvas bisa hadir sekaligus, jadi
   tingginya dijaga sedang supaya kartu tidak melompat panjang. */
.cetak-ttd-kanvas {
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fff;
  display: block;
  width: 100%;
  max-width: 460px;
  height: 120px;
  margin-top: 6px;
  touch-action: none;
  cursor: crosshair;
}
.cetak-ttd-alat {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Segmented control: dua tombol berdampingan yang saling menggantikan
   ("Gambar di sini" | "Serahkan ke pejabat"). Bentuknya ringkas, tidak
   memakai tampilan radio bawaan peramban supaya sepadan dengan tombol
   lain di sekitarnya. */
.cetak-cara-ttd {
  display: inline-flex;
  gap: 0;
  margin: 4px 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cetak-cara-btn {
  background: var(--panel-2);
  color: var(--muted);
  border: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cetak-cara-btn + .cetak-cara-btn { border-left: 1px solid var(--line); }
.cetak-cara-btn:hover { color: var(--text); }
.cetak-cara-btn.aktif {
  background: var(--accent);
  color: var(--panel);
  font-weight: 600;
}

/* Pratinjau TTD tersimpan — meniru pola E-Logbook: latar gelap tetap
   (--tinta-bg) supaya goresan yang di E-Logbook digambar putih di atas
   papan gelap kelihatan; menjejakkannya di latar putih di sini akan
   menyembunyikannya sama sekali. Sekali cetak ke kertas, ttdKeHitam
   membalik warnanya jadi hitam pekat untuk kertas putih. */
.cetak-ttd-bing {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0d1319;
  padding: 6px 10px;
  max-width: 300px;
}
.cetak-ttd-pratinjau {
  display: block;
  height: 60px;
  max-width: 100%;
  object-fit: contain;
}
.cetak-ttd-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 10px;
  line-height: 1.45;
}
.cetak-ttd-meta b {
  color: var(--text);
  font-weight: 600;
}

/* ============== CETAK: kertas hitam-putih ============== */
/* Yang tampil di kertas tinggal blok #printArea; sisanya benar-benar
   disingkirkan lewat display:none — bukan visibility:hidden yang tetap
   menyisakan ruang layout. Pendekatan lama membuat #printArea harus
   dipasang position:absolute untuk melampaui sisa ruang itu, dan Chrome
   TIDAK menghitung tinggi halaman dari absolute element dengan tepat —
   akibatnya max-height/overflow tidak bisa memaksa satu halaman. Sekarang
   #printArea berdiri di normal flow, satu-satunya anak body yang tampak,
   dan aturan max-height + overflow:hidden benar-benar dihormati. */
@media print {
  html, body { background: #fff; margin: 0; padding: 0; }
  body > * { display: none !important; }
  #printArea { display: block !important; }
  #printArea {
    padding: 0;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 10.5pt;
    background: #fff;
  }

  /* Ukuran halaman bawaan: potret A4 dengan margin biasa. Untuk cetakan
     Jadwal Dinas, JS menyisipkan <style id="pageOrientasi">@page { size:
     A4 landscape; ... }</style> tepat sebelum window.print() dan
     mencabutnya setelah selesai — lihat lakukanCetak() di 36-cetak.js.
     Ini lebih dapat diandalkan daripada named-page + `page:` selector,
     yang tidak konsisten diterapkan Chrome untuk element ber-`position:
     absolute` + `visibility` seperti #printArea. */
  @page { size: A4 portrait; margin: 14mm 12mm; }

  /* Cetakan lanskap Jadwal Dinas: cegah halaman kosong ke-dua.
     Chrome menambahkan halaman kosong kalau ada margin/padding bawah yang
     mendorong akhir konten sedikit melewati batas halaman, atau kalau
     elemen terakhir minta page-break-after. Yang dilakukan di sini —
     berlapis, supaya tidak ada satu jalur bocor pun:
       · #printArea diberi overflow: hidden sebagai jaring pengaman
         terakhir: apa pun yang berhasil menjulur setinggi 1px tetap
         tidak melahirkan halaman kedua.
       · Padding bawah .cetak-lembar dan margin bawah semua elemen di
         kaki footer dipepetkan menjadi 0.
       · .dinas-footer ditandai page-break-after: avoid supaya Chrome
         tidak memaksa halaman baru sesudahnya. */
  /* PENJARA satu halaman: max-height + overflow:hidden bersamaan.
     Tanpa max-height eksplisit, Chrome menghitung tinggi halaman dari
     tinggi konten mentah — overflow:hidden hanya memotong visual, tidak
     mencegah halaman ke-dua. Kombinasi keduanya memaksa: konten disunat
     bila melewati batas, tapi halaman baru tidak dibuat.
     A4 lanskap = 297×210mm, margin 8mm semua sisi → ruang tulis 194mm. */
  #printArea.lanskap {
    height: 194mm;
    max-height: 194mm;
    overflow: hidden;
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  #printArea.lanskap .cetak-lembar {
    padding-bottom: 0;
    margin-bottom: 0;
    height: 194mm;
    max-height: 194mm;
    overflow: hidden;
    box-sizing: border-box;
  }
  #printArea.lanskap .dinas-footer {
    margin-bottom: 0;
    padding-bottom: 0;
    page-break-after: avoid;
    break-after: avoid;
  }
  #printArea.lanskap .dinas-ttd-kanan table.ttd-blok,
  #printArea.lanskap .dinas-note { margin-bottom: 0; }

  /* Lembar yang terlalu panjang untuk dikecilkan (muatkanLanskap di
     36-cetak.js): kurungannya dilepas, lembarnya bersambung ke halaman dua. */
  #printArea.lanskap.bersambung,
  #printArea.lanskap.bersambung .cetak-lembar {
    height: auto; max-height: none; overflow: visible;
    page-break-inside: auto; break-inside: auto;
  }
}

/* Pemadat kaki lembar lanskap. Sengaja DI LUAR @media print: #printArea tidak
   pernah tampak di layar, dan muatkanLanskap() mengukur tinggi lembarnya di
   luar layar — ukurannya harus sama dengan yang nanti tercetak. */
@media all {

  /* Padatkan tinggi bagian-bagian tinggi supaya sisa ruang mencukupi
     tanpa kehilangan keterbacaan. Angka-angka di sini dipilih setelah
     menghitung: h1+h2 ~10mm, jdw 16 baris ~65mm, pic ~7mm, cuti ~25mm,
     bawah (note vs ttd) max ~40mm → total ~150mm, aman di bawah 194mm.
     Kotak TTD 46pt cukup untuk tanda tangan; gambar diskalakan turun. */
  #printArea.lanskap .kotak-ttd { height: 46pt; }
  #printArea.lanskap .kotak-ttd img { max-height: 42pt; }
  #printArea.lanskap table.dinas-cuti { font-size: 8pt; }
  #printArea.lanskap table.dinas-cuti th,
  #printArea.lanskap table.dinas-cuti td { padding: 1pt 4pt; }
  #printArea.lanskap .dinas-note { font-size: 8pt; line-height: 1.4; }
  #printArea.lanskap .dinas-note-butir { padding-left: 14pt; text-indent: -14pt; }
  #printArea.lanskap .cetak-lembar h1 { font-size: 11pt; margin-bottom: 1pt; }
  #printArea.lanskap .cetak-lembar h2 { font-size: 9.5pt; margin-bottom: 4pt; }
  #printArea.lanskap .ttd-blok .peran-ttd { margin-bottom: 2pt; }
  #printArea.lanskap .dinas-ttd-kanan .ttd-blok .jabatan-ttd { margin-bottom: 3pt; }
  #printArea.lanskap .dinas-ttd-tanggal { margin-bottom: 2pt; }
  #printArea.lanskap .dinas-footer { margin-top: 6pt; }
}

/* Lembar Jadwal Dinas versi cetak: satu halaman lanskap.
   Font tabel dan kolom diperas supaya 31 hari + Nama + NIK + No muat di
   satu halaman A4 landscape (~270mm ruang tulis). Padding tabel jadwal
   diperkecil khusus di dalam #printArea.lanskap supaya tidak mengganggu
   pratinjau di layar (yang muat lebih longgar). */
#printArea.lanskap .cetak-lembar { max-width: 275mm; padding: 4mm 4mm; }
#printArea.lanskap .cetak-lembar h1 { font-size: 12pt; margin-bottom: 2pt; }
#printArea.lanskap .cetak-lembar h2 { font-size: 10pt; margin-bottom: 6pt; }
#printArea.lanskap table.jdw { font-size: 7pt; table-layout: fixed; width: 100%; }
#printArea.lanskap table.jdw th,
#printArea.lanskap table.jdw td { padding: 1pt 1pt; }
#printArea.lanskap table.jdw td.no    { padding: 1pt 2pt; }
#printArea.lanskap table.jdw td.nama  { padding: 1pt 3pt; font-size: 7.5pt; }
#printArea.lanskap table.jdw td.nik   { padding: 1pt 3pt; font-size: 7pt; }
#printArea.lanskap table.jdw thead th { font-size: 7pt; }
/* TTD blok di kaki lanskap: dipepetkan supaya masih muat halaman yang sama. */
#printArea.lanskap table.ttd-blok { margin-top: 6pt; }

/* ============== Kaki lembar Jadwal Dinas ==============
   PIC di kiri atas, tanggal + TTD di kanan atas, tabel cuti/SAP tengah,
   note 5 poin di kiri bawah, TTD dua kolom di kanan bawah. Semua ini
   satu blok .dinas-footer supaya tidak terpecah antar halaman. */
.cetak-lembar .dinas-footer {
  margin-top: 10pt;
  page-break-inside: avoid;
  break-inside: avoid;
}
.cetak-lembar table.dinas-cuti {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
  margin-bottom: 8pt;
}
.cetak-lembar table.dinas-cuti th,
.cetak-lembar table.dinas-cuti td {
  border: 1px solid #000;
  padding: 2pt 5pt;
  text-align: center;
}
.cetak-lembar table.dinas-cuti thead th { background: #eee; font-weight: 600; }
.cetak-lembar table.dinas-cuti .cuti-nama { text-align: left; font-weight: 500; }
.cetak-lembar table.dinas-cuti .cuti-nik  { font-family: 'Consolas','Courier New',monospace; }
.cetak-lembar table.dinas-cuti .cuti-ket  { text-align: center; }
.cetak-lembar table.dinas-cuti .cuti-tgl  { text-align: center; }
.cetak-lembar table.dinas-cuti .cuti-kosong {
  text-align: center; font-style: italic; padding: 6pt; color: #555;
}
.cetak-lembar .dinas-bawah {
  display: flex;
  align-items: flex-start;
  gap: 12pt;
}
.cetak-lembar .dinas-note {
  flex: 1;
  font-size: 9pt;
  line-height: 1.55;
}
.cetak-lembar .dinas-note-jd {
  font-weight: 600;
  margin-bottom: 3pt;
}
.cetak-lembar .dinas-note-butir {
  font-style: italic;
  padding-left: 16pt;
  text-indent: -16pt;
}
.cetak-lembar .dinas-note-no {
  display: inline-block;
  width: 12pt;
  font-style: normal;
}
.cetak-lembar .dinas-ttd-kanan {
  width: 340pt;
  flex: none;
  /* Di lembar PUM blok Note dibuang, jadi tidak ada .dinas-note (flex:1) yang
     mengisi ruang kiri — margin-auto ini menjaga TTD tetap menempel kanan.
     Di lembar Teknik ruangnya sudah habis dipakai Note, jadi tak berefek. */
  margin-left: auto;
}
.cetak-lembar .dinas-ttd-tanggal {
  text-align: right;
  font-size: 9.5pt;
  margin-bottom: 3pt;
  padding-right: 12pt;
}
.cetak-lembar .dinas-ttd-kanan table.ttd-blok { margin-top: 0; }
/* Garis di ATAS nama tetap ada (border-top pada .nama-ttd bawaan) — pengguna
   sepakat itu dipertahankan sebagai garis tanda tangan. Yang perlu dijaga:
   jangan ada padding/margin bawah yang mendorong konten lewat batas halaman
   dan melahirkan halaman kosong ke-dua. */

/* Ratakan nama officer di dua kolom TTD:
     · td vertical-align: top supaya semua elemen mengalir dari atas
     · jabatan-ttd min-height 2 baris — sisi kiri "DEPUTY GENERAL MANAGER
       TEKNIK" pecah 2 baris, sisi kanan "MANAGER TEKNIK" 1 baris; tanpa
       ini kotak-ttd sisi kanan naik satu baris dan nama officer-nya
       jadi tidak sejajar. */
.cetak-lembar .dinas-ttd-kanan .ttd-blok td {
  vertical-align: top;
  /* Timpa aturan global `td { border-bottom: 1px solid var(--line) }` di
     05-ubin-panel-tabel.css yang menempel ke SEMUA <td> — tanpa penimpaan
     ini muncul garis horizontal panjang di bawah tiap sel TTD, melintasi
     seluruh lebar footer sebagai satu garis tak terputus. Padding tetap
     mengikuti aturan .ttd-blok td (4pt 8pt) — tidak diubah di sini. */
  border-bottom: 0;
}
.cetak-lembar .dinas-ttd-kanan .ttd-blok .jabatan-ttd {
  min-height: calc(2em * 1.2);   /* 2 baris pada font-size 9pt line-height 1.2 */
}

/* Garis tanda tangan (border-top pada .nama-ttd) DIBIARKAN, tetapi tiap
   sisi diberi margin horizontal supaya garisnya berhenti sebelum tepi
   cell. Tanpa margin ini, dua garis dari cell kiri dan kanan yang
   bersebelahan tanpa jarak terlihat menyatu jadi satu garis panjang
   melintang seluruh lebar footer — bukan yang dimaksud dua garis
   terpisah per officer. */
.cetak-lembar .dinas-ttd-kanan .ttd-blok .nama-ttd {
  margin-left: 24pt;
  margin-right: 24pt;
}

/* Isi cetak — sama untuk pratinjau di layar dan di kertas. */
.cetak-lembar {
  max-width: 190mm;
  margin: 0 auto;
  padding: 8mm 6mm;
  color: #000;
  background: #fff;
  font-family: 'Times New Roman', Times, serif;
  font-size: 10.5pt;
  line-height: 1.4;
}
.cetak-lembar h1 {
  font-size: 13pt;
  text-align: center;
  margin: 0 0 4pt;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cetak-lembar h2 {
  font-size: 11pt;
  text-align: center;
  margin: 0 0 12pt;
  font-weight: 600;
}
.cetak-lembar .kop-tabel {
  font-size: 9.5pt;
  margin-bottom: 10pt;
  border-collapse: collapse;
}
.cetak-lembar .kop-tabel td {
  padding: 1pt 6pt 1pt 0;
  vertical-align: top;
}
.cetak-lembar .kop-tabel td:first-child { width: 155px; }

.cetak-lembar table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
}
.cetak-lembar table.data th,
.cetak-lembar table.data td {
  border: 1px solid #000;
  padding: 3pt 5pt;
  vertical-align: top;
}
.cetak-lembar table.data th {
  background: #eee;
  text-align: center;
  font-weight: 600;
}
.cetak-lembar table.data td.mono {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 9pt;
}
/* Lembar Sparepart: dua belas kolom lembar SAP dimuatkan ke A4 POTRET.
   Huruf dan jarak dirapatkan; nama barang dan keterangan boleh melipat,
   kode/angka/tanggal tidak. Judul kolom boleh melipat dua baris. */
.cetak-lembar table.data.spr-cetak { font-size: 7.5pt; }
/* Riwayat + TTD satu paket: kalau tidak muat di sisa halaman, keduanya
   pindah bersama ke halaman berikutnya — TTD tidak tercetak sendirian. */
.cetak-lembar .spr-paket {
  page-break-inside: avoid;
  break-inside: avoid;
}
.cetak-lembar .spr-cetak-judul {
  font-weight: 600;
  font-size: 10pt;
  margin: 12pt 0 4pt;
  page-break-after: avoid;
  break-after: avoid;
}
.cetak-lembar table.data.spr-cetak th,
.cetak-lembar table.data.spr-cetak td { padding: 1.5pt 2.5pt; }
/* Aturan th umum (05-ubin-panel-tabel.css) memberi huruf mono berjarak lebar
   dan nowrap — di sini judul kolom harus boleh melipat, kalau tidak "KODE
   GUDANG" memakan 21mm untuk isi satu angka. */
.cetak-lembar table.data.spr-cetak th {
  font-size: 7pt;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
  white-space: normal;
  line-height: 1.15;
  vertical-align: middle;
  position: static;
}
.cetak-lembar table.data.spr-cetak td.mono { font-size: 7pt; white-space: nowrap; }
.cetak-lembar table.data td.tengah { text-align: center; }
.cetak-lembar table.data td.kanan  { text-align: right; }

/* Kalender jadwal dinas — kolom sangat sempit. Pakai teks kecil dan
   biarkan kepala tabelnya melipat kalau perlu. */
.cetak-lembar table.jdw {
  font-size: 8pt;
}
.cetak-lembar table.jdw th,
.cetak-lembar table.jdw td {
  padding: 2pt 2pt;
  text-align: center;
}
.cetak-lembar table.jdw td.no {
  text-align: right;
  padding: 2pt 4pt;
  font-family: 'Consolas', 'Courier New', monospace;
  color: #444;
}
.cetak-lembar table.jdw td.nama {
  text-align: left;
  padding: 2pt 4pt;
  font-weight: 500;
  white-space: nowrap;
}
.cetak-lembar table.jdw td.nik {
  text-align: left;
  padding: 2pt 4pt;
  font-family: 'Consolas', 'Courier New', monospace;
  color: #444;
  white-space: nowrap;
}
.cetak-lembar table.jdw th.hari-libur,
.cetak-lembar table.jdw td.hari-libur {
  background: #f4f4f4;
}

/* Lembar Peralatan: tiap alat jadi satu blok — identitas + sejarahnya
   sekali jalan. Blok berikutnya dipisah garis dan sedapat mungkin
   tidak dipatahkan di antara halaman. */
.cetak-lembar .alat-cetak {
  margin-top: 10pt;
  padding-top: 8pt;
  border-top: 1px solid #000;
  page-break-inside: avoid;
  break-inside: avoid;
}
.cetak-lembar .alat-cetak:first-of-type {
  margin-top: 4pt;
  padding-top: 0;
  border-top: 0;
}
.cetak-lembar .alat-cetak h3 {
  font-size: 11pt;
  font-weight: 700;
  margin: 0 0 4pt;
}
.cetak-lembar .alat-cetak-sub {
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 6pt 0 3pt;
  color: #000;
}
.cetak-lembar table.spek-cetak {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
}
.cetak-lembar table.spek-cetak td {
  vertical-align: top;
  padding: 1pt 6pt 1pt 0;
}
.cetak-lembar table.spek-cetak td:first-child {
  /* Diperlebar dari 130px supaya "Merek dan Tipe Peralatan" dan
     "Nomor Seri Peralatan" (docx form) tidak terpotong ke dua baris. */
  width: 180px;
  color: #333;
}
/* Sub-unit lembar cetak — indent kecil dan margin agar terbaca sebagai
   turunan alat di atasnya, tidak berdiri sendiri seperti alat baru. */
.cetak-lembar .alat-cetak.sub-cetak {
  margin-left: 12pt;
  padding-top: 6pt;
  border-top: 1px dashed #999;
}
.cetak-lembar .alat-cetak.sub-cetak h3 {
  font-size: 10pt;
  font-weight: 600;
  color: #222;
}
.cetak-lembar table.data.sjr-tabel {
  margin-top: 1pt;
}
/* Kolom Nama + TTD (Teknisi Pelaksana, Manager Teknik) per baris riwayat. */
.cetak-lembar table.data.sjr-tabel td.sjr-nama {
  font-size: 8.5pt;
  text-align: center;
  vertical-align: middle;
}
.cetak-lembar table.data.sjr-tabel .sjr-tunggu {
  font-size: 7.5pt;
  font-style: italic;
  color: #666;
}
.cetak-lembar table.data.sjr-tabel img.sjr-ttd {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 26pt;
}
.cetak-lembar .sjr-kosong {
  font-size: 9pt;
  color: #444;
  font-style: italic;
  padding: 2pt 0 4pt;
}

/* Blok tanda tangan di kaki lembar. Dulu dua kolom setara (Dibuat oleh
   + Mengetahui) — sekarang cuma satu kolom (Mengetahui) karena pembuat
   tidak lagi menandatangani lembar. Bentuk kolom tunggal (ttd-blok-tunggal)
   dipusatkan dan dilebarkan sedang supaya tidak melar ke seluruh baris. */
.cetak-lembar .ttd-blok {
  margin-top: 18pt;
  width: 100%;
  border-collapse: collapse;
  page-break-inside: avoid;
}
.cetak-lembar .ttd-blok td {
  width: 50%;
  vertical-align: top;
  padding: 4pt 8pt;
  text-align: center;
}
.cetak-lembar .ttd-blok-tunggal {
  margin-left: auto;
  margin-right: 0;
  width: 240pt;    /* selebar satu kotak TTD nyaman — meniru docx Sejarah */
}
.cetak-lembar .ttd-blok-tunggal td {
  width: 100%;
}
/* Mengetahui Manager Fasilitas di bawah tiap alat Sejarah Peralatan —
   lebih rapat dari blok kaki lembar karena muncul berulang. */
.cetak-lembar .ttd-blok.sjr-mf { margin-top: 6pt; width: 200pt; }
.cetak-lembar .ttd-blok.sjr-mf .peran-ttd { margin-bottom: 1pt; }
.cetak-lembar .ttd-blok.sjr-mf .kotak-ttd { height: 44pt; }
.cetak-lembar .ttd-blok.sjr-mf .kotak-ttd img { max-height: 40pt; }
.cetak-lembar .ttd-blok .peran-ttd {
  font-size: 9.5pt;
  margin-bottom: 4pt;
}
.cetak-lembar .ttd-blok .kotak-ttd {
  height: 68pt;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cetak-lembar .ttd-blok .kotak-ttd img {
  max-height: 64pt;
  max-width: 90%;
  object-fit: contain;
}
.cetak-lembar .ttd-blok .nama-ttd {
  font-weight: 600;
  border-top: 1px solid #000;
  padding-top: 3pt;
  margin-top: 3pt;
}
.cetak-lembar .ttd-blok .jabatan-ttd {
  font-size: 9pt;
  color: #444;
}
/* Di lembar Dinas, jabatan naik ke atas mengikat peran + di atas kotak TTD
   — ia jadi judul, bukan subtitle nama. Warnanya dipekatkan dan
   ketebalannya dinaikkan supaya terbaca sepadan dengan peran di atasnya,
   plus sedikit jarak ke kotak TTD di bawahnya. */
.cetak-lembar .dinas-ttd-kanan .ttd-blok .jabatan-ttd {
  color: #000;
  font-weight: 600;
  margin-bottom: 4pt;
}
/* Kolom tunggal (sparepart, peralatan) bergaya cetakan E-Logbook: peran dan
   jabatan di atas berhuruf biasa, satu garis pendek di atas nama, dan sel
   tabelnya tanpa garis — aturan umum `td { border-bottom }` di
   05-ubin-panel-tabel.css ikut menempel ke sini dan melahirkan garis kedua. */
.cetak-lembar .ttd-blok td { border: 0; }
.cetak-lembar .ttd-blok-tunggal td { font-size: 9.5pt; }
.cetak-lembar .ttd-blok-tunggal .peran-ttd { margin-bottom: 0; }
.cetak-lembar .ttd-blok-tunggal .jabatan-ttd {
  font-size: 9.5pt;
  color: #000;
  margin-bottom: 4pt;
}
.cetak-lembar .ttd-blok-tunggal .kotak-ttd { height: 46pt; }
.cetak-lembar .ttd-blok-tunggal .kotak-ttd img { max-height: 42pt; }
.cetak-lembar .ttd-blok-tunggal .nama-ttd {
  font-weight: normal;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.cetak-lembar .ttd-blok-tunggal .nama-ttd span {
  display: inline-block;
  border-top: 1px solid #000;
  padding: 1pt 24pt 0;
}
.cetak-lembar .ttd-blok .kosong-ket {
  font-size: 8.5pt;
  color: #666;
  font-style: italic;
}

/* Struktur turunan alat: satu baris per node, indentasi sudah dihitung
   inline lewat padding-left. Font agak lebih kecil supaya pohonan berlapis
   tetap muat di lebar A4. */
.cetak-lembar .str-cetak {
  font-size: 9pt;
  line-height: 1.4;
  border: 1px solid #ccc;
  padding: 4pt 6pt;
  margin-bottom: 6pt;
  page-break-inside: avoid;
}
.cetak-lembar .str-cetak .str-lembar {
  padding-bottom: 1pt;
}
.cetak-lembar .str-cetak b { font-weight: 600; }
.cetak-lembar .str-cetak i { color: #555; font-size: 8.5pt; }

/* ============== Gaya LAYAR jangan ikut ke kertas ==============
   Tabel di lembar cetak memakai tag dan kelas yang sama dengan tabel di layar
   (th, table.jdw), jadi aturan layarnya ikut menempel:
     · th{position:sticky;top:0} (05-ubin-panel-tabel.css) dan
       table.jdw thead th{transform:translateY(...)} (06-pita-berjalan.css) —
       kepala tabel yang "menempel saat digulir". Di kertas tidak ada yang
       digulir; di dalam #printArea yang overflow:hidden kepala itu malah
       bergeser menimpa baris pertama dan meninggalkan garis-garis putih.
     · table.jdw td / thead th{color:var(--muted)} — tulisan abu-abu di kertas.
   !important karena aturan layarnya sama kuat atau lebih spesifik. */
.cetak-lembar table th,
.cetak-lembar table td {
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
}
.cetak-lembar table th,
.cetak-lembar table.jdw thead th,
.cetak-lembar table.jdw td { color: #000; }

/* Nama yang panjang melipat ke baris kedua di dalam kolomnya, bukan menjulur
   melewati garis ke kolom NIK. Lebar kolomnya sendiri sudah dilebarkan di
   htmlDinas (36-cetak.js), jadi ini hanya untuk nama yang benar-benar panjang. */
.cetak-lembar table.jdw td.nama { white-space: normal; overflow-wrap: anywhere; }

/* Cetak PUM per grup langsung (tanpa antrian): beberapa lembar dalam satu
   cetakan, tiap grup mulai di halaman baru. */
#printArea .cetak-lembar + .cetak-lembar { break-before: page; page-break-before: always; }

/* Lembar PUM per grup: pita warna berselang tiap ganti unit (seperti berkas
   Excel Manager Teknik). print-color-adjust supaya latarnya ikut tercetak. */
.cetak-lembar table.jdw tr.pita td {
  background: #c5d3e8 !important;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Kaki lembar PUM per grup: daftar KETERANGAN di kiri, tanpa garis tabel.
   Aturan umum layar (td berpadding besar, garis bawah, baris genap berwarna,
   table selebar wadah) dimatikan satu per satu. */
.cetak-lembar .dinas-ket-kiri { flex: 1; font-size: 8pt; line-height: 1.35; padding-right: 12pt; }
.cetak-lembar table.dinas-ket-tabel { width: auto; border-collapse: collapse; font-size: 8pt; margin-top: 1pt; }
.cetak-lembar table.dinas-ket-tabel tr { background: none !important; }
.cetak-lembar table.dinas-ket-tabel td { border: none; padding: 0 14pt 0 0; vertical-align: top; text-align: left; white-space: nowrap; }

/* Tag sumber di kaki tiap lembar cetak dashboard (permintaan Bagus, 13 Okt
   2026): sejak cetak lewat PDF buatan server, kepala/kaki peramban yang dulu
   memuat alamat situs tidak ikut lagi dan lembarnya tanpa jejak asal. Bagian
   dari alur isi lembar, jadi ikut terukur saat lembar dimuatkan satu halaman. */
.cetak-lembar::after {
  content: "Sumber: teknik-avengers.com";
  display: block; clear: both; margin-top: 5pt;
  font: italic 6.5pt Arial, Helvetica, sans-serif; color: #444; text-align: left;
}