/* Ore Organizer, Paket 2. Dimuat sesudah portal.css. */

/* ---- kalender: acara (navy) dan task bertenggat (teal) ---- */
.calgrid button.tk { background: #E0F2F1; color: #0B5F66; box-shadow: inset 0 0 0 2px #1B9AA3; }
.calgrid button.tk:hover { background: #CBE9E7; }
.calgrid button.tkdone { background: #F1F3F6; color: var(--silver-d); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.calgrid button.both { position: relative; }
.calgrid button.both::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3CC4CC; }
.calgrid button.today { box-shadow: inset 0 0 0 2px var(--silver-d); }
.calgrid button.tk.today { box-shadow: inset 0 0 0 2px #0B5F66; }
.cal-legend { display: flex; gap: 16px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-legend .lg-ev { background: var(--navy); }
.cal-legend .lg-tk { background: #E0F2F1; box-shadow: inset 0 0 0 2px #1B9AA3; }
.p2-day h3 { margin: 12px 0 6px; font-size: 1.2rem; }
.p2-struck { text-decoration: line-through; color: var(--muted); }

/* ---- vendor ---- */
.p2-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.p2-filters input { flex: 1; min-width: 200px; }
.p2-lines div { white-space: nowrap; }
.p2-contacts { display: grid; gap: 6px; }
.p2-crow { display: grid; grid-template-columns: 1fr 1fr 1fr 34px; gap: 6px; }
.p2-crow .btn { padding: 0; }
.p2-check { display: flex; align-items: center; gap: 8px; }
.p2-check input { width: 18px; height: 18px; accent-color: var(--navy); }
.p2-check > span { margin: 0; }
.p2-contactlist { list-style: none; padding: 0; margin: 0 0 14px; }
.p2-contactlist li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.p2-stars { color: #C98A0B; letter-spacing: 1px; }
.p2-stars.big { font-size: 1.4rem; }
.related { margin-top: 16px; }
.related h3 { margin: 0 0 6px; font-size: 1.15rem; }

/* ---- pasca-acara ---- */
.p2-check-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.p2-check-list li { display: flex; gap: 10px; align-items: baseline; }
.p2-mk { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.p2-ok .p2-mk { background: #E3F2EA; color: var(--ok); }
.p2-todo .p2-mk { background: var(--warn-bg); color: var(--warn); }
.p2-fb-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.p2-h4 { margin: 12px 0 2px; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.p2-text { margin: 0; white-space: pre-wrap; word-break: break-word; }
.p2-inc { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.p2-inc:last-child { border-bottom: 0; }
.p2-inc .p2-text { margin: 6px 0 8px; }

/* ---- form kontrak ---- */
.p2-terms { display: grid; gap: 6px; }
.p2-trow { display: grid; grid-template-columns: 1.3fr 70px 140px 1fr 34px; gap: 6px; }
.p2-trow .btn { padding: 0; }
@media (max-width: 640px) {
  .p2-crow, .p2-trow { grid-template-columns: 1fr 1fr; }
  .p2-trow input.t-label, .p2-trow input.t-note { grid-column: 1 / -1; }
}

/* ---- dokumen cetak: invoice, kontrak, daftar vendor ---- */
@media print {
  body.doc-mode #print-root { font-family: var(--sans); color: #111; font-size: 10.5pt; line-height: 1.45; }
  .doc h1, .doc h3, .doc h4 { font-family: var(--serif); color: #0F1F3D; margin: 0; border: 0; padding: 0; }
  .doc p { margin: 0 0 6px; }
  .doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; border-bottom: 2px solid #0F1F3D; padding-bottom: 5mm; margin-bottom: 6mm; }
  .doc-contract > .doc-head { border-bottom: 2px solid #0F1F3D; padding-bottom: 4mm; margin-bottom: 6mm; }
  .doc-name { font: 700 20pt var(--serif); color: #0F1F3D; line-height: 1.1; }
  .doc-legal { font-weight: 600; margin-top: 2px; }
  .doc-addr { font-size: 9pt; color: #44505f; }
  .doc-title { text-align: right; }
  #print-root .doc-title h1 { font-size: 26pt; letter-spacing: .08em; }
  .doc-stamp { display: inline-block; margin-top: 4px; padding: 2px 12px; border: 2px solid; border-radius: 4px; font-weight: 700; letter-spacing: .12em; font-size: 10pt; transform: rotate(-4deg); }
  .doc-stamp.ok { color: #1F7A4D; } .doc-stamp.bad { color: #B3261E; } .doc-stamp.mute { color: #8C95A3; }
  .doc-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10mm; margin-bottom: 5mm; }
  .doc-lbl { font-size: 8pt; text-transform: uppercase; letter-spacing: .08em; color: #6b7686; margin-bottom: 2px; }
  .doc-strong { font-weight: 700; font-size: 12pt; }
  .doc-event { margin-bottom: 5mm; padding: 2.5mm 3mm; background: #F3F5F8; border-radius: 3px; }
  .doc table, #print-root .doc table { width: 100%; border-collapse: collapse; font-size: 10pt; margin: 0 0 4px; }
  .doc td, .doc th, #print-root .doc td, #print-root .doc th { padding: 4px 6px; border: 0; text-align: left; vertical-align: top; background: none; }
  .doc-kv td:first-child { color: #6b7686; width: 34%; white-space: nowrap; }
  .doc-items th, #print-root .doc-items th { background: #0F1F3D; color: #fff; font-weight: 600; font-size: 9pt; }
  .doc-items td, #print-root .doc-items td { border-bottom: 1px solid #D5DAE1; }
  .doc-items .num, .doc .num { text-align: right; white-space: nowrap; }
  .doc-items .c { text-align: center; width: 8mm; }
  .doc-items tr.total td { font-weight: 700; border-top: 2px solid #0F1F3D; border-bottom: 0; }
  .doc-words { margin: 4mm 0; padding: 2.5mm 3mm; border-left: 3px solid #0F1F3D; background: #F3F5F8; }
  .doc-hist { font-size: 9pt; color: #44505f; margin-bottom: 4mm; }
  .doc-lower { align-items: end; margin-top: 6mm; break-inside: avoid; }
  .doc-pay { border: 1.5px solid #0F1F3D; border-radius: 4px; padding: 3mm 4mm; margin: 2mm 0 4mm; break-inside: avoid; }
  .doc-pay td:first-child { color: #6b7686; width: 30%; white-space: nowrap; }
  .doc-acc { font: 700 13pt ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
  .doc-terms { font-size: 9pt; color: #44505f; white-space: pre-line; margin-top: 3mm; }
  .doc-sig { text-align: center; break-inside: avoid; }
  .doc-sig-role { font-weight: 700; }
  .doc-sig-space { height: 22mm; display: grid; place-items: center; }
  .doc-sig-name { font-weight: 700; text-decoration: underline; }
  .doc-materai { display: inline-block; padding: 3mm 5mm; border: 1px dashed #8C95A3; color: #8C95A3; font-size: 8pt; }
  .doc-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: 10mm; break-inside: avoid; }

  .doc-center { text-align: center; }
  #print-root .doc-contract h1 { font-size: 16pt; letter-spacing: .05em; margin: 0; }
  .doc-sub { font-weight: 600; margin-top: 1mm; }
  .doc-nomor { margin-bottom: 6mm; color: #44505f; }
  .doc-party td { padding: 2px 4px; }
  .doc-party td.n { width: 9mm; font-weight: 700; }
  .doc-pasal { margin-top: 5mm; break-inside: auto; }
  #print-root .doc-pasal h3 { text-align: center; font-size: 11pt; break-after: avoid; }
  #print-root .doc-pasal h4 { text-align: center; font-size: 11pt; margin-bottom: 2mm; break-after: avoid; }
  .doc-pasal ol { margin: 0 0 6px; padding-left: 7mm; }
  .doc-pasal li { margin-bottom: 2px; }
  .doc-lines p { margin-bottom: 3px; }
  .doc-small { font-size: 9pt; color: #44505f; }

  .doc-vtable { border: 1px solid #000; }
  .doc-vtable th, #print-root .doc-vtable th { background: #D9D9D9; text-align: center; font: 700 12pt var(--serif); padding: 5px; color: #000; border: 1px solid #000; }
  .doc-vtable td, #print-root .doc-vtable td { border: 1px solid #000; padding: 6px 8px; font: 11pt/1.3 "Times New Roman", Times, serif; }
  #print-root .doc-vtable td.v-name { text-align: center; font-weight: 700; width: 34%; }
  #print-root .doc-vtable td.v-role { width: 28%; }
  .doc-vtable tr { break-inside: avoid; }
}

/* =====================================================================
   Lapisan dekorasi: nuansa navy, ivory, dan emas champagne.
   Hanya tampilan layar; cetak tidak terpengaruh. Hapus blok ini untuk kembali ke tampilan sebelumnya.
   ===================================================================== */
@media screen {
  :root {
    --gold: #B08D4F; --gold-d: #8E6F37; --gold-l: #E6D3A8; --ivory: #FBF8F2; --ivory-d: #F3EDE0;
    --shadow-s: 0 1px 2px rgba(15, 31, 61, .05), 0 4px 14px rgba(15, 31, 61, .05);
    --shadow-m: 0 2px 4px rgba(15, 31, 61, .06), 0 14px 36px rgba(15, 31, 61, .10);
  }
  body { background:
      radial-gradient(900px 420px at 100% -10%, rgba(176, 141, 79, .09), transparent 60%),
      radial-gradient(700px 380px at -10% 110%, rgba(27, 47, 87, .06), transparent 60%),
      var(--ivory); }
  ::selection { background: var(--gold-l); color: var(--navy); }

  /* ---- login ---- */
  .auth { background:
      radial-gradient(600px 420px at 85% 8%, rgba(176, 141, 79, .22), transparent 65%),
      radial-gradient(700px 500px at 5% 95%, rgba(61, 90, 150, .35), transparent 60%),
      linear-gradient(160deg, #0A1731 0%, #0F1F3D 55%, #16295A 100%);
    position: relative; overflow: hidden; }
  .auth::before, .auth::after { content: ''; position: absolute; border: 1px solid rgba(230, 211, 168, .18); border-radius: 50%; pointer-events: none; }
  .auth::before { width: 640px; height: 640px; top: -260px; right: -200px; box-shadow: 0 0 0 40px rgba(230, 211, 168, .04), 0 0 0 90px rgba(230, 211, 168, .025); }
  .auth::after { width: 460px; height: 460px; bottom: -220px; left: -160px; box-shadow: 0 0 0 36px rgba(230, 211, 168, .04); }
  .auth main { position: relative; z-index: 1; }
  .brand h1 { font-size: 2.7rem; letter-spacing: .06em; background: linear-gradient(180deg, #fff 30%, var(--gold-l)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .brand h1::after { content: '✦'; display: block; margin: 10px auto 0; font-size: .8rem; letter-spacing: 0; color: var(--gold);
    background: none; -webkit-text-fill-color: var(--gold); }
  .brand p { letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--gold-l); margin-top: 8px; }
  .auth .card { border: 1px solid rgba(230, 211, 168, .55); border-radius: 16px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(176, 141, 79, .35); padding: 30px 28px; }

  /* ---- sidebar ---- */
  .side { background:
      radial-gradient(260px 220px at 0% 0%, rgba(176, 141, 79, .16), transparent 70%),
      linear-gradient(180deg, #0C1A36 0%, #0F1F3D 60%, #13264C 100%);
    box-shadow: 1px 0 0 rgba(230, 211, 168, .25), 8px 0 30px rgba(15, 31, 61, .12); }
  .logo { font-size: 1.6rem; letter-spacing: .03em; white-space: nowrap; padding-bottom: 24px; position: relative; margin-bottom: 8px; }
  .logo::after { content: ''; position: absolute; left: 10px; right: 28px; bottom: 10px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent); }
  .side nav a { position: relative; transition: background .2s, color .2s, padding-left .2s; letter-spacing: .01em; }
  .side nav a:hover { background: rgba(230, 211, 168, .08); color: #fff; padding-left: 15px; }
  .side nav a.on { background: linear-gradient(90deg, rgba(176, 141, 79, .28), rgba(27, 47, 87, .5)); color: #fff; }
  .side nav a.on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--gold-l), var(--gold)); }
  .me { border-top-color: rgba(230, 211, 168, .22); }
  .me .btn:hover { border-color: var(--gold); color: #fff; background: rgba(176, 141, 79, .12); }

  /* ---- top bar ---- */
  .top { background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(176, 141, 79, .22); box-shadow: 0 1px 0 #fff inset, 0 6px 20px rgba(15, 31, 61, .04); }
  .sbox input { background: var(--ivory); border-color: var(--ivory-d); border-radius: 999px; padding-left: 18px; transition: box-shadow .2s, border-color .2s; }
  .sbox input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 79, .18); }

  /* ---- judul halaman ---- */
  .pagehead h2 { font-size: 2.3rem; position: relative; padding-bottom: 10px; }
  .pagehead h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-l)); border-radius: 2px; }
  .sec h3 { position: relative; }
  .sec h3::before { content: '◆'; font-size: .5rem; color: var(--gold); margin-right: 9px; vertical-align: .35em; }

  /* ---- kartu dan tabel ---- */
  .box, .tablewrap, .kpi, .pcard, .card { box-shadow: var(--shadow-s); border-color: #E7E2D6; }
  .pcard { border-radius: 16px; position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, #FFFDFA); }
  .pcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold) 55%, var(--gold-l)); }
  .phead h2 { letter-spacing: .01em; }
  .box, .tablewrap { border-radius: 14px; }
  th { background: var(--ivory); color: var(--gold-d); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; border-bottom-color: #E7E2D6; }
  td { border-bottom-color: #EFEBE1; }
  tbody tr { transition: background .15s; }
  tbody tr:hover { background: #FBF6EA; }
  .rows .row:hover { background: #FBF6EA; }

  .kpi { position: relative; overflow: hidden; border-radius: 14px; padding: 18px 20px; transition: transform .2s, box-shadow .2s; }
  .kpi::after { content: ''; position: absolute; right: -26px; top: -26px; width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, rgba(176, 141, 79, .18), transparent 70%); }
  .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
  .kpi b { font-size: 2.8rem; background: linear-gradient(180deg, var(--navy) 40%, var(--navy2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .kpi.alert b { background: none; color: var(--danger); }
  .kpi span { text-transform: uppercase; letter-spacing: .09em; font-size: .7rem; font-weight: 600; }

  .date { background: linear-gradient(160deg, #162A52, var(--navy)); border: 1px solid rgba(230, 211, 168, .35); box-shadow: 0 4px 10px rgba(15, 31, 61, .2); }
  .date small { color: var(--gold-l); }

  /* ---- tombol ---- */
  .btn, .auth button { background: linear-gradient(180deg, #1B2F57, var(--navy)); border-color: var(--navy);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 10px rgba(15, 31, 61, .18); transition: transform .15s, box-shadow .2s, filter .2s; letter-spacing: .01em; }
  .btn:hover, .auth button:hover { background: linear-gradient(180deg, #223A6A, #132646); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 8px 18px rgba(15, 31, 61, .24); }
  .btn:active { transform: translateY(0); }
  .btn.ghost, .auth button.ghost { background: #fff; box-shadow: none; border-color: #E2DCCB; color: var(--navy); }
  .btn.ghost:hover, .auth button.ghost:hover { background: var(--ivory); border-color: var(--gold); transform: none; box-shadow: 0 2px 8px rgba(176, 141, 79, .18); }
  .btn.danger { background: #fff; box-shadow: none; }
  .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* ---- tab project ---- */
  .tabs { border-bottom-color: #E7E2D6; }
  .tabs button { transition: color .2s, border-color .2s; letter-spacing: .01em; }
  .tabs button:hover { color: var(--gold-d); }
  .tabs button.on { color: var(--navy); border-bottom-color: var(--gold); font-weight: 700; }

  /* ---- badge, progress ---- */
  .badge { letter-spacing: .02em; }
  .badge.navy { background: linear-gradient(180deg, #1B2F57, var(--navy)); }
  .bar { background: #EFEAD9; height: 7px; }
  .bar.navy i { background: linear-gradient(90deg, var(--navy2), var(--gold)); }

  /* ---- kalender ---- */
  .cal { background: linear-gradient(180deg, #fff, #FFFDFA); }
  .calhead b { font-size: 1.45rem; }
  .calgrid .dow { color: var(--gold-d); letter-spacing: .08em; }
  .calgrid button { background: linear-gradient(160deg, #1B2F57, var(--navy)); box-shadow: 0 3px 8px rgba(15, 31, 61, .22); transition: transform .15s; }
  .calgrid button:hover { transform: translateY(-1px) scale(1.04); }
  .calgrid .today { box-shadow: inset 0 0 0 2px var(--gold); }
  .calgrid button.today { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
  .calgrid button.tk { box-shadow: inset 0 0 0 2px #1B9AA3; }
  .calgrid button.tk.today { box-shadow: inset 0 0 0 2px #0B5F66, 0 0 0 2px #fff, 0 0 0 4px var(--gold); }

  /* ---- dialog ---- */
  dialog { border: 1px solid rgba(176, 141, 79, .4); border-radius: 18px; box-shadow: 0 30px 80px rgba(8, 16, 36, .45); overflow: auto; }
  dialog::backdrop { background: radial-gradient(circle at 50% 30%, rgba(15, 31, 61, .55), rgba(8, 16, 36, .75)); backdrop-filter: blur(3px); }
  dialog[open] { animation: dlg-in .22s ease-out; }
  .dform { position: relative; }
  .dform::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold) 60%, var(--gold-l)); }
  .dhead h2 { font-size: 1.8rem; }
  input, select, textarea { border-color: #E2DCCB; transition: border-color .2s, box-shadow .2s; }
  input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 79, .2); }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

  /* ---- halaman muncul halus (hanya saat pindah halaman, bukan tiap data dimuat ulang) ---- */
  #view.route-fresh > * { animation: view-in .4s cubic-bezier(.22, .8, .3, 1) both; }
  #view.route-fresh > *:nth-child(2) { animation-delay: .05s; }
  #view.route-fresh > *:nth-child(3) { animation-delay: .1s; }
  #view.route-fresh > *:nth-child(4) { animation-delay: .15s; }
  @keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ---- pindah sub tab project: garis emas meluncur, isi panel masuk dari arah tab ---- */
  .tabs { position: relative; gap: 4px; }
  .tabs button { position: relative; border-bottom-color: transparent !important; border-radius: 8px 8px 0 0;
    transition: color .25s ease, background-color .25s ease, transform .15s ease; }
  .tabs button:hover { background: rgba(176, 141, 79, .08); }
  .tabs button:active { transform: scale(.97); }
  .tabs button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-l)); transform: scaleX(0); transform-origin: center; opacity: 0;
    transition: transform .35s cubic-bezier(.22, .8, .3, 1), opacity .25s ease; }
  .tabs button.on::after { transform: scaleX(1); opacity: 1; }
  .tabs + div { min-height: 340px; }
  .tabs + div[data-anim] > * { animation: tab-in .38s cubic-bezier(.22, .8, .3, 1) both; }
  .tabs + div[data-anim][data-dir="prev"] > * { animation-name: tab-in-prev; }
  .tabs + div[data-anim] > *:nth-child(2) { animation-delay: .05s; }
  .tabs + div[data-anim] > *:nth-child(3) { animation-delay: .1s; }
  .tabs + div[data-anim] > *:nth-child(n+4) { animation-delay: .14s; }
  @keyframes tab-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
  @keyframes tab-in-prev { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
  /* isi yang menyusul setelah data dimuat muncul dengan fade lembut, kerangka "Memuat..." berdenyut */
  .tabs + div[data-anim] .ws > * { animation: soft-in .3s ease-out both; }
  @keyframes soft-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .ws > p.empty { position: relative; color: transparent; min-height: 150px; border-radius: 14px; overflow: hidden;
    background: linear-gradient(90deg, rgba(176, 141, 79, .06) 0%, rgba(176, 141, 79, .16) 50%, rgba(176, 141, 79, .06) 100%) 0 0 / 220% 100%;
    animation: shimmer 1.2s linear infinite; }
  @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }

  /* ---- scrollbar ---- */
  * { scrollbar-width: thin; scrollbar-color: #CFC6AF transparent; }

  /* ---- pasca-acara dan vendor ---- */
  .p2-stars { color: var(--gold); }
  .p2-ok .p2-mk { background: #E3F2EA; }
  .p2-close { background: linear-gradient(180deg, #fff, #FFFDFA); border-top: 3px solid var(--gold); }
  .soon { background: radial-gradient(400px 160px at 50% 0%, rgba(176, 141, 79, .08), transparent 70%), #fff; }

  @media (prefers-reduced-motion: reduce) {
    #view.route-fresh > *, dialog[open], .tabs + div > *, .tabs + div .ws > *, .ws > p.empty { animation: none !important; }
    .tabs button::after { transition: none; }
    .btn, .kpi, .calgrid button, .side nav a { transition: none; }
  }
}

/* =====================================================================
   Mode gelap. Aktif bila <html data-theme="dark">; tombol pengalih ada di sidebar dan halaman login.
   ===================================================================== */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 999px; padding: 6px 12px 6px 8px;
  font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .06); color: var(--silver); border: 1px solid rgba(201, 207, 216, .3); width: auto; margin: 0; }
.theme-toggle:hover { border-color: var(--gold, #B08D4F); color: #fff; }
.theme-toggle .tt-track { position: relative; width: 34px; height: 18px; border-radius: 99px; background: rgba(201, 207, 216, .3); transition: background .25s; flex: none; }
.theme-toggle .tt-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 9px; line-height: 1; transition: transform .25s; color: #7a5a1c; }
html[data-theme="dark"] .theme-toggle .tt-track { background: linear-gradient(90deg, #B08D4F, #E6D3A8); }
html[data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(16px); background: #0F1F3D; color: #E6D3A8; }
.me .theme-toggle { width: 100%; justify-content: flex-start; margin-top: 10px; }
.auth .theme-fixed { position: fixed; top: 16px; right: 16px; z-index: 5; }

@media screen {
  html[data-theme="dark"] { color-scheme: dark;
    --bg: #0A1020; --card: #121B31; --text: #E9ECF3; --muted: #9AA5BA; --line: #263250; --soft: #1A2542;
    --ivory: #0D1527; --ivory-d: #1B2540; --danger: #FF8F86; --ok: #74D6A6; --warn: #E8C373; --warn-bg: #3A2F14;
    --silver-d: #8F9BB3; --gold-d: #D8BE86;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25); --shadow-m: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .4); }
  html[data-theme="dark"] body { background:
      radial-gradient(900px 420px at 100% -10%, rgba(176, 141, 79, .10), transparent 60%),
      radial-gradient(700px 380px at -10% 110%, rgba(61, 90, 150, .14), transparent 60%), var(--bg); color: var(--text); }
  html[data-theme="dark"] ::selection { background: rgba(230, 211, 168, .35); color: #fff; }

  /* permukaan */
  html[data-theme="dark"] .box, html[data-theme="dark"] .tablewrap, html[data-theme="dark"] .kpi, html[data-theme="dark"] .card,
  html[data-theme="dark"] .pcard, html[data-theme="dark"] .cal, html[data-theme="dark"] .p2-close, html[data-theme="dark"] dialog { border-color: #2A3757; }
  html[data-theme="dark"] .pcard, html[data-theme="dark"] .cal, html[data-theme="dark"] .p2-close { background: linear-gradient(180deg, #14203A, #111A2F); }
  html[data-theme="dark"] .soon { background: radial-gradient(400px 160px at 50% 0%, rgba(176, 141, 79, .12), transparent 70%), var(--card); }
  html[data-theme="dark"] .top { background: rgba(14, 22, 40, .85); border-bottom-color: rgba(176, 141, 79, .25); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
  html[data-theme="dark"] .sbox input { background: var(--ivory); border-color: var(--line); }
  html[data-theme="dark"] .sres { background: #141E36; border-color: var(--line); }
  html[data-theme="dark"] .side { background: radial-gradient(260px 220px at 0% 0%, rgba(176, 141, 79, .14), transparent 70%), linear-gradient(180deg, #070C18, #0A1223 60%, #0C172D); }
  html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0D1527; border-color: var(--line); color: var(--text); }
  html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #66728A; }
  html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--gold); }
  html[data-theme="dark"] th { background: #0F1830; color: var(--gold-l); border-bottom-color: var(--line); }
  html[data-theme="dark"] td { border-bottom-color: #1D2945; }
  html[data-theme="dark"] tbody tr:hover, html[data-theme="dark"] .rows .row:hover { background: #18233F; }
  html[data-theme="dark"] .tabs { border-bottom-color: var(--line); }
  html[data-theme="dark"] .tabs button { color: var(--muted); }
  html[data-theme="dark"] .tabs button:hover { color: var(--gold-l); }
  html[data-theme="dark"] .tabs button.on { color: #fff; border-bottom-color: var(--gold); }
  html[data-theme="dark"] .back:hover { color: var(--gold-l); }
  html[data-theme="dark"] .pagehead h2::after { background: linear-gradient(90deg, var(--gold), transparent); }

  /* tombol */
  html[data-theme="dark"] .btn, html[data-theme="dark"] .auth button { background: linear-gradient(180deg, #E6D3A8, #C2A163); color: #1A1305; border-color: #C2A163;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px rgba(0, 0, 0, .35); }
  html[data-theme="dark"] .btn:hover, html[data-theme="dark"] .auth button:hover { background: linear-gradient(180deg, #F0E0BA, #CDAE72); }
  html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .auth button.ghost { background: transparent; color: var(--text); border-color: #36456B; box-shadow: none; }
  html[data-theme="dark"] .btn.ghost:hover, html[data-theme="dark"] .auth button.ghost:hover { background: rgba(230, 211, 168, .08); border-color: var(--gold); }
  html[data-theme="dark"] .btn.danger { background: transparent; color: var(--danger); box-shadow: none; }
  html[data-theme="dark"] .auth .ptabs { background: #0D1527; }
  html[data-theme="dark"] .auth .ptabs button { background: transparent; color: var(--muted); box-shadow: none; }
  html[data-theme="dark"] .auth .ptabs button.on { background: linear-gradient(180deg, #E6D3A8, #C2A163); color: #1A1305; }
  html[data-theme="dark"] .auth .reg-link a, html[data-theme="dark"] .act-body a, html[data-theme="dark"] .tag { color: var(--gold-l); }
  html[data-theme="dark"] .tag.late { color: var(--danger); }

  html[data-theme="dark"] .me .btn { background: transparent; color: var(--silver); border-color: rgba(201, 207, 216, .35); box-shadow: none; }
  html[data-theme="dark"] .me .btn:hover { background: rgba(176, 141, 79, .14); border-color: var(--gold); color: #fff; transform: none; }
  html[data-theme="dark"] dialog a:not(.btn), html[data-theme="dark"] #view a:not(.btn):not(.back) { color: var(--gold-l); }

  /* kartu angka, badge, kalender */
  html[data-theme="dark"] .kpi b { background: linear-gradient(180deg, #fff 30%, var(--gold-l)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  html[data-theme="dark"] .kpi.alert b { background: none; color: var(--danger); }
  html[data-theme="dark"] .badge { background: var(--soft); color: var(--text); border-color: #2F3E63; }
  html[data-theme="dark"] .badge.navy { background: linear-gradient(180deg, #2C4B88, #1F3868); color: #fff; }
  html[data-theme="dark"] .badge.ok { background: #14301F; color: var(--ok); }
  html[data-theme="dark"] .badge.bad { background: #3A1B1A; color: var(--danger); }
  html[data-theme="dark"] .badge.warn { background: var(--warn-bg); color: var(--warn); }
  html[data-theme="dark"] .badge.mute { color: var(--muted); }
  html[data-theme="dark"] .bar { background: #1B2745; }
  html[data-theme="dark"] .date { background: linear-gradient(160deg, #1D3563, #14264A); }
  html[data-theme="dark"] .calgrid button { background: linear-gradient(160deg, #2F5399, #1F3868); color: #fff; }
  html[data-theme="dark"] .calgrid button.tk { background: #0F3A3F; color: #7FE0E6; box-shadow: inset 0 0 0 2px #1B9AA3; }
  html[data-theme="dark"] .calgrid button.tkdone { background: #172240; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
  html[data-theme="dark"] .calgrid button.tk:hover { background: #14494F; }
  html[data-theme="dark"] .calgrid .today { box-shadow: inset 0 0 0 2px var(--gold); }
  html[data-theme="dark"] .cal-legend .lg-ev { background: #2F5399; }
  html[data-theme="dark"] .cal-legend .lg-tk { background: #0F3A3F; }
  html[data-theme="dark"] .p2-ok .p2-mk { background: #14301F; }
  html[data-theme="dark"] .p2-todo .p2-mk { background: var(--warn-bg); }
  html[data-theme="dark"] .ws-thumb { background: var(--card); }
  html[data-theme="dark"] .ws-flash { background: #14301F; color: var(--ok); }
  html[data-theme="dark"] .ws-pdf { color: var(--gold-l); }

  /* dialog */
  html[data-theme="dark"] dialog { background: var(--card); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
  html[data-theme="dark"] dialog::backdrop { background: radial-gradient(circle at 50% 30%, rgba(5, 9, 20, .7), rgba(2, 5, 12, .88)); }
  html[data-theme="dark"] .x { color: var(--muted); }

  /* login */
  html[data-theme="dark"] .auth { background:
      radial-gradient(600px 420px at 85% 8%, rgba(176, 141, 79, .2), transparent 65%),
      radial-gradient(700px 500px at 5% 95%, rgba(61, 90, 150, .22), transparent 60%), linear-gradient(160deg, #050A15 0%, #0A1223 55%, #0E1A38 100%); }
  html[data-theme="dark"] .auth .card { background: #101A30; box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 0 4px #101A30, inset 0 0 0 5px rgba(176, 141, 79, .35); border-color: rgba(230, 211, 168, .35); }
}

/* tombol mode di halaman login: kalahkan aturan `.auth button` agar tetap berbentuk pil kecil */
html .auth button.theme-toggle, html[data-theme="dark"] .auth button.theme-toggle {
  position: fixed; top: 16px; right: 16px; width: auto; margin: 0; padding: 6px 12px 6px 8px; transform: none;
  background: rgba(255, 255, 255, .08); color: #E6D3A8; border: 1px solid rgba(230, 211, 168, .4); box-shadow: none; backdrop-filter: blur(6px);
}
html .auth button.theme-toggle:hover, html[data-theme="dark"] .auth button.theme-toggle:hover { background: rgba(230, 211, 168, .16); color: #fff; transform: none; }

/* ---------- Arsip: dokumen dan template ---------- */
.arc-docs { margin-top: 8px; }
.arc-seg { display: inline-flex; border: 1px solid var(--line, #d9d4c8); border-radius: 999px; padding: 3px; gap: 2px; background: var(--paper, #fff); }
.arc-seg button { border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem; color: inherit; transition: background .2s, color .2s; }
.arc-seg button.on { background: #1d2a44; color: #fff; }
.arc-name { display: inline-flex; align-items: center; gap: 10px; }
.arc-ext { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .05em; padding: 5px 7px; border-radius: 6px; background: #efe7d6; color: #6b5526; min-width: 38px; text-align: center; }
html[data-theme="dark"] .arc-seg { background: #1b2130; border-color: #333b50; }
html[data-theme="dark"] .arc-seg button.on { background: #b08d4f; color: #1a1a1a; }
html[data-theme="dark"] .arc-ext { background: #2b2618; color: #e6d3a8; }
.arc-docs .p2-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.arc-docs .p2-filters input { flex: 1 1 220px; min-width: 0; }
.arc-docs .p2-filters select { flex: 0 1 200px; }
#dlg .related li a { color: #7a5f2a; font-weight: 600; text-decoration: none; margin-left: 6px; }
#dlg .related li a:hover { text-decoration: underline; }
html[data-theme="dark"] #dlg .related li a { color: #e6d3a8; }