/* STC XXI Technical Report — sistem desain (lapisan tampilan terakhir).
   Dua mode: Terang dan Gelap, diatur lewat data-theme pada <html> (lihat mode.js).

   Sumber desain (dicampur):
   - Linear (±70%): canvas gelap #010102, lapisan permukaan bertingkat, garis 1px tipis,
     sudut 8–12px, tanpa bayangan pada kartu dan tombol, tipografi berbobot sedang.
   - IBM Carbon (±20%): tipografi IBM Plex Sans (judul berbobot 300), tabel datar dengan
     garis horizontal, fokus berupa garis tegas, status berwarna semantik yang jelas.
   - Cinema XXI: wajah merek Bodoni tetap dipakai untuk logo dan judul login.
   Aksen: moss hijau untuk aksi utama dan status; emas untuk garis, indikator aktif, dan fokus.

   Berkas ini dimuat setelah style-app.css. Selector dibuat setara spesifisitasnya dengan
   aturan lama (yang memakai :root[data-theme] dan #app serta !important) agar menang. */

/* ---------- 1. Token: Terang (default) ---------- */
:root,
:root[data-theme=light] {
  color-scheme: light;
  --bg: #ffffff;
  --card: #ffffff;
  --card2: #f4f4f4;
  --row2: #fafafa;
  --bd: #e0e0e0;
  --bd2: #c6c6c6;
  --ink: #161616;
  --txt: #161616;
  --lbl: #262626;
  --mut: #525252;
  --ph: #8d8d8d;
  --g50: #f4f4f4;
  --g100: #ebebeb;
  --g200: #e0e0e0;
  --dis: #f4f4f4;
  --gt: #161616;
  --gt2: #393939;

  /* aksen utama: moss */
  --accent: #2f5d46;
  --accent-bg: #2f5d46;
  --accent-ink: #ffffff;
  --accent-line: #3d7356;
  --accent-soft: #e8f0eb;

  /* aksen garis: emas */
  --gold: #a57a2c;
  --gold-hi: #c49a45;
  --gold-lo: #7d5c1e;
  --gold-50: #f8f2e4;
  --gold-100: #e7d3a4;
  --gold-ink: #6b4f17;
  --brass: var(--gold);
  --brass-l: var(--gold-100);
  --brass-d: var(--gold-lo);
  --brass-50: var(--gold-50);

  --moss-500: #5f8f73;
  --moss-600: #3d7356;
  --moss-700: #2f5d46;
  --moss-800: #1f3d2e;
  --moss-900: #15281f;
  --moss-950: #0c1812;
  --surface-dk: #161616;

  /* navigasi */
  --side-bg: #ffffff;
  --side-fg: #262626;
  --side-mut: #6f6f6f;
  --side-bd: #e0e0e0;
  --side-act: #f4f4f4;
  --side-input: #f4f4f4;
  --head-bg: #ffffff;
  --head-fg: #161616;
  --head-bd: #e0e0e0;

  /* status semantik */
  --ok: #198038;
  --ok-hi: #0e6027;
  --ok-bg: #defbe6;
  --warn: #8a5a00;
  --warn-bg: #fcf4d6;
  --red: #da1e28;
  --red-bg: #fff1f1;
  --err-ink: #a2191f;
  --err-bg: #fff1f1;
  --err-bd: #ffb3b8;
  --info: #0f62fe;
  --info-bg: #edf5ff;

  --sh0: none;
  --sh1: 0 1px 2px rgba(0,0,0,.08);
  --sh2: 0 8px 24px rgba(0,0,0,.14);
  --card-blur: none;

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 12px;
  --font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Bodoni Moda", Georgia, serif;
}

