/*!
 * aic-tema.css — Mode gelap app.teknosaceh.com
 *
 * CARA KERJANYA, dan kenapa begini:
 *
 * Tema terang aplikasi ini tersebar di dua tempat — <style> sepanjang 171 baris
 * di layouts/app.blade.php, dan Hope UI (Bootstrap) di hope-ui.min.css. Menulis
 * ulang keduanya berarti menyentuh ratusan baris yang sekarang sudah benar, di
 * aplikasi yang dipakai setiap hari. Karena itu berkas ini TIDAK mengubah tema
 * terang sama sekali: seluruh aturannya diawali `html.dark`, sehingga hanya
 * hidup ketika kelas itu terpasang.
 *
 * Awalan `html.dark` juga menyelesaikan urusan urutan muat: kekhususannya
 * (0,2,1) mengalahkan `.aic-rail` (0,1,0) tanpa satu pun !important, jadi
 * berkas ini boleh dimuat sebelum maupun sesudah <style> bawaan.
 *
 * PALETNYA hitam pekat, mengikuti Threads: latar #000000, permukaan #101215.
 * Kartu tetap terbaca sebagai kartu karena permukaannya diangkat sedikit di
 * atas latar — itulah yang memberi kedalaman, bukan garis tebal. Di layar OLED
 * latar hitam benar-benar mati (piksel padam), jadi kontrasnya paling dalam.
 *
 * Nilai teks mengikuti WCAG AA pada latarnya masing-masing:
 *   --aic-ink   #e6e8eb di atas #000000  = 16,4:1
 *   --aic-ink-2 #a8b0bb di atas #101215  =  8,8:1
 *   --aic-ink-3 #7b838f di atas #101215  =  4,9:1  (hanya untuk teks non-esensial)
 */

/* ── Token ───────────────────────────────────────────────────────────────── */
:root {
  --aic-bg:          #eef1f6;
  --aic-surface:     #ffffff;
  --aic-surface-2:   #f4f6fb;
  --aic-surface-3:   #f1f4fb;
  --aic-ink:         #1a1d23;
  --aic-ink-2:       #5b616e;
  --aic-ink-3:       #8b909c;
  --aic-line:        rgba(20, 24, 35, .08);
  --aic-line-kuat:   rgba(20, 24, 35, .14);
  --aic-biru:        #2d6cff;
  --aic-biru-lembut: rgba(45, 108, 255, .10);
  --aic-scrim:       rgba(15, 23, 42, .34);
  --aic-bayang:      0 22px 52px -18px rgba(16, 24, 40, .5);
}

html.dark {
  --aic-bg:          #000000;
  --aic-surface:     #101215;
  --aic-surface-2:   #16191f;
  --aic-surface-3:   #1c2027;
  --aic-ink:         #e6e8eb;
  --aic-ink-2:       #a8b0bb;
  --aic-ink-3:       #7b838f;
  --aic-line:        rgba(255, 255, 255, .09);
  --aic-line-kuat:   rgba(255, 255, 255, .16);
  --aic-biru:        #4d8dff;
  --aic-biru-lembut: rgba(77, 141, 255, .16);
  --aic-scrim:       rgba(0, 0, 0, .62);
  --aic-bayang:      0 22px 52px -18px rgba(0, 0, 0, .75);

  /* Aksen bawaan layout ikut dinaikkan: #1b54e0 terlalu gelap di atas #101215
     (kontras 2,9:1 — tak terbaca sebagai tautan). */
  --aic-accent: #4d8dff;
  --aic-hair:   rgba(255, 255, 255, .09);

  /* Memberi tahu peramban: scrollbar, pemilih tanggal, autofill, dan kontrol
     bawaan lain ikut gelap. Tanpa ini kalender <input type=date> tetap putih
     menyilaukan di tengah halaman gelap. */
  color-scheme: dark;
}

/* ── Kerangka aplikasi ───────────────────────────────────────────────────── */
html.dark body { background: var(--aic-bg); color: var(--aic-ink); }

