/* ==========================================================================
   E-LEARNING SEKOLAH — DESIGN SYSTEM
   Palet warna diambil dari logo sekolah (SMK) & logo Tut Wuri Handayani
   Biru   : identitas utama (edukasi, teknologi, kepercayaan)
   Emas   : aksen (semangat, prestasi) — dari roda gigi & obor
   Merah  : aksen tipis untuk status/peringatan — dari perisai sekolah
   ========================================================================== */

:root {
    --brand-blue-950: #06192f;
    --brand-blue-900: #0a2a4d;
    --brand-blue-800: #0d3a68;
    --brand-blue-700: #0e4d8c;
    --brand-blue-600: #0b63ad;
    --brand-blue-500: #0091d5;   /* biru utama — dari logo Tut Wuri Handayani */
    --brand-blue-400: #2ba9e0;
    --brand-blue-100: #e5f4fc;
    --brand-blue-50:  #f2f9fd;

    --brand-gold-600: #c98a12;
    --brand-gold-500: #f0a91c;   /* emas — dari roda gigi / obor */
    --brand-gold-400: #ffc94d;
    --brand-gold-100: #fdf1da;

    --brand-red-600: #c62828;
    --brand-red-500: #e5484d;    /* merah — aksen dari perisai sekolah */
    --brand-red-100: #fdecea;

    --brand-ink: #16283f;
    --brand-muted: #64748b;
    --brand-bg: #f4f8fb;
    --brand-surface: #ffffff;
    --brand-border: #e6edf3;

    --brand-radius: 16px;
    --brand-radius-sm: 10px;
    --brand-shadow: 0 6px 20px -8px rgba(10, 42, 77, 0.15);
    --brand-shadow-lg: 0 20px 45px -15px rgba(10, 42, 77, 0.25);

    /* keep Bootstrap primary tokens in sync */
    --bs-primary: var(--brand-blue-500);
    --bs-primary-rgb: 0, 145, 213;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--brand-bg);
    color: var(--brand-ink);
}

/* ---------- Bootstrap re-theme (applies app-wide, no need to touch every view) ---------- */
a { color: var(--brand-blue-600); }
a:hover { color: var(--brand-blue-700); }

.btn-primary {
    background-color: var(--brand-blue-500);
    border-color: var(--brand-blue-500);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--brand-blue-700) !important;
    border-color: var(--brand-blue-700) !important;
}
.btn-outline-primary {
    color: var(--brand-blue-600);
    border-color: var(--brand-blue-500);
}
.btn-outline-primary:hover {
    background-color: var(--brand-blue-500);
    border-color: var(--brand-blue-500);
}
.btn-warning {
    background-color: var(--brand-gold-500);
    border-color: var(--brand-gold-500);
    color: #4a3300;
}
.btn-warning:hover {
    background-color: var(--brand-gold-600);
    border-color: var(--brand-gold-600);
    color: #4a3300;
}

.text-primary { color: var(--brand-blue-600) !important; }
.bg-primary   { background-color: var(--brand-blue-500) !important; }
.border-primary { border-color: var(--brand-blue-500) !important; }
.badge.bg-primary { background-color: var(--brand-blue-500) !important; }
.badge.bg-warning { background-color: var(--brand-gold-500) !important; color: #4a3300 !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--brand-blue-400);
    box-shadow: 0 0 0 .2rem rgba(0, 145, 213, .15);
}
.form-check-input:checked {
    background-color: var(--brand-blue-500);
    border-color: var(--brand-blue-500);
}
.page-link { color: var(--brand-blue-600); }
.page-item.active .page-link {
    background-color: var(--brand-blue-500);
    border-color: var(--brand-blue-500);
}
.nav-tabs .nav-link.active {
    color: var(--brand-blue-600);
    border-bottom: 2px solid var(--brand-blue-500);
}
.spinner-border.text-primary { color: var(--brand-blue-500) !important; }

.card {
    border: 1px solid var(--brand-border);
}
.shadow-sm { box-shadow: var(--brand-shadow) !important; }

/* ---------- Reusable brand components ---------- */
.brand-lockup { display: flex; align-items: center; gap: .6rem; }
.brand-lockup img { height: 40px; width: 40px; object-fit: contain; }
.brand-lockup .brand-text { line-height: 1.1; }
.brand-lockup .brand-text .school-name { font-weight: 700; font-size: .95rem; }
.brand-lockup .brand-text .school-tag { font-size: .72rem; color: var(--brand-muted); }

.stat-card {
    background: var(--brand-surface);
    border-radius: var(--brand-radius);
    border: 1px solid var(--brand-border);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--brand-shadow);
    position: relative;
    overflow: hidden;
}
.stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; background: var(--brand-blue-100); color: var(--brand-blue-600);
    margin-bottom: .75rem;
}

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand-blue-600);
}

/* ---------- Back button (tombol "Kembali") ---------- */
/* Dipakai di semua halaman via class .btn-back, supaya tampilannya
   konsisten, cukup kontras, dan enak dipencet (bukan teks polos). */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brand-blue-700);
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--brand-shadow);
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-back:hover, .btn-back:focus {
    background: var(--brand-blue-50);
    border-color: var(--brand-blue-400);
    color: var(--brand-blue-700);
    transform: translateX(-2px);
}
.btn-back:active { transform: translateX(0); }
.btn-back .bi { margin-right: 0; font-size: .8rem; }

/* ---------- Icon refinement (Bootstrap Icons) ---------- */
.bi { vertical-align: -.14em; }
.btn .bi, a .bi, h5 .bi, h6 .bi, .fw-semibold .bi {
    margin-right: .4rem;
}
.stat-card .stat-icon .bi, .feature-icon .bi { margin-right: 0; font-size: 1.35rem; }
#sidebar .nav-link .ic .bi { margin-right: 0; font-size: 1.05rem; }
.hero-badge .bi { margin-right: .35rem; }

/* ---------- Breadcrumb (Kelas -> Pertemuan drill-down) ---------- */
.breadcrumb {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: .75rem;
    padding: .55rem .9rem;
    margin-bottom: 1rem;
}
.breadcrumb-item a {
    color: var(--brand-blue-700);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--brand-ink); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--brand-border); }