/* =====================================================================
   SISFO SMKGRILU — Tema Utama
   Dominan putih, aksen gradasi biru #0E77C8 -> #5ABDE6.
   Dibangun di atas Bootstrap 5 (lihat includes/header.php untuk CDN).
   ===================================================================== */

:root {
    --brand-blue-start: #0E77C8;
    --brand-blue-end:   #5ABDE6;
    --brand-gradient: linear-gradient(135deg, var(--brand-blue-start) 0%, var(--brand-blue-end) 100%);
    --brand-text-on-blue: #ffffff;
    --sidebar-width: 260px;
}

body {
    background-color: #ffffff;
    color: #1f2937;
}

/* ---------------------------------------------------------------------
   Utility gradasi biru — dipakai di header, tombol utama, elemen navigasi
   --------------------------------------------------------------------- */
.bg-brand-gradient {
    background: var(--brand-gradient);
    color: var(--brand-text-on-blue);
}

.btn-brand {
    background: var(--brand-gradient);
    border: none;
    color: var(--brand-text-on-blue);
    font-weight: 600;
    transition: filter .15s ease, transform .15s ease;
}
.btn-brand:hover,
.btn-brand:focus {
    filter: brightness(1.08);
    color: var(--brand-text-on-blue);
}
.btn-brand:active {
    transform: scale(0.98);
}

.text-brand {
    color: var(--brand-blue-start);
}

.link-brand {
    color: var(--brand-blue-start);
    text-decoration: none;
    font-weight: 600;
}
.link-brand:hover {
    color: var(--brand-blue-end);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Navbar atas
   --------------------------------------------------------------------- */
.navbar-brand-app {
    background: var(--brand-gradient);
    box-shadow: 0 2px 10px rgba(14, 119, 200, 0.25);
}
.navbar-brand-app .navbar-brand,
.navbar-brand-app .nav-link {
    color: var(--brand-text-on-blue) !important;
}
.navbar-brand-app .nav-link:hover {
    color: #eaf6ff !important;
}
.navbar-logo {
    height: 36px;
    width: 36px;
    object-fit: contain;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------
   Sidebar (offcanvas di mobile, statis di layar besar)
   --------------------------------------------------------------------- */
.app-sidebar {
    width: var(--sidebar-width);
    background: #ffffff;
    border-right: 1px solid #e9edf2;
    min-height: calc(100vh - 56px);
}

/* Selector ini SENGAJA mencakup .app-sidebar (statis, layar besar) DAN
   .offcanvas (menu mobile/tablet) — keduanya dirender dari $renderMenu()
   yang sama persis di includes/sidebar.php, jadi harus tampil identik.
   Sebelumnya cuma di-scope ke .app-sidebar, jadi menu offcanvas mobile
   tidak dapat styling apa pun (icon mepet ke teks, tanpa gap) — diperbaiki
   di revisi ini. */
.app-sidebar .nav-link,
.offcanvas .nav-link {
    color: #33475b;
    border-radius: .5rem;
    padding: .65rem .9rem;
    margin-bottom: .15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .85rem;
}
.app-sidebar .nav-link i,
.offcanvas .nav-link i {
    width: 1.3em;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.05rem;
}
.app-sidebar .nav-link.active,
.offcanvas .nav-link.active {
    background: var(--brand-gradient);
    color: #fff;
}
.app-sidebar .nav-link:not(.active):hover,
.offcanvas .nav-link:not(.active):hover {
    background: #eaf6ff;
    color: var(--brand-blue-start);
}
.app-sidebar .nav-link.disabled,
.offcanvas .nav-link.disabled {
    color: #9ca3af;
    pointer-events: none;
}
.app-sidebar .nav-section-title,
.offcanvas .nav-section-title {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .05em;
    color: #9aa5b1;
    padding: .75rem .9rem .25rem;
}

/* ---------------------------------------------------------------------
   Kartu peran (halaman pilih peran)
   --------------------------------------------------------------------- */
.role-card {
    border: 1px solid #e9edf2;
    border-radius: .9rem;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
    text-decoration: none;
    color: #1f2937;
    display: block;
}
.role-card:hover {
    box-shadow: 0 8px 24px rgba(14, 119, 200, 0.15);
    transform: translateY(-2px);
    color: #1f2937;
}
.role-card .role-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
    font-size: 1.4rem;
}

/* ---------------------------------------------------------------------
   Halaman login
   --------------------------------------------------------------------- */
.login-page {
    position: relative;
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}
/* Foto latar belakang opsional (Pengaturan Umum > Foto Latar Belakang
   Halaman Login, revisi lanjutan) — ditumpuk DI ATAS putih polos
   .login-page, opacity-nya diatur Admin (bukan dipatok di CSS) lewat
   inline style di login.php. Kalau belum ada foto, elemen ini tidak
   dirender sama sekali sehingga tampilan otomatis kembali ke putih polos. */
.login-page-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.login-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}
.login-card .login-header {
    position: relative;
    background: var(--brand-gradient);
    color: #fff;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    overflow: hidden;
}
/* Foto sampul opsional (Pengaturan Umum > Foto Sampul Halaman Login) —
   ditumpuk transparan DI ATAS gradasi biru yang tetap jadi background
   dasar .login-header, bukan menggantikannya, supaya nuansa birunya tetap
   terasa (permintaan eksplisit). Persentase opacity-nya diatur Admin
   (bukan dipatok di CSS, dulu tetap 45%) lewat inline style di login.php.
   Kalau belum ada foto, elemen ini tidak dirender sama sekali (lihat
   login.php) sehingga tampilan otomatis kembali ke gradasi polos seperti
   semula. */