/* ---------- 2. Token: Gelap (Linear) ---------- */
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #010102;
  --card: #0f1011;
  --card2: #141516;
  --row2: #18191a;
  --bd: #23252a;
  --bd2: #34343a;
  --ink: #f7f8f8;
  --txt: #f7f8f8;
  --lbl: #d0d6e0;
  --mut: #8a8f98;
  --ph: #62666d;
  --g50: #141516;
  --g100: #18191a;
  --g200: #23252a;
  --dis: #141516;
  --gt: #f7f8f8;
  --gt2: #d0d6e0;

  --accent: #7fb393;
  --accent-bg: #2f5d46;
  --accent-ink: #eaf4ee;
  --accent-line: #5f8f73;
  --accent-soft: #15241b;

  --gold: #c8a25a;
  --gold-hi: #dfbf7e;
  --gold-lo: #a9843f;
  --gold-50: #211b0f;
  --gold-100: #6b5426;
  --gold-ink: #e8cf96;
  --brass: var(--gold);
  --brass-l: var(--gold-100);
  --brass-d: var(--gold-lo);
  --brass-50: var(--gold-50);

  --moss-500: #7fb393;
  --moss-600: #5f8f73;
  --moss-700: #3d7356;
  --moss-800: #2f5d46;
  --moss-900: #1f3d2e;
  --moss-950: #15281f;
  --surface-dk: #0f1011;

  --side-bg: #010102;
  --side-fg: #d0d6e0;
  --side-mut: #8a8f98;
  --side-bd: #23252a;
  --side-act: #141516;
  --side-input: #0f1011;
  --head-bg: #010102;
  --head-fg: #f7f8f8;
  --head-bd: #23252a;

  --ok: #4cb782;
  --ok-hi: #7fd1a4;
  --ok-bg: #0f2a1d;
  --warn: #e0bd6e;
  --warn-bg: #2a2110;
  --red: #ff6b6b;
  --red-bg: #2e1213;
  --err-ink: #ff8b8f;
  --err-bg: #2e1213;
  --err-bd: #5c2326;
  --info: #7aa2f7;
  --info-bg: #132035;

  --sh0: none;
  --sh1: 0 1px 2px rgba(0,0,0,.5);
  --sh2: 0 16px 48px rgba(0,0,0,.6);
}

/* ---------- 3. Dasar ---------- */
html, body { background: var(--bg); color: var(--ink); }
html body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}
html body #app, html body #login { background: var(--bg); }
html body :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html body img { max-width: 100%; }
html body h1, html body h2, html body h3 { font-family: var(--display); color: var(--ink); letter-spacing: -0.01em; }

/* ---------- 4. Sidebar ---------- */
:root[data-theme] #app #side {
  background: var(--side-bg) !important;
  background-image: none !important;
  color: var(--side-fg) !important;
  border-right: 1px solid var(--side-bd) !important;
  box-shadow: none !important;
}
:root[data-theme] #app #side .brand b { color: var(--ink) !important; font-weight: 600; font-size: 15px; }
:root[data-theme] #app #side .brand small { color: var(--mut) !important; font-size: 12px; }
:root[data-theme] #app #side .ng {
  color: var(--mut) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 14px 12px 6px;
  text-transform: none;
}
:root[data-theme] #app #side #nav a {
  color: var(--side-fg) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--r-m) !important;
  font-size: 14px;
  font-weight: 400;
  min-height: 36px;
  padding: 0 12px !important;
  margin: 1px 8px;
  box-shadow: none !important;
}
:root[data-theme] #app #side #nav a:hover { background: var(--side-act) !important; color: var(--ink) !important; }
:root[data-theme] #app #side #nav a i, :root[data-theme] #app #side #nav a .ic { color: var(--mut) !important; stroke: currentColor; }
:root[data-theme] #app #side #nav a.on {
  background: var(--side-act) !important;
  color: var(--ink) !important;
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--gold) !important;
}
:root[data-theme] #app #side #nav a.on i, :root[data-theme] #app #side #nav a.on .ic { color: var(--ink) !important; }
:root[data-theme] #app #side .ssrch {
  background: var(--side-input) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-m) !important;
  color: var(--mut) !important;
  min-height: 36px;
}
:root[data-theme] #app #side .ssrch input { color: var(--ink) !important; background: transparent !important; }
:root[data-theme] #app #side .ssrch input::placeholder { color: var(--ph) !important; }

