/* Lumen PACS — design system
   Diturunkan dari design/tokens.css dan design/mockup-dashboard.html.
   Sumber kebenaran token warna tetap design/tokens.css. */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --c-cobalt:#0050EF; --c-cyan:#1BA1E2; --c-teal:#00ABA9; --c-lime:#A4C400;
  --c-orange:#FA6800; --c-magenta:#D80073; --c-violet:#6A00FF; --c-red:#E51400;
  --c-amber:#F0A30A; --c-steel:#647687;

  --bg:#000000; --surface:#141414; --surface-2:#1E1E1E; --surface-3:#2B2B2B;
  --border:#333333; --border-soft:#242424;
  /* --text-dim dinaikkan dari .36 ke .55 (diskusi 1 Okt 2026) -- kontras
     sebelumnya cuma ~2.9:1 di atas --bg hitam, di bawah standar WCAG AA
     (4.5:1 utk teks biasa). .55 -> ~6.2:1, lolos AA. Dipakai 40+ tempat
     (label field, sub-text, timestamp, dll) -- naik di sini otomatis
     berlaku ke semuanya. */
  --text:#FFFFFF; --text-mute:rgba(255,255,255,.62); --text-dim:rgba(255,255,255,.55);
  --on-light:rgba(0,0,0,.80); --on-light-mute:rgba(0,0,0,.58);

  --font:'Segoe UI','Source Sans 3',Tahoma,Geneva,Verdana,sans-serif;
  --mono:'IBM Plex Mono','Cascadia Mono',Consolas,ui-monospace,monospace;
  --track:.16em;
}

*,*::before,*::after{ box-sizing:border-box; border-radius:0; }

/* Base font-size (diskusi 1 Okt 2026) -- SEMUA ukuran teks di file ini
   pakai rem, jadi menaikkan ini menskalakan seluruh UI secara proporsional
   tanpa perlu ubah tiap aturan satu-satu. Default browser 16px. */
html{ font-size:18px; }

body{ background:var(--bg); color:var(--text); font-family:var(--font); font-weight:400;
  -webkit-font-smoothing:antialiased; margin:0; }

.app{ max-width:1440px; margin:0 auto; padding-bottom:64px; }