.login-header-cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.login-header-content {
    position: relative;
}
.login-card .login-header img {
    height: 64px;
    width: 64px;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: .75rem;
}
.login-card .login-body {
    padding: 1.5rem;
}

.nav-tabs .nav-link.active {
    color: var(--brand-blue-start);
    font-weight: 700;
    border-bottom: 3px solid var(--brand-blue-start);
    border-top: none;
    border-left: none;
    border-right: none;
}
.nav-tabs .nav-link {
    color: #6b7280;
}

/* ---------------------------------------------------------------------
   Form control aksen biru
   --------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-blue-start);
    box-shadow: 0 0 0 .2rem rgba(14, 119, 200, 0.15);
}

/* Tombol "mata" untuk lihat/sembunyikan kata sandi */
.password-toggle {
    border-color: #ced4da;
    color: #6b7280;
    background: #fff;
}
.password-toggle:hover,
.password-toggle:focus {
    color: var(--brand-blue-start);
    border-color: var(--brand-blue-start);
    box-shadow: 0 0 0 .2rem rgba(14, 119, 200, 0.15);
}

/* ---------------------------------------------------------------------
   Kartu dashboard "Akses Cepat" — putih polos, TANPA garis/border (revisi
   permintaan), pemisah dari background putih murni lewat shadow saja.
   --------------------------------------------------------------------- */
.module-card {
    border: none;
    border-radius: .9rem;
    padding: 1.25rem;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .07);
    transition: box-shadow .15s ease, transform .15s ease;
}
.module-card:hover {
    box-shadow: 0 4px 8px rgba(15, 23, 42, .07), 0 10px 28px rgba(15, 23, 42, .12);
    transform: translateY(-2px);
}
.module-card .badge-soon {
    font-size: .68rem;
}

/* Chip ikon berwarna pastel di kartu "Akses Cepat" — tiap kartu dapat warna
   berbeda (di-cycle lewat $iconPalette di dashboard.php) supaya gampang
   dibedakan sekilas, tapi tetap lembut/tidak menusuk mata. Garis ikonnya
   ditebalkan sedikit lewat -webkit-text-stroke (ikon Bootstrap Icons adalah
   font, bukan SVG, jadi ini cara paling ringan menebalkan tanpa ganti set
   ikon) — aman di browser berbasis Chromium/Safari (termasuk Android Chrome,
   yang dipakai mayoritas pengguna aplikasi ini), no-op halus di browser lain. */
.quick-icon {
    width: 46px;
    height: 46px;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}