/* ---------- 5. Header ---------- */
:root[data-theme] #app #main > header {
  background: var(--head-bg) !important;
  background-image: none !important;
  color: var(--head-fg) !important;
  border-bottom: 1px solid var(--head-bd) !important;
  box-shadow: none !important;
  min-height: 56px;
}
:root[data-theme] #app #ptitle { color: var(--ink) !important; font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
:root[data-theme] #app #bell, :root[data-theme] #app .thm {
  border-radius: var(--r-m) !important;
  border: 1px solid var(--bd) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

/* ---------- 6. Banner halaman (#phero) ---------- */
:root[data-theme] #app #phero,
:root[data-theme] #app #phero.ph-a,
:root[data-theme] #app #phero.ph-b,
:root[data-theme] #app #phero.ph-g,
:root[data-theme] #app #phero.ph-w {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-l) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  padding: 22px 26px !important;
  position: relative;
}
:root[data-theme] #app #phero::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  width: 3px;
  height: 36px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}
:root[data-theme] #app #phero::after { display: none !important; }
:root[data-theme] #app #phero h1 {
  color: var(--ink) !important;
  font-family: var(--display);
  font-weight: 300 !important;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
:root[data-theme] #app #phero p { color: var(--mut) !important; font-size: 14px; }
:root[data-theme] #app #phero .ph-t i { background: var(--accent-soft) !important; border: 1px solid var(--bd); border-radius: var(--r-m); }
:root[data-theme] #app #phero .ph-t i .ic { stroke: var(--accent); }

/* sapaan dashboard: judul besar berbobot 300 (gaya IBM), bukan tebal */
:root[data-theme] #app .dx-top h1, :root[data-theme] #app .dx-top .dx-h1 {
  font-family: var(--display) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
:root[data-theme] #app .dx-top .dx-eyebrow, :root[data-theme] #app .dx-top .dx-date { color: var(--mut) !important; font-weight: 500; letter-spacing: .04em; }

/* kartu KPI "hari ini" memakai gaya gelap lama; samakan dengan token kedua mode */
:root[data-theme] #app .dx-k.day { background: var(--card) !important; color: var(--ink) !important; border-color: var(--bd) !important; }
:root[data-theme] #app .dx-k.day .l, :root[data-theme] #app .dx-k.day small { color: var(--mut) !important; }
:root[data-theme] #app .dx-k.day .n { color: var(--ink) !important; }
:root[data-theme] #app .dx-k.day .dx-ki { background: var(--accent-soft) !important; color: var(--accent) !important; }

:root[data-theme] #app .btn:focus, :root[data-theme] #app .btn:active,
:root[data-theme] #modal .btn:focus, :root[data-theme] #modal .btn:active {
  background: var(--accent-bg) !important; background-image: none !important; color: var(--accent-ink) !important; border-color: var(--accent-bg) !important;
}
:root[data-theme] #app .btn.sec:focus, :root[data-theme] #app .btn.sec:active, :root[data-theme] #modal .btn.sec:focus, :root[data-theme] #modal .btn.sec:active {
  background: var(--card) !important; color: var(--ink) !important; border-color: var(--bd2) !important;
}

/* ---------- 7. Tombol ---------- */
:root[data-theme] #app .btn,
:root[data-theme] #app .btn:not(.sec),
:root[data-theme] #app .btn:not(.sec):hover,
:root[data-theme] #modal .btn,
:root[data-theme] #modal .btn:not(.sec),
:root[data-theme] #modal .btn:not(.sec):hover,
:root[data-theme] #login .btn {
  background: var(--accent-bg) !important;
  background-image: none !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-bg) !important;
  border-radius: var(--r-m) !important;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  min-height: 36px;
  padding: 0 14px;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
