/* ==========================================================================
   apple.css — Lapisan desain bersama bergaya Apple (Human Interface Guidelines)
   Dimuat SETELAH <style> tiap halaman (login, dashboard, /m), jadi berperan
   sebagai lapisan pemoles: tipografi, jarak, radius, elevasi, kontrol, gerak.

   Prinsip yang dipakai (lihat design/APPLE-HIG.md):
     • Tipografi tenang  — heading rapat (letter-spacing negatif), bobot 600/700,
       angka tabular untuk statistik.
     • Bentuk kontinu    — radius berjenjang 10 / 14 / 18 / 22 px.
     • Elevasi halus     — dua lapis bayangan beropasitas rendah, bukan drop-shadow.
     • Pemisah tipis     — 1px beropasitas rendah, bukan garis abu solid.
     • Kontrol 44px      — target sentuh nyaman, fokus ring lembut (:focus-visible).
     • Gerak hidup       — 180–260ms dengan kurva ease-out khas Apple, dan
       otomatis dimatikan bila pengguna memilih prefers-reduced-motion.

   Warna TIDAK di-hardcode: semua memakai variabel tema yang disuntik runtime
   oleh applySettings()/applyThemeAliases() (--surface, --line, --ink, --muted,
   --blue, --red, …) sehingga 30 tema bawaan tetap berfungsi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token desain bersama
   -------------------------------------------------------------------------- */
:root {
  /* Skala spasi 4/8/12/16/24/32/48 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* Radius berjenjang (bentuk kontinu) */
  --r-ctl: 10px;   /* kontrol: tombol, input, select */
  --r-card: 14px;  /* kartu */
  --r-sheet: 18px; /* modal / sheet */
  --r-lg: 22px;    /* panel besar, kartu hero */
  --r-pill: 999px;

  /* Elevasi: dua lapis, opasitas rendah — "mengambang", bukan "berbayang" */
  --e-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --e-2: 0 2px 6px rgba(16, 24, 40, .05), 0 10px 26px rgba(16, 24, 40, .07);
  --e-3: 0 8px 18px rgba(16, 24, 40, .10), 0 28px 70px rgba(16, 24, 40, .16);

  /* Pemisah tipis & isian tenang (mengikuti warna tema) */
  --sep: color-mix(in srgb, var(--line, #e3e8ed) 72%, transparent);
  --fill: color-mix(in srgb, var(--subtle, #f4f6f8) 88%, var(--surface, #fff));

  /* Gerak khas Apple: cepat keluar, lembut mengerem */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;

  /* Peran tipografi */
  --t-large-title: 700 28px/1.2 var(--font-app, inherit);
  --t-title:       680 20px/1.3 var(--font-app, inherit);
  --t-headline:    650 15px/1.35 var(--font-app, inherit);
}

/* --------------------------------------------------------------------------
   2. Tipografi & dasar halaman
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -.006em;
}

h1, h2, h3, h4 { letter-spacing: -.018em; line-height: 1.25; }

.page-head h1 { font-weight: 700; letter-spacing: -.022em; }
.page-head p  { line-height: 1.5; }

/* Angka statistik selalu rata kolom */
.stat-value, .imp-stat b, .a-time, .sess-top b,
td.num, th.num, .kks-chip, .eq-kks, .tok-chip, .a-act {
  font-variant-numeric: tabular-nums;
}

/* Pilihan teks senada aksen */
::selection { background: var(--blue-soft, rgba(20,121,209,.16)); color: var(--ink); }

/* Scrollbar tenang (Chromium/WebKit) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted, #71808f) 38%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted, #71808f) 30%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted, #71808f) 50%, transparent); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Ikon SVG bersama
   -------------------------------------------------------------------------- */
.ui-ico { display: inline-block; vertical-align: -.18em; flex: none; }
.nav-link .ui-ico { width: var(--icon-size, 18px); height: var(--icon-size, 18px); }
.side-logout .ui-ico, .icon-button .ui-ico { width: 19px; height: 19px; }
.btn .ui-ico, .primary .ui-ico, .ghost-button .ui-ico,
.danger-button .ui-ico, .row-btn .ui-ico { vertical-align: -.16em; }
/* Ikon di dalam label/tombol: beri jarak kecil dari teks */
.ui-ico + span, .ui-ico + b { margin-left: 1px; }

/* --------------------------------------------------------------------------
   4. Kontrol: tombol, input, select
   -------------------------------------------------------------------------- */
.primary, .ghost-button, .danger-button, .warn-button, .success-button,
.ghost-danger, .row-btn {
  border-radius: var(--r-ctl);
  letter-spacing: -.008em;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), filter var(--dur-1) var(--ease);
}
.primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--blue) 30%, transparent); }
.primary:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 34%, transparent); }
.primary:active:not(:disabled) { transform: scale(.985); }

