/* ============================================================
   AppSchool — Design Tokens
   Satu-satunya tempat mendefinisikan warna, radius, shadow, font.
   Komponen TIDAK boleh memakai nilai hex langsung — selalu var().
   Sumber warna: muhammadiyah.or.id (#009C48, gradient header/top-bar)
   + Pedoman Brand Muhammadiyah 2024 (gradasi & ramp resmi).
   ============================================================ */
:root {
    /* Brand — Hijau Muhammadiyah + Kuning Sang Surya */
    --green-700: #007E3A;
    --green-600: #009C48;
    --green-500: #00B056;
    --green-100: #D9F2E4;
    --green-50: #EDF9F2;
    --sun-500: #EFB61A; /* emas Sang Surya, versi UI dari kuning bendera #FFF200 */
    --sun-100: #FBF0D2;
    /* Biru Muhammadiyah — dari pedoman brand resmi (#2C368B, "keteguhan iman,
     keluasan ilmu"). Skala warna AKSI aplikasi. */
    --blue-700: #222A6F;
    --blue-600: #2C368B;
    --blue-500: #4351AE;
    --blue-100: #E1E3F3;
    --blue-50: #F0F1F9;
    /* Token semantik PRIMER — komponen memakai ini, bukan skala warna langsung.
     Primer = biru; hijau tetap untuk status sukses & identitas (logo, gradasi). */
    --primary: var(--blue-600);
    --primary-strong: var(--blue-700);
    --primary-soft: var(--blue-100);
    --primary-tint: var(--blue-50);
    --primary-rgb: 44, 54, 139;
    /* Gradasi brand — nilai resmi */
    --grad-brand: linear-gradient(90deg, #2C368B, #01A54D); /* pedoman resmi: biru→hijau */
    --grad-header: linear-gradient(90deg, #1B3A7C, #1D8757); /* header muhammadiyah.or.id */
    --grad-deep: linear-gradient(90deg, #03006B, #004C1E); /* top-bar muhammadiyah.or.id */
    --grad-green: linear-gradient(135deg, #00B056 0%, #009C48 55%, #00875C 100%);
    --grad-sun: linear-gradient(135deg, #FAED21 0%, #EE942E 55%, #E8242A 100%); /* pedoman: Sang Surya */
    /* Ramp resmi 7 warna — palet grafik/dataviz (ApexCharts dsb.) */
    --ramp-cool-1: #2C368B;
    --ramp-cool-2: #1D5F82;
    --ramp-cool-3: #10816F;
    --ramp-cool-4: #01A54D;
    --ramp-cool-5: #7CB947;
    --ramp-cool-6: #BCD03B;
    --ramp-cool-7: #FAED21;
    --ramp-warm-1: #E8242A;
    --ramp-warm-2: #EA572D;
    --ramp-warm-3: #EC782E;
    --ramp-warm-4: #EE942E;
    --ramp-warm-5: #F1B12D;
    --ramp-warm-6: #F4CE2A;
    --ramp-warm-7: #FAED21;
    /* Ubin ikon pastel (kategori) */
    --tile-green-bg: #E3F5EC;
    --tile-green-fg: #0A9B5C;
    --tile-blue-bg: #E7F0FD;
    --tile-blue-fg: #2F6FE4;
    --tile-purple-bg: #F0EAFE;
    --tile-purple-fg: #7C4DE0;
    --tile-orange-bg: #FDF1E0;
    --tile-orange-fg: #DE8A16;
    --tile-red-bg: #FDEAEA;
    --tile-red-fg: #DE4A4A;
    --tile-teal-bg: #E2F5F4;
    --tile-teal-fg: #12968E;
    /* Semantik status */
    --success-bg: #DCF3E7;
    --success-fg: #077A48;
    --warning-bg: #FDF1DB;
    --warning-fg: #A96B0B;
    --danger-bg: #FDE7E7;
    --danger-fg: #C03434;
    --info-bg: #E7F0FD;
    --info-fg: #2560C9;
    --neutral-bg: #EDF0F3;
    --neutral-fg: #56606B;
    /* Netral (abu sejuk) */
    --page-bg: #F7F9FC; /* semburat biru halus (referensi #F9FAFE) */
    --table-head-bg: #EEF1F4;
    --card-bg: #FFFFFF;
    --sidebar-bg: linear-gradient(to bottom, #0B0955, #1E3B75, #087A52); /* biru malam -> biru -> hijau Muhammadiyah */
    --sidebar-bg-solid: #0B0955; /* = warna atas gradasi (patch pojok & offcanvas) */
    --sidebar-text: rgba(255,255,255,.85);
    --sidebar-muted: rgba(255,255,255,.55);
    --sidebar-hover: rgba(255,255,255,.10);
    --sidebar-active-bg: #FFFFFF;
    --sidebar-active-fg: #0D3FB2;
    --sidebar-avatar-fg: #0D3FB2; /* konstan: teks avatar di atas chip putih (kedua tema) */
    --border: #E5E9EC;
    --border-strong: #D4DADF;
    --text: #18212B;
    --text-2: #4E5A66;
    --muted: #6B7680; /* ≥4.5:1 di atas putih (WCAG AA teks kecil) */
    --hover: #F1F4F6;
    --shadow-card: 0 1px 2px rgba(24, 33, 43, .04);
    --shadow-pop: 0 8px 24px rgba(24, 33, 43, .12);
    --radius: 12px;
    --radius-sm: 8px;
    --topbar-h: 64px; /* tinggi topbar = tinggi section brand sidebar (garis sejajar) */

    --scrollbar-thumb: #C7CED4;
    --scrollbar-thumb-hover: #A9B2BA;
    --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Mode gelap: ikuti preferensi OS ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --green-600: #14BC61;
        --green-500: #23CA70;
        --green-100: rgba(20, 188, 97, .18);
        --green-50: rgba(20, 188, 97, .10);
        --sun-500: #F2C338;
        --sun-100: rgba(242, 195, 56, .16);
        /* Biru dicerahkan agar terbaca di latar gelap; "strong" justru lebih terang */
        --blue-700: #929CE6;
        --blue-600: #7A85DD;
        --blue-500: #6874D4;
        --blue-100: rgba(122, 133, 221, .20);
        --blue-50: rgba(122, 133, 221, .11);
        --primary-rgb: 122, 133, 221;
        --grad-brand: linear-gradient(90deg, #283274, #0A8E44);
        --grad-header: linear-gradient(90deg, #1E3B75, #1C7A50);
        --grad-deep: linear-gradient(90deg, #0B0955, #06431F);
        --grad-green: linear-gradient(135deg, #12A857 0%, #0C9048 55%, #087A52 100%);
        --grad-sun: linear-gradient(135deg, #DECF3D 0%, #D2822B 55%, #C23434 100%);
        --tile-green-bg: rgba(23, 181, 115, .14);
        --tile-green-fg: #3ECD90;
        --tile-blue-bg: rgba(84, 140, 235, .14);
        --tile-blue-fg: #7FA9F0;
        --tile-purple-bg: rgba(148, 105, 235, .16);
        --tile-purple-fg: #B394F2;
        --tile-orange-bg: rgba(228, 155, 50, .14);
        --tile-orange-fg: #E8AC55;
        --tile-red-bg: rgba(228, 90, 90, .14);
        --tile-red-fg: #EC8080;
        --tile-teal-bg: rgba(28, 168, 160, .14);
        --tile-teal-fg: #48C2BB;
        --success-bg: rgba(23, 181, 115, .16);
        --success-fg: #3ECD90;
        --warning-bg: rgba(228, 155, 50, .16);
        --warning-fg: #E8AC55;
        --danger-bg: rgba(228, 90, 90, .16);
        --danger-fg: #EC8080;
        --info-bg: rgba(84, 140, 235, .16);
        --info-fg: #7FA9F0;
        --neutral-bg: rgba(140, 152, 164, .16);
        --neutral-fg: #9AA5B0;
        --page-bg: #12161B;
        --table-head-bg: #1C232B;
        --card-bg: #191F26;
        --sidebar-bg: linear-gradient(to bottom, #0B0955, #1E3B75, #087A52);
        --sidebar-bg-solid: #0B0955;
        --sidebar-text: rgba(255,255,255,.82);
        --sidebar-muted: rgba(255,255,255,.5);
        --sidebar-hover: rgba(255,255,255,.09);
        --sidebar-active-bg: rgba(255,255,255,.16);
        --sidebar-active-fg: #FFFFFF;
        --border: #29313A;
        --border-strong: #333D48;
        --text: #E8ECEF;
        --text-2: #B4BEC7;
        --muted: #87929D;
        --hover: #212932;
        --shadow-card: 0 1px 2px rgba(0, 0, 0, .25);
        --shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
        --scrollbar-thumb: #3A444F;
        --scrollbar-thumb-hover: #4C5866;
    }
}

/* ---------- Override eksplisit (toggle tema aplikasi) ----------
   data-theme di <html> selalu menang atas preferensi OS. */
:root[data-theme="light"] {
  --green-700: #007E3A; --green-600: #009C48; --green-500: #00B056;
  --green-100: #D9F2E4; --green-50: #EDF9F2;
  --blue-700: #222A6F; --blue-600: #2C368B; --blue-500: #4351AE;
  --blue-100: #E1E3F3; --blue-50: #F0F1F9;
  --primary-rgb: 44, 54, 139;
  --sun-500: #EFB61A; --sun-100: #FBF0D2;
  --grad-brand:  linear-gradient(90deg, #2C368B, #01A54D);
  --grad-header: linear-gradient(90deg, #1B3A7C, #1D8757);
  --grad-deep:   linear-gradient(90deg, #03006B, #004C1E);
  --grad-green:  linear-gradient(135deg, #00B056 0%, #009C48 55%, #00875C 100%);
  --grad-sun:    linear-gradient(135deg, #FAED21 0%, #EE942E 55%, #E8242A 100%);
  --tile-green-bg:  #E3F5EC; --tile-green-fg:  #0A9B5C;
  --tile-blue-bg:   #E7F0FD; --tile-blue-fg:   #2F6FE4;
  --tile-purple-bg: #F0EAFE; --tile-purple-fg: #7C4DE0;
  --tile-orange-bg: #FDF1E0; --tile-orange-fg: #DE8A16;
  --tile-red-bg:    #FDEAEA; --tile-red-fg:    #DE4A4A;
  --tile-teal-bg:   #E2F5F4; --tile-teal-fg:   #12968E;
  --success-bg: #DCF3E7; --success-fg: #077A48;
  --warning-bg: #FDF1DB; --warning-fg: #A96B0B;
  --danger-bg:  #FDE7E7; --danger-fg:  #C03434;
  --info-bg:    #E7F0FD; --info-fg:    #2560C9;
  --neutral-bg: #EDF0F3; --neutral-fg: #56606B;
  --page-bg: #F7F9FC; --table-head-bg: #EEF1F4; --card-bg: #FFFFFF;
  --sidebar-bg: linear-gradient(to bottom, #0B0955, #1E3B75, #087A52); /* biru malam -> biru -> hijau Muhammadiyah */ --sidebar-bg-solid: #0B0955; /* = warna atas gradasi (patch pojok & offcanvas) */ --sidebar-text: rgba(255,255,255,.85); --sidebar-muted: rgba(255,255,255,.55); --sidebar-hover: rgba(255,255,255,.10); --sidebar-active-bg: #FFFFFF; --sidebar-active-fg: #0D3FB2;
  --border: #E5E9EC; --border-strong: #D4DADF;
  --text: #18212B; --text-2: #4E5A66; --muted: #6B7680; --hover: #F1F4F6;
  --shadow-card: 0 1px 2px rgba(24, 33, 43, .04);
  --shadow-pop:  0 8px 24px rgba(24, 33, 43, .12);
  --scrollbar-thumb: #C7CED4;
  --scrollbar-thumb-hover: #A9B2BA;
}

:root[data-theme="dark"] {
  --green-600: #14BC61; --green-500: #23CA70;
  --green-100: rgba(20, 188, 97, .18); --green-50: rgba(20, 188, 97, .10);
  --blue-700: #929CE6; --blue-600: #7A85DD; --blue-500: #6874D4;
  --blue-100: rgba(122, 133, 221, .20); --blue-50: rgba(122, 133, 221, .11);
  --primary-rgb: 122, 133, 221;
  --sun-500: #F2C338; --sun-100: rgba(242, 195, 56, .16);
  --grad-brand:  linear-gradient(90deg, #283274, #0A8E44);
  --grad-header: linear-gradient(90deg, #1E3B75, #1C7A50);
  --grad-deep:   linear-gradient(90deg, #0B0955, #06431F);
  --grad-green:  linear-gradient(135deg, #12A857 0%, #0C9048 55%, #087A52 100%);
  --grad-sun:    linear-gradient(135deg, #DECF3D 0%, #D2822B 55%, #C23434 100%);
  --tile-green-bg:  rgba(23, 181, 115, .14); --tile-green-fg:  #3ECD90;
  --tile-blue-bg:   rgba(84, 140, 235, .14); --tile-blue-fg:   #7FA9F0;
  --tile-purple-bg: rgba(148, 105, 235, .16); --tile-purple-fg: #B394F2;
  --tile-orange-bg: rgba(228, 155, 50, .14); --tile-orange-fg: #E8AC55;
  --tile-red-bg:    rgba(228, 90, 90, .14);  --tile-red-fg:    #EC8080;
  --tile-teal-bg:   rgba(28, 168, 160, .14); --tile-teal-fg:   #48C2BB;
  --success-bg: rgba(23, 181, 115, .16); --success-fg: #3ECD90;
  --warning-bg: rgba(228, 155, 50, .16); --warning-fg: #E8AC55;
  --danger-bg:  rgba(228, 90, 90, .16);  --danger-fg:  #EC8080;
  --info-bg:    rgba(84, 140, 235, .16); --info-fg:    #7FA9F0;
  --neutral-bg: rgba(140, 152, 164, .16); --neutral-fg: #9AA5B0;
  --page-bg: #12161B; --table-head-bg: #1C232B; --card-bg: #191F26;
  --sidebar-bg: linear-gradient(to bottom, #0B0955, #1E3B75, #087A52); --sidebar-bg-solid: #0B0955; --sidebar-text: rgba(255,255,255,.82); --sidebar-muted: rgba(255,255,255,.5); --sidebar-hover: rgba(255,255,255,.09); --sidebar-active-bg: rgba(255,255,255,.16); --sidebar-active-fg: #FFFFFF;
  --border: #29313A; --border-strong: #333D48;
  --text: #E8ECEF; --text-2: #B4BEC7; --muted: #87929D; --hover: #212932;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-pop:  0 8px 24px rgba(0, 0, 0, .45);
  --scrollbar-thumb: #3A444F;
  --scrollbar-thumb-hover: #4C5866;
}