:root[data-theme] #app .btn:hover, :root[data-theme] #modal .btn:hover, :root[data-theme] #login .btn:hover {
  background: var(--moss-600) !important;
  border-color: var(--moss-600) !important;
}
:root[data-theme=dark] #app .btn:not(.sec), :root[data-theme=dark] #modal .btn:not(.sec), :root[data-theme=dark] #login .btn {
  color: #f1f8f3 !important;
}
:root[data-theme] #app .btn.sec, :root[data-theme] #modal .btn.sec, :root[data-theme] #app .sact .btn.sec {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--bd2) !important;
}
:root[data-theme] #app .btn.sec:hover, :root[data-theme] #modal .btn.sec:hover {
  background: var(--card2) !important;
  border-color: var(--mut) !important;
}
:root[data-theme] #app .btn:disabled, :root[data-theme] #modal .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 8. Input ---------- */
:root[data-theme] #app input:not([type=checkbox]):not([type=radio]):not([type=range]),
:root[data-theme] #app select,
:root[data-theme] #app textarea,
:root[data-theme] #modal input:not([type=checkbox]):not([type=radio]),
:root[data-theme] #modal select,
:root[data-theme] #modal textarea,
:root[data-theme] #login input {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: var(--r-m) !important;
  font-family: var(--font);
  font-size: 14px;
  min-height: 36px;
  padding: 0 12px;
  box-shadow: none !important;
}
:root[data-theme] #app textarea, :root[data-theme] #modal textarea { padding: 10px 12px; min-height: 80px; }
:root[data-theme] #app input::placeholder, :root[data-theme] #modal input::placeholder, :root[data-theme] #login input::placeholder,
:root[data-theme] #app textarea::placeholder { color: var(--ph) !important; }
:root[data-theme] #app input:focus, :root[data-theme] #app select:focus, :root[data-theme] #app textarea:focus,
:root[data-theme] #modal input:focus, :root[data-theme] #modal select:focus, :root[data-theme] #modal textarea:focus,
:root[data-theme] #login input:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold) !important;
}

/* ---------- 9. Kartu, panel, dan tabel ---------- */
:root[data-theme] #app .card,
:root[data-theme] #app .dx-sec,
:root[data-theme] #app .dx-ki,
:root[data-theme] #app .mdc-kpi,
:root[data-theme] #app .mdc-tbl,
:root[data-theme] #app .mdc-fs {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-l) !important;
  box-shadow: none !important;
}
:root[data-theme] #app .mdc-kpi.ok { background: var(--ok-bg) !important; border-color: transparent !important; }
:root[data-theme] #app .mdc-kpi.warn { background: var(--warn-bg) !important; border-color: transparent !important; }
:root[data-theme] #app .mdc-kpi.bad { background: var(--red-bg) !important; border-color: transparent !important; }
:root[data-theme] #app .mdc-kpi small { color: var(--mut); font-size: 12px; font-weight: 500; }
:root[data-theme] #app .mdc-kpi b { color: var(--ink); font-family: var(--display); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; }
:root[data-theme] #app .mdc-tbl table { font-size: 13px; }
:root[data-theme] #app .mdc-tbl th {
  color: var(--mut);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  background: var(--card2);
  border-bottom: 1px solid var(--bd);
  padding: 10px 14px;
}
:root[data-theme] #app .mdc-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--bd); }
:root[data-theme] #app .mdc-tbl tbody tr:hover { background: var(--row2) !important; }
:root[data-theme] #app .mdc-tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- 10. Status dan chip ---------- */
:root[data-theme] #app .mdc-st {
  border-radius: var(--r-s);
  font-size: 12px;
  font-weight: 500;
  min-height: 22px;
  padding: 1px 8px;
  border: 1px solid transparent;
}
:root[data-theme] #app .mdc-st.mdc-selesai,
:root[data-theme] #app .mdc-st.mdc-ok,
:root[data-theme] #app .mdc-st.mdc-ft-passed,
:root[data-theme] #app .mdc-st.mdc-lengkap { background: var(--ok-bg); color: var(--ok); }
:root[data-theme] #app .mdc-st.mdc-bermasalah,
:root[data-theme] #app .mdc-st.mdc-bad,
:root[data-theme] #app .mdc-st.mdc-ft-failed,
:root[data-theme] #app .mdc-st.mdc-rusak { background: var(--red-bg); color: var(--red); }
:root[data-theme] #app .mdc-st.mdc-diproses,
:root[data-theme] #app .mdc-st.mdc-warn,
:root[data-theme] #app .mdc-st.mdc-ft-retest,
:root[data-theme] #app .mdc-st.mdc-tidak-ada { background: var(--warn-bg); color: var(--warn); }
:root[data-theme] #app .mdc-st.mdc-info { background: var(--info-bg); color: var(--info); }
:root[data-theme] #app .mdc-st.mdc-na,
:root[data-theme] #app .mdc-st.mdc-tidak-diperlukan { background: var(--card2); color: var(--mut); border-color: var(--bd); }

