/*
 * irph-tema.css — token tema iRPH "Canggih" (Eric, RD 29 Sep 2026).
 *
 * SATU tempat untuk warna. Kecerahan dilaras dengan dua tombol sahaja:
 *   --redup-terang : berapa banyak mod terang diredupkan (0% = putih penuh)
 *   --redup-gelap  : berapa banyak mod gelap dicerahkan (0% = navy pekat)
 * Tukar 20% -> 15% di sini dan setiap halaman yang guna token ini ikut.
 *
 * Warna MAKNA tidak ditakrif semula di sini dan tidak boleh dipakai untuk hiasan:
 *   legend Tab 1 (irph-pilih.js): biru = dari jadual, hijau = DSKP/RPT/arkib,
 *   kuning = cikgu isi sendiri / wajib; status Tab 2: hijau Siap, merah Draf, kelabu Cuti.
 * Warna Tab (nila / plum / teal) hanya untuk bingkai: bar tab, garis, label, butang utama.
 */
:root,
[data-bs-theme="light"] {
    --redup-terang: 20%;

    --it-bg: #d4d9e2;
    --it-surface: #e6e9ee;
    --it-surface-2: #dde2e9;
    --it-border: #c0c9d4;
    --it-bg: color-mix(in srgb, #eef1f5, #b9c2ce calc(var(--redup-terang) * 2.5));
    --it-surface: color-mix(in srgb, #ffffff, #cdd4de calc(var(--redup-terang) * 2.5));
    --it-surface-2: color-mix(in srgb, #f3f5f8, #c5ccd7 calc(var(--redup-terang) * 2.5));
    --it-border: color-mix(in srgb, #d7dee6, #aab4c2 calc(var(--redup-terang) * 2.5));

    --it-text: #1b2733;
    --it-muted: #4f5d6d;
    --it-brand: linear-gradient(90deg, #1f4fc4, #0d8a7a);
    --it-hero: linear-gradient(135deg, #1d2f7a, #0e5e57);
    --it-hero-shadow: 0 10px 26px rgba(29, 47, 122, .28);
    --it-bar: color-mix(in srgb, var(--it-surface) 94%, transparent);
    --it-bar-shadow: 0 8px 24px rgba(16, 32, 72, .14);

    --it-tab1: #2e3192;
    --it-tab2: #6b2155;
    --it-tab3: #0e5e57;
    --it-tab-on: #ffffff;

    --it-now: #c0392b;
    --it-rehat: repeating-linear-gradient(135deg, var(--it-surface-2) 0 8px, color-mix(in srgb, var(--it-surface-2), #000 6%) 8px 16px);
    --it-tint: 22%;
}

[data-bs-theme="dark"] {
    --redup-gelap: 20%;

    --it-bg: #182446;
    --it-surface: #1e2c56;
    --it-surface-2: #223262;
    --it-border: #34477e;
    --it-bg: color-mix(in srgb, #0a1330, #26345c calc(var(--redup-gelap) * 2.5));
    --it-surface: color-mix(in srgb, #111d42, #2c3b6a calc(var(--redup-gelap) * 2.5));
    --it-surface-2: color-mix(in srgb, #15224b, #31427a calc(var(--redup-gelap) * 2.5));
    --it-border: color-mix(in srgb, #22386b, #46598f calc(var(--redup-gelap) * 2.5));

    --it-text: #e8eefc;
    --it-muted: #b6c3e1;
    --it-brand: linear-gradient(90deg, #7fb0ff, #3fe0c9);
    --it-hero: linear-gradient(135deg, #2f4fa8, #1b6f86);
    --it-hero-shadow: 0 10px 30px rgba(43, 217, 193, .18);
    --it-bar: color-mix(in srgb, var(--it-surface) 92%, transparent);
    --it-bar-shadow: 0 10px 28px rgba(0, 0, 0, .35);

    --it-tab1: #aeb1f7;
    --it-tab2: #e8aad6;
    --it-tab3: #8ddbcf;
    --it-tab-on: #141a33;

    --it-now: #ff9b9b;
    --it-tint: 30%;
}

/* ---------- Topbar floating (RD: wajib floating, senang cikgu navigate menu) ---------- */
.itb {
    position: sticky;
    top: 0;
    z-index: 1030;
}
@media (max-width: 575.98px) {
    .itb { flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 10px !important; }
    .itb-jenama { min-width: 0; flex: 1 1 auto; }
    .itb-jenama span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .itb-kanan { flex: none; }
    /* Log keluar juga ada dalam panel Menu — pada telefon topbar kekal satu baris. */
    .itb-kanan form { display: none; }
}

/* ---------- Halaman Laravel (Bootstrap) ikut token ----------
 * Font sama seperti Tab 1–3 (fon sistem — pantas, tiada muat turun, sama rupa di semua halaman).
 * Kad = --it-surface, halaman = --it-bg, garisan = --it-border. Warna utama = biru jenama gelap
 * (#1f4fc4), BUKAN #0d6efd — biru terang itu makna "dari jadual" dlm legend Tab 1. */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--font-sans);
}
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--it-bg);
    --bs-secondary-bg: var(--it-surface-2);
    --bs-tertiary-bg: var(--it-surface-2);
    --bs-body-color: var(--it-text);
    --bs-secondary-color: var(--it-muted);
    --bs-border-color: var(--it-border);
    --bs-card-bg: var(--it-surface);
    --bs-table-bg: var(--it-surface);
}
[data-bs-theme="light"] {
    --bs-primary: #1f4fc4;
    --bs-primary-rgb: 31, 79, 196;
    --bs-link-color: #1f4fc4;
    --bs-link-color-rgb: 31, 79, 196;
    --bs-link-hover-color: #183e9c;
    --bs-link-hover-color-rgb: 24, 62, 156;
}
[data-bs-theme="dark"] {
    --bs-primary: #7fb0ff;
    --bs-primary-rgb: 127, 176, 255;
    --bs-link-color: #9cc0ff;
    --bs-link-color-rgb: 156, 192, 255;
    --bs-link-hover-color: #c3d8ff;
    --bs-link-hover-color-rgb: 195, 216, 255;
}
body { font-family: var(--font-sans); background: var(--it-bg); color: var(--it-text); }
.card, .modal-content, .list-group-item, .dropdown-menu, .accordion-item {
    --bs-card-bg: var(--it-surface);
    background-color: var(--it-surface);
    border-color: var(--it-border);
    color: var(--it-text);
}
.card { border-radius: 14px; }
.card-header, .card-footer { background-color: var(--it-surface-2); border-color: var(--it-border); }
.form-control, .form-select {
    background-color: color-mix(in srgb, var(--it-surface), #ffffff 35%);
    border-color: var(--it-border);
    color: var(--it-text);
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--it-surface-2); }
.table { --bs-table-bg: var(--it-surface); --bs-table-color: var(--it-text); --bs-table-border-color: var(--it-border); }
.text-secondary, .text-muted { color: var(--it-muted) !important; }

/* Butang utama = biru jenama (bukan biru legend). */
.btn-primary {
    --bs-btn-bg: #1f4fc4; --bs-btn-border-color: #1f4fc4;
    --bs-btn-hover-bg: #183e9c; --bs-btn-hover-border-color: #183e9c;
    --bs-btn-active-bg: #15347f; --bs-btn-active-border-color: #15347f;
    --bs-btn-disabled-bg: #1f4fc4; --bs-btn-disabled-border-color: #1f4fc4;
}
.btn-outline-primary {
    --bs-btn-color: #1f4fc4; --bs-btn-border-color: #1f4fc4;
    --bs-btn-hover-bg: #1f4fc4; --bs-btn-hover-border-color: #1f4fc4;
    --bs-btn-active-bg: #183e9c; --bs-btn-active-border-color: #183e9c;
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #7fb0ff; --bs-btn-border-color: #7fb0ff; --bs-btn-color: #0b1532;
    --bs-btn-hover-bg: #a3c6ff; --bs-btn-hover-border-color: #a3c6ff; --bs-btn-hover-color: #0b1532;
    --bs-btn-active-bg: #c3d8ff; --bs-btn-active-border-color: #c3d8ff; --bs-btn-active-color: #0b1532;
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #9cc0ff; --bs-btn-border-color: #7fb0ff;
    --bs-btn-hover-bg: #7fb0ff; --bs-btn-hover-color: #0b1532; --bs-btn-hover-border-color: #7fb0ff;
}

/* Sasaran sentuh >= 44px (NOTA-UNTUK-AGEN-UI §3) — termasuk btn-sm. */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; }
.btn-sm { min-height: 44px; padding-left: 12px; padding-right: 12px; }
.btn-link { min-height: 0; }
.form-control, .form-select { min-height: 44px; border-radius: 10px; }
.form-check-input { width: 1.25em; height: 1.25em; }

/* Jadual lebar tidak menolak halaman ke tepi pada telefon. */
@media (max-width: 575.98px) {
    main .table { font-size: 13px; }
    main .container, main .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* Topbar Laravel ikut token (dulu putih tulen + #0d6efd). Pemilih lebih khusus drp
   gaya dlm topbar-irph.blade.php supaya menang dlm kedua-dua tema. */
html[data-bs-theme] .itb {
    background: var(--it-bar);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--it-border);
    color: var(--it-text);
    box-shadow: 0 4px 16px rgba(16, 32, 72, .08);
}
html[data-bs-theme] .itb-jenama b {
    background: var(--it-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[data-bs-theme] .itb-jenama span { color: var(--it-muted); }
html[data-bs-theme] .itb-btn { background: var(--it-surface); border-color: var(--it-border); color: var(--it-text); }
html[data-bs-theme] .itb-btn:hover { border-color: var(--it-tab1); background: var(--it-surface-2); }

/* Tablet (576–991px): topbar satu baris — nama/sekolah dipotong dgn ellipsis, butang kekal di kanan. */
@media (max-width: 991.98px) {
    .itb { flex-wrap: nowrap !important; }
    .itb-jenama { min-width: 0; flex: 1 1 auto; }
    .itb-jenama span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .itb-kanan { flex: none; }
}

/* Topbar tanpa nama/sekolah (RD 29 Sep 2026): jenama tidak mengecut; pita "Kelas seterusnya"
   (irph-kelas.js) mengambil ruang tengah. */
html[data-bs-theme] .itb-jenama { flex: none !important; min-width: auto; }
.itb { flex-wrap: nowrap !important; }
.itb .ikt { flex: 1 1 auto; }