.ghost-button { background: var(--fill); border-color: var(--sep); }
.ghost-button:hover { background: color-mix(in srgb, var(--line) 60%, var(--surface)); }
.ghost-button:active { transform: scale(.985); }

.danger-button, .warn-button, .success-button { box-shadow: 0 1px 2px rgba(16,24,40,.10); }
.danger-button:active:not(:disabled), .warn-button:active, .success-button:active { transform: scale(.985); }

/* Fokus ring lembut — hanya untuk navigasi keyboard */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px var(--blue-soft, rgba(20,121,209,.16));
  border-color: var(--blue);
  border-radius: inherit;
}
button:focus:not(:focus-visible), input:focus:not(:focus-visible),
select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Input: tinggi seragam & radius baru */
.form-stack input, .form-stack textarea, .form-stack select,
.toolbar select, .toolbar input, .eq-toolbar input, .eq-toolbar select,
.a-page-size select, .stats-range input[type="date"],
.mon-sort select, .sf-btn, .view-toggle, .search-box input {
  border-radius: var(--r-ctl);
}
.form-stack input, .form-stack select, .toolbar select, .toolbar input,
.eq-toolbar input, .eq-toolbar select { min-height: 40px; }

/* Sakelar (switch) ala iOS: lebih bulat, kenyal saat ditekan */
.switch .slider { transition: background var(--dur-2) var(--ease); }
.switch .slider::before { transition: transform var(--dur-2) var(--ease); box-shadow: 0 1px 3px rgba(16,24,40,.22), 0 0 0 .5px rgba(16,24,40,.04); }
.switch:active .slider::before { width: 21px; }

/* --------------------------------------------------------------------------
   5. Kartu, panel, pemisah
   -------------------------------------------------------------------------- */
.card, .chart-card, .eq-card, .done-wcard, .hist-card, .role-card,
.grp-sec, .section-card, .sess-card, .imp-stat, .theme-card, .menu-item, .cmd-row {
  border-radius: var(--r-card);
}
.card { box-shadow: var(--e-1); }
.card-title h3 { letter-spacing: -.014em; }
.card-title p { line-height: 1.5; }

