/* ==========================================================
   e-Rapor SNKSB — Stylesheet mandiri (tanpa CDN / tanpa internet)
   Desain: modern, bersih, responsive
   ========================================================== */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;
    --accent-purple: #7c3aed;
    --accent-purple-soft: #ede9fe;
    --accent-teal: #0d9488;
    --accent-teal-soft: #ccfbf1;
    --accent-pink: #db2777;
    --accent-pink-soft: #fce7f3;
    --accent-amber: #d97706;
    --accent-amber-soft: #ffedd5;
    --ink: #0f172a;
    --ink-soft: #475569;
    --muted: #64748b;
    --border: #e2e8f0;
    --bg: #f1f5f9;
    --sidebar-bg: #3b160b;
    --sidebar-bg-2: #8a2f0b;
    --sidebar-text: #b4bacc;
    --success: #16a34a;
    --success-bg: #dcfce7;
    --success-border: #bbf7d0;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --danger-border: #fecaca;
    --warning: #d97706;
    --radius: .65rem;
    --radius-sm: .45rem;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 4px 16px rgba(15,23,42,.08);
    --shadow-lg: 0 12px 32px rgba(15,23,42,.14);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    background-color: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
h3 { font-size: 1.4rem; } h4 { font-size: 1.15rem; } h5 { font-size: 1rem; }
p { margin-top: 0; margin-bottom: 1rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .84em; }
hr { border: none; border-top: 1px solid var(--border); margin: .75rem 0; }

