/* HSE PT Garda Tujuh Buana — gaya tampilan (Arah 1 · Navy Klasik)
   Navy untuk kerangka, oranye GTB untuk tindakan utama, latar terang/gelap mengikuti perangkat. */
:root {
  --bg: #F3F5F9;
  --panel: #FFFFFF;
  --field: #FFFFFF;
  --soft: #F6F7FB;
  --ink: #13203F;
  --muted: #56607A;
  --line: #E2E6EF;
  --line2: #CBD3E2;
  --navy: #14234B;
  --navy-2: #1C2F61;
  --pilih: #14234B;
  --nav-ink: #C9D3EA;
  --nav-muted: #8592B2;
  --accent: #C4470A;
  --accent-hover: #A83C08;
  --on-accent: #FFFFFF;
  --accent-2: #F07F1A;
  --accent-soft: #FDEEE2;
  --focus: #1F4BA5;
  --ok: #1E7A4C;   --ok-bg: #E4F3EA;
  --warn: #8F5400; --warn-bg: #FFF1D9;
  --danger: #B3261E; --bad-bg: #FCE8E6;
  --info: #1F4BA5; --info-bg: #E7EEFB;
  --none-bg: #ECEFF4;
  --bar2: #9DB2DE;
  --hazard: #14234B;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 16px 40px rgba(16, 24, 40, .18);
  --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --t: 160ms cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1323; --panel: #141E36; --field: #0F1830; --soft: #1A2541; --ink: #E8ECF5; --muted: #9AA6C0;
    --line: #243150; --line2: #33456F; --side-garis: #1E2B4B; --navy: #08101F; --navy-2: #13213F; --pilih: #3B5BA5; --focus: #8DB8FF;
    --accent-soft: #3A2312;
    --ok: #7FD4A4; --ok-bg: #14301F; --warn: #F2B866; --warn-bg: #33260C; --danger: #FF9A8F; --bad-bg: #3A1714;
    --info: #9CB8F2; --info-bg: #16264A; --none-bg: #1E2944; --bar2: #4A67A3;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 16px 40px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1323; --panel: #141E36; --field: #0F1830; --soft: #1A2541; --ink: #E8ECF5; --muted: #9AA6C0;
  --line: #243150; --line2: #33456F; --side-garis: #1E2B4B; --navy: #08101F; --navy-2: #13213F; --pilih: #3B5BA5; --focus: #8DB8FF;
  --accent-soft: #3A2312;
  --ok: #7FD4A4; --ok-bg: #14301F; --warn: #F2B866; --warn-bg: #33260C; --danger: #FF9A8F; --bad-bg: #3A1714;
  --info: #9CB8F2; --info-bg: #16264A; --none-bg: #1E2944; --bar2: #4A67A3;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 16px 40px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--f-body);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--focus); }
/* Tautan kembali (jejak halaman) dan nama di tabel: warna teks biasa, garis bawah hanya saat diarahkan */
a.jejak { color: var(--muted); font-weight: 600; text-decoration: none; }
a.jejak:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tbl td > a:not(.btn) { color: var(--ink); font-weight: 600; text-decoration: none; }
.tbl td > a:not(.btn):hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { letter-spacing: -.01em; text-wrap: balance; }
/* Sentuhan: tanpa jeda ketuk-ganda, tanpa kilatan abu-abu bawaan (tombol punya keadaan :active sendiri) */
body { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- Kerangka aplikasi ---------- */
.shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.side {
  background: var(--navy); color: var(--nav-ink);
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--side-garis, transparent);
  scrollbar-width: thin; scrollbar-color: #33456F transparent;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: #FFFFFF; text-decoration: none; }
.brand img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.brand b { display: block; font-weight: 800; font-size: 15px; line-height: 1.15; }
.brand span { display: block; color: #9FAACA; font-size: 11.5px; line-height: 1.3; }
.brand .brand-pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .brand-site { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(240, 127, 26, .16); color: #FFC48F; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.brand .brand-site[hidden] { display: none; }
.brand > span { min-width: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-grup { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 11px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--nav-muted); padding: 14px 12px 6px; border-radius: 8px; }
.nav-grup.sistem { padding-top: 18px; }
.nav-grup::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin: -3px 2px 0 0; opacity: 0; transition: opacity var(--t), transform var(--t); }
.nav-grup:hover, .nav-grup:focus-visible { color: #FFFFFF; }
.nav-grup:hover::after, .nav-grup:focus-visible::after, .nav-grup[aria-expanded="false"]::after { opacity: .9; }
.nav-grup[aria-expanded="false"]::after { transform: rotate(-45deg); margin-top: 0; }
.nav .terlipat { display: none; }
.nav .sub-tutup { display: none; }
.nav-sub { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 13.5px/1.3 var(--f-body); color: var(--nav-muted); padding: 8px 12px; border-radius: 8px; }
.nav-sub::before { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin: 0 6px 0 6px; transition: transform var(--t); }
.nav-sub[aria-expanded="true"]::before { transform: rotate(45deg); margin-top: -3px; }
.nav-sub:hover, .nav-sub:focus-visible { color: #FFFFFF; background: rgba(255, 255, 255, .05); }
.nav-sub[hidden] { display: none; }
.nav a[data-sub] { padding-left: 26px; }
.nav a, .nav .segera {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 8px 12px; border-radius: 9px; color: var(--nav-ink); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: background var(--t), color var(--t);
}
.nav a:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.nav a[aria-current="page"] { background: rgba(240, 127, 26, .16); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--accent-2); }
.nav .segera { opacity: .55; cursor: default; }
.nav .tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #8C99B8; border: 1px solid #33456F; border-radius: 999px; padding: 1px 7px; }
.nav .count { margin-left: auto; font: 700 11.5px var(--f-body); background: #D93025; color: #fff; border-radius: 999px; padding: 1px 8px; }
.side .foot { margin-top: auto; padding: 16px 12px 4px; font-size: 12px; color: var(--nav-muted); }
.side .foot a { color: var(--nav-ink); }

.mainwrap { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 12px 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.topbar .logo-m { display: none; width: 32px; height: 32px; object-fit: contain; }
.cari-btn {
  flex: 0 1 400px; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted);
  font: 500 14px var(--f-body); cursor: pointer; text-align: left; transition: border-color var(--t), box-shadow var(--t);
}
.cari-btn:hover { border-color: var(--line2); box-shadow: var(--shadow-sm); }
.kbd { font: 700 11px var(--f-body); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; margin-left: auto; color: var(--muted); }
.topbar .spacer { flex: 1; }
.iconbtn {
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: border-color var(--t), background var(--t);
}
.iconbtn:hover { border-color: var(--line2); }
.ava-btn {
  width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--navy-2); color: #FFFFFF;
  font: 800 13px var(--f-body); cursor: pointer; flex: none; overflow: hidden; padding: 0;
}
.pop {
  position: absolute; z-index: 50; min-width: 240px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; animation: muncul var(--t);
}
.pop .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pop .who b { display: block; overflow-wrap: anywhere; }
.pop .who span { font-size: 12.5px; color: var(--muted); }
.pop button, .pop a { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 500 14px var(--f-body); cursor: pointer; text-decoration: none; }
.pop button:hover, .pop a:hover { background: var(--soft); }

.main { min-width: 0; padding: 6px 28px 64px; }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pagehead h1 { font: 800 26px/1.2 var(--f-body); margin: 0; }
.pagehead p { margin: 4px 0 0; color: var(--muted); max-width: 72ch; font-size: 14.5px; }

.bottombar { display: none; }
.laci-latar { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80; width: min(300px, 86vw); height: auto;
    transform: translateX(-102%); transition: transform 220ms cubic-bezier(.2, .7, .3, 1); box-shadow: var(--shadow);
  }
  .shell.laci-buka .side { transform: none; }
  .shell.laci-buka .laci-latar { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(8, 14, 30, .5); animation: pudar var(--t); }
  .topbar { padding: 10px 16px; gap: 8px; }
  .topbar .logo-m { display: block; }
  .cari-btn { flex: 1 1 auto; }
  .cari-btn .kbd, .topbar .qr-btn { display: none; }
  .main { padding: 4px 16px 104px; }
  .bottombar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: flex-end;
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .bottombar a, .bottombar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    font: 600 11px var(--f-body); color: var(--muted); text-decoration: none; border: 0; background: transparent; cursor: pointer;
  }
  .bottombar [aria-current="page"] { color: var(--accent); }
  .bottombar .pindai { flex: 0 0 76px; color: var(--ink); }
  .bottombar .pindai span.bulat {
    width: 58px; height: 58px; margin-top: -28px; border-radius: 18px; background: var(--accent); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(196, 71, 10, .35);
  }
}

/* ---------- Panel, kartu, grid ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: 16px; }
.grid2 > .panel + .panel, .stack > .panel + .panel, .stack > * + .panel { margin-top: 0; }
.panel h2, .h2 { font: 700 16.5px/1.3 var(--f-body); margin: 0 0 14px; }
.panel h3 { font: 700 15px/1.3 var(--f-body); margin: 0 0 10px; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.stack { display: grid; gap: 16px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.row .full { grid-column: 1 / -1; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar > input, .toolbar > select { width: auto; }
.toolbar > .grow { flex: 1 1 260px; min-width: 0; }
.toolbar > select { flex: 0 1 auto; min-width: 0; max-width: 100%; }
@media (max-width: 560px) { .toolbar > select { flex: 1 1 100%; } }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.flexrow { display: flex; flex-wrap: wrap; gap: 16px; }
.flexrow > * { min-width: 0; }
.flexrow > .panel + .panel, .flexrow .panel + .panel, .bidang.panel { margin-top: 0; }

/* ---------- Kartu angka ---------- */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: 16px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
a.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line2); }
.stat .l { order: -1; color: var(--muted); font-size: 13px; font-weight: 600; }
.stat .n { font: 800 30px/1.1 var(--f-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .note { align-self: flex-start; }
.stat.warn .n { color: var(--warn); }
.stat.bad .n { color: var(--danger); }
.stat.ok .n { color: var(--ok); }

/* ---------- Form ---------- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > span, .lbl { font: 600 13px/1.3 var(--f-body); color: var(--muted); }
.field small { color: var(--muted); font-size: 12.5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="month"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], select, textarea {
  font: 500 14.5px var(--f-body); color: var(--ink); background: var(--field);
  border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 12px; min-height: 44px; width: 100%; min-width: 0;
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
textarea { min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input[readonly] { background: var(--soft); }
.chk {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line2); background: var(--field); border-radius: 10px; cursor: pointer; min-width: 0;
  transition: border-color var(--t), background var(--t);
}
.chk input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.chk:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chk.plain { border: 0; background: transparent; padding: 0; min-height: 32px; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 600 13.5px var(--f-body); min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--field); color: var(--ink); cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filebox {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px dashed var(--line2); border-radius: 12px; background: var(--field); cursor: pointer;
}
.filebox input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.filebox .fbtn { font-weight: 600; font-size: 13.5px; padding: 8px 12px; border-radius: 9px; background: var(--navy-2); color: #FFFFFF; }
.filebox .fname { color: var(--muted); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; flex: 1 1 140px; }
.filebox img { height: 64px; width: auto; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.filebox:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.req::after { content: ' *'; color: var(--danger); }

/* ---------- Tombol ---------- */
.btn {
  font: 600 14px var(--f-body); min-height: 42px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--panel); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.dark { background: var(--navy-2); border-color: var(--navy-2); color: #FFFFFF; }
.btn.bahaya { background: #B3261E; border-color: #B3261E; color: #FFFFFF; }
.btn.bahaya:hover { background: #8F1E18; border-color: #8F1E18; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.link { border: 0; background: transparent; padding: 0 4px; color: var(--focus); min-height: 32px; }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ---------- Badge status (pil lembut) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 12px/1 var(--f-body); padding: 5px 9px; border-radius: 999px; background: var(--none-bg); color: var(--muted);
}
.badge.st-ok { color: var(--ok); background: var(--ok-bg); }
.badge.st-bad { color: var(--danger); background: var(--bad-bg); }
.badge.st-warn { color: var(--warn); background: var(--warn-bg); }
.badge.st-none { color: var(--muted); background: var(--none-bg); }
.badge.st-info { color: var(--info); background: var(--info-bg); }
.st-ok { color: var(--ok); } .st-bad { color: var(--danger); } .st-warn { color: var(--warn); } .st-none { color: var(--muted); } .st-info { color: var(--info); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Tabel ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
table.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { font: 600 12px var(--f-body); color: var(--muted); white-space: nowrap; background: var(--soft); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.nw, .tbl td.mono { white-space: nowrap; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:hover { background: var(--soft); }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tbl .num { text-align: right; }
.tbl td .actions { flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
/* Tabel lebar di laptop 1366 px: sel lebih ramping, nomor dokumen sedikit kecil, tombol Cabut tanpa bingkai agar tidak menyaingi aksi lain */
@media (min-width: 861px) {
  .tbl th, .tbl td { padding: 10px 12px; }
  .tbl td.mono { font-size: 13px; }
  .tbl td .actions .btn.small { padding: 0 10px; }
  .tbl td .actions .btn.danger { border-color: transparent; background: transparent; }
  .tbl td .actions .btn.danger:hover { background: var(--bad-bg); border-color: transparent; }
}
.tbl td:first-child { min-width: 140px; }
.empty { margin: 0; padding: 22px; color: var(--muted); text-align: center; }

/* ---------- Daftar karyawan ---------- */
.plist { display: grid; gap: 8px; }
.pitem {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  text-decoration: none; color: inherit; transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.pitem:hover { border-color: var(--line2); box-shadow: var(--shadow-sm); }
.pitem[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pitem .nm { font-weight: 700; overflow-wrap: anywhere; }
.pitem .sub { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.pitem.off { opacity: .6; }
/* Titik status syarat (MCU, induksi, SIMPER, MP): warna = keadaan, label pendek seragam */
.titik-status { display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; }
.titik-status .ts { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.titik-status .ts i { width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex: none; }
.titik-status .ts.st-ok i { color: var(--ok); } .titik-status .ts.st-warn i { color: var(--warn); }
.titik-status .ts.st-bad i { color: var(--danger); } .titik-status .ts.st-none i { color: transparent; box-shadow: inset 0 0 0 1.5px var(--line2); }
.titik-status .ts.st-bad span, .titik-status .ts.st-warn span { color: var(--ink); }
.pitem .nm .badge { vertical-align: 2px; margin-left: 4px; }
.baris-jml { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.baris-jml p { margin: 0 0 10px; }
.legenda-ts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.legenda-ts .ts { display: inline-flex; align-items: center; gap: 5px; }
.legenda-ts .ts i { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.legenda-ts .st-ok i { color: var(--ok); } .legenda-ts .st-warn i { color: var(--warn); } .legenda-ts .st-bad i { color: var(--danger); }
.legenda-ts .st-none i { color: transparent; box-shadow: inset 0 0 0 1.5px var(--line2); }
.legenda-ts .ts { color: var(--muted); }
@media (max-width: 640px) {
  .pitem { grid-template-columns: 40px minmax(0, 1fr); }
  .pitem .badges, .pitem .titik-status { grid-column: 1 / -1; justify-content: flex-start; }
}
.ava {
  width: 44px; height: 56px; border-radius: 9px; object-fit: cover; background: var(--none-bg);
  display: grid; place-items: center; color: var(--muted); font: 800 15px var(--f-body); overflow: hidden;
}
.ava.lg { width: 112px; height: 148px; font-size: 30px; border-radius: 14px; }

/* ---------- Detail ---------- */
.profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 520px) { .profile { grid-template-columns: minmax(0, 1fr); } }
.profile h2 { font: 800 22px/1.2 var(--f-body); margin: 0 0 8px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px 18px; margin: 14px 0; }
.kv div span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.kv div b { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Kelayakan ---------- */
.check { display: grid; gap: 8px; }
.check div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }
.check .ic { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }
.check .ok .ic { background: #1E7A4C; }
.check .bad .ic { background: #B3261E; }
.check .na .ic { background: #7C8599; }
.check p { margin: 0; font-size: 13.5px; color: var(--muted); }
.check p b { display: block; font-size: 14.5px; color: var(--ink); }

/* ---------- Pemilih karyawan ---------- */
.picker { position: relative; }
.picker .list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto; padding: 4px;
}
.picker .opt { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.picker .opt:hover, .picker .opt.on { background: var(--soft); }
.picker .opt small { display: block; color: var(--muted); }
.picked { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 12px; background: var(--field); }
.picked .grow { flex: 1; min-width: 0; }
.picked b { display: block; overflow-wrap: anywhere; }

/* ---------- SIMPER / Mine Permit ---------- */
.terbit { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) {
  .terbit { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: start; }
  .terbit .preview { position: sticky; top: 76px; }
}
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cards canvas { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 16px rgba(16, 24, 40, .22)); }
.pvno { font: 600 17px var(--f-mono); overflow-wrap: anywhere; }
@media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } .cards canvas { max-width: 320px; margin-inline: auto; } }
.notice { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); font-size: 14px; }
.notice.warn { border-color: transparent; background: var(--warn-bg); }
.notice.bad { border-color: transparent; background: var(--bad-bg); }
.notice.ok { border-color: transparent; background: var(--ok-bg); }
.notice b { display: block; margin-bottom: 2px; }

/* ---------- Tab (segmen) ---------- */
.tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; border-radius: 9px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); background: var(--panel); box-shadow: var(--shadow-sm); }
/* HP: tab satu baris yang bisa digeser, bukan bertumpuk beberapa baris */
@media (max-width: 760px) {
  .tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .tabs a { white-space: nowrap; flex: none; padding: 8px 12px; }
}

/* ---------- Dialog ---------- */
dialog.dlg {
  border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--panel); color: var(--ink);
  width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--shadow);
}
dialog.dlg[open] { animation: muncul var(--t); }
dialog.dlg.sm { width: min(460px, calc(100vw - 24px)); }
dialog.dlg.lg { width: min(1040px, calc(100vw - 24px)); }
.impor-ringkas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.impor-tbl { margin-top: 12px; max-height: 46vh; overflow: auto; }
.impor-tbl td { vertical-align: top; }
dialog::backdrop { background: rgba(8, 14, 30, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dlg form, .dlg .wrap { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 34px); }
.dlg header { padding: 18px 20px 0; display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.dlg header h2 { font: 800 19px/1.25 var(--f-body); margin: 0; }
.dlg .body { padding: 14px 20px; overflow-y: auto; display: grid; gap: 14px; }
.dlg footer { padding: 12px 20px 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--line); }
.dlg .x { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; border-radius: 8px; }
.dlg .x:hover { color: var(--ink); background: var(--soft); }
.dlg .err { color: var(--danger); margin: 0; font-size: 14px; }

/* ---------- Panel geser (detail) ---------- */
.sheet-latar { position: fixed; inset: 0; z-index: 70; background: rgba(8, 14, 30, .42); animation: pudar var(--t); }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(860px, 100vw);
  background: var(--bg); box-shadow: var(--shadow); display: flex; flex-direction: column;
  animation: geser 220ms cubic-bezier(.2, .7, .3, 1);
}
.sheet > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.sheet > header h2 { margin: 0; font: 800 17px/1.3 var(--f-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet > .isi { flex: 1; overflow-y: auto; padding: 18px 20px 48px; }
.sheet > .isi .panel + .panel { margin-top: 14px; }
@media (max-width: 640px) { .sheet > .isi { padding: 14px 14px 96px; } }

/* ---------- Cari cepat ---------- */
dialog.cmdk {
  border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--panel); color: var(--ink);
  width: min(640px, calc(100vw - 24px)); margin-top: 10vh; box-shadow: var(--shadow); overflow: hidden;
}
dialog.cmdk[open] { animation: muncul var(--t); }
.cmdk .in { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk .in input { border: 0; box-shadow: none; padding: 12px 0; font-size: 17px; background: transparent; }
.cmdk .in input:focus { box-shadow: none; }
.cmdk .hasil { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
.cmdk .grp { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.cmdk .it {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: 500 14px var(--f-body); cursor: pointer;
}
.cmdk .it .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--soft); color: var(--muted); display: grid; place-items: center; flex: none; }
.cmdk .it b { display: block; font-weight: 700; }
.cmdk .it small { display: block; color: var(--muted); font-size: 12.5px; }
.cmdk .it.on, .cmdk .it:hover { background: var(--accent-soft); }
.cmdk .it.on .ic { background: var(--accent); color: #FFFFFF; }
.cmdk .kosong { padding: 26px 14px; text-align: center; color: var(--muted); }
.cmdk .kaki { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* ---------- Dasbor ---------- */
.sapa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.sapa h1 { margin: 0; font: 800 26px/1.2 var(--f-body); }
.sapa p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.aksi-list { display: flex; flex-direction: column; }
.aksi {
  display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink); border-radius: 10px; transition: background var(--t);
}
.aksi:hover { background: var(--soft); }
.aksi .badge { min-width: 76px; justify-content: center; }
.aksi .tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aksi .tx b { font-size: 14px; font-weight: 600; }
.aksi .tx span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.aksi .go { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
:root[data-theme="dark"] .aksi .go { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aksi .go { color: var(--accent-2); } }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafik { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.grafik a { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; border-radius: 8px 8px 0 0; text-decoration: none; transition: background var(--t); }
.grafik a:hover { background: var(--soft); }
.grafik .b { width: min(18px, 34%); border-radius: 5px 5px 0 0; min-height: 3px; transform-origin: bottom; animation: tumbuh 400ms cubic-bezier(.2, .7, .3, 1); }
.grafik .b1 { background: var(--accent-2); }
.grafik .b2 { background: var(--bar2); }
.grafik-label { display: flex; gap: 10px; padding: 6px 2px 0; }
.grafik-label span { flex: 1; text-align: center; font-size: 12px; color: var(--muted); }
.bidang { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.bidang .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bidang .top b { font-size: 15px; }
.bidang p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.meter { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 7px; border-radius: 999px; background: var(--accent-2); }
.log { display: flex; flex-direction: column; gap: 12px; }
.log div { display: flex; gap: 10px; align-items: flex-start; }
.log i { width: 8px; height: 8px; margin-top: 7px; border-radius: 999px; background: var(--accent-2); flex: none; }
.log span { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.45; }
.log small { font-size: 12px; color: var(--muted); }

/* ---------- Pindai QR ---------- */
.scan { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 1 / 1; max-height: 60vh; margin: 0 auto; width: 100%; }
.scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan .bingkai { position: absolute; inset: 14%; border-radius: 16px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); border: 3px solid rgba(255, 255, 255, .9); }
.scan .garis { position: absolute; left: 16%; right: 16%; height: 2px; background: var(--accent-2); top: 50%; animation: pindai 1.8s ease-in-out infinite alternate; }
.hasil-pindai { border-radius: 14px; padding: 16px 18px; color: #FFFFFF; }
.hasil-pindai small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hasil-pindai b { display: block; font: 800 28px/1.15 var(--f-body); }
.hasil-pindai span { display: block; margin-top: 4px; font-size: 14.5px; }
.hp-ok { background: #1E7A4C; } .hp-bad { background: #B3261E; } .hp-warn { background: #8F5400; } .hp-none { background: #4C566E; }

/* ---------- Toast ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
@media (max-width: 860px) { .toasts { bottom: calc(86px + env(safe-area-inset-bottom)); left: 16px; right: 16px; max-width: none; } }
.toast {
  background: #13203F; color: #FFFFFF; padding: 12px 14px 12px 16px; border-radius: 12px; box-shadow: var(--shadow);
  font-size: 14px; border-left: 5px solid var(--accent-2); animation: muncul var(--t);
}
.toast.err { border-left-color: #FF6B5E; }
.toast.ok { border-left-color: #6FCF97; }

/* ---------- Login & layar penuh ---------- */
.center { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login { width: min(420px, 100%); }
.login h1 { font: 800 28px/1.15 var(--f-body); margin: 0 0 8px; }
.login form { display: grid; gap: 14px; }
.masuk { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.masuk .hero {
  background: var(--navy); color: #FFFFFF; padding: 44px 48px; display: flex; flex-direction: column; gap: 28px; justify-content: space-between;
  position: relative; overflow: hidden;
}
.masuk .hero::after { content: ''; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; border: 40px solid rgba(240, 127, 26, .14); }
.masuk .hero .logo { display: flex; align-items: center; gap: 12px; }
.masuk .hero .logo img { width: 52px; height: 52px; object-fit: contain; }
.masuk .hero .logo b { font-weight: 800; font-size: 17px; line-height: 1.2; }
.masuk .hero h2 { font: 800 clamp(28px, 4vw, 40px)/1.15 var(--f-body); margin: 0; max-width: 16ch; }
.masuk .hero p { margin: 10px 0 0; color: #B9C4DF; max-width: 46ch; }
.masuk .hero ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: #D6DDEF; font-size: 14px; }
.masuk .hero li { display: flex; gap: 10px; align-items: center; }
.masuk .hero li i { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-2); flex: none; }
.masuk .form { display: grid; place-items: center; padding: 32px 20px; }
.masuk .form .login { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm); }
@media (max-width: 860px) {
  .masuk { grid-template-columns: minmax(0, 1fr); }
  .masuk .hero { padding: 26px 22px 30px; gap: 16px; }
  .masuk .hero ul, .masuk .hero::after { display: none; }
  .masuk .form { place-items: start center; padding: 20px 16px 40px; margin-top: -18px; }
}
.loading { color: var(--muted); padding: 30px 0; text-align: center; }
.spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent-2); border-radius: 50%; animation: sp .8s linear infinite; margin: 0 auto 10px; }
.skel { border-radius: 10px; background: linear-gradient(90deg, var(--soft) 0%, var(--line) 50%, var(--soft) 100%); background-size: 200% 100%; animation: kilau 1.2s ease-in-out infinite; }
.stripe { height: 4px; border-radius: 2px; background: var(--accent-2); margin: 8px 0 14px; width: 120px; }

@keyframes sp { to { transform: rotate(360deg); } }
@keyframes kilau { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes muncul { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes tumbuh { from { transform: scaleY(0); } to { transform: none; } }
@keyframes geser { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes pindai { from { top: 18%; } to { top: 82%; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .spin { animation: sp 3s linear infinite !important; }
}

/* ---------- Cetak ---------- */
@media print {
  .side, .topbar, .bottombar, .toolbar, .actions, .btn, .lembar-bar { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
}

/* Kotak warna kode area */
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.swatch.lg { width: 34px; height: 18px; margin: 0; }
input[type="color"] { width: 72px; height: 42px; padding: 3px; border: 1px solid var(--line2); border-radius: 10px; background: var(--field); }

/* Panel hapus permanen (admin) */
.zona-bahaya { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.zona-bahaya h2 { color: var(--danger); }

/* ---------- Penyesuaian layar HP ---------- */
.cari-btn > span:not(.kbd) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px 14px; gap: 4px; }
  .stat .n { font-size: 24px; }
  .stat .note { white-space: normal; line-height: 1.25; }
  .aksi { flex-direction: column; align-items: flex-start; gap: 4px; }
  .aksi .badge { min-width: 0; }
  .aksi .go { display: none; }
  .aksi .badge { min-width: 0; }
  .sapa h1, .pagehead h1 { font-size: 22px; }
  .sapa .actions .btn { flex: 1 1 auto; }
  .panel { padding: 16px; }
}

/* ---------- Lembar cetak (kartu yang ditandai untuk diunduh bersama) ---------- */
.lembar-bar {
  position: fixed; z-index: 45; left: calc(256px + 28px); right: 28px; bottom: 16px;
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  max-width: 880px; margin: 0 auto; padding: 12px 14px 12px 18px;
  background: var(--navy); color: #FFFFFF; border-radius: 14px; box-shadow: var(--shadow);
  border-left: 4px solid var(--accent-2); animation: naik var(--t);
}
.lembar-bar[hidden] { display: none; }
.lembar-bar .lb-teks { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.lembar-bar .lb-teks b { font: 700 14px/1.3 var(--f-body); }
.lembar-bar .lb-teks span { font-size: 12.5px; color: #C9D3EA; }
.lembar-bar .lb-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.lembar-bar .btn:not(.primary) { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .35); }
.lembar-bar .btn:not(.primary):hover { background: rgba(255, 255, 255, .1); }
.shell.ada-lembar .main { padding-bottom: 120px; }
body.ada-lembar .toasts { bottom: 96px; }
@keyframes naik { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 860px) {
  .lembar-bar { left: 10px; right: 10px; bottom: calc(102px + env(safe-area-inset-bottom)); padding: 10px 10px 10px 14px; gap: 8px 10px; }
  .lembar-bar .lb-teks { flex-basis: 100%; }
  .lembar-bar .lb-aksi { width: 100%; }
  .lembar-bar .lb-aksi .btn { flex: 1; }
  .shell.ada-lembar .main { padding-bottom: 236px; }
  body.ada-lembar .toasts { bottom: calc(222px + env(safe-area-inset-bottom)); }
}
.tbl th.pilih, .tbl td.pilih { width: 44px; min-width: 0; padding-right: 0; }
.tbl td.pilih + td { min-width: 140px; }
.tbl td.pilih + td + td { min-width: 180px; }
.tbl .pilih input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.tbl tr.ditandai td { background: var(--accent-soft); }
/* Tabel daftar (.tbl-susun) di HP tampil sebagai kartu bersusun: label kolom di kiri, nilai di kanan, tombol di bawah */
@media (max-width: 640px) {
  .tablewrap:has(> .tbl-susun) { border: 0; border-radius: 0; background: none; overflow: visible; }
  .tbl.tbl-susun, .tbl.tbl-susun tbody { display: block; width: 100%; }
  .tbl.tbl-susun thead { display: none; }
  .tbl.tbl-susun tr { display: block; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  .tbl.tbl-susun tr:last-child { margin-bottom: 0; }
  .tbl.tbl-susun td { display: block; padding: 4px 0; border: 0; min-width: 0 !important; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  .tbl.tbl-susun td::before { content: attr(data-l); float: left; max-width: 45%; margin-right: 14px; text-align: left; font-size: 12px; font-weight: 600; line-height: 1.7; color: var(--muted); overflow-wrap: normal; }
  .tbl.tbl-susun td::after { content: ''; display: block; clear: both; }
  .tbl.tbl-susun td:first-child { display: block; text-align: left; font-weight: 600; padding-bottom: 6px; }
  .tbl.tbl-susun td:first-child::before, .tbl.tbl-susun td[data-l=""]::before { content: none; display: none; }
  .tbl.tbl-susun td[data-l=""] { display: block; text-align: left; padding-top: 8px; }
  .tbl.tbl-susun td[data-l=""]:empty { display: none; }
  .tbl.tbl-susun td .actions, .tbl.tbl-susun td .badges { justify-content: flex-start; flex-wrap: wrap; }
  .tbl.tbl-susun td:not(:first-child):not([data-l=""]) .badges { justify-content: flex-end; }
}
/* Tabel izin di HP tampil sebagai kartu per baris */
@media (max-width: 640px) {
  .tbl.tbl-hp thead { display: none; }
  .tbl.tbl-hp, .tbl.tbl-hp tbody { display: block; width: 100%; }
  .tbl.tbl-hp tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tbl.tbl-hp tr:last-child { border-bottom: 0; }
  .tbl.tbl-hp td { display: block; padding: 0; border: 0; min-width: 0 !important; white-space: normal; }
  .tbl.tbl-hp td.pilih { grid-row: 1 / span 5; width: auto; padding-top: 2px; }
  .tbl.tbl-hp td.mono { grid-column: 2 / -1; font-weight: 700; font-size: 13px; }
  .tbl.tbl-hp td.mono + td { grid-column: 2 / -1; }
  .tbl.tbl-hp td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
  .tbl.tbl-hp td:last-child { grid-column: 2 / -1; padding-top: 4px; }
  .tbl.tbl-hp td .actions { flex-wrap: wrap; }
}
.lb-petunjuk { margin: 0 0 10px; }
.btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lb-grup { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.lb-grup + .lb-grup { margin-top: 10px; }
.lb-grup > .lbl { display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.lb-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.lb-grup > .lbl + .lb-item { border-top: 0; }
.lb-item .badge { flex: none; min-width: 92px; justify-content: center; }
.lb-nama { flex: 1; min-width: 0; display: grid; }
.lb-nama b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-nama span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tombol { display: flex; gap: 2px; flex: none; }
.lb-tombol .iconbtn { width: 32px; height: 32px; font-size: 16px; }
.lb-tombol .iconbtn:disabled { opacity: .35; cursor: default; }
.lb-kosong { margin-top: 6px; padding: 8px; border: 1px dashed var(--line2); border-radius: 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (max-width: 520px) { .lb-item .badge { min-width: 0; } }

/* ---------- Laporan harian IK-26 ---------- */
:root { --s1: #2f5fc4; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --band: rgba(27, 175, 122, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1: #5b8be6; --s2: #d95926; --s3: #199e70; --s4: #c98500; --band: rgba(25, 158, 112, .18); } }
:root[data-theme="dark"] { --s1: #5b8be6; --s2: #d95926; --s3: #199e70; --s4: #c98500; --band: rgba(25, 158, 112, .18); }

.lf-form, .lt-view { display: grid; gap: 14px; }
.lf-bag { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.lf-h { font: 700 15px/1.3 var(--f-body); margin: 0 0 12px; color: var(--ink); }
.lf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; }
.lf-grid .full, .lf .full { grid-column: 1 / -1; }
.field.lf { margin: 0; }
.field.lf[hidden], .lf-sub[hidden] { display: none; }
.lf-sub { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 16px;
  padding: 12px; border-left: 3px solid var(--accent-2); background: var(--soft); border-radius: 0 10px 10px 0; }
.lf-num { display: flex; align-items: center; gap: 8px; }
.lf-num input { flex: 1; min-width: 0; }
.lf-num i { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; }
.lf-out { display: inline-block; min-height: 40px; line-height: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lf-out.bad { color: var(--danger); } .lf-out.ok { color: var(--ok); }
.lf-saran { color: var(--info); }
.pils { display: flex; flex-wrap: wrap; gap: 6px; }
.pil { position: relative; display: inline-flex; cursor: pointer; }
.pil input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pil span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--field); font-size: 14px; font-weight: 600; color: var(--ink); transition: background var(--t), border-color var(--t); }
.pil:hover span { border-color: var(--accent); }
.pil input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pil input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pil.y input:checked + span { background: var(--ok); border-color: var(--ok); color: #fff; }
.pil.n input:checked + span { background: var(--danger); border-color: var(--danger); color: #fff; }
:root[data-theme="dark"] .pil.y input:checked + span, :root[data-theme="dark"] .pil.n input:checked + span { color: #0c1323; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pil.y input:checked + span, :root:not([data-theme="light"]) .pil.n input:checked + span { color: #0c1323; } }
.pil.sq span { width: 40px; justify-content: center; padding: 0; border-radius: 10px; color: transparent; }
.pil.sq input:checked + span { color: var(--on-accent); }
.lf-cek { display: grid; gap: 10px; }
.lf-cekrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.lf-cekrow.tidak { border-color: var(--danger); background: var(--bad-bg); }
.lf-cekq { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; }
.lf-cekq .no { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.lf-cekx { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px 14px; }
.lf-tab, .lf-bibit { display: grid; gap: 10px; }
.lf-tabrow, .lf-bibitrow { padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; }
.lf-tabc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px 12px; }
.lf-tot { font-size: 14px; color: var(--muted); padding: 2px 4px; }
.lf-tot output { font-weight: 700; color: var(--ink); }
.lf-foto { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.lf-foto a, .lf-foto .ft { position: relative; display: block; width: 104px; height: 78px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
.lf-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-foto .ft button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(8, 14, 30, .7); color: #fff; cursor: pointer; font-size: 15px; line-height: 1; }
@media (max-width: 560px) { .lf-cekrow { grid-template-columns: 1fr; } .lf-bag { padding: 14px; } }

.kvg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 18px; }
.kvi span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.kvi b { font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.kvi.full { grid-column: 1 / -1; }
.tbl.lt td { vertical-align: top; }
.tbl.lt td.num:first-child { min-width: 0; width: 48px; text-align: center; }
.tbl tr.tidak td { background: var(--bad-bg); }
.tbl tr.tot td { font-weight: 700; background: var(--soft); }
.ttd-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.ttd { border: 1px dashed var(--line2); border-radius: 12px; padding: 12px; display: grid; gap: 3px; }
.ttd .lbl { font-size: 12px; }

.lap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.lap-bar .spacer { flex: 1; }
.bulan-nav { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 3px; }
.bulan-nav b { min-width: 132px; text-align: center; font-size: 14px; }
.bulan-nav button { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--ink); font-size: 18px; }
.bulan-nav button:hover { background: var(--soft); }
.bulan-nav button:disabled { opacity: .35; cursor: default; }
.lap-hari { display: grid; gap: 8px; }
.lap-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); text-decoration: none; color: inherit; transition: border-color var(--t), background var(--t); }
.lap-item:hover { border-color: var(--accent); }
.lap-item .tgl { text-align: center; line-height: 1.1; }
.lap-item .tgl b { display: block; font-size: 22px; }
.lap-item .tgl span { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.lap-item p { margin: 0; font-size: 13px; color: var(--muted); }
.lap-item.kosong { background: transparent; border-style: dashed; padding: 7px 14px; }
.lap-item.kosong .tgl { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.lap-item.kosong .tgl b { display: inline; font-size: 16px; }
.lap-item .isi-go { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.lap-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* Bilah tombol bawah form: latar padat, satu baris di HP; aksi sekunder (.sek) masuk menu "⋯" bila ada tombol utama */
.lap-stik { position: sticky; bottom: 0; z-index: 5; margin: 16px -28px 0; padding: 12px 28px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 18px -12px rgba(16, 24, 40, .25);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lap-stik .lbl-pdk, .lap-stik [data-lainnya] { display: none; }
/* Urutan: aksi biasa di kiri; menu "Lainnya" + satu tombol utama di kanan */
.lap-stik.ada-menu > .primary { order: 10; }
.lap-stik.ada-menu > .lain-bungkus { order: 9; margin-left: auto; }
.lap-stik [data-simpanstatus] { order: 11; }
.lain-bungkus { position: relative; display: inline-flex; }
.lap-stik .lain-bungkus [data-lainnya] { display: inline-flex; gap: 6px; }
.lap-stik .lain-bungkus [data-lainnya]::after { content: ''; width: 7px; height: 7px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t); }
.lap-stik.buka .lain-bungkus [data-lainnya]::after { transform: rotate(-135deg); margin-top: 3px; }
.menu-lain { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; min-width: 240px; display: flex; flex-direction: column; padding: 6px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); }
.menu-lain[hidden] { display: none; }
/* Dasbor: satu tombol "Buat baru" berisi aksi cepat (menu turun) */
.buat-baru { position: relative; }
.buat-baru > summary { list-style: none; gap: 6px; }
.buat-baru > summary::-webkit-details-marker { display: none; }
.buat-baru > .menu-lain { top: calc(100% + 6px); bottom: auto; }
.menu-lain .btn .ico { color: var(--muted); flex: none; margin-right: 8px; }
.menu-lain .btn { display: flex; width: 100%; justify-content: flex-start; border: 0; background: transparent; color: var(--ink); font-weight: 600; padding: 10px 12px; border-radius: 8px; white-space: nowrap; }
.menu-lain .btn:hover:not([disabled]), .menu-lain .btn:focus-visible { background: var(--soft); }
.menu-lain .btn[disabled] { opacity: .5; }
.menu-lain .btn.bahaya { color: var(--danger); background: transparent; margin-top: 4px; position: relative; }
.menu-lain .btn.bahaya::before { content: ''; position: absolute; left: 6px; right: 6px; top: -3px; border-top: 1px solid var(--line); }
.menu-lain .btn.bahaya:hover { background: var(--bad-bg); }
small.tgl-id { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--info); }
.lap-stik [data-simpanstatus]:empty { display: none; }
/* Isian wajib yang masih kosong setelah Kirim ditolak */
.lf-kurang { outline: 2px solid var(--danger); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 860px) {
  .lap-stik { bottom: calc(64px + env(safe-area-inset-bottom)); margin: 12px -16px 0; padding: 10px 16px; gap: 8px; flex-wrap: nowrap; }
  .lap-stik .btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 14px; }
  .lap-stik .btn.primary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .lap-stik .lbl-pjg { display: none; }
  .lap-stik .lbl-pdk { display: inline; }
  .lap-stik .lain-bungkus [data-lainnya] { padding-inline: 12px; font-size: 18px; line-height: 1; }
  .lap-stik .lain-bungkus [data-lainnya]::after { display: none; }
  .menu-lain { min-width: min(260px, calc(100vw - 32px)); }
  .lap-stik:not(:has(.primary)) { flex-wrap: wrap; }
  .lap-stik [data-simpanstatus]:not(:empty) { position: absolute; right: 16px; top: -26px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 2px 10px; font-size: 11.5px; box-shadow: var(--shadow-sm); }
  .lap-stik [data-simpanstatus] { transition: opacity .4s; }
  .lap-stik [data-simpanstatus].pudar { opacity: 0; pointer-events: none; }
}
/* Dasbor: laporan harian hari ini = progres + daftar ringkas */
.panel-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-kepala h2 { margin: 0; }
.tautan-kecil { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.tautan-kecil:hover { text-decoration: underline; }
:root[data-theme="dark"] .tautan-kecil { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tautan-kecil { color: var(--accent-2); } }
.kolom-harian { flex: 2 1 340px; min-width: 0; display: flex; }
.kolom-harian > .panel { flex: 1; }
.progres { display: grid; gap: 6px; margin-bottom: 10px; }
.progres-teks { font-size: 13px; color: var(--muted); }
.progres-teks b { color: var(--ink); font-size: 15px; }
.lap-ringkas { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 -8px; }
.lap-kartu { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; min-height: 44px; }
.lap-kartu + .lap-kartu { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.lap-kartu:hover { background: var(--soft); }
.lap-kartu .titik { width: 8px; height: 8px; border-radius: 999px; flex: none; background: currentColor; }
.lap-kartu .titik.st-none { color: var(--line2); }
.lap-kartu .nm { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lap-kartu .nm b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.lap-kartu .kd { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.lap-kartu .st-teks { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.lap-kartu.kosong .nm b { color: var(--muted); font-weight: 500; }
.lap-kartu.kosong:hover .st-teks { color: var(--accent); }
.bidang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.mulai-kosong { border: 1px dashed var(--line2); border-radius: 12px; padding: 16px; margin-top: 6px; }
.mulai-kosong p { margin: 6px 0 12px; }

.rekap { display: grid; gap: 14px; }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.ind { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel); display: grid; gap: 6px; }
.ind p { margin: 0; font-size: 13.5px; font-weight: 600; }
.ind-top { display: flex; align-items: center; gap: 10px; }
.ind-top b { font-size: 24px; font-variant-numeric: tabular-nums; }
.ind-top .muted { margin-left: auto; }
.ind-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.ind.i-ok .ind-ic { background: var(--ok-bg); color: var(--ok); }
.ind.i-warn .ind-ic { background: var(--warn-bg); color: var(--warn); }
.ind.i-bad .ind-ic { background: var(--bad-bg); color: var(--danger); }
.ind.i-na .ind-ic { background: var(--none-bg); color: var(--muted); }
.grafik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.lg-fig { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel); min-width: 0; }
.lg-fig figcaption { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg-plot { position: relative; }
.lg-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.lg-plot .gx { stroke: var(--line); stroke-width: 1; }
.lg-plot .ty, .lg-plot .tx { fill: var(--muted); font: 500 11px var(--f-body); }
.lg-plot .ty { text-anchor: end; } .lg-plot .tx { text-anchor: middle; }
.lg-plot .pita { fill: var(--band); }
.lg-plot .dot { stroke: var(--panel); stroke-width: 2; }
.lg-plot .hit { fill: transparent; cursor: crosshair; }
.lg-plot .hit.on { fill: var(--ink); fill-opacity: .06; }
.lg-plot .tip { position: absolute; z-index: 3; pointer-events: none; display: grid; gap: 3px; min-width: 150px; padding: 8px 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line2); box-shadow: var(--shadow); font-size: 12.5px; }
.lg-plot .tip i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.rekap-tbl tr.click { cursor: pointer; }
.akses-kode { font: 700 22px var(--f-mono); letter-spacing: .12em; padding: 8px 14px; border-radius: 10px; background: var(--soft); display: inline-block; }

/* ---------- Pemisah per perusahaan ---------- */
.pt-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.pt-lbl { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--f-body); color: var(--muted); }
.pt-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 6px; max-width: 100%; }
/* Kotak perusahaan: logo di atas, nama di bawah, jumlah di pojok kanan atas */
.pt-chip { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  width: 132px; min-height: 108px; padding: 20px 10px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink); font: 600 12.5px/1.25 var(--f-body); cursor: pointer; text-align: center; }
.pt-chip .pt-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pt-chip b { position: absolute; top: 5px; right: 5px; min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--line);
  font: 700 11px/1.3 var(--f-body); font-variant-numeric: tabular-nums; color: var(--muted); }
.pt-chip:hover { border-color: var(--line2); }
.pt-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.pt-chip.on b { background: var(--accent); color: #fff; }
.pt-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 861px) { .pt-chips { flex-wrap: wrap; overflow: visible; } }
.pt-ket { flex-basis: 100%; }
/* Logo perusahaan: kotak putih agar logo gelap tetap terbaca di mode gelap */
.pt-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; max-width: 60px;
  padding: 2px 4px; border-radius: 5px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.pt-logo img { display: block; height: 16px; width: auto; max-width: 52px; object-fit: contain; }
.pt-logo img:not([src]) { visibility: hidden; width: 16px; }
.pt-logo.ins { background: var(--accent-soft); border-color: transparent; color: var(--accent); font: 700 10px/1 var(--f-body); letter-spacing: .02em; }
.pt-chip .pt-logo { height: 44px; width: 100%; max-width: 96px; padding: 4px 6px; border-radius: 8px; }
.pt-chip .pt-logo img { height: 36px; max-width: 92px; }
.pt-chip .pt-logo.ins { width: 46px; font-size: 15px; }
.pt-chip .pt-logo.semua { width: 46px; background: transparent; border-color: transparent; color: var(--muted); }
.pt-chip .pt-logo.semua svg { width: 30px; height: 30px; }
.pt-chip.on .pt-logo.semua { color: var(--accent); }
.pt-nama { display: inline-flex; align-items: center; gap: 8px; }
.pt-iup { display: block; }
.pt-ringkas td:first-child { min-width: 220px; }
.pt-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; margin: 0 0 14px; }
.pt-stat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); display: grid; gap: 2px; }
.pt-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pt-stat span { font-size: 13px; color: var(--muted); }
.pt-stat.warn { border-color: var(--warn); background: var(--warn-bg); }
.pt-ringkas { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--panel); }
.pt-ringkas summary { cursor: pointer; padding: 4px 0; }
.pt-ringkas .tablewrap { margin-top: 10px; }

/* ---------- Laporan: baris berulang, hujan, LB3 ---------- */
.lf-daftar { display: grid; gap: 10px; margin-bottom: 10px; }
.lf-daftar-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lf-nihil { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 8px; border: 1px solid var(--line2); border-radius: 10px;
  font-weight: 600; font-size: 14px; cursor: pointer; background: var(--field); }
.lf-nihil input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.lf-nihil:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.lf-dbaris { padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; background: var(--panel); }
.lf-dkepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lf-dkepala b { font-size: 14px; }
.lf-dbaris .field.lf[hidden] { display: none; }
.lf-hujan { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; margin-bottom: 12px; }
.lf-hujan h4 { margin: 0; font-size: 15px; }
.lf-hkej { display: grid; gap: 8px; }
.lf-hkej[hidden], .lf-hujan [hidden] { display: none; }
.lf-hrow { display: grid; grid-template-columns: 28px minmax(96px, 130px) minmax(96px, 130px) minmax(120px, 170px) minmax(0, 1fr) 40px; gap: 8px 12px; align-items: end;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.lf-hrow.bentrok { border-color: var(--danger); background: var(--bad-bg); }
.lf-hno { align-self: center; width: 26px; height: 26px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.lf-hhit { display: grid; gap: 2px; font-size: 13px; color: var(--muted); align-self: center; }
.lf-hhit output:first-child { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .lf-hrow { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); }
  .lf-hrow > .field:nth-of-type(3) { grid-column: 2 / 3; }
  .lf-hrow [data-hhapus] { grid-column: 3; grid-row: 2; justify-self: end; }
  .lf-hrow .lf-hhit { grid-column: 2 / 4; }
}
.lf-sub-h { margin: 12px 0 6px; font-size: 14px; }
.lt-hujan { margin-bottom: 12px; }
.lt-hujan h4 { margin: 0 0 6px; font-size: 15px; }
.ttd-row.satu { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 360px)); }
.ind.i-info .ind-ic { background: var(--info-bg); color: var(--info); }
.ind.i-info .ind-top b { font-size: 22px; }
.tbl tr.batal td { color: var(--muted); }
.tbl tr.batal td:nth-child(3), .tbl tr.batal td:nth-child(4) { text-decoration: line-through; }
.seg { display: inline-flex; gap: 4px; }
.ref-blok { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.ref-blok summary { cursor: pointer; padding: 4px 0; }
.ref-blok summary b { font-size: 15px; }
.form-grid { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid [hidden] { display: none; }
.lf-hrow input[type="time"], .lf-hrow input[type="number"] { padding: 8px 10px; }
@media (max-width: 640px) { .lf-hrow input[type="time"] { padding: 8px 6px; font-size: 14px; } }
/* Tanda tangan PIC: latar putih seperti kertas (tinta gelap tetap terbaca di tema gelap) */
.ttd-img { display: flex; align-items: center; justify-content: center; height: 76px; margin: 4px 0 2px; background: #FFFFFF; border-radius: 8px; border: 1px solid var(--line); }
.ttd-img img { max-height: 68px; max-width: 100%; object-fit: contain; }
.ttd-img.kosong { background: transparent; border-style: dashed; border-color: var(--line); }
.ttd-mini { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 96px; padding: 2px 6px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; }
.ttd-mini img { max-height: 40px; max-width: 150px; object-fit: contain; }
.ttd-pad { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; background: #FFFFFF; border: 2px dashed var(--line2); border-radius: 12px; touch-action: none; cursor: crosshair; }
.ttd-sekarang, .ttd-hasil { display: grid; gap: 4px; justify-items: start; }
.ttd-sekarang img, .ttd-hasil img { max-height: 80px; max-width: 100%; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.ttd-sekarang[hidden], .ttd-hasil[hidden], [data-ttdpad][hidden], [data-ttdfile][hidden] { display: none; }
/* Buku tamu */
.tamu-list { display: grid; gap: 10px; }
.tamu-kartu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 12px; background: var(--panel); }
.tamu-kartu.tanpa-induksi { border-left-color: var(--danger); }
.tamu-kartu .tk-utama { display: grid; gap: 3px; min-width: 0; }
.tamu-kartu .tk-utama b { font-size: 16px; overflow-wrap: anywhere; }
.tamu-kartu .badges { display: flex; flex-wrap: wrap; gap: 4px; }
.tamu-kartu .tk-aksi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.tamu-kartu .tk-aksi .btn.primary { min-width: 92px; }
@media (max-width: 640px) { .tamu-kartu { grid-template-columns: 1fr; } .tamu-kartu .tk-aksi { justify-content: flex-start; } }
/* Sesi induksi F-81 */
.pokok-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 6px 14px; margin-top: 10px; }
.pokok-grid .chk:has(input:checked) { background: var(--panel); border-color: var(--line2); }
.pokok-grid .chk:not(:has(input:checked)) span { color: var(--muted); }
.lf-bag .field + .form-grid { margin-top: 12px; }
.pokok-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 4px 14px; }
.pokok-list li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.pokok-list li span[aria-hidden] { width: 18px; flex: none; font-weight: 700; color: var(--ok); }
.pokok-list li.tidak { color: var(--muted); }
.pokok-list li.tidak span[aria-hidden] { color: var(--muted); }
.pernyataan { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.pernyataan ol { margin: 4px 0 0; padding-left: 20px; }
.peserta-tambah { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.peserta-tbl input[type=text], .peserta-tbl input[type=number] { width: 100%; min-width: 80px; padding: 6px 8px; }
.peserta-tbl td { vertical-align: middle; }

/* ---------- Dokumen formulir (tampilan baca = PDF): kertas putih meniru formulir IK-25 / IK-26 / PR-17 ---------- */
.dk-kertas { --dk-navy: #12365C; --dk-garis: #8E8E8E; --dk-isi: #1E3A8A;
  position: relative; overflow: hidden; color-scheme: light; background: #FFFFFF; color: #111111;
  font: 400 15px/1.38 "Arial Narrow", "Archivo Narrow", "Liberation Sans Narrow", "Roboto Condensed", Arial, sans-serif;
  width: 100%; max-width: 820px; margin: 0 auto; padding: 34px 46px 24px; border-radius: 4px;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.dk-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dk-gtb { width: 46%; max-width: 330px; height: auto; display: block; }
.dk-k3 { width: 58px; height: auto; display: block; }
.dk-induk { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; padding-bottom: 3px;
  border-bottom: 1px solid #BBBBBB; font-size: 11.5px; color: #666666; }
.dk-judul { font-size: 16.5px; font-weight: 700; line-height: 1.3; margin: 14px 0 0; padding-bottom: 6px; border-bottom: 1px solid #333333; color: #111111; }
.dk-nomor { text-align: right; margin: 6px 0 14px; font-size: 14.5px; }
.dk-bag { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: #111111; }
.dk-sub { font-size: 14.5px; font-weight: 700; margin: 12px 0 6px; color: #111111; }
.dk-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dk-gulir.bisa-geser::before { content: 'Tabel lebar — geser ke samping →'; position: sticky; left: 0; display: block; width: max-content;
  margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; background: #EEF2F8; color: #3F4A63; font: 600 11px/1.5 var(--f-body); }
@media print { .dk-gulir.bisa-geser::before { display: none; } }
.dk-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; margin: 0 0 6px; }
.dk-tbl th, .dk-tbl td { border: 1px solid var(--dk-garis); padding: 6px 8px; vertical-align: middle; text-align: left; overflow-wrap: anywhere; white-space: pre-line; color: #111111; }
.dk-tbl thead th { background: var(--dk-navy); color: #FFFFFF; font-weight: 700; text-align: center; line-height: 1.25; }
.dk-tbl .c { text-align: center; } .dk-tbl .r { text-align: right; }
.dk-tbl td.abu, .dk-kertas .abu { color: #666666; }
.dk-tbl tr.tebal td { font-weight: 700; background: #F2F4F8; }
.dk-tbl.kecil { font-size: 13px; }
.dk-tbl.kecil th, .dk-tbl.kecil td { padding: 5px 6px; }
.dk-kv th { width: 38%; font-weight: 400; background: none; color: #111111; text-align: left; }
.dk-kv.info { margin-bottom: 6px; }
.dk-tbl td.ruang, .dk-tbl tr.ruang td { height: 110px; }
.dk-kotak { display: inline-block; position: relative; width: .8em; height: .8em; border: 1.5px solid #333333; border-radius: 1px; vertical-align: -.06em; margin-right: .3em; background: #FFFFFF; }
.dk-kotak.on::after { content: ''; position: absolute; left: .2em; top: -.02em; width: .24em; height: .5em; border: solid var(--dk-isi); border-width: 0 .15em .15em 0; transform: rotate(45deg); }
.dk-kl { margin-right: .2em; }
.dk-v { color: var(--dk-isi); font-weight: 600; }
.dk-titik { color: #777777; letter-spacing: 1px; }
.dk-sp { display: inline-block; width: 1.5em; }
.dk-teks { margin: 8px 0; font-size: 14px; }
/* Sel melebihi baku mutu, pemisah hari pada tabel kejadian hujan, dua kolom, grafik, pemisah halaman */
.dk-tbl td.merah { color: #B42318; font-weight: 700; }
.dk-tbl tr.awal > td { border-top: 1.5px solid #6F7480; }
.dk-dua { display: grid; grid-template-columns: var(--dk-kiri, 3fr) var(--dk-kanan, 2fr); gap: 14px; align-items: start; }
.dk-dua > .dk-kol { min-width: 0; }
.dk-dua .dk-sub:first-child { margin-top: 0; }
@media (min-width: 861px) { .dk-dua .dk-tbl.lebar { min-width: 0; } }
@media (max-width: 860px) { .dk-dua { grid-template-columns: 1fr; } }
.dk-grafik { margin: 8px 0 16px; }
.dk-grafik svg { width: 100%; height: auto; display: block; font-family: inherit; }
.dk-halaman { border: 0; border-top: 1px dashed #B9BEC9; margin: 26px 0 8px; }
.sp-pilih { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sp-pilih .btn.on { background: var(--pilih); border-color: var(--pilih); color: #FFFFFF; }
.sp-lab { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px; }
.lab-isi th[scope=row] { font-weight: 600; }
.lab-isi input { width: 100%; min-width: 84px; }
.dk-ttdwrap { margin-top: 24px; }
/* Tanda tangan menempel di bawah kertas (Curah Hujan): kertas setinggi A4, kotak tanda tangan didorong ke dasar */
/* overflow terlihat agar tinggi minimum = isi (kertas memanjang bila isi melebihi satu halaman A4) */
.dk-kertas.dk-bawah { display: flex; flex-direction: column; aspect-ratio: 210 / 297; overflow: visible; }
.dk-kertas.dk-bawah > * { flex-shrink: 0; }
.dk-kertas.dk-bawah > .dk-ttdwrap { margin-top: auto; padding-top: 24px; }
.dk-ttd td { height: 132px; vertical-align: bottom; }
.dk-ttdimg { display: block; min-height: 56px; }
.dk-ttdimg img { display: block; max-height: 62px; max-width: 100%; margin: 0 auto 4px; }
.dk-jab { display: block; font-size: 12.5px; color: #555555; }
.dk-kaki { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-top: 22px; padding-top: 6px; border-top: 1px solid #CCCCCC; font-size: 11.5px; color: #888888; }
.dk-galeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 4px 0 8px; }
.dk-galeri figure { margin: 0; }
.dk-galeri figcaption { font-size: 13.5px; margin-top: 4px; }
.dk-fimg { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--dk-garis); background: #FAFAFA; }
.dk-fimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dk-fimg.kosong { display: flex; align-items: center; justify-content: center; color: #666666; font-size: 12px; }
.dk-fstack { display: grid; gap: 6px; }
.dk-dokfoto td { vertical-align: top; }
/* Belum disahkan: tanda DRAF samar + label di pojok */
/* Tanda DRAF besar dihapus (draf diunduh bersih); yang tersisa hanya label status di pojok layar */
.dk-draf::after { content: attr(data-draf); position: absolute; top: 8px; right: 10px; padding: 2px 8px; border-radius: 999px;
  background: #FCE8E6; color: #B3261E; font: 600 11.5px/1.5 var(--f-body); pointer-events: none; z-index: 1; }
.dk-tbl.lebar { min-width: 560px; }
@media (max-width: 640px) {
  .dk-kertas { padding: 30px 12px 16px; font-size: 14px; border-radius: 0; margin: 0 -4px; width: auto; }
  .dk-gtb { width: 62%; } .dk-k3 { width: 42px; }
  .dk-tbl { font-size: 13.5px; } .dk-tbl th, .dk-tbl td { padding: 5px 6px; }
  .dk-kv th { width: 42%; }
  .dk-galeri { grid-template-columns: 1fr; }
  .dk-ttd td { height: 116px; }
}

/* Foto dokumentasi di formulir isian */
.lf-dfoto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line2); }
.lf-foto.kecil { margin: 4px 0; }
.lf-foto.kecil .ft { width: 92px; height: 69px; }
.lf-fslot .lf-fbtn { width: max-content; }
.lf-foto.kartu { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.ft-kartu { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); align-content: start; }
.ft-kartu .ft { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.ft-kartu select, .ft-kartu input { min-height: 38px; font-size: 14px; }
.lf-fotoaksi { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.sketsa-pad { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: #FFFFFF; border: 2px dashed var(--line2); border-radius: 12px; touch-action: none; cursor: crosshair; }

/* Isi per bagian (langkah) */
.lf-langkah { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; margin-bottom: 4px; scrollbar-width: thin; }
.lf-langkah .lk { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 240px; padding: 4px 12px 4px 5px;
  border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); color: var(--ink); font: 600 13px/1.2 var(--f-body); cursor: pointer; }
.lf-langkah .lk:hover { border-color: var(--accent); }
.lf-langkah .lk:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lf-langkah .lk-no { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.lf-langkah .lk-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-langkah .lk.lengkap .lk-no { background: var(--ok-bg); color: var(--ok); }
.lf-langkah .lk.kurang .lk-no { background: var(--warn-bg); color: var(--warn); }
.lf-langkah .lk.on { background: var(--pilih); border-color: var(--pilih); color: #FFFFFF; }
.lf-langkah .lk.on .lk-no { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.lf-langkah .lk-no { position: relative; }
.lf-langkah .lk.kurang .lk-no::after { content: ''; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 2px var(--panel); }
/* Laptop: penanda bagian berupa langkah selebar halaman, judul lengkap boleh dua baris (tidak terpotong) */
@media (min-width: 641px) {
  .lf-langkah { gap: 4px; overflow: visible; padding: 2px 0 8px; }
  .lf-langkah .lk { flex: 1 1 0; min-width: 0; max-width: none; border-color: transparent; background: transparent; border-radius: 12px; padding: 7px 10px 7px 7px; align-items: center; }
  .lf-langkah .lk:hover { background: var(--soft); border-color: transparent; }
  .lf-langkah .lk-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
  .lf-langkah .lk.on .lk-t { color: #FFFFFF; }
  .lf-langkah .lk.lengkap .lk-t { color: var(--ink); }
  .lf-langkah .lk:not(.on) .lk-no { box-shadow: inset 0 0 0 1px var(--line2); }
}
.lf-semua { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 2px 10px; cursor: pointer; }
.lf-semua input { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .lf-langkah .lk:not(.on) { padding-right: 5px; }
  .lf-langkah .lk:not(.on) .lk-t { display: none; }
  .lf-langkah .lk.on { max-width: 72vw; }
}
.lf-bantu { margin: -2px 0 8px; color: var(--info); }
/* Giliran kerja */
.gil { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.gil-siang { background: #FFF1D9; color: #8F5400; }
.gil-malam { background: #E3E8F5; color: #1C2F61; }
:root[data-theme="dark"] .gil-siang { background: #33260C; color: #F2B866; }
:root[data-theme="dark"] .gil-malam { background: #1E2944; color: #C9D3EA; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gil-siang { background: #33260C; color: #F2B866; }
  :root:not([data-theme="light"]) .gil-malam { background: #1E2944; color: #C9D3EA; }
}
.pagehead .actions .seg { display: inline-flex; gap: 4px; }
.pagehead .actions .seg .btn.on { background: var(--pilih); border-color: var(--pilih); color: #FFFFFF; }

/* Halaman pusat Laporan harian */
.lh-grup { margin-bottom: 22px; }
.lh-gkepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.lh-gkepala h2 { margin: 0; font: 700 16px/1.3 var(--f-body); color: var(--ink); }
.lh-gkepala p { margin: 2px 0 0; }
.lh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.lh-kartu { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.lh-buka { display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.lh-buka:hover b { color: var(--accent); }
.lh-buka .kd { font: 600 12px/1.3 var(--f-body); color: var(--muted); letter-spacing: .01em; }
.lh-buka b { font-size: 15px; line-height: 1.3; }
.lh-st { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.lh-sth { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.lh-aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; }
.st-polos { font-size: 12.5px; color: var(--muted); }
/* Tombol garis dengan teks oranye: ajakan sekunder tanpa menyaingi tombol utama halaman */
.btn.aksen { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line2)); }
.btn.aksen:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
:root[data-theme="dark"] .btn.aksen { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.aksen { color: var(--accent-2); } }
@media (max-width: 640px) {
  /* Dokumentasi temuan di HP: satu kartu per temuan, foto bertumpuk */
  .dk-tbl.dk-dokfoto { min-width: 0; table-layout: auto; }
  .dk-dokfoto colgroup, .dk-dokfoto thead { display: none; }
  .dk-dokfoto, .dk-dokfoto tbody, .dk-dokfoto tr, .dk-dokfoto td { display: block; width: 100%; }
  .dk-dokfoto tr { border: 1px solid var(--dk-garis); margin-bottom: 10px; }
  .dk-dokfoto td { border: 0; border-bottom: 1px solid #DDDDDD; text-align: left; }
  .dk-dokfoto td:last-child { border-bottom: 0; }
  .dk-dokfoto td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--dk-navy); }
}
.lf-tabc .full { grid-column: 1 / -1; }
.lf-dbaris textarea { min-height: 64px; }

/* Tombol aksi di profil karyawan: rapi dua kolom sama lebar, tombol utama di depan */
.prof-aksi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; margin-top: 14px; }
.prof-aksi .btn { justify-content: center; text-align: center; }
.prof-aksi:empty { display: none; }
/* Deretan langkah formulir di layar lebar: turun baris, tidak terpotong */
@media (min-width: 861px) { .lf-langkah { flex-wrap: wrap; overflow: visible; } }
/* Isian yang difokuskan tidak tertutup bilah atas / tombol bawah yang menempel */
html { scroll-padding-top: 80px; scroll-padding-bottom: 96px; }
@media (max-width: 860px) { html { scroll-padding-top: 72px; scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)); } }
/* Tautan lompat ke isi (muncul saat difokus dengan Tab) */
.lompat { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; border: 0;
  background: var(--pilih); color: #FFFFFF; font: 700 14px var(--f-body); box-shadow: var(--shadow); transition: top var(--t); cursor: pointer; }
.lompat:focus { top: 12px; }
.main:focus { outline: none; }
/* Gulir di dalam dialog / laci menu tidak ikut menggulir halaman di belakangnya */
dialog.dlg, dialog.dlg .body, .side, .sheet { overscroll-behavior: contain; }

/* ---------- Hazard report ---------- */
.hz-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hz-filter select { flex: 1 1 160px; min-width: 0; }
.hz-item { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 10px; transition: background var(--t); }
.hz-item:first-child { border-top: 0; }
.hz-item:hover { background: var(--soft); }
.hz-item .tx { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.hz-item .tx b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.hz-item .tx span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.hz-item .hz-kiri .badge { min-width: 64px; justify-content: center; }
.hz-item.lewat { box-shadow: inset 3px 0 0 var(--danger); }
.hz-item.lewat .tx span:last-child { color: var(--danger); font-weight: 600; }
.hz-kol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.hz-kol .panel + .panel { margin-top: 0; }
.hz-baris { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.hz-baris:first-of-type { border-top: 0; }
.hz-baris > span:last-child { overflow-wrap: anywhere; white-space: pre-line; }
.hz-foto { margin-top: 12px; }
.hz-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 6px; }
.hz-foto figure { margin: 0; }
.hz-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--soft); display: block; }
.hz-foto figcaption { display: none; }
.hz-foto figure.kosong img { display: none; }
.hz-foto figure.kosong figcaption { display: block; }
.hz-lini { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; }
.hz-form .lap-stik { margin-top: 16px; }
@media (max-width: 560px) {
  .hz-baris { grid-template-columns: 1fr; gap: 2px; }
  .hz-item { flex-wrap: wrap; row-gap: 6px; }
  .hz-item .hz-kanan { margin-left: auto; }
  .hz-item .tx { order: 3; flex-basis: 100%; }
}

/* ---------- Insiden ---------- */
.ins-item { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 10px; transition: background var(--t); }
.ins-item:first-child { border-top: 0; }
.ins-item:hover { background: var(--soft); }
.ins-item .tx { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.ins-item .tx b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ins-item .tx span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ins-item .ins-kiri .badge { min-width: 84px; justify-content: center; }
.ins-item.lewat { box-shadow: inset 3px 0 0 var(--danger); }
.ins-item.lewat .tx span:last-child { color: var(--danger); font-weight: 600; }
.ins-korban { margin: 0 0 12px; }
.ins-korban legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.ins-korban [data-hapuskorban] { margin-top: 10px; }
.ins-form .lap-stik { margin-top: 16px; }
@media (max-width: 560px) {
  .ins-item { flex-wrap: wrap; row-gap: 6px; }
  .ins-item .ins-kanan { margin-left: auto; }
  .ins-item .tx { order: 3; flex-basis: 100%; }
}

/* ---------- Dasbor: keselamatan bulan ini ---------- */
.panel-k3 { margin-bottom: 16px; }
.k3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.k3-grid > a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--soft); transition: border-color var(--t); }
.k3-grid > a:hover { border-color: var(--accent); }
.k3-hari .n { font: 800 40px/1 var(--f-body); color: var(--ok); }
.k3-hari .l { font-weight: 700; }
.k3-kotak b { font-size: 14px; }
.k3-kotak span { font-size: 13.5px; color: var(--muted); }
.k3-kotak .merah { color: var(--danger); font-weight: 600; }
@media (max-width: 560px) { .pagehead .actions .btn.primary { order: -1; } }

/* Lihat kartu (depan & belakang) di dialog, tanpa mengunduh */
.kartu-lihat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; justify-items: center; }
.kartu-lihat figure { margin: 0; display: grid; gap: 6px; justify-items: center; width: 100%; }
.kartu-lihat img { display: block; width: 100%; max-width: 340px; max-height: 68vh; object-fit: contain; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
.kartu-lihat figcaption { font: 600 12.5px/1.2 var(--f-body); color: var(--muted); }
@media (max-width: 560px) { .kartu-lihat { grid-template-columns: 1fr; } .kartu-lihat img { max-height: none; } }