/* Kartu yang bisa diklik: naik halus, bukan melompat */
.eq-card, .done-wcard, .theme-card, .sess-card, .menu-item, .cmd-row, .hist-card {
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.eq-card:hover { transform: translateY(-2px); box-shadow: var(--e-2); }
.done-wcard:hover { transform: translateY(-2px); box-shadow: var(--e-2); }

/* Pemisah tipis beropasitas rendah */
.mon-table td, td, .imp-row, .notif-item, .audit-row, .eq-row, .grp-sec-head, .modal-foot {
  border-color: var(--sep);
}

/* Badge & chip: lebih tenang, tanpa huruf terlalu rapat */
.badge, .chip, .status-badge, .wo-badge, .eqn-bidang, .tok-chip, .kks-chip, .sf-dot {
  letter-spacing: .01em;
}
.status-badge, .badge { font-weight: 650; }
.chip { font-weight: 550; }

/* Tabel: header tenang, hover halus */
th { font-weight: 600; letter-spacing: .04em; }
tbody tr { transition: background var(--dur-1) var(--ease); }

/* --------------------------------------------------------------------------
   6. Sidebar & topbar
   -------------------------------------------------------------------------- */
.nav-link { border-radius: var(--r-ctl); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.nav-link.active { font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.nav-label { letter-spacing: .07em; }
.brand-mark { border-radius: 11px; box-shadow: 0 1px 2px rgba(16,24,40,.14); }
.side-logout { border-radius: var(--r-ctl); transition: background var(--dur-1) var(--ease); }

.icon-button { border-radius: var(--r-ctl); transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.icon-button:hover { background: color-mix(in srgb, var(--line) 62%, var(--surface)); }
.icon-button:active { transform: scale(.94); }
.topbar .chip-live { letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   7. Modal / sheet
   -------------------------------------------------------------------------- */
.modal { border-radius: var(--r-sheet); box-shadow: var(--e-3); }
.modal-backdrop { background: color-mix(in srgb, var(--ink, #17212b) 42%, transparent); }
.modal-backdrop.is-under { background: color-mix(in srgb, var(--ink, #17212b) 12%, transparent); }
/* Gerbang 2FA — sebelum kode verifikasi benar, seluruh shell dashboard (sidebar,
   topbar, konten, drawer) disembunyikan supaya tidak ada kesan "masih bisa masuk". */
body.twofa-pending .app,
body.twofa-pending .notif-drawer,
body.twofa-pending .label-sheet { display: none !important; }
.modal-backdrop.is-locked { background: color-mix(in srgb, var(--ink, #17212b) 58%, transparent); }
.modal-head h3 { letter-spacing: -.016em; }
.modal-foot { border-top-color: var(--sep); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
.modal { animation: modal-in var(--dur-2) var(--ease); }

.notif-drawer { box-shadow: var(--e-3); }

/* Toast: mengambang dengan material */
.toast { border-radius: var(--r-card); box-shadow: var(--e-3); letter-spacing: -.008em; }

/* --------------------------------------------------------------------------
   8. Tab & segmented control
   -------------------------------------------------------------------------- */
.tab-btn { transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.tab-btn.active { font-weight: 650; box-shadow: 0 1px 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.tab-btn.settings-tab.active { box-shadow: 0 1px 3px color-mix(in srgb, var(--blue) 32%, transparent); }
.view-toggle .vt-btn.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }

/* --------------------------------------------------------------------------
   9. Mode "Materials & Motion" (saklar Apple Design di Pengaturan)
   Aksen tambahan: material translusen + gerak sedikit lebih hidup.
   Tanpa saklar ini pun tampilan sudah memakai token Apple di atas.
   -------------------------------------------------------------------------- */
.apple-design .topbar {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent);
}
.apple-design .notif-drawer {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
}
.apple-design .modal-backdrop {
  backdrop-filter: saturate(150%) blur(6px);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
}
.apple-design .card, .apple-design .chart-card, .apple-design .eq-card, .apple-design .done-wcard {
  border-color: color-mix(in srgb, var(--line) 62%, transparent);
  box-shadow: var(--e-2);
}
.apple-design .primary { box-shadow: 0 2px 10px color-mix(in srgb, var(--blue) 34%, transparent); }
.apple-design .eq-card:hover, .apple-design .done-wcard:hover { transform: translateY(-3px) scale(1.004); }
.apple-design .sidebar { border-right: 1px solid var(--sidebar-border, rgba(255,255,255,.10)); }

/* --------------------------------------------------------------------------
   10. Aksesibilitas: hormati preferensi pengguna
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .apple-design .topbar, .apple-design .notif-drawer {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .apple-design .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .card, .chart-card, .eq-card, .done-wcard, .hist-card { border-color: var(--line); box-shadow: none; }
  .ghost-button { border-color: var(--line); }
}

/* --------------------------------------------------------------------------
   11. Cetak: jangan bawa efek kaca/bayangan ke kertas
   -------------------------------------------------------------------------- */
@media print {
  .card, .chart-card, .eq-card, .done-wcard { box-shadow: none !important; }
  .apple-design .topbar, .apple-design .notif-drawer { backdrop-filter: none !important; background: #fff !important; }
}

/* --------------------------------------------------------------------------
   12. Skala baca: lantai ukuran untuk teks kecil
   Halaman memakai angka mati 10–12px yang TIDAK ikut naik saat "Font konten" di
   Pengaturan → Layout dinaikkan, sehingga teks kecil tetap menyusut di mata.
   Blok ini menetapkan lantai yang nyaman dibaca (termasuk untuk mata rabun jauh),
   dalam tiga tingkat saja agar mudah ditelusuri.
   -------------------------------------------------------------------------- */
:root {
  --fs-tiny: 13.5px;   /* penanda struktural: nomor langkah, penghitung, label kolom */
  --fs-meta: 14.5px;   /* meta: KKS, lokasi, waktu, bidang, judul tabel */
  --fs-note: 15px;     /* kalimat: keterangan, catatan, deskripsi, label form */
}

/* Tingkat 1 — penanda kecil */
.notif-badge, .wo-sep, .menu-seq, .gcfg-head, .imp-lab,
.wo-meta .mrow .k, .eqn-bidang, .a-init, .step-num, .status-badge.sm {
  font-size: var(--fs-tiny);
}

/* Baris tab Pengaturan: nama tab harus terbaca tanpa menyipitkan mata.
   Selector 2-kelas dipakai karena aturan asli di dashboard.html lebih spesifik. */
.settings-tabbar .tabs { padding: 6px; }
.settings-tabbar .tab-btn.settings-tab { font-size: 15.5px; padding: 9px 17px; gap: 8px; }
.settings-tabbar .settings-tab .tab-seq { width: 22px; height: 22px; font-size: 13px; }

/* Galeri tema (Pengaturan → Tampilan): 6 kartu per baris supaya tiap kartu punya
   ruang. Sebelumnya auto-fill menghasilkan sampai 10 kolom sehingga preview tema
   terlihat padat dan teksnya terpotong. */
.theme-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.theme-card { padding: 13px; }
.theme-card .theme-name { font-size: 15px; }
.theme-card .theme-shot { height: 96px; }
@media (max-width: 1440px) { .theme-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .theme-grid { grid-template-columns: 1fr; } }

/* Tingkat 2 — meta & label: badge, chip, header tabel, KKS/lokasi, waktu */
.badge, .chip, .status-badge, .wo-badge, .tok-chip, .kks-chip, .eqn-wo,
.mon-table .mv-kks, .eq-kks, .eq-sub, .eq-sub .eq-kks, .stat-label, .stat-meta,
th, .mon-table th, .a-act, .a-time, .tab-btn .cnt, .notif-item .ntime,
.theme-meta, .chip-live, .eq-loc, .progress-note, .dw-loc, .chart-desc, .legacy-note,
.gmeta, .emeta, .rc-meta, .rc-save, .hist-eq, .hist-flow, .a-det, .state-pill,
.sess-meta, .unit-field .unit, .tok-empty span, .grp-toggle, .rc-active,
.top-name, .side-user .role, .brand-sub, .nav-label, .top .sub, .top .user,
.imp-stat span, .imp-note, .theme-emoji, .menu-item .power, .perm-chip,
.perm-group-head label, .back-dash .bd-txt small, .scan-live-hint, .wo-count {
  font-size: var(--fs-meta);
}

/* Tingkat 3 — kalimat pendukung: keterangan, catatan, deskripsi, label form */
.set-desc, .card-title p, .notice, .check-row, .rel-confirm-text, .form-stack label,
.wo-item .wo-desc, .wo-note, .eq-empty, .hdesc, .a-pager-info, .a-sel-count,
.a-page-size, .a-page-num, .qr-img.loading, .detail-grid dt, .drawer-note,
.menu-alias, .theme-card .nm, .set-status, .accent-hex, .imp-row,
.muted, .eq-pick-empty, .scan-empty, .wo-item .d, .res-head .loc, .eq-head .loc,
.eq-pick-item .meta, .menu-name, .section-card p, .wo-item .t, .search-count,
.mon-table .mv-none, .tok-empty b, .role-label-input, .badge, .banner {
  font-size: var(--fs-note);
}

/* Elemen yang dipakai sebagai target sentuh: naikkan tinggi & ikut skala baca */
.sf-btn, .mon-sort select, .view-toggle .vt-btn, .reset-view-btn,
.tab-btn, .ghost-button, .primary, .danger-button, .row-btn,
.field input, .field textarea, .form-stack input, .form-stack textarea, .form-stack select {
  font-size: var(--fs-note);
}

/* Kartu peralatan & hasil pindai: judul pekerjaan lebih tegas */
.eqn-title, .done-wcard .dw-title, .wo-item-head .wo-title, .hist-title, .mv-eq b {
  font-size: var(--fs-note);
}

/* Kartu KPI (Monitor Peralatan): label, angka, dan keterangan sama-sama dibesarkan
   supaya terbaca dari jauh tanpa harus mencondongkan badan. */
.stat { padding: 16px 18px; }
.stat .stat-label { font-size: var(--fs-note); letter-spacing: .04em; }
.stat .stat-value { font-size: 34px; line-height: 1.1; }
.stat .stat-meta { font-size: var(--fs-meta); }

/* --------------------------------------------------------------------------
   13. Peralatan & QR (data induk)
   Halaman ini memakai baris daftar (bukan kartu), jadi ukurannya disetarakan
   dengan proporsi kartu Monitor: judul alat = judul kartu, meta = baris meta.
   Tanpa blok ini nama alat tetap 13,5px dan tombol baris 12px.
   -------------------------------------------------------------------------- */
.eq-toolbar { gap: 10px; }
.eq-toolbar input[type="search"], .eq-toolbar select {
  font-size: var(--fs-note);
  min-height: 44px;
  padding: 10px 14px;
}

/* Bagian per group */
.grp-sec-head { padding: 13px 16px; gap: 12px; }
.grp-sec-head .gname { font-size: 16.5px; }
.grp-sec-head .gmeta { font-size: var(--fs-meta); }

/* Baris peralatan */
.eq-row { padding: 13px 16px; gap: 14px; }
.eq-row .qr-thumb { width: 52px; height: 52px; border-radius: 11px; }
.eq-row .einfo .enm { font-size: 16.5px; }
.eq-row .einfo .emeta { font-size: var(--fs-meta); gap: 8px; margin-top: 5px; }

/* Tombol baris & header tabel ikut skala baca */
.row-btn { padding: 7px 12px; font-size: var(--fs-note); }
th { font-size: var(--fs-meta); padding: 11px 12px; }
td { padding: 12px; }

/* --------------------------------------------------------------------------
   14. Modal & dialog
   Isi modal memakai ukuran teks yang sama dengan halaman: label form, isi field,
   dan tabel rincian ikut terbaca tanpa perlu diperbesar. Dipakai modal peralatan,
   group, pekerjaan, QR, dan pengguna.
   -------------------------------------------------------------------------- */
.modal-head { padding: 18px 22px 12px; }
.modal-head h3 { font-size: 19px; }
.modal-body { padding: 8px 22px 18px; }
.modal-foot { padding: 14px 22px 20px; }

.form-stack label { font-size: var(--fs-note); }
.form-stack input, .form-stack select, .form-stack textarea { font-size: var(--fs-note); }
.modal-body .notice { font-size: var(--fs-note); }

.detail-grid { font-size: var(--fs-note); }
.detail-grid dt { font-size: var(--fs-meta); }
.modal .check-row, .modal .rel-confirm-text, .modal .muted { font-size: var(--fs-note); }
.modal .wo-meta { font-size: var(--fs-meta); }
.modal .kks-chip, .modal .tok-chip, .modal .badge, .modal .chip { font-size: var(--fs-meta); }

/* Tombol tutup modal: target sentuh 44px agar mudah ditekan (sebelumnya ikon ×
   kecil di tombol 38px, sulit dibidik — terutama di layar sentuh). */
.modal .modal-close {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--subtle); color: var(--muted);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.modal .modal-close:hover { background: var(--line); color: var(--ink); }
.modal .modal-close:active { transform: scale(.94); }
.modal .modal-close .ui-ico { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   15. Halaman lain: Pekerjaan Selesai, Statistik, Jabatan, Role, Log Aktivitas
   Selector di sini memakai dua kelas bila aturan asli di dashboard.html juga dua
   kelas — kalau tidak, ukuran lama tetap menang (inilah sebabnya bagian ini
   mengukurannya tidak ikut naik. Aturannya sama dengan dashboard:
   judul kartu ≈ 15–16,5px, meta ≈ 14,5px, penanda kecil ≈ 13,5px.
   -------------------------------------------------------------------------- */

/* Pekerjaan Selesai */
.done-wcard .dw-title { font-size: 16px; }
.done-wcard .dw-date { font-size: var(--fs-meta); }
.done-group-head .dw-loc { font-size: var(--fs-meta); }
.done-selbar .ds-count, .done-allpick { font-size: var(--fs-note); }

/* Statistik */
.chart-card h3 { font-size: 16.5px; }
.chart-card .chart-desc { font-size: var(--fs-meta); }
.stats-range label { font-size: var(--fs-note); }
.stats-range input[type="date"] { font-size: var(--fs-note); min-height: 40px; }
.stats-range .rng-note { font-size: var(--fs-meta); }

/* Jabatan (Asman) */
.pos-head .pt b { font-size: 16.5px; }
.pos-head .pt code { font-size: var(--fs-meta); }
.pos-holder .who b { font-size: 15.5px; }
.pos-holder .who span { font-size: var(--fs-meta); }
.pos-hold-sel select { height: 42px; font-size: var(--fs-note); }
.pos-hold-sel .primary { height: 42px; font-size: var(--fs-note); padding: 0 16px; }
.pos-perms .plab { font-size: var(--fs-tiny); }
.pos-perms .chipnone { font-size: var(--fs-meta); }
.pchip { font-size: var(--fs-tiny); padding: 3px 9px; }
.pos-holder .hbadge { font-size: var(--fs-tiny); padding: 3px 9px; }

/* Role & Permission */
.perm-block h4 { font-size: var(--fs-tiny); }
.perm-row .pk b { font-size: var(--fs-note); }
.perm-row .pk span { font-size: var(--fs-meta); }
.role-card .rc-meta, .role-card .rc-save { font-size: var(--fs-meta); }
.role-card .rc-active { font-size: var(--fs-note); }

/* Log Aktivitas */
.a-main b { font-size: var(--fs-note); }

/* --------------------------------------------------------------------------
   16. Rincian pekerjaan (kartu & modal Detail)
   Label DIAJUKAN/DISETUJUI/SELESAI semula dipatok lebar 62px sementara nilainya
   memuat nama + waktu. Setelah teks dibesarkan, kolom nilai terpotong dan label
   bertabrakan dengan nilai. Diubah jadi label tetap tanpa lebar kaku (tidak
   melipat) dan nilai yang membungkus — jadi terbaca
   asm an.har-konin · 01 Okt 2026, 22.16
   -------------------------------------------------------------------------- */
.wo-meta { font-size: var(--fs-meta); gap: 4px; }
.wo-meta .mrow { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.wo-meta .mrow .k {
  width: auto; flex: none; white-space: nowrap; font-size: var(--fs-tiny);
  font-weight: 700; letter-spacing: .05em;
}
.wo-meta .mrow .v { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }

/* Kartu & modal: judul dan badge tidak lagi berdesakan — badge turun ke baris
   sendiri bila tidak cukup ruang. */
.wo-item .wo-item-head { gap: 8px 10px; }
.wo-item .wo-title { line-height: 1.35; }
.wo-item .wo-badges { gap: 6px; flex-wrap: wrap; }
.wo-note.inline { line-height: 1.45; }