/* ---------- 11. Segmen dan tab ---------- */
:root[data-theme] #app .mdc-seg { border: 1px solid var(--bd2); border-radius: var(--r-m); padding: 2px; }
:root[data-theme] #app .mdc-seg span { border-radius: var(--r-s); font-size: 13px; font-weight: 500; color: var(--mut); }
:root[data-theme] #app .mdc-seg input:checked + span { background: var(--accent-bg); color: var(--accent-ink); }
:root[data-theme] #app .dsl-tabs button.on,
:root[data-theme] #app [class*=tabs] button.on {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
:root[data-theme] #tabs { background: var(--card) !important; border-top: 1px solid var(--bd) !important; }

/* ---------- 12. Modal, toast, dan dialog ---------- */
:root[data-theme] #modal, :root[data-theme] #nsheet .nsh-box {
  background: var(--card) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-l) !important;
  box-shadow: var(--sh2) !important;
  color: var(--ink) !important;
}
:root[data-theme] #toast {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--bd) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: var(--r-m) !important;
  box-shadow: var(--sh2) !important;
}

/* ---------- 13. Teks pendukung ---------- */
:root[data-theme] #app .mdc-note, :root[data-theme] #app .mnote { color: var(--mut) !important; }
:root[data-theme] #app .mdc-err, :root[data-theme] #app .merr { color: var(--err-ink) !important; }
:root[data-theme] #app .mdc-empty { color: var(--mut) !important; }
:root[data-theme] #app .mdc-alert { background: var(--warn-bg) !important; color: var(--ink) !important; border: 1px solid var(--gold-100) !important; border-radius: var(--r-m) !important; }
:root[data-theme] #app .mdc-alert.bad { background: var(--red-bg) !important; border-color: var(--err-bd) !important; }