/* ---------- top bar ---------- */
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; background:var(--bg); border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-text{ display:flex; flex-direction:column; gap:2px; }
.wordmark{ font-size:1.05rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
.wordmark-icon{ display:block; width:40px; height:40px; }
.brand-sub{ font-size:.6875rem; letter-spacing:var(--track); text-transform:uppercase; color:var(--text-dim); }
.bar-right{ display:flex; align-items:center; gap:20px; }
.demo-chip{ font-size:.625rem; letter-spacing:var(--track); text-transform:uppercase;
  background:var(--c-amber); color:var(--on-light); padding:4px 9px; font-weight:600; }
.clock{ font-family:var(--mono); font-size:.8125rem; color:var(--text-mute); font-variant-numeric:tabular-nums; }
.who{ text-align:right; line-height:1.25; }
.who-name{ font-size:.8125rem; }
.who-role{ font-size:.625rem; letter-spacing:var(--track); text-transform:uppercase; color:var(--text-dim); }

/* ---------- page head ---------- */
.head{ padding:26px 24px 20px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.eyebrow{ font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase; color:var(--c-cyan); margin:0 0 6px; }
.head h1{ font-size:clamp(2.1rem,5vw,3.4rem); font-weight:200; line-height:1; letter-spacing:-.02em;
  margin:0; text-wrap:balance; }
.head-meta{ font-family:var(--mono); font-size:.75rem; color:var(--text-dim); text-align:right; line-height:1.7; }

/* ---------- tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; padding:0 2px;
  grid-auto-rows:146px; grid-auto-flow:row dense; }
/* dense (bukan sparse bawaan) -- diminta 14 Sep 2026 setelah default
   layout nyisain gap kosong nyata di ujung baris terakhir (tile Wide
   yang tidak cukup lebar utk sisa baris bikin browser lompat ke baris
   baru, TANPA balik isi gap yang ditinggalkan dgn tile kecil
   berikutnya). dense menyuruh browser BALIK & isi gap itu duluan kalau
   ada tile berikutnya yang cukup kecil utk masuk situ -- urutan VISUAL
   bisa beda sedikit dari urutan DOM akibatnya, tapi drag re-order
   (dashboard.js pasangCustomizeTiles) tetap benar krn baca posisi lewat
   getBoundingClientRect(), bukan asumsi urutan DOM. */
.tile{ position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0; color:var(--text); cursor:pointer; border:0; text-align:left; font:inherit;
  transition:filter .15s ease, transform .15s ease; }
/* overflow:hidden SENGAJA tidak dipakai di .tile: Firefox punya bug lama
   (Bugzilla 1206448) -- overflow:hidden di elemen leluhur dari sebuah
   konteks 3D-transform/backface-visibility bikin sisi depan tetap
   kelihatan (tidak disembunyikan) meski transform-nya sudah rotateY(180deg).
   Tidak ada isi tile yang butuh clipping (semua .flip-front/.flip-back
   pakai inset:0, ukurannya persis sama dengan .tile). */
.tile{ text-decoration:none; }
.tile *{ text-decoration:none; }
/* Semua tile sekarang berisi .flip (lihat catatan di bawah) -- filter/
   transform hover LAMA sengaja tidak dipakai lagi di sini supaya tidak
   mengganggu rendering 3D anak .flip-nya. Flip sendiri sudah jadi umpan
   balik hover yang cukup kuat. */
.tile:active{ transform:scale(.95); }
.tile:focus-visible{ outline:2px solid #fff; outline-offset:-5px; }
.tile[aria-pressed="true"]{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.92); }

.t-stat{ font-size:2.5rem; font-weight:200; line-height:.9; font-variant-numeric:tabular-nums; }
.t-stat.sm{ font-size:1.9rem; }
.t-label{ margin-top:7px; font-size:.625rem; letter-spacing:var(--track); text-transform:uppercase;
  color:rgba(255,255,255,.72); }
.t-note{ margin-top:3px; font-size:.6875rem; color:rgba(255,255,255,.55); }
.t-ico{ position:absolute; top:12px; right:13px; font-size:.9rem; opacity:.5; }

.light{ color:var(--on-light); }
.light .t-label{ color:var(--on-light-mute); }
.light .t-note{ color:var(--on-light-mute); }

.c-cobalt{background:var(--c-cobalt)} .c-red{background:var(--c-red)}
.c-cyan{background:var(--c-cyan)} .c-teal{background:var(--c-teal)}
.c-violet{background:var(--c-violet)} .c-orange{background:var(--c-orange)}
.c-steel{background:var(--c-steel)} .c-lime{background:var(--c-lime)}
.c-amber{background:var(--c-amber)} .c-magenta{background:var(--c-magenta)}

.sp-2{grid-column:span 2} .sp-3{grid-column:span 3} .r-2{grid-row:span 2}

/* --- Customize layout (drag & resize tile, ala Windows 8 Metro) ----------- */
.tiles-toolbar{ display:flex; align-items:center; gap:10px; padding:0 2px 10px; flex-wrap:wrap; }
.tiles-toolbar .btn{ flex:0 0 auto; padding:8px 14px; }
.tiles-toolbar .sub{ margin:0; }

/* Mode edit aktif -- tile jadi draggable, ada handle resize di pojok, klik
   TIDAK membuka panel (lihat cegahKlikSaatCustomize di dashboard.js) supaya
   drag/resize tidak ketabrak sama aksi buka panel. */
.tiles.customizing .tile{
  cursor:grab;
  outline:1px dashed rgba(255,255,255,.35);
  outline-offset:-1px;
  transition:filter .15s ease, transform .15s ease, outline-color .15s ease;
  /* touch-action:none SENGAJA TIDAK dipasang blanket di sini (percobaan
     pertama begini -- ternyata bikin HP tidak bisa di-scroll SAMA
     SEKALI selama mode Customize, krn swipe pendek pun langsung
     dianggap awal drag). Sekarang dipasang dinamis PER-TILE, HANYA saat
     drag benar-benar dimulai (lihat mulaiDragSungguhan di dashboard.js)
     -- sebelum itu, scroll natural (termasuk swipe cepat di touch)
     dibiarkan lewat apa adanya. */
}
.tiles.customizing .tile:active{ cursor:grabbing; }
.tiles.customizing .tile.dragging{ opacity:.35; }
.tiles.customizing .tile.drag-over{ outline:2px solid #fff; outline-offset:-2px; }

/* Klon "melayang" yang ikut pointer selama drag (lihat ptrKlon di
   dashboard.js) -- position:fixed, di luar alur grid, tidak menerima
   event apa pun sendiri (pointer-events:none) supaya elementFromPoint()
   di bawahnya tetap mengenai tile ASLI, bukan klonnya sendiri. */
.tile-drag-clone{
  position:fixed; z-index:1000; pointer-events:none; margin:0;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  transform:scale(1.04); opacity:.92;
}

.tile-resize{
  display:none; position:absolute; right:6px; bottom:6px; width:26px; height:26px;
  align-items:center; justify-content:center; font-size:.8rem; color:#fff;
  background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.5); border-radius:50%;
  cursor:pointer; z-index:2; line-height:1;
}
.tiles.customizing .tile-resize{ display:flex; }
.tile-resize:hover{ background:rgba(0,0,0,.6); }

/* live-tile flip — hanya untuk tile ringkasan.
   BUKAN flip 3D asli (rotateY + backface-visibility + preserve-3d) lagi --
   itu berulang kali gagal konsisten di Firefox (sisi depan tetap
   kelihatan/tercermin) walau sudah dicoba pindah perspective ke <div>
   terpisah dan hapus overflow:hidden dari leluhurnya. Firefox punya
   banyak bug lama seputar 3D transform yang bersarang di dalam grid/flex
   item, dan melacaknya satu-satu tidak produktif. Sebagai gantinya:
   efek "flip" ditiru pakai scaleX 2 tahap (halaman depan mengecil ke 0,
   baru halaman belakang membesar dari 0) -- tidak butuh perspective,
   backface-visibility, atau preserve-3d sama sekali, jadi hasilnya sama
   di semua browser termasuk Firefox. */
.flip{ position:absolute; inset:0; }
.flip-in{ position:relative; width:100%; height:100%; }

.flip-front, .flip-back{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:flex-end; padding:14px; transition:transform .28s ease-in;
  transform:scaleX(1); }
.flip-back{ justify-content:center; transform:scaleX(0); transition-delay:0s; }
.tile:hover .flip-front, .tile:focus-visible .flip-front{ transform:scaleX(0); transition-delay:0s; }
.tile:hover .flip-back, .tile:focus-visible .flip-back{ transform:scaleX(1); transition-delay:.28s; }
.flip-front{ transition-delay:.28s; }
.flip-back p{ margin:0; font-size:.875rem; line-height:1.45; color:rgba(255,255,255,.85); }
.light .flip-back p{ color:var(--on-light-mute); }
.brk{ display:flex; flex-direction:column; gap:7px; }
.brk-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:.75rem; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:4px; }
.brk-row b{ font-weight:600; font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* sparkline & bars di dalam tile */
.spark{ display:flex; align-items:flex-end; gap:4px; height:34px; margin-bottom:10px;
  max-width:190px; padding-right:4px; }
.spark i{ flex:1; background:rgba(255,255,255,.42); display:block; }
.spark i.now{ background:#fff; }
.mbars{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; max-width:200px; }
.mbar{ display:flex; align-items:center; gap:7px; font-size:.625rem; }
.mbar span{ font-family:var(--mono); width:22px; flex:none; letter-spacing:.02em; }
.mbar i{ height:7px; background:rgba(255,255,255,.55); display:block; }
.mbar b{ font-family:var(--mono); font-weight:400; opacity:.72; }
.gauge{ height:9px; background:rgba(255,255,255,.24); margin-bottom:11px; max-width:340px; }
.gauge i{ display:block; height:100%; background:#fff; }

/* ---------- lumen-license-banner (status Lumen-CommandCenter) ---------- */
.lumen-banner{ margin:2px 2px 0; padding:14px 18px; color:#fff; font-size:.8125rem; line-height:1.6; }
.lumen-banner b{ text-transform:uppercase; letter-spacing:.08em; font-size:.6875rem; margin-right:8px; }
.lumen-banner.warn{ background:var(--c-amber); color:rgba(0,0,0,.8); }
.lumen-banner.bad{ background:var(--c-red); }

/* ---------- panel ---------- */
.panel{ margin:2px 2px 0; background:var(--surface); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.panel-head h2{ margin:0; font-size:1.3rem; font-weight:300; letter-spacing:.01em; }
.panel-head .rule{ font-size:.6875rem; letter-spacing:var(--track); text-transform:uppercase; color:var(--text-dim); }
.panel-body{ padding:0; }

table{ width:100%; border-collapse:collapse; font-size:.8125rem; }
thead th{ text-align:left; font-size:.5875rem; font-weight:600; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--text-dim); padding:11px 14px; border-bottom:1px solid var(--border);
  white-space:nowrap; }
tbody td{ padding:11px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
tbody tr{ cursor:pointer; }
tbody tr:hover{ background:var(--surface-2); }
tbody tr:focus-visible{ outline:2px solid var(--c-cyan); outline-offset:-2px; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--text-mute); white-space:nowrap; }
.nm{ font-weight:600; }
.sub{ font-size:.6875rem; color:var(--text-dim); margin-top:2px; }
.tbl-wrap{ overflow-x:auto; }

.pill{ display:inline-block; font-size:.5875rem; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; font-weight:600; white-space:nowrap; }
.p-terjadwal{ background:var(--surface-3); color:var(--text-mute); }
.p-dikerjakan{ background:var(--c-cyan); color:var(--on-light); }
.p-belum{ background:var(--c-red); color:#fff; }
.p-selesai{ background:var(--c-lime); color:var(--on-light); }
.p-peringatan{ background:var(--c-amber); color:var(--on-light); }
.p-final{ background:var(--c-teal); color:var(--on-light); }
.p-ai{ background:var(--c-violet); color:#fff; }
.p-draft{ background:var(--c-amber); color:var(--on-light); }

/* TAT (turn-around time) -- ambang warna PLACEHOLDER, lihat
   TAT_AMBANG_HIJAU_JAM/TAT_AMBANG_AMBER_JAM di dashboard.js */
.p-tat-green{ background:var(--c-lime); color:var(--on-light); }
.p-tat-amber{ background:var(--c-amber); color:var(--on-light); }
.p-tat-red{ background:var(--c-red); color:#fff; }
.p-tat-progress{ background:var(--surface-3); color:var(--text-mute); }

/* Tahap pipeline TAT (panel TAT terpisah, lihat dashboard.js panelTat) --
   p-terjadwal/p-dikerjakan/p-draft/p-final dipakai ulang dari atas. */
.p-tahap-arsip{ background:var(--c-steel); color:#fff; }
.p-tahap-dibaca{ background:var(--c-violet); color:#fff; }

.tat-ringkasan{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.tat-kartu{ display:flex; flex-direction:column; gap:3px; padding:12px 16px; min-width:130px; }
.tat-kartu .tat-n{ font-family:var(--mono); font-size:1.375rem; font-weight:700; font-variant-numeric:tabular-nums; }
.tat-kartu .tat-lbl{ font-size:.625rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.tat-rerata{ background:var(--surface-2); color:var(--text); }

.mod{ display:inline-block; font-family:var(--mono); font-size:.6875rem; font-weight:500;
  padding:2px 7px; background:var(--surface-3); color:var(--text); }

/* panel non-tabel */
.pad{ padding:22px 20px; }
.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2px; }
.box{ background:var(--surface-2); padding:18px; }
.box h3{ margin:0 0 14px; font-size:.6875rem; letter-spacing:var(--track); text-transform:uppercase;
  color:var(--text-dim); font-weight:600; }
.big{ font-size:2.6rem; font-weight:200; line-height:1; font-variant-numeric:tabular-nums; }
.big small{ font-size:.8125rem; font-weight:400; color:var(--text-dim); margin-left:7px; }

.chart{ display:flex; flex-direction:column; gap:9px; }
.crow{ display:grid; grid-template-columns:74px 1fr 62px; align-items:center; gap:11px; font-size:.75rem; }
.crow em{ font-style:normal; font-family:var(--mono); color:var(--text-mute); }
.crow i{ display:block; height:16px; }
.crow b{ font-family:var(--mono); font-weight:400; text-align:right; font-variant-numeric:tabular-nums; }

.stack{ display:flex; height:26px; margin:6px 0 14px; }
.stack i{ display:block; height:100%; }
.legend{ display:flex; flex-wrap:wrap; gap:14px 22px; font-size:.75rem; }
.legend span{ display:flex; align-items:center; gap:7px; color:var(--text-mute); }
.legend u{ width:11px; height:11px; display:block; text-decoration:none; }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:.8125rem; align-items:baseline; }
.kv dt{ font-size:.625rem; letter-spacing:var(--track); text-transform:uppercase; color:var(--text-dim); white-space:nowrap; }
.kv dd{ margin:0; font-family:var(--mono); word-break:break-all; }

.stat-line{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:.8125rem; }
.stat-line:last-child{ border-bottom:0; }
.dot{ width:9px; height:9px; display:inline-block; margin-right:9px; }

/* ---------- drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.62); opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:40; }
.scrim.on{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(1536px,92vw); background:var(--surface);
  border-left:1px solid var(--border); transform:translateX(100%); transition:transform .24s ease;
  z-index:50; overflow-y:auto; }
.drawer.on{ transform:translateX(0); }
.dr-head{ padding:20px; border-bottom:1px solid var(--border); }
.dr-head .eyebrow{ margin-bottom:8px; }
.dr-head h3{ margin:0; font-size:1.45rem; font-weight:300; }
.dr-close{ position:absolute; top:16px; right:16px; background:none; border:0; color:var(--text-mute);
  font-size:1.3rem; cursor:pointer; line-height:1; padding:5px 9px; font-family:var(--font); }
.dr-close:hover{ color:#fff; background:var(--surface-3); }
.dr-close:focus-visible{ outline:2px solid var(--c-cyan); }
.dr-sec{ padding:18px 20px; border-bottom:1px solid var(--border-soft); }
.dr-sec > h4{ margin:0 0 13px; font-size:.625rem; letter-spacing:var(--track); text-transform:uppercase;
  color:var(--text-dim); font-weight:600; }
.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:flex; gap:12px; align-items:flex-start; padding-bottom:14px; position:relative; }
.step:not(:last-child)::after{ content:""; position:absolute; left:5px; top:14px; bottom:0; width:1px; background:var(--border); }
.step u{ width:11px; height:11px; flex:none; margin-top:3px; text-decoration:none; z-index:1; }
.step div{ font-size:.8125rem; line-height:1.4; }
.step time{ display:block; font-family:var(--mono); font-size:.6875rem; color:var(--text-dim); margin-top:2px; }
.dr-actions{ display:flex; flex-wrap:wrap; gap:6px; padding:18px 20px; }
.dr-actions .btn{ flex:1 1 150px; }

/* Seksi drawer yang bisa expand/collapse (Study, Previous Studies, Series --
   summary-nya menggantikan <h4> statis, gaya visual tetap sama). Default
   terbuka (atribut "open" di HTML), user bisa collapse manual. */
.dr-sec > summary{ margin:0 0 13px; font-size:.625rem; letter-spacing:var(--track); text-transform:uppercase;
  color:var(--text-dim); font-weight:600; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; }
.dr-sec > summary::-webkit-details-marker{ display:none; }
.dr-sec > summary::after{ content:"▾"; font-size:.7rem; color:var(--text-dim); margin-left:8px; }
.dr-sec:not([open]) > summary{ margin-bottom:0; }
.dr-sec:not([open]) > summary::after{ content:"▸"; }
.btn{ flex:1; padding:13px 12px; border:0; font:inherit; font-size:.6875rem; font-weight:600;
  letter-spacing:var(--track); text-transform:uppercase; cursor:pointer; color:#fff; background:var(--c-cobalt); }
.btn.alt{ background:var(--surface-3); color:var(--text); }
.btn:hover{ filter:brightness(1.15); }
.btn:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

footer{ padding:26px 24px; color:var(--text-dim); font-size:.75rem; line-height:1.65;
  border-top:1px solid var(--border-soft); margin-top:2px; }
footer b{ color:var(--text-mute); font-weight:400; }

@media (max-width:1080px){
  .tiles{ grid-template-columns:repeat(4,1fr); }
  .sp-3{ grid-column:span 2; }
}
@media (max-width:720px){
  .tiles{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .sp-2,.sp-3{ grid-column:span 2; }
  .r-2{ grid-row:span 1; }
  .head-meta{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* Tombol buka viewer di dalam tabel */
.btn-open {
    display: inline-block;
    padding: 5px 12px;
    background: var(--c-cobalt);
    color: #fff;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.btn-open:hover { filter: brightness(1.18); }
.btn-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Bilah penyaring ------------------------------------------------------ */
.filterbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px;
    padding: 2px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.fb-field { display: flex; flex-direction: column; }

.fb-field label {
    font-size: .5875rem;
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 9px 11px 5px;
    background: var(--surface);
}

.fb-field input,
.fb-field select {
    background: var(--surface);
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: .8125rem;
    padding: 0 11px 10px;
    outline: none;
    width: 100%;
}

.fb-field input:focus,
.fb-field select:focus { border-bottom-color: var(--c-cobalt); }
.fb-field input::placeholder { color: var(--text-dim); }

/* Tanggal: ikon kalender bawaan berwarna gelap di latar hitam */
.fb-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .45;
    cursor: pointer;
}

.fb-actions { display: flex; align-items: stretch; gap: 2px; }

.fb-actions button {
    flex: 1;
    border: 0;
    font-family: var(--font);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: uppercase;
    cursor: pointer;
    padding: 0 12px;
    background: var(--surface-3);
    color: var(--text);
}

.fb-actions button.utama { background: var(--c-cobalt); }
.fb-actions button:hover { filter: brightness(1.2); }
.fb-actions button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* --- Navigasi halaman ----------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    font-size: .75rem;
    color: var(--text-mute);
}

.pager div { display: flex; gap: 2px; }

.pager button {
    border: 0;
    background: var(--surface-3);
    color: var(--text);
    font-family: var(--font);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: uppercase;
    padding: 9px 15px;
    cursor: pointer;
}

.pager button:disabled { opacity: .3; cursor: default; }
.pager button:not(:disabled):hover { filter: brightness(1.2); }

/* --- Bar pemilihan studi untuk dibandingkan (Imaging History) ------------- */
.cmp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.cmp-bar .btn {
    border: 0;
    background: var(--surface-3);
    color: var(--text);
    font-family: var(--font);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: uppercase;
    padding: 9px 15px;
    cursor: pointer;
}

.cmp-bar .btn:disabled { opacity: .3; cursor: default; }
.cmp-bar .btn:not(:disabled):hover { filter: brightness(1.2); }

.cmp-cell { width: 32px; text-align: center; }
.cmp-check { width: 16px; height: 16px; cursor: pointer; }

.chip-filter {
    display: inline-block;
    background: var(--c-cobalt);
    color: #fff;
    font-size: .5875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 8px;
    margin-left: 8px;
}

/* --- Panel laporan (Findings/Impression/Recommendation) ------------------- */
.chip-draft, .chip-final {
    display: inline-block;
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-left: 8px;
    vertical-align: middle;
}
.chip-draft { background: var(--c-amber); color: #000; }
.chip-final { background: var(--c-teal); color: #000; }

.lbl-laporan {
    display: block;
    font-size: .625rem;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--text-mute);
    margin: 12px 0 5px;
}
.lbl-laporan:first-of-type { margin-top: 4px; }

#drLaporanBox textarea {
    width: 100%;
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-family: var(--font);
    font-size: .9375rem;
    line-height: 1.5;
    padding: 11px 12px;
    resize: vertical;
}
#drLaporanBox textarea[readonly] { opacity: .75; cursor: default; }
#drLaporanBox textarea:focus { outline: 2px solid var(--c-cobalt); outline-offset: -2px; }

/* --- Kotak dialog sesi ---------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 60;
}

.modal.on { display: flex; }

.modal-kotak {
    background: var(--surface);
    border: 1px solid var(--border);
    max-width: 440px;
    width: 100%;
    padding: 28px;
}

.modal-kotak .eyebrow { margin-bottom: 10px; }

.modal-kotak h3 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.15;
}

.modal-kotak p {
    margin: 0 0 22px;
    font-size: .8125rem;
    line-height: 1.7;
    color: var(--text-mute);
}

.hitung-mundur {
    font-family: var(--mono);
    font-size: 2.6rem;
    font-weight: 200;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.modal-aksi { display: flex; gap: 2px; }

.modal-aksi button,
.modal-aksi a {
    flex: 1;
    padding: 14px 16px;
    border: 0;
    font-family: var(--font);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--c-cobalt);
    color: #fff;
}

.modal-aksi .sekunder { background: var(--surface-3); color: var(--text); }
.modal-aksi button:hover, .modal-aksi a:hover { filter: brightness(1.18); }
.modal-aksi button:focus-visible,
.modal-aksi a:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

/* --- Import Studi Eksternal (Outside Study) ----------------------------- */
.dropzone{
    border:2px dashed var(--surface-3); background:var(--surface-2);
    padding:36px 20px; text-align:center; cursor:pointer;
    transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--c-teal); background:var(--surface-3); }
.dropzone .t-ico{ font-size:2rem; display:block; margin-bottom:10px; color:var(--text-dim); }
.dropzone input[type=file]{ display:none; }
.imp-actions{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.imp-actions .btn{ flex:0 0 auto; padding:11px 20px; }
.imp-card{ background:var(--surface-2); padding:16px 18px; margin-bottom:12px; }
.imp-card h4{ margin:0 0 8px; font-size:.8125rem; }
.imp-card .imp-meta{ font-size:.75rem; color:var(--text-mute); line-height:1.8; }
.imp-card .imp-meta b{ color:var(--text); font-weight:600; }
.imp-match{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.imp-match input[type=text]{
    width:100%; padding:9px 11px; background:var(--surface-3); border:0; color:var(--text);
    font:inherit; font-size:.8125rem; margin-bottom:8px;
}
.imp-hasil{ max-height:160px; overflow-y:auto; }
.imp-hasil label{
    display:block; padding:7px 9px; font-size:.75rem; cursor:pointer; border-radius:2px;
}
.imp-hasil label:hover{ background:var(--surface-3); }
.imp-hasil input[type=radio]{ margin-right:8px; }
.imp-badge{
    display:inline-block; font-size:.625rem; letter-spacing:var(--track); text-transform:uppercase;
    padding:2px 7px; background:var(--c-teal); color:#fff; margin-left:8px;
}
.imp-badge.warn{ background:var(--c-amber); }

/* Tombol geser VPN di dashboard: hanya menyambungkan (ON tidak bisa di-OFF dari UI). */
.vpn-switch{ position:relative; width:2.2rem; height:1.1rem; border-radius:999px; border:1px solid var(--border, #3a4250);
  background:var(--surface-3); vertical-align:middle; padding:0; cursor:pointer; transition:background .15s; }
.vpn-switch .vpn-knob{ position:absolute; top:1px; left:1px; width:calc(1.1rem - 4px); height:calc(1.1rem - 4px); border-radius:50%;
  background:var(--text-dim); transition:transform .15s, background .15s; }
.vpn-switch[aria-checked="true"]{ background:var(--c-lime); }
.vpn-switch[aria-checked="true"] .vpn-knob{ transform:translateX(1.1rem); background:var(--bg, #0b0f14); }
.vpn-switch:disabled{ cursor:not-allowed; opacity:.75; }
.vpn-switch.busy{ cursor:progress; animation:vpn-pulse 1s ease-in-out infinite; }
.vpn-switch:focus-visible{ outline:2px solid var(--c-cobalt, #4c8dff); outline-offset:2px; }
@keyframes vpn-pulse{ 50%{ opacity:.45; } }
@media (prefers-reduced-motion:reduce){ .vpn-switch,.vpn-switch .vpn-knob{ transition:none; } .vpn-switch.busy{ animation:none; } }