.quick-icon i {
    -webkit-text-stroke: .4px currentColor;
}
.quick-icon-blue    { background: #DCEEFB; color: #0E77C8; }
.quick-icon-green   { background: #DCF5E3; color: #1E9E5A; }
.quick-icon-purple  { background: #E8E0FC; color: #7C4DFF; }
.quick-icon-orange  { background: #FDE9D2; color: #D97706; }
.quick-icon-pink    { background: #FCE1EC; color: #DB2777; }
.quick-icon-teal    { background: #D6F5F0; color: #0D9488; }
.quick-icon-amber   { background: #FCF1CE; color: #B45309; }
.quick-icon-red     { background: #FBE2E2; color: #DC2626; }
.quick-icon-indigo  { background: #E2E5FC; color: #4F46E5; }
.quick-icon-cyan    { background: #D9F1FB; color: #0891B2; }

/* Memastikan halaman tidak pernah scroll horizontal di layar sempit */
@media (max-width: 575.98px) {
    .login-card { max-width: 100%; }
}

/* Kotak pratinjau "Latar Belakang Halaman Login" di Pengaturan Umum — meniru
   background .login-page sungguhan (putih polos di mode terang, gelap di
   mode gelap) supaya pratinjaunya tetap akurat mencerminkan tampilan asli. */
.login-bg-preview {
    background: #ffffff;
    border: 1px solid #e9edf2;
}
[data-bs-theme="dark"] .login-bg-preview {
    background: #14181f;
    border-color: #2a313d;
}

/* =====================================================================
   MODE GELAP — otomatis mengikuti pengaturan perangkat/browser (TIDAK ada
   tombol pilih manual), lewat atribut data-bs-theme="dark" di <html> yang
   dipasang skrip includes/theme-init.php berdasarkan prefers-color-scheme
   sistem operasi. Mode terang tetap default (permintaan eksplisit).

   Bootstrap 5.3 SUDAH otomatis menggelapkan komponen bawaannya sendiri
   (card, table, modal, dropdown, form, badge, dst) begitu atribut ini
   terpasang — bagian di bawah ini HANYA meng-override kelas/komponen
   KUSTOM milik aplikasi ini (yang warnanya di-hardcode di atas, jadi tidak
   otomatis ikut redup), PLUS beberapa utility class Bootstrap yang
   sengaja TIDAK ikut berubah otomatis oleh desain Bootstrap sendiri
   (.bg-white/.bg-light/.text-dark/.border memakai warna literal, bukan
   token semantik) — di-timpa di sini sekali untuk seluruh situs sekaligus,
   supaya puluhan halaman yang memakainya tidak perlu disentuh satu-satu.
   ===================================================================== */
[data-bs-theme="dark"] body {
    background-color: #14181f;
    color: #dfe3e8;
}

/* Utility Bootstrap yang tidak ikut redup otomatis — ditimpa sekali di
   sini untuk seluruh situs (dipakai di puluhan halaman: kartu pratinjau,
   badge peran di header, kotak info, dst). */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}
[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .border {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .app-sidebar {
    background: #181d26;
    border-right-color: #2a313d;
}
[data-bs-theme="dark"] .app-sidebar .nav-link,
[data-bs-theme="dark"] .offcanvas .nav-link {
    color: #c3cad4;
}
[data-bs-theme="dark"] .app-sidebar .nav-link:not(.active):hover,
[data-bs-theme="dark"] .offcanvas .nav-link:not(.active):hover {
    background: #232a35;
    color: #7ec4f0;
}
[data-bs-theme="dark"] .app-sidebar .nav-link.disabled,
[data-bs-theme="dark"] .offcanvas .nav-link.disabled {
    color: #5b6472;
}
[data-bs-theme="dark"] .app-sidebar .nav-section-title,
[data-bs-theme="dark"] .offcanvas .nav-section-title {
    color: #6b7480;
}

[data-bs-theme="dark"] .role-card {
    border-color: #2a313d;
    color: #dfe3e8;
}
[data-bs-theme="dark"] .role-card:hover {
    color: #dfe3e8;
}

[data-bs-theme="dark"] .login-page {
    background: #14181f;
}
[data-bs-theme="dark"] .login-card {
    background: #1c222c;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .password-toggle {
    background: #1c222c;
    border-color: #3a4250;
    color: #9aa5b1;
}

[data-bs-theme="dark"] .module-card {
    background: #1c222c;
    box-shadow: none;
    border: 1px solid #2a313d;
}
[data-bs-theme="dark"] .module-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #9aa5b1;
}