/*
==========================================================
SMANSASOO Kesiswaan Portal
Theme Stylesheet (Dark / Light) — gaya iOS 26
Version : 1.0.0
==========================================================
File ini HANYA berisi:
1. Override variabel warna dari variables.css saat
   html[data-theme="dark"] aktif. Karena semua komponen di
   proyek ini sudah memakai var(--surface), var(--text), dst,
   cukup override di sini -- tidak perlu tulis ulang CSS
   komponen lain.
2. Komponen toggle switch bergaya iOS (pill, thumb bulat,
   ikon matahari/bulan) yang dipakai di halaman rekap.
3. Sedikit "polish" khas iOS 26: material lebih tebal
   (backdrop-filter saturate + blur), highlight tipis di tepi
   atas kartu, transisi warna yang halus saat ganti tema.

Load file ini SETELAH variables.css dan SEBELUM stylesheet
halaman (mis. rekap.css), supaya urutan cascade tetap benar.
==========================================================
*/

/* ==========================================
   TRANSISI HALUS SAAT GANTI TEMA
========================================== */

html{

    transition: background-color var(--transition), color var(--transition);

}

body,
.rekap-card,
.rekap-panel,
.nilai-card,
.rekap-stat-box,
.nilai-table,
input,
select,
button{

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);

}

/* ==========================================
   DARK MODE TOKENS (gaya iOS 26 dark)
========================================== */

html[data-theme="dark"]{

    --primary:#4FA3FF;
    --primary-light:#7CC0FF;
    --primary-dark:#1E6FBF;

    --secondary:#FFC93C;
    --secondary-light:#FFDD7A;
    --secondary-dark:#E0A800;

    --success:#32D74B;
    --warning:#FFB020;
    --danger:#FF6961;
    --info:#5AC8FA;

    --background:#000000;
    --surface:#1C1C1E;
    --surface-alt:#2C2C2E;

    --text:#F5F5F7;
    --text-light:#AEAEB2;
    --text-muted:#8E8E93;
    --text-white:#FFFFFF;

    --border:rgba(255,255,255,.12);
    --border-light:rgba(255,255,255,.08);

    --shadow-sm:0 2px 10px rgba(0,0,0,.45);
    --shadow-md:0 10px 30px rgba(0,0,0,.55);
    --shadow-lg:0 20px 50px rgba(0,0,0,.65);

    color-scheme: dark;

}

html[data-theme="light"]{

    color-scheme: light;

}

/* ==========================================
   IOS-STYLE MATERIAL (dipakai kartu rekap)
========================================== */

.ios-material{

    background:color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter:saturate(180%) blur(24px);
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    border:1px solid var(--border-light);
}

/* ==========================================
   THEME TOGGLE SWITCH (pill, ikon matahari/bulan)
========================================== */

.theme-toggle{

    position:relative;

    display:inline-flex;
    align-items:center;

    width:64px;
    height:36px;

    padding:3px;

    border:1px solid var(--border);

    border-radius:var(--radius-pill);

    background:var(--surface-alt);

    cursor:pointer;

    flex-shrink:0;

    -webkit-tap-highlight-color:transparent;

}

.theme-toggle:focus-visible{

    outline:2px solid var(--primary);
    outline-offset:2px;

}

.theme-toggle .theme-toggle-track{

    position:relative;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 6px;

}

.theme-toggle .theme-toggle-icon{

    font-size:14px;
    line-height:1;
    opacity:.7;

}

.theme-toggle .theme-toggle-thumb{

    position:absolute;
    top:2px;
    left:2px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:linear-gradient(180deg,#ffffff,#e5e7eb);

    box-shadow:0 2px 6px rgba(0,0,0,.25);

    transition:transform var(--transition-fast);

}

.theme-toggle.is-dark .theme-toggle-thumb{

    transform:translateX(28px);

    background:linear-gradient(180deg,#3a3a3c,#1c1c1e);

}

.theme-toggle.is-dark{

    background:var(--primary-dark);

    border-color:var(--primary);

}

/* ==========================================
   SCROLLBAR TIPIS (opsional, khas macOS/iOS)
========================================== */

.rekap-page ::-webkit-scrollbar{

    width:10px;
    height:10px;

}

.rekap-page ::-webkit-scrollbar-thumb{

    background:var(--border);
    border-radius:var(--radius-pill);

}

.rekap-page ::-webkit-scrollbar-track{

    background:transparent;

}