/* ---------- layout & spacing ---------- */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-fill { flex: 1 1 auto; min-width: 0; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: .3rem; }
.g-3 > * { padding: .5rem; }
.row { display: flex; flex-wrap: wrap; margin: -.5rem; }
.row > [class*="col-"] { padding: .5rem; box-sizing: border-box; }
.col-6 { width: 50%; }
.col-md-3 { width: 25%; }
.col-md-6 { width: 50%; }
@media (max-width: 700px) {
    .col-6, .col-md-3, .col-md-6 { width: 100%; }
}
.p-2 { padding: .5rem; } .p-4 { padding: 1.5rem; } .px-3 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }
.mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-secondary { color: var(--muted); }
.fs-2 { font-size: 1.75rem; }
.fw-bold { font-weight: 700; }
.bg-white { background-color: #fff; }
.border-bottom { border-bottom: 1px solid var(--border); }
.shadow { box-shadow: var(--shadow-md); }

/* ---------- card ---------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease;
}
.card-body { padding: 1.4rem; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 600; text-align: center; vertical-align: middle;
    cursor: pointer; user-select: none; border: 1px solid transparent; padding: .55rem 1.1rem;
    font-size: .9rem; border-radius: var(--radius-sm); transition: all .15s ease-in-out;
    background: #64748b; color: #fff; line-height: 1.3; min-width: 96px;
}
.btn:hover { opacity: .92; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .35rem .75rem; font-size: .82rem; border-radius: var(--radius-sm); min-width: 74px; }
.btn-dark { background: linear-gradient(135deg, var(--primary), var(--accent-purple)); border-color: transparent; color: #fff; }
.btn-dark:hover { background: linear-gradient(135deg, var(--primary-dark), #6d28d9); }
.btn-success { background: linear-gradient(135deg, #16a34a, #0d9488); border-color: transparent; color: #fff; }
.btn-teal { background: var(--accent-teal); border-color: var(--accent-teal); color: #fff; }
.btn-outline-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-outline-secondary { background: transparent; border-color: #cbd5e1; color: var(--ink-soft); }
.btn-outline-secondary:hover { background: #f1f5f9; color: var(--ink); }
.btn-outline-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.btn-login-center { justify-content: center; font-size: 1rem; padding: .65rem 1.1rem; }

/* ---------- forms ---------- */
.form-label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.form-control, .form-select {
    display: block; width: 100%; padding: .55rem .8rem; font-size: .92rem;
    border: 1px solid #d7dee7; border-radius: var(--radius-sm); background: #fff; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 .18rem var(--primary-soft); }
.form-control-sm, .form-select-sm { padding: .32rem .55rem; font-size: .85rem; min-height: 34px; }
.form-select { max-width: 100%; }
.form-check { display: flex; align-items: center; gap: .45rem; }
.form-check-input { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); }
.form-check-label { margin: 0; }

/* ---------- alerts ---------- */
.alert { padding: .75rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid transparent; font-size: .9rem; }
.alert-success { background: var(--success-bg); color: #14532d; border-color: var(--success-border); }
.alert-danger { background: var(--danger-bg); color: #7f1d1d; border-color: var(--danger-border); }

/* ---------- table ---------- */
.table-responsive { overflow-x: auto; border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .7rem .85rem; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: top; }
.table thead th { border-bottom: 2px solid var(--border); background: linear-gradient(135deg, #eef2ff, #f5f3ff); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-purple); font-weight: 700; }
.table-bordered th, .table-bordered td { border: 1px solid var(--border); }
.table-light { background: #f8fafc; }
.table-hover tbody tr { transition: background .1s; }
.table-hover tbody tr:hover { background: #f8fafc; }
.align-middle td, .align-middle th { vertical-align: middle; }

/* ---------- badges warna kartu dashboard ---------- */
.text-bg-primary { background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; }
.text-bg-success { background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; }
.text-bg-warning { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.text-bg-info { background: linear-gradient(135deg,#0ea5e9,#0284c7); color: #fff; }
.text-bg-primary, .text-bg-success, .text-bg-warning, .text-bg-info { border-radius: var(--radius); box-shadow: var(--shadow-sm); border: none; }

/* ---------- sidebar & navbar (dashboard layout) ---------- */
.sidebar {
    min-height:100vh;background:linear-gradient(180deg,#170906 0%,#25100b 48%,#35150d 100%);
    width: 275px; flex: 0 0 275px; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
    z-index: 40; transition: transform .2s ease;
    scrollbar-width: thin; scrollbar-color: #ffffff rgba(255,255,255,.10);
}
.sidebar::before {
    content:'';position:absolute;inset:0;opacity:.045;pointer-events:none;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff7ed%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M0%2020L20%200l20%2020L60%200l20%2020L100%200l20%2020%22/%3E%3Cpath%20d%3D%22M0%2075l15-15%2015%2015%2015-15%2015%2015%2015-15%2015%2015%2015-15%2015%2015%22/%3E%3Cpath%20d%3D%22M8%2042l12-12%2012%2012-12%2012zM68%2042l12-12%2012%2012-12%2012z%22/%3E%3Cpath%20d%3D%22M18%2095l12-12%2012%2012-12%2012zM78%2095l12-12%2012%2012-12%2012z%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23fed7aa%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2242%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2242%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2295%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2295%22%20r%3D%223%22/%3E%3C/g%3E%3C/svg%3E");
    background-size:185px 185px;background-repeat:repeat;
}
.sidebar-logo-block, .sidebar-profile-block, .sidebar > nav { position: relative; z-index: 1; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,.10); }
.sidebar::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 6px; border:1px solid rgba(124,45,18,.35); }
.sidebar::-webkit-scrollbar-thumb:hover { background: #fff7ed; }
.sidebar-logo-block {
    display: flex; align-items: center; gap: .6rem; padding: 1rem .9rem .8rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-logo-img { height: 52px; width: 68px; object-fit: contain; border-radius: .65rem; background: #fffaf4; padding: 4px; flex-shrink: 0; box-shadow:0 5px 14px rgba(0,0,0,.22); }
.sidebar-logo-fallback {
    height: 38px; width: 38px; border-radius: .5rem; background: var(--warning); color: #1e293b;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.sidebar-app-name { font-size: .95rem; font-weight: 800; color: #fff; line-height: 1.2; }
.sidebar-school-name{max-width:158px;font-size:.76rem;line-height:1.25;font-weight:800;color:#fed7aa;letter-spacing:.018em;white-space:normal}
.sidebar-school-name-2{color:#fff7ed;margin-top:3px}
.sidebar-profile-block {
    display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: .3rem;
}
.sidebar-avatar {
    height: 36px; width: 36px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; flex-shrink: 0;
}
.sidebar-profile-name { font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.sidebar-role-badge {
    display: inline-block; background: var(--warning); color: #1e293b; font-size: .68rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: .3rem; margin-top: .15rem;
}
.nav-group + .nav-group { border-top: none; margin-top: .5rem; padding-top: .6rem; position: relative; }
.nav-group + .nav-group::before {
    content: ''; position: absolute; top: 0; left: .8rem; right: .8rem; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.4) 50%, transparent);
}
.sidebar .nav { display: flex; flex-direction: column; gap: .2rem; padding: 0 .7rem .8rem; }
.sidebar .nav > a { color: rgba(255,255,255,.9); text-decoration: none; display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border-radius: var(--radius-sm); font-size: 1.05rem; font-weight: 500; }
.sidebar .nav > a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav > a.active{background:linear-gradient(135deg,#b94712,#8f2f0d);color:#fff;font-weight:700;box-shadow:0 5px 14px rgba(0,0,0,.25)}

.nav-group { margin-top: .6rem; }
.nav-group-header {
    width: 100%; background: none; border: none; color: #fff; text-transform: uppercase;
    letter-spacing: .04em; font-size: .84rem; font-weight: 800; padding: .6rem .85rem;
    display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: var(--radius-sm);
}
.nav-group-header .chev { color: #fff; }
.nav-group-header:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-group-header .chev { transition: transform .2s ease; font-size: .8rem; }
.nav-group.open .nav-group-header .chev { transform: rotate(180deg); }
.nav-group-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; display: flex; flex-direction: column; gap: .15rem; }
.nav-group.open .nav-group-body { max-height: 600px; }
.nav-group-body a { color: #ffffff; text-decoration: none; display: flex; align-items: center; gap: .55rem; padding: .55rem .85rem .55rem 1.3rem; border-radius: var(--radius-sm); font-size: .94rem; font-weight: 500; }
.nav-group-body a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-group-body a.active{background:linear-gradient(135deg,#b94712,#8f2f0d);color:#fff;font-weight:700;box-shadow:0 5px 14px rgba(0,0,0,.22)}

.navbar {
    display: flex; align-items: center; gap: .75rem; padding: .8rem 1.25rem;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(30,41,59,.06);
}
.navbar-light { background: #ffffff; }
.content-wrap { padding: 1.5rem; }

.welcome-text {
    font-size: .98rem; color: var(--ink); display: inline-flex; align-items: center; gap: .4rem;
}
.welcome-text .wave { display: inline-block; animation: lambaiTangan 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes lambaiTangan {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-12deg); }
    20% { transform: rotate(10deg); }
    40% { transform: rotate(-6deg); }
    50% { transform: rotate(0deg); }
}

.menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; background: #f8f7fd; border: 1px solid #ddd7f5;
    font-size: 1.2rem; line-height: 1; cursor: pointer; color: #21145f;
    padding: 0; border-radius: .65rem; transition: background .16s ease, color .16s ease, transform .16s ease;
}
.menu-toggle:hover { background: #21145f; color: #fff; transform: translateY(-1px); }
.menu-toggle:focus-visible { outline: 3px solid rgba(244,196,48,.42); outline-offset: 2px; }
.menu-toggle-icon { display: inline-flex; align-items: center; justify-content: center; }
.sidebar-overlay { display: none; }

@media (min-width: 901px) {
    .sidebar {
        transition: width .24s ease, flex-basis .24s ease, transform .24s ease, opacity .18s ease, padding .24s ease;
    }
    .app-shell > .flex-fill { transition: width .24s ease; }
    .app-shell.sidebar-collapsed .sidebar {
        width: 0;
        flex-basis: 0;
        min-width: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: translateX(-100%);
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
}

.user-chip {
    display: flex; align-items: center; gap: .6rem; background: #fff; padding: .35rem .5rem .35rem .8rem;
    border-radius: 999px; box-shadow: 0 3px 10px rgba(30,41,59,.08); border: 1px solid #eef1f8;
}
.btn-logout-top {
    display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
    background: linear-gradient(135deg, var(--danger), #b91c1c); color: #fff; font-size: .82rem; font-weight: 700;
    padding: .5rem 1rem; border-radius: 999px; transition: all .18s ease; border: 1px solid transparent;
    box-shadow: 0 3px 8px rgba(220,38,38,.28);
}
.btn-logout-top:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b); color: #fff; text-decoration: none;
    transform: translateY(-2px); box-shadow: 0 6px 14px rgba(220,38,38,.4);
}
.user-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(145deg, var(--primary), var(--accent-purple));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .92rem; flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(99,102,241,.35), inset 0 1px 1px rgba(255,255,255,.4);
    border: 2px solid #fff;
}
.role-badge {
    display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); text-transform: capitalize;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.06);
}
.role-badge-admin { background: linear-gradient(135deg, var(--accent-purple-soft), #ede9fe); color: var(--accent-purple); }
.role-badge-kurikulum { background: linear-gradient(135deg, var(--primary-soft), #dbeafe); color: var(--primary); }
.role-badge-guru { background: linear-gradient(135deg, var(--accent-teal-soft), #ccfbf1); color: var(--accent-teal); }
.role-badge-walikelas { background: linear-gradient(135deg, var(--success-bg), #dcfce7); color: var(--success); }
.role-badge-guru_walikelas { background: linear-gradient(135deg, var(--accent-amber-soft), #fef3c7); color: var(--accent-amber); }
.role-badge-siswa { background: linear-gradient(135deg, var(--accent-pink-soft), #fce7f3); color: var(--accent-pink); }

/* ---------- tab filter halaman User & Akun ---------- */
.akun-tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.akun-tab {
    padding: .55rem .9rem; font-size: .84rem; font-weight: 600; color: var(--muted); text-decoration: none;
    border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .4rem;
    border-radius: var(--radius) var(--radius) 0 0; transition: background .15s ease, color .15s ease;
}
.akun-tab:hover { text-decoration: none; background: var(--primary-soft); }
.akun-tab-count {
    font-size: .72rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px;
    background: rgba(0,0,0,.06); color: inherit;
}
.akun-tab-semua { color: var(--primary); background: rgba(37,99,235,.08); }
.akun-tab-semua:hover { background: rgba(37,99,235,.16); }
.akun-tab-semua.active { border-bottom-color: var(--primary); background: rgba(37,99,235,.22); }
.akun-tab-admin { color: var(--accent-purple); background: rgba(124,58,237,.08); }
.akun-tab-admin:hover { background: rgba(124,58,237,.16); }
.akun-tab-admin.active { border-bottom-color: var(--accent-purple); background: rgba(124,58,237,.22); }
.akun-tab-guru { color: var(--accent-teal); background: rgba(13,148,136,.08); }
.akun-tab-guru:hover { background: rgba(13,148,136,.16); }
.akun-tab-guru.active { border-bottom-color: var(--accent-teal); background: rgba(13,148,136,.22); }
.akun-tab-siswa { color: var(--accent-pink); background: rgba(219,39,119,.08); }
.akun-tab-siswa:hover { background: rgba(219,39,119,.16); }
.akun-tab-siswa.active { border-bottom-color: var(--accent-pink); background: rgba(219,39,119,.22); }

.badge-ok {
    display: inline-block; background: var(--success-bg); color: #14532d; padding: .25rem .7rem;
    border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.badge-belum {
    display: inline-block; background: var(--danger-bg); color: #7f1d1d; padding: .25rem .7rem;
    border-radius: 999px; font-size: .78rem; font-weight: 700;
}

/* aksen warna variatif untuk kartu-kartu berjajar (Roll Akses, Monitoring, dll) */
.accent-purple { border-top: 3px solid var(--accent-purple); }
.accent-teal { border-top: 3px solid var(--accent-teal); }
.accent-pink { border-top: 3px solid var(--accent-pink); }
.accent-amber { border-top: 3px solid var(--accent-amber); }
.accent-primary { border-top: 3px solid var(--primary); }

@media (max-width: 900px) {
    .menu-toggle { display: inline-flex; }
    .sidebar {
        position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show {
        display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 30;
    }
    .content-wrap { padding: 1rem; }
}

/* ---------- login page ---------- */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background-color:#2b1008;
    background-image:
        linear-gradient(135deg,rgba(39,12,5,.88),rgba(92,28,8,.72) 55%,rgba(24,11,8,.88)),
        var(--login-bg-image, linear-gradient(155deg,#4a1608,#9a3412 55%,#2b1008));
    background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
    padding: .6rem; position: relative; overflow-x: hidden; overflow-y: auto;
}
.login-page::before, .login-page::after {
    content: ''; position: fixed; border-radius: 50%; background: rgba(255,255,255,.05); z-index: 0; pointer-events: none;
}
.login-page::before { width: 420px; height: 420px; top: -120px; left: -140px; }
.login-page::after { width: 380px; height: 380px; bottom: -140px; right: -120px; }
.login-ornament {
    position: fixed; z-index: 0; pointer-events: none; overflow: hidden;
    background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center;
}
.login-ornament img { width: 58%; height: 58%; object-fit: contain; }
.login-ornament.bentuk-oval { border-radius: 50%; }
.login-ornament.bentuk-lingkaran { border-radius: 999px; aspect-ratio: 1 / 1; }
.login-ornament.ukuran-kecil { width: 90px; height: 90px; }
.login-ornament.ukuran-sedang { width: 160px; height: 160px; }
.login-ornament.ukuran-besar { width: 260px; height: 260px; }
.login-ornament.posisi-kanan-atas { top: 10%; right: 7%; }
.login-ornament.posisi-kanan-tengah { top: 52%; right: 14%; }
.login-ornament.posisi-kanan-bawah { bottom: 8%; right: 7%; }
.login-ornament.posisi-kiri-atas { top: 10%; left: 6%; }
.login-ornament.posisi-kiri-tengah { top: 52%; left: 10%; }
.login-ornament.posisi-kiri-bawah { bottom: 18%; left: 6%; background: rgba(96,165,250,.09); }
.login-page::before, .login-page::after {
    background-repeat: no-repeat; background-position: center; background-size: 34%; opacity: .1;
}

/* ---------- motif Papua dinamis di navbar ---------- */
.navbar-motif { opacity: .95; overflow: hidden; min-width: 0; }
.navbar-motif-icon { width: auto; margin: 0 16px; vertical-align: middle; object-fit: contain; flex: 0 0 auto; }
.navbar-size-kecil { height: 30px; }
.navbar-size-sedang { height: 40px; }
.navbar-size-besar { height: 48px; }
@media (max-width: 900px) {
    .navbar-motif { display: none !important; }
}

/* ---------- kartu selamat datang (horizontal, semua role) ---------- */
.welcome-banner {
    position: relative; overflow: hidden; border-radius: 14px; padding: 1.3rem 1.6rem;
    background:linear-gradient(120deg,#3b160b 0%,#7c2d12 52%,#d3540f 100%);
    color: #fff; margin-bottom: 1rem; box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.welcome-banner::before {
    content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20opacity%3D%220.9%22%3E%0A%3Cpath%20d%3D%22M0%2070%20L35%2035%20L70%2070%20L35%20105%20Z%22/%3E%0A%3Cpath%20d%3D%22M70%200%20L105%2035%20L140%200%22/%3E%0A%3Cpath%20d%3D%22M70%20140%20L105%20105%20L140%20140%22/%3E%0A%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2210%22/%3E%0A%3Cpath%20d%3D%22M0%200%20L20%2020%20M120%2020%20L140%200%20M0%20140%20L20%20120%20M140%20140%20L120%20120%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
    background-size: 140px 140px; background-repeat: repeat;
}
.welcome-banner-text { position: relative; z-index: 1; }
.welcome-banner-text h3 { margin: 0; color: #fff; font-size: 1.3rem; }
.welcome-banner-sub { color: rgba(255,255,255,.9); font-size: 1rem; font-weight: 600; margin-top: .4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.welcome-banner-semester {
    display: inline-block; background: #f59e0b; color: #fff; font-size: 1rem; font-weight: 800;
    padding: .3rem .9rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.welcome-banner-right { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.welcome-banner-badge {
    background: rgba(255,255,255,.18); padding: .4rem 1rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; white-space: nowrap; backdrop-filter: blur(2px);
}
@media (max-width: 700px) {
    .welcome-banner { flex-direction: column; align-items: flex-start; }
}

/* ---------- grid kartu statistik dashboard (rapi, tidak berantakan di baris terakhir) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; margin-bottom: 1rem; }

.login-card-new {
    width: 460px; max-width: 90vw; border-radius: 1.4rem; overflow: hidden; position: relative; z-index: 1;
    box-shadow: 0 0 0 1px rgba(253,186,116,.5), 0 18px 55px rgba(42,12,3,.55), var(--shadow-lg);
}
.login-card-header {
    background: linear-gradient(145deg, #7c2d12 0%, #ea580c 58%, #f59e0b 100%);
    color: #fff; text-align: center; padding: 1.7rem 1.6rem 2.3rem;
}
.login-card-header h3 { color: #fff; margin: .3rem 0 .2rem; font-size: 1.15rem; line-height: 1.3; }
.login-nama-sekolah-2 { display: block; font-size: 1em; font-weight: 700; opacity: 1; margin-top: .1rem; }
.login-label { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.75); margin: 0; }
.login-subjudul { color: rgba(255,255,255,.85); margin: 0; font-size: .82rem; }
.login-logo-wrap { text-align: center; margin-bottom: .65rem; }
.login-logo-wrap img {
    display: inline-block;
    width: auto;
    height: 82px;
    max-width: min(310px, 92%);
    object-fit: contain;
    background: transparent !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0 !important;
    filter: drop-shadow(0 3px 2px rgba(48, 15, 4, .48));
}
.login-logo-fallback {
    height: 52px; width: 52px; border-radius: 50%; background: #fff; color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800;
}
.login-card-body {
    background: #fff; padding: 1.8rem 2rem 1.7rem;
    border-radius: 50% 50% 0 0 / 34px 34px 0 0;
    margin-top: -28px; position: relative; z-index: 2;
}
.login-card-body form { max-width: 460px; margin: 0 auto; }
.login-semester-badge {
    display: table; max-width: 100%; box-sizing: border-box; margin: 0 auto .6rem; background: #fff7ed; color: #9a3412; border:1px solid #fed7aa; font-size: .78rem;
    font-weight: 600; padding: .3rem .75rem; border-radius: 999px; white-space: normal; text-align: center;
}
.login-card-body h4 { color: #7c2d12; text-align: center; }
.login-welcome-sub-blink {
    display: table; max-width: 100%; box-sizing: border-box; margin: 0 auto; padding: .4rem 1rem; border-radius: 999px;
    background: linear-gradient(135deg,#9a3412,#ea580c); color: #fff; font-weight: 700; font-size: .88rem;
    white-space: normal; word-wrap: break-word; text-align: center;
}
.teks-kedip { animation: kedipNavy 1.8s ease-in-out infinite; }
@keyframes kedipNavy {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon {
    position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); font-size: .95rem; opacity: .6;
}
.input-icon-wrap .input-icon-right {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); font-size: .95rem; opacity: .6; cursor: pointer;
}
.input-with-icon { padding-left: 2.3rem; padding-right: 2.3rem; }
.login-footer { text-align: center; margin-top: 1.25rem; color: rgba(255,255,255,.7); font-size: .8rem; position: relative; z-index: 1; }
.btn-login-solid {
    background: linear-gradient(135deg, #9a3412, #ea580c); border-color: transparent; color: #fff;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.btn-login-solid:hover { background: linear-gradient(135deg, #7c2d12, #c2410c); color: #fff; }

@media (max-width: 700px) {
    .login-card-header { padding: 2rem 1.75rem 2.6rem; }
    .login-card-header h3 { font-size: 1.25rem; }
    .login-card-body { padding: 2rem 1.75rem 1.8rem; }
}

@media (max-width: 480px) {
    .login-page { padding: 1rem .75rem; align-items: flex-start; }
    .login-card-header { padding: 1.6rem 1.25rem 2.4rem; }
    .login-card-header h3 { font-size: 1.1rem; }
    .login-card-body { padding: 1.7rem 1.25rem 1.6rem; border-radius: 50% 50% 0 0 / 22px 22px 0 0; margin-top: -18px; }
    .login-logo-wrap img { height: 64px; width: auto; max-width: 94%; }
    .login-logo-fallback { height: 52px; width: 52px; }
}

/* ---------- rapor cetak ---------- */
.kop { text-align: center; border-bottom: 3px solid #000; padding-bottom: 10px; margin-bottom: 20px; }
.identitas td { padding: 2px 6px; }
.catatan-box { border: 1px solid #ccc; padding: 10px; min-height: 60px; }
.ttd td { width: 50%; text-align: center; vertical-align: top; }
@media print { .no-print { display: none; } }

/* ---------- kartu siswa dengan dropdown (halaman Rapor - Wali Kelas) ---------- */
.siswa-list-head {
    display: flex; align-items: center; gap: .75rem; padding: .55rem 1.25rem; margin-bottom: .5rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.siswa-list-head .col-siswa { flex: 1 1 auto; min-width: 0; }
.siswa-list-head .col-status { flex: 0 0 auto; width: 230px; }
.siswa-list-head .col-aksi { flex: 0 0 auto; text-align: right; }

.siswa-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: .65rem; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, border-color .15s ease;
}
.siswa-card:hover { box-shadow: var(--shadow-md); border-color: #cbd5e1; }
.siswa-card summary {
    list-style: none; cursor: pointer; padding: .85rem 1.25rem; display: flex;
    align-items: center; gap: 1rem; flex-wrap: wrap; user-select: none;
}
.siswa-card summary::-webkit-details-marker { display: none; }
.siswa-card summary:hover { background: var(--primary-soft); }
.siswa-card[open] > summary { background: var(--primary-soft); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.siswa-card summary::after {
    content: '›'; margin-left: auto; order: 99; font-size: 1.3rem; color: var(--muted); line-height: 1;
    transition: transform .15s ease; flex-shrink: 0;
}
.siswa-card[open] summary::after { transform: rotate(90deg); color: var(--primary); }

.siswa-summary-nama { display: flex; align-items: center; gap: .7rem; flex: 1 1 220px; min-width: 0; }
.siswa-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; background: linear-gradient(135deg, var(--accent-purple-soft), #ede9fe); color: var(--accent-purple);
    font-size: .95rem; font-weight: 700;
}
.siswa-nama-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.siswa-nama-wrap strong { font-size: .96rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siswa-nisn { font-size: .76rem; color: var(--muted); }

.siswa-summary-status {
    display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; flex: 0 0 auto; width: 230px;
}
.siswa-card-body { padding: 1.1rem 1.25rem 1.25rem; }

/* ---------- badge status kecil (Kehadiran/Catatan) - dijaga eksplisit supaya tidak pernah membesar ---------- */
.status-pill {
    display: inline-flex !important; align-items: center; gap: .3rem; width: auto !important; height: auto !important;
    max-width: max-content; border-radius: 999px !important; font-size: .72rem !important; font-weight: 600;
    padding: .28rem .6rem .28rem .5rem !important; line-height: 1.2; white-space: nowrap; box-sizing: border-box;
    border: 1px solid transparent;
}
.status-pill .ic {
    display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0;
    border-radius: 50%; font-style: normal; font-size: .64rem; font-weight: 800; line-height: 1;
}
.status-pill.status-ok { background: var(--success-bg); color: #14532d; border-color: var(--success-border); }
.status-pill.status-ok .ic { background: var(--success); color: #fff; }
.status-pill.status-belum { background: var(--danger-bg); color: #7f1d1d; border-color: var(--danger-border); }
.status-pill.status-belum .ic { background: var(--danger); color: #fff; }

/* ---------- tombol aksi (Lihat/Cetak, Rapor Projek P5) ---------- */
.siswa-aksi { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 0 0 auto; }
.btn-aksi {
    display: inline-flex !important; align-items: center; gap: .4rem; padding: .45rem .85rem !important;
    font-size: .8rem !important; font-weight: 600; border-radius: var(--radius); white-space: nowrap;
    border: 1px solid var(--border); background: #fff; color: var(--ink-soft); transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-aksi:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.btn-aksi.btn-aksi-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-aksi.btn-aksi-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

/* ---------- kartu Cetak Rapor Kolektif per Kelas ---------- */
.cetak-kolektif-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfdcf5;
    border-top: 4px solid var(--primary);
    box-shadow: 0 10px 28px rgba(30, 64, 175, .08);
}
.cetak-kolektif-head {
    display: flex; align-items: center; gap: .85rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-soft), #f8faff);
    border-bottom: 1px solid #dbe5f5;
}
.cetak-kolektif-head h5 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink); }
.cetak-kolektif-head p { margin: .2rem 0 0; font-size: .82rem; color: var(--muted); }
.cetak-kolektif-icon {
    width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: #fff; border: 1px solid #d8e4fb; font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .10);
}
.cetak-kolektif-body { padding: 1.15rem 1.25rem 1.25rem; }
.cetak-kolektif-box {
    display: grid; grid-template-columns: minmax(230px, 1fr) minmax(210px, .85fr) auto;
    gap: 1rem; align-items: end;
}
.cetak-kolektif-field { min-width: 0; }
.cetak-kolektif-field .form-label { margin-bottom: .4rem; font-size: .8rem; font-weight: 700; }
.cetak-kolektif-field .form-select, .cetak-kolektif-field .csel-trigger { background: #fff; min-height: 42px; }
.cetak-kolektif-aksi {
    display: flex; align-items: center; justify-content: flex-end; gap: .65rem;
    padding-left: .25rem; white-space: nowrap;
}
.cetak-kolektif-aksi .btn-aksi {
    min-height: 42px; padding: .58rem 1.05rem !important; font-size: .85rem !important;
    justify-content: center;
}
@media (max-width: 900px) {
    .cetak-kolektif-box { grid-template-columns: 1fr 1fr; }
    .cetak-kolektif-aksi { grid-column: 1 / -1; padding-left: 0; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .cetak-kolektif-head { align-items: flex-start; padding: .9rem 1rem; }
    .cetak-kolektif-body { padding: 1rem; }
    .cetak-kolektif-box { grid-template-columns: 1fr; gap: .85rem; }
    .cetak-kolektif-aksi { grid-column: auto; width: 100%; }
    .cetak-kolektif-aksi .btn-aksi { flex: 1 1 0; }
}

/* ---------- menu cetak (dropdown ringan tanpa dependensi JS, pola sama seperti .siswa-card) ---------- */
.cetak-menu { position: relative; display: inline-block; }
.cetak-menu > summary {
    list-style: none; cursor: pointer; user-select: none; display: inline-flex !important; align-items: center; gap: .4rem;
    padding: .45rem .85rem; font-size: .8rem; font-weight: 600; color: #fff;
    background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius);
}
.cetak-menu > summary::-webkit-details-marker { display: none; }
.cetak-menu > summary::after { content: '▾'; font-size: .7rem; margin-left: .1rem; transition: transform .15s ease; }
.cetak-menu > summary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.cetak-menu[open] > summary { background: var(--primary-dark); border-color: var(--primary-dark); }
.cetak-menu[open] > summary::after { transform: rotate(180deg); }
.cetak-menu-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 180px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 8px 20px rgba(0,0,0,.12)); padding: .35rem; display: flex; flex-direction: column; gap: .15rem;
}
.cetak-menu-panel a {
    display: block; padding: .55rem .7rem; border-radius: calc(var(--radius) - 4px); font-size: .84rem;
    font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.cetak-menu-panel a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }

@media (max-width: 720px) {
    .siswa-list-head { display: none; }
    .siswa-card summary { flex-wrap: wrap; }
    .siswa-summary-nama { flex: 1 1 100%; }
    .siswa-summary-status { width: auto; flex: 1 1 auto; }
    .siswa-aksi { flex: 1 1 100%; justify-content: flex-start; }
    .siswa-card summary::after { display: none; }
}

.table td:last-child .btn { white-space: nowrap; }
.table td:last-child { white-space: nowrap; }

/* ---------- kartu statistik dashboard (putih, ikon dalam kotak berwarna) ---------- */
.stat-card {
    display:flex;align-items:center;gap:1.15rem;
    padding:1.3rem 1.4rem;border-radius:14px;
    background: #fff; border: 1px solid var(--border); border-left: 4px solid transparent;
    box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease;min-height:118px;
}
.stat-row { justify-content: center; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.belum-akun-card { transition: transform .15s ease, box-shadow .15s ease; }
.belum-akun-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.stat-card-primary{background:linear-gradient(135deg,#65230f,#8f3212);border-left-color:#4a1608;border-color:transparent}
.stat-card-success{background:linear-gradient(135deg,#8a350d,#b45309);border-left-color:#71300b;border-color:transparent}
.stat-card-warning{background:linear-gradient(135deg,#c2410c,#ea580c);border-left-color:#9a3412;border-color:transparent}
.stat-card-info{background:linear-gradient(135deg,#78350f,#a16207);border-left-color:#5b270b;border-color:transparent}
.stat-card-primary .stat-icon, .stat-card-success .stat-icon, .stat-card-warning .stat-icon, .stat-card-info .stat-icon { background: rgba(255,255,255,.22); }
.stat-card-primary .stat-number, .stat-card-primary .stat-label,
.stat-card-success .stat-number, .stat-card-success .stat-label,
.stat-card-warning .stat-number, .stat-card-warning .stat-label,
.stat-card-info .stat-number, .stat-card-info .stat-label { color: #fff; }
.stat-card-primary .stat-label, .stat-card-success .stat-label, .stat-card-warning .stat-label, .stat-card-info .stat-label { opacity: .92; }
.stat-icon {
    font-size:1.75rem;width:58px;height:58px;flex-shrink:0;display:flex;align-items:center;
    justify-content:center;border-radius:13px;
}
.stat-card>div:last-child{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.25rem}
.stat-number{font-size:1.85rem;font-weight:900;line-height:1.08;word-break:break-word;color:var(--ink);letter-spacing:-.02em}
.stat-label{font-size:1rem;line-height:1.3;color:var(--muted);margin-top:.05rem;font-weight:750;word-break:break-word}

/* ---------- grafik batang sederhana (dashboard admin) ---------- */
.bar-chart-item { margin-bottom: .9rem; }
.bar-chart-label { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: .35rem; font-weight: 500; }
.bar-chart-label .persen{font-weight:800;color:#9a3412;font-size:.98rem}
.bar-chart-track { background: #eef2ff; border-radius: 999px; height: 14px; overflow: hidden; }
.bar-chart-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#9a3412,#f59e0b)}

.bar-chart-list-scroll { max-height: 360px; overflow-y: auto; padding-right: .4rem; }
.bar-chart-list-scroll .bar-chart-item { padding: .55rem .65rem; border-radius: var(--radius); margin-bottom: .35rem; }
.bar-chart-list-scroll .bar-chart-item:nth-child(odd) { background: #f8fafc; }
.dashboard-empty-note { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); background: #f8fafc; border-radius: var(--radius); padding: .6rem .75rem; margin-top: .3rem; }

/* ---------- grafik batang horizontal (dashboard) ---------- */
.grafik-batang-skala { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.grafik-batang-skala-label-spacer { flex: 0 0 220px; }
.grafik-batang-skala-marka {
    flex: 1 1 auto; display: flex; justify-content: space-between;
    font-size: .68rem; color: var(--muted); font-weight: 600;
}
.grafik-batang-skala-spacer { flex: 0 0 40px; }
.grafik-batang-baris {
    display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px dashed var(--border);
}
.grafik-batang-baris:last-child { border-bottom: none; }
.grafik-batang-label {
    flex: 0 0 220px; font-size: .82rem; font-weight: 500; color: var(--ink, #1e293b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grafik-batang-track {
    flex: 1 1 auto; position: relative; height: 18px; background: #f1f5f9; border-radius: 4px; overflow: hidden;
}
.grafik-batang-garis { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(148,163,184,.5); }
.grafik-batang-fill {
    position: relative; height: 100%; border-radius: 4px;
    background:linear-gradient(90deg,#9a3412,#f59e0b);z-index:1;
    transition: width .4s ease;
}
.grafik-batang-persen{flex:0 0 40px;text-align:right;font-size:.82rem;font-weight:800;color:#9a3412}

@media (max-width: 700px) {
    .grafik-batang-label { flex-basis: 120px; font-size: .74rem; }
    .grafik-batang-skala > span:first-child { width: 120px; }
}

/* ---------- kartu grafik lingkaran dashboard ---------- */
.donut-card { text-align: center; }
.donut-card .donut-label { font-size: .92rem; color: var(--ink-soft); font-weight: 600; margin-bottom: .6rem; }

/* ---------- daftar ringkas (mis. "perlu perhatian") - ikon lingkaran + judul + subjudul ---------- */
.ringkas-list { display: flex; flex-direction: column; gap: .9rem; }
.ringkas-list-item { display: flex; align-items: flex-start; gap: .7rem; }
.ringkas-list-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.ringkas-list-icon-warning { background: #fef3c7; }
.ringkas-list-icon-danger { background: var(--danger-bg); }
.ringkas-list-title { font-size: .86rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.4; }
.ringkas-list-sub { font-size: .76rem; color: var(--muted); margin: .1rem 0 0; }

/* ---------- tab bar (dipakai di Kelola CP&TP, Template Rapor) ---------- */
.tab-bar { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 0; align-items: flex-end; border-bottom: 2px solid var(--border); }
.tab-btn {
    padding: .65rem 1.1rem; border-radius: .5rem .5rem 0 0; border: 1px solid var(--border); border-bottom: none;
    background: #f1f5f9; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--ink-soft);
    margin-bottom: -2px;
}
.tab-btn.active { background: #fff; color: var(--primary); border-bottom: 2px solid #fff; }
.tab-pane { display: none; padding-top: 1.25rem; }
.tab-pane.active { display: block; }

/* ---------- kolom pencarian di sebelah Tampilkan ---------- */
.search-box-wrap { position: relative; flex: 1 1 260px; max-width: 320px; }
.search-box-wrap .search-icon {
    position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: .85rem; pointer-events: none;
}
.search-box { padding-left: 2rem !important; }

/* ---------- dropdown custom dengan pencarian di dalamnya (muncul saat diklik) ---------- */
.csel { position: relative; }
.csel-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 2.2rem .5rem .75rem; border-radius: var(--radius-sm); border: 1px solid #d7dee7;
    background: #fff; color: var(--ink); font-size: .9rem; cursor: pointer; text-align: left;
    position: relative;
    min-height: 42px; touch-action: manipulation;
}
.csel-trigger:hover { border-color: var(--primary); }
.csel-trigger.csel-trigger-sm { padding: .32rem 2rem .32rem .55rem; font-size: .85rem; }
.csel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-label.csel-placeholder { color: var(--muted); }
.csel-chev {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    color: var(--ink); font-size: 0; width: 10px; height: 10px; pointer-events: none;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #6b7280;
}
.csel-panel {
    position: fixed; z-index: 9999;
    background: #fff; border: 1px solid #d7dee7; border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(15,23,42,.18); overflow: hidden;
}
.csel-search-wrap { position: relative; padding: .5rem; border-bottom: 1px solid var(--border); }
.csel-search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: .78rem; color: var(--muted); }
.csel-search {
    width: 100%; height: 34px; padding: 0 .6rem 0 1.9rem; border-radius: .35rem;
    border: 1px solid #d7dee7; font-size: .85rem;
}
.csel-search:focus { outline: none; border-color: var(--primary); }
.csel-list { list-style: none; margin: 0; padding: .3rem; max-height: 220px; overflow-y: auto; }
.csel-list li { padding: .5rem .65rem; border-radius: .35rem; cursor: pointer; font-size: .88rem; touch-action: manipulation; }
.csel-list li:hover, .csel-list li.csel-selected { background: var(--primary-soft); color: var(--primary); }
.csel-empty { padding: .9rem; text-align: center; font-size: .82rem; color: var(--muted); }

/* ---------- form Penugasan Mengajar ---------- */
.pengampu-form-card { max-width: 500px; }
.pengampu-kelas-list { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pengampu-form-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
@media (pointer: coarse) {
    .csel-list li { min-height: 44px; display: flex; align-items: center; }
    .pengampu-kelas-list .form-check { min-height: 44px; }
    .pengampu-kelas-list .form-check-input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
    .pengampu-kelas-list .form-check-label { flex: 1 1 auto; padding: .55rem 0; }
}
@media (max-width: 600px) {
    .pengampu-form-card { max-width: none; width: 100%; }
    .pengampu-form-card .card-body { padding: 1rem; }
    .pengampu-form-actions .btn { flex: 1 1 0; min-height: 44px; }
}

/* ---------- bar paginasi (Sebelumnya/Selanjutnya) ---------- */
.pagination-bar { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.pagination-bar .page-info { order: 1; margin-right: auto; font-size: .85rem; font-weight: 700; color: var(--ink); }
.pagination-bar .btn-prev-page { order: 2; }
.pagination-bar .page-numbers { order: 3; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.pagination-bar .btn-next-page { order: 4; }
.pagination-bar .btn-prev-page, .pagination-bar .btn-next-page {
    background: linear-gradient(135deg, var(--primary), var(--accent-purple)); border-color: transparent; color: #fff;
    min-width: unset; padding: .4rem .8rem; font-size: .8rem;
}
.pagination-bar .btn-prev-page:hover, .pagination-bar .btn-next-page:hover {
    background: linear-gradient(135deg, var(--primary-dark), #6d28d9);
}
.pagination-bar button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.page-num-btn {
    min-width: 30px; height: 30px; padding: 0 .3rem; border-radius: .4rem; border: 1px solid #d7dee7;
    background: #fff; color: var(--ink-soft); font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: all .15s ease;
}
.page-num-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-num-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--accent-purple)); border-color: transparent; color: #fff;
}
.page-dots { color: var(--muted); font-size: .85rem; padding: 0 .2rem; }

/* ---------- toolbar halaman (Tambah/Import/Export/Hapus Massal) ---------- */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.25rem; flex-wrap: wrap;
}
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 700px) {
    .page-header { flex-direction: column; }
    .toolbar { width: 100%; }
    .toolbar .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- cek ejaan (kata tidak baku -> baku) ---------- */
.cek-ejaan-saran {
    margin-top: .4rem; padding: .5rem .7rem; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: .4rem; font-size: .8rem; color: #92400e; line-height: 1.6;
}
.cek-ejaan-saran strong { color: #b45309; }
.cek-ejaan-saran .btn-terapkan-ejaan, .cek-ejaan-saran .btn-abaikan-ejaan {
    border: none; border-radius: .3rem; padding: .15rem .55rem; font-size: .75rem; font-weight: 600;
    cursor: pointer; margin-left: .3rem;
}
.cek-ejaan-saran .btn-terapkan-ejaan { background: #f59e0b; color: #fff; }
.cek-ejaan-saran .btn-abaikan-ejaan { background: transparent; color: #92400e; text-decoration: underline; }

/* ---------- cek ejaan: highlight latar merah real-time saat mengetik ---------- */
.cek-ejaan-wrap { position: relative; flex: 1 1 auto; min-width: 0; }

/* ---------- baris "tambah TP" (label + textarea + tombol simpan) - responsive ---------- */
.tp-tambah-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tp-tambah-label { color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.tp-tambah-row .cek-ejaan-wrap { flex: 1 1 240px; }
.tp-tambah-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 700px) {
    .tp-tambah-row { align-items: stretch; }
    .tp-tambah-label { white-space: normal; }
    .tp-tambah-row .cek-ejaan-wrap { flex-basis: 100%; }
    .tp-tambah-btn { width: 100%; }
}
.cek-ejaan-highlight-layer {
    position: absolute; top: 0; left: 0; margin: 0; pointer-events: none;
    color: transparent; background: #fff; border-color: transparent; z-index: 1;
    border-radius: .375rem;
}
.cek-ejaan-highlight-layer mark.ejaan-tandai {
    background: rgba(220, 53, 69, .32); color: transparent; border-radius: .15rem; padding: 0;
}
.cek-ejaan-wrap > textarea.js-cek-ejaan,
.cek-ejaan-wrap > input.js-cek-ejaan {
    position: relative; z-index: 2; background: transparent !important;
}

/* ---------- blok Cetak Rapor per Siswa ---------- */
.cetak-per-siswa-card {
    overflow: visible;
    margin-top: 1.2rem;
    background: #fff;
    border: 1px solid #d7e0ee;
    border-top: 4px solid var(--accent-purple, #7c3aed);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.cetak-per-siswa-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #faf8ff, #f8fafc);
    border-bottom: 1px solid #e3e8f1;
}
.cetak-per-siswa-head h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
}
.cetak-per-siswa-head p {
    margin: .2rem 0 0;
    font-size: .82rem;
    color: var(--muted);
}
.cetak-per-siswa-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e4def7;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(124, 58, 237, .08);
}
.cetak-per-siswa-body { padding: 1rem 1.25rem 1.2rem; }
.rapor-list-toolbar {
    display: flex;
    align-items: end;
    gap: .75rem;
    padding: .75rem;
    margin-bottom: .55rem;
    border: 1px solid #e3e8f1;
    border-radius: 12px;
    background: #f8fafc;
}
.rapor-entries-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}
.rapor-entries-wrap .form-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-soft);
    white-space: nowrap;
}
.rapor-entries-wrap .entries-select {
    width: 88px !important;
    min-width: 88px;
    min-height: 40px;
}
.rapor-search-wrap {
    max-width: 390px;
    flex: 1 1 300px;
}
.rapor-search-wrap .search-box { min-height: 40px; }
.cetak-per-siswa-card .siswa-list-head {
    margin: .25rem 0 .5rem;
    padding-left: .7rem;
    padding-right: .7rem;
}
.cetak-per-siswa-card .siswa-card:last-child { margin-bottom: 0; }
.rapor-pagination {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid #e3e8f1;
}
.empty-siswa-state {
    padding: 1.8rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}
@media (max-width: 640px) {
    .cetak-per-siswa-head { align-items: flex-start; padding: .9rem 1rem; }
    .cetak-per-siswa-body { padding: .9rem; }
    .rapor-list-toolbar { align-items: stretch; flex-direction: column; }
    .rapor-entries-wrap { justify-content: space-between; }
    .rapor-search-wrap { width: 100%; max-width: none; flex-basis: auto; }
}

/* ==========================================================
   Dashboard monitoring berbasis role
   ========================================================== */
.dashboard-welcome-v2{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dashboard-role-badge{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;padding:.45rem .8rem;border-radius:999px;font-size:.76rem;font-weight:800;white-space:nowrap}
.dashboard-page-head{margin-bottom:.85rem}
.dashboard-page-head p{font-size:.82rem;margin-top:.2rem}
.dashboard-stat-grid-v2{grid-template-columns:repeat(6,minmax(0,1fr))}
.dashboard-analytics-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:.9rem}
.dashboard-analytics-grid:not(.dashboard-analytics-grid-top){grid-template-columns:1fr 1fr}
.dashboard-analytics-card{background:#fff;border:1px solid #dce5f0;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.055);padding:1rem;min-width:0}
.dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}
.dashboard-card-head h4{font-size:.98rem;margin:0 0 .2rem;font-weight:800;color:#0f172a}
.dashboard-card-head p{font-size:.76rem;margin:0;color:#64748b;line-height:1.4}
.dashboard-chip{display:inline-flex;align-items:center;border-radius:999px;padding:.34rem .62rem;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;font-size:.7rem;font-weight:800;white-space:nowrap}
.dashboard-chip-success{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.dashboard-link{font-size:.74rem;font-weight:800;text-decoration:none;color:#9a3412;white-space:nowrap;padding-top:.1rem}
.dashboard-link:hover{text-decoration:underline}
.dashboard-scroll-chart{max-height:245px;overflow-y:auto;padding-right:.25rem}
.dashboard-scroll-chart::-webkit-scrollbar{width:7px}.dashboard-scroll-chart::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.attention-card{background:linear-gradient(180deg,#fff 0%,#fffaf7 100%)}
.attention-bars{display:flex;flex-direction:column;gap:.62rem}
.attention-row{display:grid;grid-template-columns:minmax(125px,180px) 1fr 38px;align-items:center;gap:.65rem;text-decoration:none;color:inherit;padding:.2rem .1rem}
.attention-row:hover .attention-label strong{color:#2563eb}
.attention-label{display:flex;align-items:center;gap:.45rem;min-width:0;font-size:.75rem}.attention-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attention-track{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden;position:relative}.attention-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fb923c,#ef4444);min-width:3px}
.attention-value{text-align:right;font-size:.78rem;font-weight:900;color:#b91c1c}
.dashboard-note{margin-top:.85rem;background:#f8fafc;border-radius:9px;padding:.55rem .7rem;font-size:.71rem;color:#64748b;border:1px solid #e2e8f0}
.readiness-components{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}.readiness-component{border:1px solid #fed7aa;border-radius:10px;padding:.7rem;background:#fffaf5}.readiness-component-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.73rem;margin-bottom:.48rem}.readiness-component-top span{font-weight:700;color:#5f2a16}.readiness-component-top strong{font-size:.8rem;color:#9a3412}.readiness-component-track{height:7px;background:#ffedd5;border-radius:999px;overflow:hidden}.readiness-component-track span{display:block;height:100%;background:linear-gradient(90deg,#9a3412,#f59e0b);border-radius:inherit}
.dashboard-actions-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.dashboard-student-name{font-size:1.2rem!important;line-height:1.25}
.mini-progress-card .grafik-batang-label{flex-basis:110px}.mini-progress-card .grafik-batang-skala-label-spacer{flex-basis:110px}
@media (max-width:1400px){.dashboard-stat-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr))}.readiness-components{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:992px){.dashboard-analytics-grid,.dashboard-analytics-grid:not(.dashboard-analytics-grid-top){grid-template-columns:1fr}.dashboard-stat-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.readiness-components{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dashboard-welcome-v2{align-items:flex-start;flex-direction:column}.dashboard-stat-grid-v2{grid-template-columns:1fr}.dashboard-card-head{flex-direction:column}.attention-row{grid-template-columns:120px 1fr 30px}.readiness-components{grid-template-columns:1fr}.dashboard-role-badge{white-space:normal}.dashboard-scroll-chart{max-height:300px}}
.dashboard-stat-grid-v2 .stat-card{width:100%}
@media(max-width:640px){.stat-card{min-height:104px;padding:1.05rem 1.1rem;gap:.9rem}.stat-icon{width:52px;height:52px;font-size:1.55rem}.stat-number{font-size:1.65rem}.stat-label{font-size:.94rem}}
.attention-row-disabled{cursor:default;opacity:.78}

/* Dashboard: identitas rombel wali kelas */
.dashboard-welcome-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
.dashboard-wali-badge{display:flex;align-items:center;gap:.32rem;background:rgba(255,255,255,.96);color:#17335c;border:1px solid rgba(255,255,255,.72);box-shadow:0 4px 14px rgba(15,23,42,.12);padding:.48rem .72rem;border-radius:12px;font-size:.82rem;font-weight:700;white-space:nowrap}
.dashboard-wali-badge strong{color:#0f4cc9;font-weight:900}
.dashboard-wali-badge span{color:#64748b;font-size:.76rem;font-weight:700;margin-left:.1rem}
@media (max-width:640px){.dashboard-welcome-meta{align-items:flex-start;width:100%}.dashboard-wali-badge{white-space:normal;flex-wrap:wrap}}

/* =========================================================
   Ekstrakurikuler - penilaian per siswa (Pramuka wajib)
   ========================================================= */
.eksul-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.eksul-rule{display:flex;gap:.75rem;align-items:center;border:1px solid #dbe5f2;border-radius:12px;padding:.8rem 1rem;background:#fff}.eksul-rule strong{display:block;font-size:.88rem}.eksul-rule small{display:block;color:#64748b;margin-top:.2rem;line-height:1.35}.eksul-rule-icon{font-size:1.35rem}.eksul-rule-required{background:#faf7ff;border-color:#ddd6fe;color:#5b21b6}.eksul-rule-choice{background:#f8fbff;border-color:#bfdbfe;color:#1d4ed8}
.eksul-assessment-layout{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr);gap:1rem;align-items:start}.eksul-student-panel{position:sticky;top:86px;max-height:calc(100vh - 115px);overflow:hidden}.eksul-student-panel .card-body{display:flex;flex-direction:column;max-height:inherit}.eksul-student-list{overflow:auto;border:1px solid #e2e8f0;border-radius:10px}.eksul-student-item{display:grid;grid-template-columns:26px 1fr;gap:.35rem;padding:.7rem .75rem;color:#334155;text-decoration:none;border-bottom:1px solid #eef2f7;transition:.16s ease}.eksul-student-item:last-child{border-bottom:0}.eksul-student-item:hover{background:#f8fafc}.eksul-student-item.active{background:linear-gradient(135deg,#f3e8ff,#eef2ff);color:#5b21b6;box-shadow:inset 3px 0 #7c3aed}.eksul-student-item strong{display:block;font-size:.82rem;line-height:1.3}.eksul-student-item small{display:block;font-size:.7rem;color:#64748b;margin-top:.15rem}.eksul-student-no{font-size:.76rem;padding-top:.05rem}
.eksul-rating-card{overflow:hidden}.eksul-instruction,.eksul-footer-note{border:1px solid #dbeafe;background:#f8fbff;color:#475569;border-radius:10px;padding:.7rem .85rem;font-size:.78rem}.eksul-footer-note{color:#1d4ed8;background:#eff6ff}.eksul-rating-table{width:100%;min-width:0;margin-bottom:0;table-layout:fixed}.eksul-rating-table th,.eksul-rating-table td{vertical-align:middle;padding:.58rem .42rem}.eksul-rating-table thead th{text-align:center;font-size:.72rem;letter-spacing:.01em}.eksul-rating-table th:first-child,.eksul-rating-table td:first-child{width:48px}.eksul-activity-head{text-align:left!important;width:46%;min-width:0;background:#f8fafc!important}.eksul-pred-head{width:18%;min-width:0;white-space:normal;line-height:1.15}.eksul-pred-head span{display:block;font-size:.92rem;margin-bottom:.08rem}.eksul-rating-table td:nth-child(n+3){text-align:center}.eksul-rating-table .status-pill{font-size:.62rem;padding:.16rem .38rem}.eksul-rating-table .eksul-check-box{width:21px;height:21px}.eksul-rating-table .eksul-activity-name{gap:.3rem}.eksul-rating-table .eksul-clear-choice{font-size:.65rem}@media(max-width:1100px){.eksul-activity-head{width:43%}.eksul-pred-head{width:19%}.eksul-rating-table th,.eksul-rating-table td{padding:.48rem .3rem}.eksul-rating-table thead th{font-size:.68rem}}.tone-cukup{background:#fff8e8!important;color:#b45309!important}.tone-baik{background:#eefaf1!important;color:#15803d!important}.tone-sangat-baik{background:#eef5ff!important;color:#1d4ed8!important}.tone-lain{background:#f8fafc!important}.tone-cell-cukup{background:#fffdf7}.tone-cell-baik{background:#f8fdf9}.tone-cell-sangat-baik{background:#f8fbff}.eksul-required-row td:first-child,.eksul-required-row td:nth-child(2){background:#fffbeb}.eksul-activity-name{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}.eksul-clear-choice{border:0;background:none;color:#64748b;font-size:.69rem;padding:0;margin-top:.25rem;text-decoration:underline;cursor:pointer}.eksul-clear-choice:hover{color:#dc2626}.eksul-check-choice{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.eksul-check-choice input{position:absolute;opacity:0;pointer-events:none}.eksul-check-box{display:inline-flex;width:23px;height:23px;border:1.5px solid #cbd5e1;border-radius:5px;align-items:center;justify-content:center;color:transparent;background:#fff;font-size:.8rem;font-weight:700;transition:.15s ease}.eksul-check-choice:hover .eksul-check-box{border-color:#8b5cf6}.eksul-check-choice input:checked + .eksul-check-box{background:linear-gradient(135deg,#7c3aed,#4f46e5);border-color:#6d28d9;color:#fff;box-shadow:0 3px 8px rgba(109,40,217,.22)}.eksul-check-choice input:focus-visible + .eksul-check-box{outline:3px solid rgba(99,102,241,.2);outline-offset:2px}
@media(max-width:900px){.eksul-assessment-layout{grid-template-columns:1fr}.eksul-student-panel{position:static;max-height:none}.eksul-student-list{max-height:260px}.eksul-rule-grid{grid-template-columns:1fr}}

/* ==========================================================
   Tema identitas SMA Negeri 4 Jayapura
   Navy #21145F | Oranye #F28C00 | Emas #F4C430
   Ruang lingkup: sidebar, login, dan dashboard seluruh role.
   ========================================================== */
:root {
    --brand-navy: #21145F;
    --brand-navy-dark: #140B3D;
    --brand-navy-light: #34237A;
    --brand-orange: #F28C00;
    --brand-orange-dark: #CE7100;
    --brand-gold: #F4C430;
    --brand-gold-soft: #FFF7D6;
}

/* Sidebar: palet logo dan motif geometris Papua. */
.sidebar {
    background: linear-gradient(180deg, #08041F 0%, #10082F 48%, #171044 100%);
    scrollbar-color: var(--brand-gold) rgba(255,255,255,.10);
}
.sidebar::before {
    opacity: .09;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22144%22%20height%3D%22144%22%20viewBox%3D%220%200%20144%20144%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%23F4C430%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M0%2024L24%200l24%2024L72%200l24%2024L120%200l24%2024%22/%3E%3Cpath%20d%3D%22M0%20120l24%2024%2024-24%2024%2024%2024-24%2024%2024%2024-24%22/%3E%3Cpath%20d%3D%22M18%2072l18-18%2018%2018-18%2018zM90%2072l18-18%2018%2018-18%2018z%22/%3E%3Cpath%20d%3D%22M36%2058c8%200%2014%206%2014%2014s-6%2014-14%2014-14-6-14-14%206-14%2014-14%22/%3E%3Cpath%20d%3D%22M108%2058c8%200%2014%206%2014%2014s-6%2014-14%2014-14-6-14-14%206-14%2014-14%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23F28C00%22%3E%3Cpath%20d%3D%22M68%2068h8v8h-8zM0%2068h8v8H0zM136%2068h8v8h-8z%22/%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%2236%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%22108%22%20r%3D%223%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
}
.sidebar::-webkit-scrollbar-thumb { background: var(--brand-gold); border-color: rgba(33,20,95,.5); }
.sidebar::-webkit-scrollbar-thumb:hover { background: #FFE56A; }
.sidebar-logo-block,
.sidebar-profile-block { border-bottom-color: rgba(244,196,48,.25); }
.sidebar-logo-img { background: #fff; box-shadow: 0 0 0 2px rgba(244,196,48,.68), 0 6px 16px rgba(0,0,0,.28); }
.sidebar-logo-fallback { background: var(--brand-gold); color: var(--brand-navy); }
.sidebar-school-name { color: var(--brand-gold); }
.sidebar-school-name-2 { color: #fff; }
.sidebar-avatar { background: linear-gradient(135deg, var(--brand-orange), var(--brand-gold)); color: var(--brand-navy); box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.sidebar-role-badge { background: var(--brand-gold); color: var(--brand-navy); }
.nav-group + .nav-group::before { background: linear-gradient(90deg, transparent, rgba(244,196,48,.66) 50%, transparent); }
.sidebar .nav > a:hover,
.nav-group-header:hover,
.nav-group-body a:hover { background: rgba(244,196,48,.12); color: #fff; }
.sidebar .nav > a.active,
.nav-group-body a.active {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
    color: #fff;
    box-shadow: inset 4px 0 var(--brand-gold), 0 5px 14px rgba(8,4,31,.32);
}

/* Login: warna identitas tetap mendukung gambar latar yang dipilih pengguna. */
.login-page {
    background-color: #090522;
    background-image:
        linear-gradient(135deg, rgba(9,5,34,.82), rgba(24,14,74,.73) 52%, rgba(6,3,25,.86)),
        var(--login-bg-image, linear-gradient(155deg, #0B0627, var(--brand-navy) 55%, #08041F));
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}
.login-page::before { background: rgba(65,45,145,.17); }
.login-page::after { background: rgba(33,20,95,.20); }
.login-card-new { box-shadow: 0 0 0 1px rgba(244,196,48,.62), 0 22px 58px rgba(6,3,25,.58); }
.login-card-header { background: linear-gradient(145deg, #10082F 0%, var(--brand-navy) 58%, #3A2784 100%); border-bottom: 3px solid var(--brand-gold); }
.login-logo-wrap img {
    height: 92px;
    background: rgba(255,255,255,.96) !important;
    padding: 6px !important;
    border: 1px solid rgba(244,196,48,.72);
    border-radius: 16px !important;
    filter: drop-shadow(0 5px 6px rgba(5,2,24,.58));
}
.login-logo-fallback { color: var(--brand-navy); }
.login-semester-badge { background: var(--brand-gold-soft); color: var(--brand-navy); border-color: var(--brand-gold); }
.login-card-body h4 { color: var(--brand-navy); }
.login-welcome-sub-blink,
.btn-login-solid { background: linear-gradient(135deg, #10082F, var(--brand-navy) 58%, #4A35A0); color: #fff; }
.btn-login-solid:hover { background: linear-gradient(135deg, #08041F, #170C49 52%, var(--brand-navy)); }
.login-card-body .form-control:focus,
.login-card-body .form-select:focus { border-color: var(--brand-navy); box-shadow: 0 0 0 .18rem rgba(33,20,95,.20); }

/* Dashboard seluruh role. */
.welcome-banner {
    background: linear-gradient(120deg, var(--brand-navy-dark) 0%, var(--brand-navy) 48%, var(--brand-orange) 100%);
    border: 1px solid rgba(244,196,48,.42);
    box-shadow: 0 10px 28px rgba(33,20,95,.20);
}
.welcome-banner::before {
    opacity: .20;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22144%22%20height%3D%22144%22%20viewBox%3D%220%200%20144%20144%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F4C430%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M0%2024L24%200l24%2024L72%200l24%2024L120%200l24%2024M0%20120l24%2024%2024-24%2024%2024%2024-24%2024%2024%2024-24%22/%3E%3Cpath%20d%3D%22M18%2072l18-18%2018%2018-18%2018zM90%2072l18-18%2018%2018-18%2018z%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23F28C00%22%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%2272%22%20r%3D%224%22/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
}
.welcome-banner-semester { background: var(--brand-gold); color: var(--brand-navy); box-shadow: 0 3px 10px rgba(244,196,48,.34); }
.welcome-banner-badge,
.dashboard-role-badge { border-color: rgba(244,196,48,.48); background: rgba(255,255,255,.16); }
.dashboard-wali-badge { color: var(--brand-navy); border-color: rgba(244,196,48,.72); }
.dashboard-wali-badge strong { color: var(--brand-orange-dark); }

.stat-card-primary { background: linear-gradient(135deg, var(--brand-navy-dark), var(--brand-navy-light)); }
.stat-card-success { background: linear-gradient(135deg, var(--brand-navy), #51339B); }
.stat-card-warning { background: linear-gradient(135deg, var(--brand-orange-dark), var(--brand-orange)); }
.stat-card-info { background: linear-gradient(135deg, #D79B08, var(--brand-gold)); }
.stat-card-primary,
.stat-card-success,
.stat-card-warning,
.stat-card-info { border-color: transparent; box-shadow: 0 8px 20px rgba(33,20,95,.14); }
.stat-card-info .stat-number,
.stat-card-info .stat-label { color: var(--brand-navy); }
.stat-card-info .stat-icon { background: rgba(33,20,95,.13); color: var(--brand-navy); }

.dashboard-analytics-card { border-color: #E4DFFC; box-shadow: 0 8px 24px rgba(33,20,95,.07); }
.dashboard-analytics-card::selection { background: var(--brand-gold); color: var(--brand-navy); }
.dashboard-card-head h4 { color: var(--brand-navy); }
.dashboard-chip { background: var(--brand-gold-soft); color: var(--brand-navy); border-color: var(--brand-gold); }
.dashboard-chip-success { background: #F1EEFF; color: var(--brand-navy); border-color: #CFC5F6; }
.dashboard-link { color: var(--brand-orange-dark); }
.attention-card { background: linear-gradient(180deg, #fff 0%, #FFFCF0 100%); }
.attention-row:hover .attention-label strong { color: var(--brand-navy); }
.attention-track { background: #EEEAFB; }
.attention-track span,
.bar-chart-fill,
.grafik-batang-fill { background: linear-gradient(90deg, var(--brand-navy), var(--brand-orange), var(--brand-gold)); }
.attention-value,
.bar-chart-label .persen,
.grafik-batang-persen { color: var(--brand-orange-dark); }
.bar-chart-track,
.grafik-batang-track { background: #EEEAFB; }
.readiness-component { border-color: #E7CC63; background: #FFFCED; }
.readiness-component-top span { color: var(--brand-navy); }
.readiness-component-top strong { color: var(--brand-orange-dark); }
.readiness-component-track { background: #F4EBC7; }
.readiness-component-track span { background: linear-gradient(90deg, var(--brand-navy), var(--brand-orange), var(--brand-gold)); }
.dashboard-note { background: #F8F7FD; border-color: #E4DFFC; }