/* ==========================================================
   E-Rapor SMK — 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: #16213e;
    --sidebar-bg-2: #1a3a8f;
    --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, var(--sidebar-bg), var(--sidebar-bg-2));
    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: rgba(255,255,255,.2) transparent;
}
.sidebar::before {
    content: ''; position: absolute; inset: 0; opacity: .07; 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%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;
}
.sidebar-logo-block, .sidebar-profile-block, .sidebar > nav { position: relative; z-index: 1; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.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: 38px; width: 38px; object-fit: contain; border-radius: .5rem; background: #fff; padding: 3px; flex-shrink: 0; }
.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 { font-size: .68rem; font-weight: 700; color: var(--warning); letter-spacing: .03em; }
.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: var(--primary); color: #fff; font-weight: 700; }

.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: var(--primary); color: #fff; font-weight: 700; }

.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: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--ink);
    padding: .3rem .5rem; border-radius: var(--radius-sm);
}
.menu-toggle:hover { background: #f1f5f9; }
.sidebar-overlay { display: 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-block; }
    .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:
        radial-gradient(circle at 85% 15%, rgba(96,165,250,.12) 0%, transparent 45%),
        radial-gradient(circle at 10% 85%, rgba(129,140,248,.10) 0%, transparent 40%),
        linear-gradient(160deg, #16213e 0%, #0f1b3d 45%, #0a1128 100%);
    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, #16213e 0%, #1d4ed8 55%, #7c3aed 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(147,197,253,.35), 0 0 40px rgba(96,165,250,.35), var(--shadow-lg);
}
.login-card-header {
    background: linear-gradient(160deg, #1e3a8a, #1d4ed8);
    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: .5rem; }
.login-logo-wrap img { height: 52px; width: 52px; object-fit: contain; border-radius: 50%; background: #fff; padding: 6px; }
.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: var(--primary-soft); color: var(--primary); font-size: .78rem;
    font-weight: 600; padding: .3rem .75rem; border-radius: 999px; white-space: normal; text-align: center;
}
.login-card-body h4 { color: #1e3a8a; 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: #16a34a; 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, #1d4ed8, #1e3a8a); border-color: transparent; color: #fff;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.btn-login-solid:hover { background: linear-gradient(135deg, #1e40af, #172554); 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, .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: 1rem;
    padding: 1.1rem 1.2rem; border-radius: 12px;
    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: 96px;
}
.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, #2563eb, #1d4ed8); border-left-color: #1d4ed8; border-color: transparent; }
.stat-card-success { background: linear-gradient(135deg, #16a34a, #15803d); border-left-color: #15803d; border-color: transparent; }
.stat-card-warning { background: linear-gradient(135deg, #f59e0b, #d97706); border-left-color: #d97706; border-color: transparent; }
.stat-card-info { background: linear-gradient(135deg, #0ea5e9, #0284c7); border-left-color: #0284c7; 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.5rem; width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; border-radius: 10px;
}
.stat-number { font-size: 1.5rem; font-weight: 800; line-height: 1.15; word-break: break-word; color: var(--ink); }
.stat-label { font-size: .8rem; color: var(--muted); margin-top: .1rem; font-weight: 600; }

/* ---------- 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: var(--primary); 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, var(--primary), var(--accent-purple)); }

.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, var(--primary), var(--accent-purple)); z-index: 1;
    transition: width .4s ease;
}
.grafik-batang-persen { flex: 0 0 40px; text-align: right; font-size: .82rem; font-weight: 800; color: var(--primary); }

@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:#2563eb;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 #e2e8f0;border-radius:10px;padding:.7rem;background:#f8fafc}.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:#334155}.readiness-component-top strong{font-size:.8rem;color:#1d4ed8}.readiness-component-track{height:7px;background:#e2e8f0;border-radius:999px;overflow:hidden}.readiness-component-track span{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#2563eb);border-radius:inherit}
.dashboard-actions-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.dashboard-student-name{font-size:1rem!important;line-height:1.2}
.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}}
.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}}

/* ---------- penyajian keputusan kenaikan kelas wali kelas ---------- */
.keputusan-panel {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    padding: 1rem 1.15rem; border: 1px solid #d8e4f5; border-left: 4px solid var(--primary);
    border-radius: 12px; background: linear-gradient(135deg, #f8fbff, #fff); box-shadow: 0 5px 16px rgba(30,64,175,.06);
}
.keputusan-panel-info { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.keputusan-panel-info > div:last-child { display: flex; flex-direction: column; gap: .18rem; }
.keputusan-panel-info strong { color: var(--ink); font-size: .94rem; }
.keputusan-panel-info small { color: var(--muted); font-size: .77rem; }
.keputusan-panel-icon {
    width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 1.05rem; font-weight: 800;
}
.keputusan-periode { display: inline-flex; align-items: center; width: max-content; font-size: .72rem; font-weight: 700; }
.keputusan-periode-open { color: #15803d; }
.keputusan-periode-locked { color: #b91c1c; }
.keputusan-massal-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.keputusan-aksi-label { font-size: .72rem; font-weight: 700; color: var(--muted); margin-right: .15rem; text-transform: uppercase; letter-spacing: .03em; }
.keputusan-select-all { padding: .55rem .8rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fafcff; font-size: .8rem; }
.siswa-list-head .col-rekomendasi { flex: 0 0 205px; }
.siswa-list-head .col-keputusan { flex: 0 0 165px; }
.siswa-summary-rekomendasi { display: flex; flex: 0 0 205px; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.siswa-summary-rekomendasi small { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.siswa-summary-keputusan { display: flex; flex: 0 0 165px; align-items: center; }
.keputusan-badge {
    display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: .32rem .62rem;
    border-radius: 999px; border: 1px solid; font-size: .7rem; font-weight: 700; line-height: 1.15; white-space: nowrap;
}
.keputusan-badge.is-naik { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }
.keputusan-badge.is-tidak { background: #fff1f2; border-color: #fecdd3; color: #b91c1c; }
.keputusan-badge.is-pending { background: #f8fafc; border-color: #cbd5e1; color: #64748b; }
@media (max-width: 1100px) {
    .keputusan-panel { align-items: flex-start; flex-direction: column; }
    .keputusan-massal-actions { justify-content: flex-start; }
    .siswa-list-head .col-rekomendasi, .siswa-summary-rekomendasi { flex-basis: 175px; }
    .siswa-list-head .col-keputusan, .siswa-summary-keputusan { flex-basis: 145px; }
}
@media (max-width: 720px) {
    .siswa-summary-rekomendasi, .siswa-summary-keputusan { flex: 1 1 45%; }
    .keputusan-panel { padding: .85rem; }
    .keputusan-massal-actions { width: 100%; }
    .keputusan-aksi-label { width: 100%; }
}