/* =====================================================================
   TEMA.CSS  -  FILE PENGATURAN STYLE PUSAT
   Sistem TATIB SMKN 4 Malang
   =====================================================================
   Semua halaman (admin, sekretaris, wali kelas, publik, login, pendaftaran)
   memuat file ini lewat  <?= tema_css() ?>  di bagian <head>.

   CARA MENGUBAH TAMPILAN
   1. Warna   : ubah nilai --c-... di bagian WARNA. Satu perubahan berlaku
                di seluruh halaman yang memakai warna itu.
   2. Font    : ubah --font-base (font seluruh aplikasi). Bila memakai font
                Google baru, ganti juga baris @import di paling atas.
   3. Sudut   : ubah --radius-scale. 1 = seperti sekarang, 0.5 = lebih
                tajam, 1.4 = lebih bulat, 0 = siku-siku.
   4. Bayangan: ubah --shadow-soft / --shadow-hover.

   Catatan: nilai bawaan di bawah SAMA dengan tampilan sebelum dipusatkan,
   jadi tidak ada yang berubah sampai Anda mengeditnya.
   Halaman cetak/PDF (application/views/admin/cetak/*) sengaja TIDAK memakai
   file ini karena mesin PDF (Dompdf) tidak mendukung variabel CSS.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap");

:root {

    /* ================= FONT ================= */
    --font-base:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* seluruh aplikasi */
    --font-poppins: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;                    /* portal wali kelas */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;                                   /* judul berhias */

    /* ================= SUDUT MEMBULAT ================= */
    --radius-scale: 1;               /* pengali semua sudut: 0 = siku, 1 = bawaan, 1.5 = bulat */
    --r-pill: 999px;                 /* lencana/tombol kapsul (tidak ikut skala) */
    --r-4: calc(4px * var(--radius-scale));
    --r-6: calc(6px * var(--radius-scale));
    --r-8: calc(8px * var(--radius-scale));
    --r-9: calc(9px * var(--radius-scale));
    --r-10: calc(10px * var(--radius-scale));
    --r-11: calc(11px * var(--radius-scale));
    --r-12: calc(12px * var(--radius-scale));
    --r-13: calc(13px * var(--radius-scale));
    --r-14: calc(14px * var(--radius-scale));
    --r-15: calc(15px * var(--radius-scale));
    --r-16: calc(16px * var(--radius-scale));
    --r-18: calc(18px * var(--radius-scale));
    --r-20: calc(20px * var(--radius-scale));
    --r-22: calc(22px * var(--radius-scale));

    /* nama lama yang masih dipakai beberapa halaman */
    --radius-xl: var(--r-22);
    --radius-lg: var(--r-18);
    --radius-md: var(--r-14);
    --radius-sm: var(--r-10);

    /* ================= BAYANGAN ================= */
    --shadow-soft:  0 10px 28px -14px rgba(15, 23, 42, .16);
    --shadow-hover: 0 18px 40px -16px rgba(15, 23, 42, .24);

    /* ================= WARNA ================= */

    /* ---- NETRAL (teks, garis, latar) ---- */
    --c-white:               #ffffff;  /* Putih (latar kartu, teks di atas warna gelap) */
    --c-ink-deep:            #0b1220;  /* Hitam kebiruan paling gelap */
    --c-ink:                 #0f172a;  /* Navy gelap: teks utama, header, tombol gelap */
    --c-ink-2:               #1e293b;  /* Navy gelap kedua */
    --c-ink-3:               #334155;  /* Teks isi */
    --c-ink-4:               #475569;  /* Teks sekunder tegas */
    --c-text-bs:             #212529;  /* Teks bawaan Bootstrap */
    --c-muted:               #64748b;  /* Teks redup / keterangan */
    --c-muted-2:             #94a3b8;  /* Teks sangat redup / placeholder */
    --c-muted-3:             #a3aebf;  /* Teks redup lembut */
    --c-line-strong:         #cbd5e1;  /* Garis / border tegas */
    --c-line:                #e2e8f0;  /* Garis / border */
    --c-line-soft:           #e8edf5;  /* Garis / border lembut */
    --c-surface-3:           #eef2f7;  /* Latar panel */
    --c-surface-2:           #f1f5f9;  /* Latar abu muda (input, chip) */
    --c-surface:             #f8fafc;  /* Latar halus (tabel, kartu dalam) */
    --c-slate-5b:            #5b6472;  /* Abu tua */
    --c-navy-ink:            #1a2238;  /* Navy teks tema admin */
    --c-muted-warm:          #7c8598;  /* Teks redup tema admin */
    --c-line-warm:           #edeef4;  /* Garis tema admin */
    --c-line-warm-2:         #eef0f4;  /* Garis tema admin lembut */
    --c-surface-4:           #f6f8fb;  /* Latar panel lembut */

    /* ---- WARNA UTAMA - biru (tombol, tautan, aksen) ---- */
    --c-primary:             #2563eb;  /* Warna utama (tombol, tautan, aksen) */
    --c-primary-light:       #3b82f6;  /* Biru terang */
    --c-primary-dark:        #1d4ed8;  /* Biru gelap (hover) */
    --c-primary-darker:      #1e40af;  /* Biru lebih gelap */
    --c-primary-deep:        #1e3a8a;  /* Biru tua */
    --c-primary-soft:        #eff6ff;  /* Biru sangat muda (latar lencana/aktif) */
    --c-primary-soft-2:      #dbeafe;  /* Biru muda */
    --c-primary-border:      #bfdbfe;  /* Garis biru muda */
    --c-primary-border-2:    #93c5fd;  /* Garis biru sedang */

    /* ---- AKSEN KEDUA - indigo & ungu ---- */
    --c-accent:              #4f46e5;  /* Warna aksen kedua (indigo), pasangan gradasi utama */
    --c-accent-light:        #6366f1;  /* Indigo terang */
    --c-violet:              #7c3aed;  /* Ungu */
    --c-violet-dark:         #6d28d9;  /* Ungu gelap */
    --c-violet-light:        #a855f7;  /* Ungu terang */
    --c-violet-soft:         #ede9fe;  /* Ungu muda */
    --c-violet-bs:           #6f42c1;  /* Ungu Bootstrap */
    --c-indigo-2:            #3457d5;  /* Biru kobalt */
    --c-indigo-dark:         #24378f;  /* Biru kobalt tua */

    /* ---- BAHAYA / ALPHA - merah ---- */
    --c-danger:              #be123c;  /* Bahaya / Alpha (merah tua) */
    --c-danger-2:            #e11d48;  /* Bahaya (merah mawar) */
    --c-danger-light:        #f43f5e;  /* Bahaya terang */
    --c-red:                 #ef4444;  /* Merah */
    --c-red-dark:            #dc2626;  /* Merah tua */
    --c-red-bs:              #dc3545;  /* Merah Bootstrap */
    --c-danger-soft:         #ffe4e6;  /* Latar bahaya */
    --c-danger-softer:       #fff1f2;  /* Latar bahaya sangat muda */
    --c-danger-border:       #fecdd3;  /* Garis bahaya */
    --c-red-soft:            #fee2e2;  /* Latar merah muda */

    /* ---- PERINGATAN / IZIN - kuning & oranye ---- */
    --c-warn:                #f59e0b;  /* Peringatan / Izin (amber) */
    --c-warn-dark:           #b45309;  /* Peringatan tua */
    --c-warn-darker:         #92400e;  /* Peringatan sangat tua */
    --c-amber-dark:          #d97706;  /* Amber tua */
    --c-orange:              #f97316;  /* Oranye */
    --c-orange-light:        #fb923c;  /* Oranye terang */
    --c-orange-dark:         #c2410c;  /* Oranye tua */
    --c-warn-soft:           #fef3c7;  /* Latar peringatan */
    --c-warn-softer:         #fffbeb;  /* Latar peringatan sangat muda */
    --c-warn-soft-2:         #fff4d6;  /* Latar peringatan krem */
    --c-warn-border:         #fde68a;  /* Garis peringatan */

    /* ---- SUKSES / HADIR - hijau ---- */
    --c-ok:                  #16a34a;  /* Sukses (hijau) */
    --c-ok-dark:             #15803d;  /* Sukses / Hadir (hijau tua) */
    --c-ok-darker:           #146239;  /* Hijau sangat tua */
    --c-ok-2:                #1f8a53;  /* Hijau hutan */
    --c-ok-bs:               #198754;  /* Hijau Bootstrap */
    --c-emerald:             #10b981;  /* Zamrud */
    --c-emerald-dark:        #059669;  /* Zamrud tua */
    --c-green:               #22c55e;  /* Hijau terang */
    --c-ok-soft:             #dcfce7;  /* Latar sukses */
    --c-ok-softer:           #f0fdf4;  /* Latar sukses sangat muda */
    --c-ok-soft-2:           #e3f6ec;  /* Latar sukses lembut */

    /* ---- INFO / SAKIT - biru langit & sian ---- */
    --c-sky:                 #0ea5e9;  /* Info (biru langit) */
    --c-sky-soft:            #e0f2fe;  /* Latar info */
    --c-cyan:                #0891b2;  /* Sian (Sakit/Info) */
    --c-cyan-light:          #22d3ee;  /* Sian terang */
    --c-cyan-2:              #06b6d4;  /* Sian */
    --c-cyan-dark:           #0e7490;  /* Sian tua */
    --c-cyan-soft:           #cffafe;  /* Latar sian */
    --c-cyan-bs:             #17a2b8;  /* Sian Bootstrap */
    --c-teal-dark:           #1c6f8c;  /* Biru toska tua */

    /* ---- MERAH MUDA ---- */
    --c-pink:                #ec4899;  /* Merah muda */
    --c-pink-dark:           #be185d;  /* Merah muda tua */
    --c-pink-soft:           #fce7f3;  /* Latar merah muda */

    /* ---- EMAS (aksen tema admin) ---- */
    --c-gold:                #c79a3f;  /* Emas (aksen tema admin) */
    --c-gold-dark:           #a9781a;  /* Emas tua */
    --c-gold-2:              #c9941e;  /* Emas */
    --c-gold-light:          #f0b93d;  /* Emas terang */
}

/* ================= FOOTER HAK CIPTA (teks diatur di Pengaturan Tampilan) ================= */
.app-foot { text-align: center; color: var(--c-muted); font-size: .76rem; padding: 18px 12px 22px; }