/* ---------- 14. Modul DCP & Daily Film Testing (struktur dan tata letak) ---------- */
.mdc-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.mdc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; flex: 1; min-width: 0; }
.mdc-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.mdc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mdc-alert { border-radius: var(--r-m); padding: 14px 16px; margin: 0 0 14px; }
.mdc-alert ul { margin: 8px 0 0; padding-left: 18px; }
.mdc-alert li { margin: 4px 0; }
.mdc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mdc-filter input { flex: 1 1 240px; }
.mdc-filter select { flex: 0 1 180px; }
.mdc-tbl { overflow-x: auto; }
.mdc-tbl table { width: 100%; border-collapse: collapse; }
.mdc-tbl th, .mdc-tbl td { text-align: left; vertical-align: middle; }
.mdc-tbl tbody tr { cursor: pointer; }
.mdc-empty { text-align: center; padding: 28px !important; }
.mdc-mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 13px; }
.mdc-st { display: inline-flex; align-items: center; }
.mdc-link { background: none; border: 0; padding: 4px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; min-height: 44px; }
.mdc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; margin: 12px 0; }
.mdc-grid small { display: block; color: var(--mut); font-size: 12px; margin-bottom: 2px; }
.mdc-grid b { font-weight: 500; word-break: break-word; }
.mdc-chk { list-style: none; padding: 0; margin: 0; }
.mdc-chk li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.mdc-chk li span { flex: 1 1 160px; }
.mdc-chk em { flex-basis: 100%; color: var(--mut); font-style: normal; font-size: 13px; }
.mdc-tl { padding-left: 18px; margin: 8px 0; }
.mdc-tl li { margin: 6px 0; }
.mdc-tl li.warn { color: var(--warn); font-weight: 500; }
.mdc-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.mdc-ph figure { margin: 0; }
.mdc-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--g100); display: block; border: 1px solid var(--bd); }
.mdc-ph figcaption { font-size: 12px; color: var(--mut); margin-top: 4px; }
.mdc-up { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-m); border: 1px dashed var(--bd2); cursor: pointer; margin: 8px 0; color: var(--mut); }
.mdc-up input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mdc-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.mdc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin-bottom: 12px; color: var(--lbl); }
.mdc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mdc-fs { padding: 14px; margin: 0 0 14px; }
.mdc-fs legend { padding: 0 6px; font-weight: 500; }
.mdc-kr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 6px 0; }
.mdc-kr > span { font-weight: 500; }
.mdc-ck { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--bd); }
.mdc-ck > span { font-size: 14px; }
.mdc-seg { display: inline-flex; padding: 3px; gap: 2px; width: max-content; }
.mdc-seg label { flex-direction: row; margin: 0; }
.mdc-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mdc-seg span { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 56px; padding: 0 12px; cursor: pointer; }
.mdc-seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.mdc-ket { min-height: 36px; }
.mdc-chkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }
.mdc-chkbox input { width: 18px; height: 18px; min-height: 0; }
.mdc-note { color: var(--mut); font-size: 13px; margin: 6px 0 12px; }
.mdc-err { color: var(--err-ink); font-size: 13px; min-height: 1em; margin: 4px 0; }

/* ---------- 14b. Form input laporan: ringkas dan minimalis (hanya tampilan; field tetap sama) ---------- */
#modal:has(.mdc-form) { max-width: 640px; width: calc(100% - 32px); padding: 24px !important; }
#modal:has(.mdc-form) > h2 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 16px; }
:root[data-theme] #modal .mdc-form label {
  gap: 6px; font-size: 12px; font-weight: 500; color: var(--mut) !important; margin-bottom: 14px; letter-spacing: .005em;
}
:root[data-theme] #modal .mdc-form input:not([type=checkbox]):not([type=radio]),
:root[data-theme] #modal .mdc-form select, :root[data-theme] #modal .mdc-form textarea {
  font-size: 14px; color: var(--ink) !important;
}
:root[data-theme] #modal .mdc-form textarea { min-height: 64px; resize: vertical; }
.mdc-row { gap: 0 14px; }
.mdc-row label { min-width: 0; }
:root[data-theme] #modal .mdc-fs {
  border: 0 !important; border-top: 1px solid var(--bd) !important; border-radius: 0 !important;
  background: transparent !important; padding: 14px 0 0 !important; margin: 6px 0 16px !important;
}
:root[data-theme] #modal .mdc-fs legend {
  font-size: 12px; font-weight: 500; color: var(--mut); padding: 0; margin-bottom: 4px; text-transform: none;
}
.mdc-ck { grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.mdc-ck:last-child { border-bottom: 0; }
.mdc-ck > span { font-size: 14px; color: var(--ink); }
.mdc-ck .mdc-ket { grid-column: 1 / -1; }
.mdc-seg { gap: 4px; padding: 0; border: 0; }
.mdc-seg span { min-width: 52px; min-height: 32px; font-size: 12px; font-weight: 500; border: 1px solid var(--bd2); border-radius: var(--r-s); color: var(--mut); background: var(--card); }
.mdc-seg input:checked + span { background: var(--accent-bg) !important; color: var(--accent-ink) !important; border-color: var(--accent-bg) !important; }
.mdc-kr { grid-template-columns: 1fr 120px; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.mdc-kr:last-child { border-bottom: 0; }
.mdc-kr > span { font-size: 14px; font-weight: 400; color: var(--ink); }
.mdc-kr input { grid-column: 1 / -1; }
.mdc-chkbox { font-size: 13px; color: var(--lbl); margin: 4px 0 12px; }
.mdc-note { font-size: 12px; margin: 0 0 12px; }
.mdc-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bd); }
#modal:has(.mdc-form) .mdc-foot .btn { min-width: 96px; }
@media (max-width: 640px) {
  .mdc-row { grid-template-columns: 1fr; }
  .mdc-kr { grid-template-columns: 1fr; }
  #modal:has(.mdc-form) { padding: 20px !important; }
}