html.dark .aic-rail,
html.dark .aic-bottom,
html.dark .aic-flyout-bar,
html.dark .aic-drawer-panel { background: var(--aic-surface); border-color: var(--aic-line); }

html.dark .aic-bottom { box-shadow: 0 -4px 22px rgba(0, 0, 0, .5); }
html.dark .aic-flyout-bar { box-shadow: var(--aic-bayang); }

html.dark .aic-rail-item,
html.dark .aic-cat,
html.dark .aic-bn { color: var(--aic-ink-3); }
html.dark .aic-rail-item:hover,
html.dark .aic-cat:hover { background: var(--aic-surface-3); color: var(--aic-biru); }
html.dark .aic-rail-item.active { background: var(--aic-biru-lembut); color: var(--aic-biru); }
html.dark .aic-cat.open-active { background: var(--aic-biru-lembut); color: var(--aic-biru); }
html.dark .aic-rail-logo { background: #1c2027; }
html.dark .aic-rail-sep { background: var(--aic-line); }

/* Tooltip rail: di tema terang ia gelap agar menonjol. Di tema gelap dibalik —
   kalau tetap #1a1d23 ia lenyap ke dalam latarnya sendiri. */
html.dark .aic-rail-item .tip,
html.dark .aic-cat .tip { background: #eceef1; color: #14171c; }

html.dark .aic-radial-scrim,
html.dark .aic-drawer-bg { background: var(--aic-scrim); }
html.dark .aic-flyout-cat { color: var(--aic-ink-3); border-right-color: var(--aic-line); }
html.dark .aic-flyout-item { color: var(--aic-ink-2); }
html.dark .aic-flyout-item:hover { background: var(--aic-surface-3); }
html.dark .aic-flyout-item span:last-child { color: var(--aic-ink-2); }
html.dark .aic-flyout-item .ib { background: var(--aic-biru-lembut); color: var(--aic-biru); }
html.dark .aic-flyout-item:hover .ib { background: var(--aic-biru); color: #000000; }

html.dark .aic-greet h1 { color: var(--aic-ink); }
html.dark .aic-greet p,
html.dark .aic-search i,
html.dark .aic-drawer-cat,
html.dark .aic-notif-kosong { color: var(--aic-ink-3); }

html.dark .aic-search input,
html.dark .aic-iconbtn,
html.dark .aic-ava { background: var(--aic-surface-2); border-color: var(--aic-line); color: var(--aic-ink); }
html.dark .aic-search input::placeholder { color: var(--aic-ink-3); }
html.dark .aic-search input:focus { border-color: var(--aic-biru); box-shadow: 0 0 0 3px var(--aic-biru-lembut); }
html.dark .aic-iconbtn { color: var(--aic-ink-2); }
html.dark .aic-iconbtn:hover { background: var(--aic-surface-3); color: var(--aic-biru); }

html.dark .aic-notif-kepala { background: var(--aic-surface); color: var(--aic-ink-2); border-bottom-color: var(--aic-line); }
html.dark .aic-notif-item { border-bottom-color: var(--aic-line); }
html.dark .aic-notif-item:hover { background: var(--aic-surface-2); }
html.dark .aic-notif-item .j { color: var(--aic-ink); }
html.dark .aic-notif-item .i { color: var(--aic-ink-2); }
html.dark .aic-notif-item .w { color: var(--aic-ink-3); }

html.dark .aic-drawer-grip { background: var(--aic-surface-3); }
html.dark .aic-drawer a { color: var(--aic-ink-2); }
html.dark .aic-drawer a:hover,
html.dark .aic-drawer a.active { background: var(--aic-surface-3); color: var(--aic-biru); }
html.dark .aic-bn-center .fab { border-color: var(--aic-bg); }

/* ── Bootstrap / Hope UI ─────────────────────────────────────────────────── */
/*
 * Yang ditulis di sini hanya komponen yang BENAR-BENAR dipakai — dihitung dari
 * seluruh 119 berkas tampilan: form-control 490x, card 182x, badge 171x,
 * table 111x, dan seterusnya. Menyalin seluruh tema gelap Hope UI (28 KB)
 * ditolak karena paletnya biru-navy sendiri dan akan bertabrakan dengan
 * kerangka di atas — dua sistem gelap dalam satu layar terbaca sebagai cacat,
 * bukan sebagai tema.
 */
html.dark .card,
html.dark .modal-content,
html.dark .dropdown-menu,
html.dark .offcanvas,
html.dark .list-group-item,
html.dark .accordion-item,
html.dark .accordion-button { background-color: var(--aic-surface); color: var(--aic-ink); border-color: var(--aic-line); }

html.dark .card-header,
html.dark .card-footer,
html.dark .modal-header,
html.dark .modal-footer { background-color: var(--aic-surface); border-color: var(--aic-line); color: var(--aic-ink); }

html.dark .dropdown-item { color: var(--aic-ink-2); }
html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus { background-color: var(--aic-surface-3); color: var(--aic-ink); }
html.dark .dropdown-divider { border-color: var(--aic-line); }

/* Tabel: garis tipis, zebra sangat samar. Zebra terang bawaan Bootstrap
   (rgba hitam) tak terlihat sama sekali di atas permukaan gelap. */
html.dark .table {
  --bs-table-color: var(--aic-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--aic-line);
  --bs-table-striped-color: var(--aic-ink);
  --bs-table-striped-bg: rgba(255, 255, 255, .035);
  --bs-table-hover-color: var(--aic-ink);
  --bs-table-hover-bg: rgba(255, 255, 255, .055);
  color: var(--aic-ink);
}
html.dark .table > thead { color: var(--aic-ink-2); }
html.dark .table > :not(caption) > * > * { border-bottom-color: var(--aic-line); }

/* Isian. `-webkit-autofill` diberi bayangan-dalam karena peramban memaksa latar
   kuning pada isian yang diisi otomatis, dan itu tak bisa ditimpa background. */
html.dark .form-control,
html.dark .form-select,
html.dark .input-group-text {
  background-color: var(--aic-surface-2);
  border-color: var(--aic-line-kuat);
  color: var(--aic-ink);
}
html.dark .form-control::placeholder { color: var(--aic-ink-3); }
html.dark .form-control:focus,
html.dark .form-select:focus {
  background-color: var(--aic-surface-2);
  border-color: var(--aic-biru);
  color: var(--aic-ink);
  box-shadow: 0 0 0 3px var(--aic-biru-lembut);
}
html.dark .form-control:disabled,
html.dark .form-control[readonly] { background-color: #12151a; color: var(--aic-ink-3); }
html.dark .form-control:-webkit-autofill,
html.dark .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--aic-surface-2) inset;
  -webkit-text-fill-color: var(--aic-ink);
}
html.dark .form-label,
html.dark .col-form-label,
html.dark .form-check-label { color: var(--aic-ink-2); }
html.dark .form-check-input { background-color: var(--aic-surface-3); border-color: var(--aic-line-kuat); }
html.dark .form-check-input:checked { background-color: var(--aic-biru); border-color: var(--aic-biru); }
html.dark .form-text { color: var(--aic-ink-3); }

/* Tombol garis: yang gelap/terang harus ditukar arah, kalau tidak
   btn-outline-dark jadi hitam di atas hitam. */
html.dark .btn-outline-secondary { color: var(--aic-ink-2); border-color: var(--aic-line-kuat); }
html.dark .btn-outline-secondary:hover { background: var(--aic-surface-3); color: var(--aic-ink); border-color: var(--aic-line-kuat); }
html.dark .btn-outline-dark { color: var(--aic-ink); border-color: var(--aic-line-kuat); }
html.dark .btn-outline-dark:hover { background: var(--aic-surface-3); color: var(--aic-ink); }
html.dark .btn-light { background: var(--aic-surface-2); border-color: var(--aic-line); color: var(--aic-ink); }
html.dark .btn-light:hover { background: var(--aic-surface-3); color: var(--aic-ink); }
html.dark .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Peringatan: latar lembut + teks cerah, bukan pastel gelap yang tak terbaca. */
html.dark .alert { border-color: transparent; }
html.dark .alert-primary { background: rgba(77, 141, 255, .14);  color: #b3cdff; }
html.dark .alert-success { background: rgba(34, 197, 94, .14);   color: #86efac; }
html.dark .alert-info    { background: rgba(56, 189, 248, .14);  color: #93ddfd; }
html.dark .alert-warning { background: rgba(245, 158, 11, .15);  color: #fcd34d; }
html.dark .alert-danger  { background: rgba(239, 68, 68, .15);   color: #fca5a5; }
html.dark .alert-light,
html.dark .alert-secondary { background: var(--aic-surface-2); color: var(--aic-ink-2); }

html.dark .badge.bg-light { background: var(--aic-surface-3) !important; color: var(--aic-ink) !important; }
html.dark .badge.bg-white { background: var(--aic-surface-3) !important; color: var(--aic-ink) !important; }

html.dark .nav-tabs { border-bottom-color: var(--aic-line); }
html.dark .nav-tabs .nav-link { color: var(--aic-ink-3); border-color: transparent; }
html.dark .nav-tabs .nav-link:hover { color: var(--aic-ink); border-color: var(--aic-line); }
html.dark .nav-tabs .nav-link.active {
  background: var(--aic-surface); color: var(--aic-ink);
  border-color: var(--aic-line) var(--aic-line) var(--aic-surface);
}

html.dark .progress { background: var(--aic-surface-3); }
html.dark .breadcrumb-item, html.dark .breadcrumb-item a { color: var(--aic-ink-2); }
html.dark .page-link { background: var(--aic-surface); border-color: var(--aic-line); color: var(--aic-ink-2); }
html.dark .page-link:hover { background: var(--aic-surface-3); color: var(--aic-ink); }
html.dark .page-item.disabled .page-link { background: var(--aic-surface); color: var(--aic-ink-3); }

html.dark hr { border-color: var(--aic-line); opacity: 1; }
html.dark .modal-backdrop.show { opacity: .72; }

/*
 * Kelas utilitas yang memaku warna terang. Ini SATU-SATUNYA tempat !important
 * dipakai, dan memang perlu: aslinya pun ditulis !important oleh Bootstrap,
 * jadi kekhususan saja tak cukup untuk menandinginya.
 */
html.dark .bg-white     { background-color: var(--aic-surface) !important; }
html.dark .bg-light     { background-color: var(--aic-surface-2) !important; }
html.dark .bg-body      { background-color: var(--aic-surface) !important; }
html.dark .text-dark    { color: var(--aic-ink) !important; }
html.dark .text-black   { color: var(--aic-ink) !important; }
html.dark .text-muted   { color: var(--aic-ink-3) !important; }
html.dark .text-secondary { color: var(--aic-ink-2) !important; }
html.dark .border,
html.dark .border-top, html.dark .border-bottom,
html.dark .border-start, html.dark .border-end { border-color: var(--aic-line) !important; }

/* ── Tombol tema di bilah atas ───────────────────────────────────────────── */
/* Ikon matahari/bulan ditukar oleh CSS, bukan JS: satu sumber kebenaran, dan
   tak ada kedip saat halaman dimuat sebelum skripnya jalan. */
.aic-tema-btn .bx-moon { display: inline-block; }
.aic-tema-btn .bx-sun  { display: none; }
html.dark .aic-tema-btn .bx-moon { display: none; }
html.dark .aic-tema-btn .bx-sun  { display: inline-block; }

/* ── Gambar & bagan ──────────────────────────────────────────────────────── */
/* Logo dan tangkapan layar TIDAK disentuh. Yang diredam hanya elemen yang
   memang menyilaukan: gambar berlatar putih penuh menandai dirinya sendiri
   dengan .redam-gelap bila perlu. */
html.dark .redam-gelap { filter: brightness(.88) contrast(1.04); }

/* ═══════════════════════════════════════════════════════════════════════════
   Lapisan kedua: variabel Bootstrap & halaman Beranda
   ═══════════════════════════════════════════════════════════════════════════

   Hope UI dibangun di atas Bootstrap 5 yang mewarnai komponen lewat VARIABEL,
   bukan lewat properti langsung — `.card` menyimpan `--bs-card-bg:#ffffff` pada
   dirinya sendiri, lalu `background-color:var(--bs-card-bg)`. Menimpa
   `background-color` di aturan lain memang bisa, tapi berarti berkelahi dengan
   setiap komponen satu per satu. Menyetel variabelnya sekali jauh lebih bersih
   dan ikut membetulkan komponen yang belum sempat diperiksa. */

html.dark {
  --bs-body-bg:      #000000;
  --bs-body-color:   #a8b0bb;
  --bs-border-color: rgba(255, 255, 255, .09);
  --bs-heading-color: #e6e8eb;
  --bs-emphasis-color: #e6e8eb;
  --bs-secondary-color: #a8b0bb;
  --bs-secondary-bg: #16191f;
  --bs-tertiary-bg:  #1c2027;
  --bs-link-color:   #4d8dff;
  --bs-link-hover-color: #7dabff;
}

html.dark .card {
  --bs-card-bg:           var(--aic-surface);
  --bs-card-color:        var(--aic-ink);
  --bs-card-border-color: var(--aic-line);
  --bs-card-cap-bg:       var(--aic-surface);
  --bs-card-cap-color:    var(--aic-ink);
}
html.dark .modal-content {
  --bs-modal-bg: var(--aic-surface); --bs-modal-color: var(--aic-ink);
  --bs-modal-border-color: var(--aic-line);
  --bs-modal-header-border-color: var(--aic-line);
  --bs-modal-footer-border-color: var(--aic-line);
}
html.dark .dropdown-menu {
  --bs-dropdown-bg: var(--aic-surface); --bs-dropdown-color: var(--aic-ink-2);
  --bs-dropdown-border-color: var(--aic-line);
  --bs-dropdown-link-color: var(--aic-ink-2);
  --bs-dropdown-link-hover-bg: var(--aic-surface-3);
  --bs-dropdown-link-hover-color: var(--aic-ink);
  --bs-dropdown-divider-bg: var(--aic-line);
}
html.dark .list-group {
  --bs-list-group-bg: var(--aic-surface); --bs-list-group-color: var(--aic-ink);
  --bs-list-group-border-color: var(--aic-line);
  --bs-list-group-action-hover-bg: var(--aic-surface-2);
}
html.dark .accordion {
  --bs-accordion-bg: var(--aic-surface); --bs-accordion-color: var(--aic-ink);
  --bs-accordion-border-color: var(--aic-line);
  --bs-accordion-btn-bg: var(--aic-surface); --bs-accordion-btn-color: var(--aic-ink);
  --bs-accordion-active-bg: var(--aic-surface-2); --bs-accordion-active-color: var(--aic-ink);
}
html.dark .offcanvas { --bs-offcanvas-bg: var(--aic-surface); --bs-offcanvas-color: var(--aic-ink); }

/* ── Beranda: pintasan & Papan Bersama ──────────────────────────────────── */
html.dark .dash-mini { background: var(--aic-surface-2); border-color: var(--aic-line); color: var(--aic-ink-2); }
html.dark .dash-mini:hover { background: var(--aic-surface-3); }

/* Kotak agenda amber. Di tema terang ia kertas kuning dengan tinta cokelat; di
   gelap kertasnya jadi kaca amber tipis dan tintanya yang menyala — arahnya
   dibalik, bukan warnanya diganti, supaya tetap dikenali sebagai "agenda". */
html.dark .pr-agenda { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .28); border-left-color: #f59e0b; }
html.dark .pr-agenda .kepala,
html.dark .pr-agenda .tg { color: #fcd34d; }
html.dark .pr-agenda .baris { border-top-color: rgba(245, 158, 11, .22); }

html.dark .pr-tugas { background: rgba(124, 58, 237, .12); border-color: rgba(124, 58, 237, .30); border-left-color: #a78bfa; }
html.dark .pr-tugas .kepala,
html.dark .pr-tugas .w { color: #c4b5fd; }
html.dark .pr-tugas .baris { color: var(--aic-ink-2); border-top-color: rgba(124, 58, 237, .22); }
html.dark .pr-tugas .sel { background: rgba(124, 58, 237, .18); border-color: rgba(124, 58, 237, .35); color: #c4b5fd; }

html.dark .pr-hari,
html.dark .pr-hari-kop { background: var(--aic-surface-2); border-color: var(--aic-line); color: var(--aic-ink); }
html.dark .pr-strip .p { background: var(--aic-surface-2); border-color: var(--aic-line); color: var(--aic-ink-2); }
html.dark .pr-strip .p.t0 { background: var(--aic-surface-2); }
html.dark .pr-strip .p.t1 { background: rgba(245, 158, 11, .16); color: #fcd34d; }
html.dark .pr-baris { border-left-color: var(--aic-line-kuat); color: var(--aic-ink-2); }
html.dark .pr-angka .saya-kosong b { color: #fbbf24; }
html.dark .pr-angka .saya-ada b { color: #34d399; }

/* Bilah kemajuan yang ditulis langsung di atribut style. Satu-satunya cara
   menimpanya dari lembar gaya adalah mencocokkan atributnya — dan itu memang
   pas di sini karena nilainya hanya dipakai untuk bilah kemajuan. */
html.dark [style*="background:#eef1f8"] { background: var(--aic-surface-3) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Lapisan ketiga: token Tema RaRa
   ═══════════════════════════════════════════════════════════════════════════

   rara-theme.css punya sistem tokennya SENDIRI (--ae-*) dan menulis beberapa
   aturan dengan !important — di antaranya `.card { background:#ffffff !important }`,
   yang mengalahkan seluruh aturan kartu di lapisan pertama. Itu sebabnya
   Beranda tampak benar sementara halaman lain tetap putih.

   Yang dilakukan di sini: menimpa TOKEN-nya, bukan mengejar aturannya satu per
   satu. Sekali disetel, seluruh yang memakai --ae-* ikut benar — latar halaman,
   garis rambut, tinta, dan bayangan. Hanya tiga aturan yang memaku #fff secara
   harfiah yang perlu dilawan langsung, dan ketiganya disebut namanya di bawah.

   Aurora (dua gradien ungu-biru di latar) diredam, bukan dihapus: di tema gelap
   ia jadi cahaya samar yang memberi kedalaman, sama seperti latar berlapis di
   aplikasi yang kita jadikan acuan. */

html.dark {
  --ae-pearl:        #000000;
  --ae-pearl-deep:   #000000;
  --ae-glass-solid:  #101215;
  --ae-ink:          #e6e8eb;
  --ae-ink-soft:     #a8b0bb;
  --ae-ink-mut:      #7b838f;
  --ae-accent:       #4d8dff;
  --ae-accent-deep:  #7dabff;
  --ae-aurora-a:     rgba(129, 100, 255, .16);
  --ae-aurora-b:     rgba(56, 132, 255, .14);
  --ae-hairline:     rgba(255, 255, 255, .09);
  --ae-hairline-2:   rgba(255, 255, 255, .06);
  --ae-bevel:        0 10px 30px -18px rgba(0, 0, 0, .8);
}

/* Tiga aturan yang memaku putih secara harfiah. !important di sini bukan
   kemalasan — lawannya juga !important, jadi kekhususan saja tak menang. */
html.dark .card               { background: var(--aic-surface) !important; }
html.dark .sidebar.sidebar-default { background: var(--aic-surface) !important; }
html.dark .iq-navbar          { background: var(--aic-surface) !important; }
html.dark .card-transparent   { background: transparent !important; }

/* Bayangan kartu di tema terang memberi kesan terangkat. Di gelap, bayangan
   hitam di atas latar hitam tak terlihat sama sekali — yang memisahkan kartu
   dari latarnya adalah garis tipisnya, jadi garisnya yang ditegaskan. */
html.dark .card { border-color: var(--aic-line) !important; box-shadow: none !important; }

/* Ikon & teks yang mewarisi tinta gelap dari tema terang. */
html.dark .iq-navbar-header .container-fluid h3 { color: var(--aic-ink) !important; }