/* judul bagian form dan input foto */
#modal .mdc-sec {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--bd);
}
#modal .mdc-sec:first-of-type { margin-top: 0; }
:root[data-theme] #modal .mdc-form input[type=file] {
  min-height: 0; padding: 10px 12px; border: 1px dashed var(--bd2) !important; background: var(--card2) !important;
  font-size: 13px; color: var(--mut) !important; cursor: pointer; width: 100%;
}
:root[data-theme] #modal .mdc-form input[type=file]::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border: 1px solid var(--bd2); border-radius: var(--r-s);
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}

/* toggle jenis laporan DCP (Keluar | Masuk), gaya pil seperti toggle tema */
:root[data-theme] #app .mdc-tg {
  display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--bd2); border-radius: 999px; background: var(--card2);
}
:root[data-theme] #app .mdc-tg label { position: relative; margin: 0; }
:root[data-theme] #app .mdc-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root[data-theme] #app .mdc-tg span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--mut); cursor: pointer; margin: 0;
}
:root[data-theme] #app .mdc-tg input:checked + span { background: var(--accent-bg); color: var(--accent-ink); }
:root[data-theme] #app .mdc-tg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* menu Download (Excel/PDF) harus selalu di atas bar navigasi bawah di smartphone */
:root[data-theme] #app #view { z-index: auto !important; }
.dlw .dlm { z-index: 80 !important; }
@media (max-width: 640px) { .dlw .dlm { left: 0 !important; right: auto !important; min-width: 200px; top: auto !important; bottom: calc(100% + 6px) !important; } }

/* ---------- 15. Responsif (tanpa scroll horizontal di layar sempit) ---------- */
@media (max-width: 640px) {
  .mdc-top { flex-direction: column; align-items: stretch; }
  .mdc-acts { width: 100%; }
  .mdc-acts .btn { flex: 1 1 0; }
  .mdc-kpis { grid-template-columns: repeat(2, 1fr); }
  .mdc-kpi b { font-size: 24px; }
  .mdc-row, .mdc-kr { grid-template-columns: 1fr; }
  .mdc-filter select { flex: 1 1 140px; }
  .mdc-tbl th:nth-child(5), .mdc-tbl td:nth-child(5),
  .mdc-tbl th:nth-child(6), .mdc-tbl td:nth-child(6) { display: none; }
  .mdc-tbl.ft th:nth-child(4), .mdc-tbl.ft td:nth-child(4),
  .mdc-tbl.ft th:nth-child(5), .mdc-tbl.ft td:nth-child(5) { display: none; }
  :root[data-theme] #app #phero { padding: 16px 16px !important; }
  :root[data-theme] #app #phero h1 { font-size: 26px; }
}

/* ---------- 15b. Halaman login: latar polos mengikuti tema, tanpa foto ---------- */
#login .lscene, #login .lphoto, #login picture { display: none !important; }
#login { background: var(--bg) !important; }
#login::before, #login::after, :root[data-theme] #login .lhero::before { display: none !important; content: none !important; background: none !important; }
:root[data-theme] #login .lhero::before { display: block !important; content: "" !important; background: var(--gold) !important; }
:root[data-theme] #login .lbox {
  background: var(--card) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-l) !important;
  box-shadow: none !important;
  padding: 32px !important;
  animation: none !important;
}
:root[data-theme] #login .lbox input {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: var(--r-m) !important;
  caret-color: var(--gold) !important;
}
:root[data-theme] #login .lbox input:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold) !important; }
:root[data-theme] #login .lbox .hello { color: var(--gold-lo) !important; }
:root[data-theme] #login .lbox h2 { color: var(--ink) !important; }
:root[data-theme] #login .lbox p { color: var(--mut) !important; }
:root[data-theme] #login .lbox .lfoot, :root[data-theme] #login .lfoot { color: var(--mut) !important; }
#login .lhero {
  background: var(--bg) !important;
  background-image: none !important;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  border-right: 1px solid var(--bd);
}
#login .lhero::before {
  content: "";
  position: absolute;
  left: 48px;
  top: 48px;
  width: 56px;
  height: 3px;
  background: var(--gold);
}
#login .lhero .llogo { max-width: 200px; height: auto; margin-bottom: auto; filter: none !important; }
#login .lpane { background: var(--bg) !important; display: flex; align-items: center; justify-content: center; padding: 32px; }
#login .lbox { width: 100%; max-width: 380px; }
#login .lbox h2 { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; color: var(--ink); }
#login .lbox p { color: var(--mut); font-size: 14px; }
#login .lfoot { color: var(--mut); font-size: 12px; margin-top: 24px; }
@media (max-width: 860px) {
  #login .lhero { min-height: 0; padding: 24px; border-right: 0; border-bottom: 1px solid var(--bd); }
  #login .lhero::before { left: 24px; top: 24px; }
}

/* penimpa login dengan spesifisitas tertinggi (menutup lapisan kaca putih lama di kedua mode) */
html:root[data-theme] #login .lbox input {
  background: var(--card) !important; background-color: var(--card) !important;
  color: var(--ink) !important; border: 1px solid var(--bd2) !important;
}
html:root[data-theme] #login .lbox input::placeholder { color: var(--ph) !important; opacity: 1; }
html:root[data-theme] #login .lbox .btn.sec, html:root[data-theme] #login .lbox #tp {
  background: var(--card) !important; background-color: var(--card) !important;
  color: var(--ink) !important; border: 1px solid var(--bd2) !important;
}
html:root[data-theme] #login .lbox #lbtn, html:root[data-theme] #login .lbox .btn:not(.sec) {
  background: var(--accent-bg) !important; background-color: var(--accent-bg) !important;
  color: var(--accent-ink) !important; border: 1px solid var(--accent-bg) !important;
}
html:root[data-theme=dark] #login .lbox #lbtn { color: #f1f8f3 !important; }
html:root[data-theme] #login .lbox label { color: var(--lbl) !important; }
html:root[data-theme] #login .lbox .hello, html:root[data-theme] #login .lbox small { color: var(--mut) !important; }

/* ---------- 16. Cetak ---------- */
@media print {
  :root[data-theme] #app #side, :root[data-theme] #app #main > header,
  .mdc-acts, .mdc-filter, .mdc-pdel, #tabs, #toast { display: none !important; }
  html body, :root[data-theme] #app #main { background: #fff !important; color: #000 !important; }
  .mdc-kpi, .mdc-tbl, .mdc-fs, :root[data-theme] #app .card { border-color: #999 !important; background: #fff !important; box-shadow: none !important; }
  .mdc-kpi b { color: #000 !important; }
}