/* ================================================== */
/* Tema dasar aplikasi SIPPS */
/* Bagian ini berisi warna utama, tipografi, dan gaya umum. */
/* ================================================== */
:root {
    --sipps-green: #1f7a43;
    --sipps-green-dark: #0f4d2e;
    --sipps-green-soft: #e8f5ee;
    --sipps-green-line: #b7dec8;
    --sipps-yellow: #d8aa22;
    --sipps-gold: #d8aa22;
    --sipps-gold-dark: #946a10;
    --sipps-gold-soft: #fff7db;
    --sipps-gold-pale: #fffaf0;
    --sipps-gold-line: #ead89a;
    --sipps-navy: #06264a;
    --sipps-navy-dark: #021b33;
    --sipps-blue: #0f5aa6;
    --sipps-cream: #fffaf0;
    --sipps-bg: #f5fbf2;
    --sipps-ink: #173322;
    --sipps-serif: "Playfair Display", Georgia, serif;
}

/* Tampilan dasar seluruh halaman website. */
body {
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(216, 170, 34, .22), transparent 27%),
        radial-gradient(circle at top right, rgba(31, 122, 67, .12), transparent 30%),
        linear-gradient(180deg, #fffdf3, var(--sipps-bg) 48%, #edf7e9);
    color: var(--sipps-ink);
}

/* Mengunci scroll latar saat sidebar mobile sedang dibuka. */
body.sidebar-modal-open {
    overflow: hidden;
}

/* Bentuk dasar card dan bayangan umum untuk komponen utama. */
.card {
    border-color: rgba(31, 122, 67, .14) !important;
    border-radius: 8px;
}

.shadow-sm,
.stat-card {
    box-shadow: 0 14px 34px rgba(15, 77, 46, .10) !important;
}

/* Tombol utama sistem dengan warna hijau SIPPS. */
.btn-success,
.btn-primary {
    border-color: var(--sipps-green-dark);
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
}

.btn-success:hover,
.btn-primary:hover {
    border-color: #0b3a23;
    color: #ffffff;
    background: linear-gradient(135deg, #2a9052, #0b3a23);
}

/* Tombol outline untuk aksi sekunder. */
.btn-outline-success,
.btn-outline-primary {
    border-color: var(--sipps-green);
    color: var(--sipps-green-dark);
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
    border-color: var(--sipps-green-dark);
    color: #ffffff;
    background: var(--sipps-green-dark);
}

/* Alert informasi dan peringatan yang disesuaikan dengan palet SIPPS. */
.alert-info {
    border-color: var(--sipps-green-line);
    color: var(--sipps-green-dark);
    background: var(--sipps-green-soft);
}

.alert-warning {
    border-color: #e7c157;
    color: #5f420c;
    background: #fff1bf;
}

/* Badge bootstrap yang disamakan dengan tema visual website. */
.text-bg-primary,
.text-bg-success,
.text-bg-info {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark)) !important;
}

.text-bg-warning {
    color: #4d3307 !important;
    background: #f4d77f !important;
}

/* Tabel umum: memberi warna zebra dan hover yang lebih lembut. */
.table {
    --bs-table-striped-bg: #f3fbf2;
    --bs-table-hover-bg: #eef8e8;
}

.table thead th {
    color: var(--sipps-green-dark);
    background: linear-gradient(180deg, #f3fbf2, #fff6d8);
    border-bottom-color: var(--sipps-green-line);
}

/* ================================================== */
/* Halaman publik dan halaman login */
/* Bagian ini dipakai untuk tampilan sebelum pengguna masuk. */
/* ================================================== */
.public-page {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--sipps-cream);
}

/* Kartu login sederhana bila dipakai di mode ringkas. */
.login-card {
    max-width: 430px;
    border-radius: 8px;
}

/* Kerangka utama halaman login full screen. */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

/* Panel login dua kolom: hero kiri dan form kanan. */
.login-panel {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(380px, .95fr) minmax(560px, 1.05fr);
    overflow: hidden;
    background: #ffffff;
}

/* Area hero kiri halaman login dengan foto sekolah dan overlay gelap. */
.login-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: #ffffff;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(2, 27, 51, .88), rgba(0, 55, 52, .90)),
        url("../img/man1-medan-front.jpg") center/cover;
}

/* Ornamen titik emas di sudut kiri atas hero login. */
.login-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 180px;
    height: 190px;
    background-image: radial-gradient(rgba(246, 197, 83, .78) 1.1px, transparent 1.1px);
    background-size: 13px 13px;
    opacity: .72;
}

/* Ornamen lingkaran besar di hero login. */
.login-hero::after {
    content: "";
    position: absolute;
    top: -165px;
    left: -185px;
    z-index: 1;
    width: 420px;
    height: 420px;
    border: 2px solid rgba(246, 197, 83, .88);
    border-radius: 50%;
    box-shadow: 22px 18px 0 -18px rgba(246, 197, 83, .78);
    transform: rotate(-22deg);
}

/* Lapisan warna tambahan agar foto hero lebih kontras. */
.login-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at bottom left, rgba(216, 170, 34, .30), transparent 32%),
        linear-gradient(90deg, rgba(2, 27, 51, .42), rgba(1, 71, 64, .14)),
        linear-gradient(180deg, rgba(2, 27, 51, .06), rgba(2, 27, 51, .50));
}

/* Isi utama pada hero login seperti logo, judul, dan deskripsi. */
.login-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(34px, 5vw, 82px);
}

/* Deretan logo instansi pada sisi hero login. */
.login-logo-row {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 28px;
}

/* Gambar logo pada hero login. */
.login-logo-row img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    padding: 10px;
    border: 1px solid rgba(246, 197, 83, .56);
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 34px rgba(2, 27, 51, .30);
}

/* Label nama sekolah di area hero login. */
.school-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 156px;
    padding: 9px 18px;
    margin-bottom: 22px;
    border-radius: 999px;
    color: #ffd976;
    background: rgba(2, 27, 51, .42);
    border: 1px solid rgba(246, 197, 83, .78);
    backdrop-filter: blur(8px);
    font-family: var(--sipps-serif);
    font-weight: 800;
    font-size: 16px;
}

/* Judul utama SIPPS pada hero login. */
.login-hero h1 {
    margin: 0;
    color: #ffd976;
    font-family: var(--sipps-serif);
    font-size: clamp(58px, 6.4vw, 92px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: .04em;
    text-shadow: 0 5px 20px rgba(0, 0, 0, .26);
}

/* Deskripsi singkat sistem pada hero login. */
.login-hero p {
    max-width: 620px;
    margin: 18px 0 0;
    font-size: clamp(18px, 1.65vw, 24px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

/* Ornamen garis dan berlian kecil untuk pemisah visual login. */
.login-ornament {
    width: 250px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sipps-gold);
}

/* Garis ornamen pemisah. */
.login-ornament span {
    height: 1px;
    flex: 1;
    background: currentColor;
    opacity: .88;
}

/* Titik berlian kecil di tengah ornamen pemisah. */
.login-ornament i {
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

/* Posisi ornamen pada sisi hero login. */
.login-ornament-hero {
    margin: 22px 0 34px;
}

/* Posisi ornamen pada sisi form login. */
.login-ornament-form {
    margin: 26px auto 24px;
}

/* Panel kanan halaman login yang menampung form. */
.login-form-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, #fffdf7, #fffaf0 54%, #fffdf7);
}

/* Ornamen lengkung emas di latar panel form login. */
.login-form-panel::before {
    content: "";
    position: absolute;
    inset: -80px -120px -80px -40px;
    background:
        radial-gradient(ellipse at 100% 0%, transparent 0 42%, rgba(216, 170, 34, .18) 42.15% 42.55%, transparent 42.7% 48%, rgba(216, 170, 34, .14) 48.15% 48.55%, transparent 48.7% 54%, rgba(216, 170, 34, .10) 54.15% 54.5%, transparent 54.65%),
        radial-gradient(ellipse at 100% 100%, transparent 0 42%, rgba(216, 170, 34, .16) 42.15% 42.55%, transparent 42.7% 49%, rgba(216, 170, 34, .11) 49.15% 49.5%, transparent 49.65%);
    opacity: .9;
    pointer-events: none;
}

/* Ornamen sudut kanan bawah panel form login. */
.login-form-panel::after {
    content: "";
    position: absolute;
    right: 34px;
    bottom: 68px;
    width: 170px;
    height: 170px;
    border-right: 1px solid rgba(216, 170, 34, .32);
    border-bottom: 1px solid rgba(216, 170, 34, .24);
    border-radius: 0 0 90px 0;
    opacity: .7;
    pointer-events: none;
}

/* Kontainer isi form login agar jarak dan lebar tetap nyaman. */
.login-form-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 86px);
}

/* Deretan logo di atas form login. */
.login-logo-strip {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 34px;
}

/* Gambar logo kecil pada area form login. */
.login-logo-strip img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    padding: 9px;
    border: 1px solid rgba(216, 170, 34, .68);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(148, 106, 16, .12);
}

/* Pembungkus judul form login dan brand mark. */
.login-title-wrap {
    display: flex;
    gap: 22px;
    align-items: center;
    margin-bottom: 0;
}

/* Warna brand mark besar di judul form login. */
.login-title-wrap .brand-mark {
    color: #ffd976;
    border: 1px solid rgba(216, 170, 34, .72);
    background: linear-gradient(145deg, var(--sipps-navy), #053257);
    box-shadow: 0 14px 30px rgba(2, 27, 51, .16);
}

/* Ukuran brand mark besar pada judul login. */
.brand-mark-lg {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 14px;
    font-family: var(--sipps-serif);
    font-size: 34px;
    font-weight: 800;
}

/* Judul langkah login seperti pilih akses atau form masuk. */
.login-title-wrap h2 {
    margin: 0 0 8px;
    color: var(--sipps-navy);
    font-family: var(--sipps-serif);
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.08;
    font-weight: 800;
}

/* Deskripsi singkat di bawah judul form login. */
.login-title-wrap p {
    margin: 0;
    color: #526071;
    font-size: 17px;
    line-height: 1.55;
}

/* Input form login agar konsisten dengan tema SIPPS. */
.login-form-inner .form-control {
    border-color: rgba(216, 170, 34, .46);
    border-radius: 12px;
    min-height: 56px;
    color: var(--sipps-navy);
    background: rgba(255, 255, 255, .88);
    font-size: 14px;
    box-shadow: 0 10px 22px rgba(148, 106, 16, .06);
}

/* State fokus input form login. */
.login-form-inner .form-control:focus {
    border-color: var(--sipps-gold);
    box-shadow: 0 0 0 .2rem rgba(216, 170, 34, .17);
}

/* Label pada form login. */
.login-form-inner .form-label {
    color: var(--sipps-navy);
    font-size: 13px;
    font-weight: 800;
}

/* Grid pilihan role login pada halaman pilih akses. */
.role-select-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Pembungkus tiap opsi role login. */
.role-option {
    margin: 0;
}

/* Link pembungkus role agar seluruh kartu bisa diklik. */
.role-option-link {
    color: inherit;
    text-decoration: none;
}

/* Fokus keyboard pada kartu role login. */
.role-option-link:focus-visible .role-card {
    outline: 0;
    box-shadow: 0 0 0 .22rem rgba(216, 170, 34, .22);
}

/* Judul langkah role login sebelum pengguna memilih peran. */
.login-role-step {
    text-align: center;
}

/* Judul kecil pada langkah pilih role login. */
.login-role-step h3 {
    margin-bottom: 10px;
    color: var(--sipps-navy);
    font-family: var(--sipps-serif);
    font-size: 26px;
    font-weight: 800;
}

/* Deskripsi langkah pilih role login. */
.login-role-step .text-muted {
    color: #526071 !important;
    font-size: 16px;
    line-height: 1.55;
}

/* Area grid role agar tetap proporsional di berbagai layar. */
.role-select-grid-picker {
    max-width: 100%;
    margin: 0 auto;
}

/* Kartu role versi besar pada halaman pilih akses. */
.role-select-grid-picker .role-card {
    min-height: 198px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 24px 18px 30px;
}

/* Ikon besar pada pilihan role login. */
.role-select-grid-picker .role-icon {
    width: 82px;
    height: 82px;
    margin: 0 0 16px;
    border-radius: 50%;
}

/* Input radio role disembunyikan karena memakai kartu visual. */
.role-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Kartu visual untuk setiap role login. */
.role-card {
    min-height: 88px;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 16px 12px;
    border: 1px solid rgba(216, 170, 34, .66);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(216, 170, 34, .13), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 252, 244, .94));
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(148, 106, 16, .09);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Garis aksen di bawah kartu role login. */
.role-card::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 14px;
    height: 4px;
    border-radius: 999px;
    background: var(--sipps-gold);
}

/* Ikon utama pada kartu role login. */
.role-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-gold-dark));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        0 14px 28px rgba(2, 27, 51, .12);
}

/* Ukuran ikon SVG pada kartu role. */
.role-icon svg {
    width: 34px;
    height: 34px;
}

/* Teks pada kartu role dibuat bertumpuk agar mudah dibaca. */
.role-card strong,
.role-card small {
    display: block;
}

/* Nama role seperti Siswa, Orangtua/Wali, atau Guru BK. */
.role-card strong {
    color: var(--sipps-navy);
    font-family: var(--sipps-serif);
    font-size: 21px;
    font-weight: 800;
}

/* Deskripsi singkat fungsi tiap role login. */
.role-card small {
    margin-top: 10px;
    color: #5f6876;
    font-size: 14px;
    line-height: 1.45;
}

/* State kartu role saat dipilih. */
.role-option input:checked + .role-card {
    border-color: var(--sipps-green);
    background: linear-gradient(180deg, #ffffff, var(--sipps-green-soft));
    box-shadow: 0 10px 20px rgba(31, 122, 67, .14);
}

/* State fokus role saat dipilih lewat keyboard. */
.role-option input:focus + .role-card {
    box-shadow: 0 0 0 .2rem rgba(31, 122, 67, .16);
}

/* Hover kartu role untuk memberi kesan interaktif. */
.role-card:hover {
    transform: translateY(-3px);
    border-color: var(--sipps-gold);
    box-shadow: 0 22px 44px rgba(148, 106, 16, .16);
}

/* Warna ikon khusus untuk role siswa. */
.role-option-siswa .role-icon {
    background: linear-gradient(145deg, #0f6fd8, #063f91);
}

/* Warna ikon khusus untuk role orangtua/wali. */
.role-option-orangtua .role-icon {
    background: linear-gradient(145deg, #1eaf63, #0b7541);
}

/* Warna ikon khusus untuk role guru BK. */
.role-option-guru_bk .role-icon {
    background: linear-gradient(145deg, #efb315, #a87406);
}

/* Garis aksen kartu untuk role siswa. */
.role-option-siswa .role-card::after {
    background: #0f6fd8;
}

/* Garis aksen kartu untuk role orangtua/wali. */
.role-option-orangtua .role-card::after {
    background: #0b8d4f;
}

/* Garis aksen kartu untuk role guru BK. */
.role-option-guru_bk .role-card::after {
    background: #e6a411;
}

/* Ringkasan role terpilih setelah pengguna memilih peran. */
.selected-role-summary {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(216, 170, 34, .58);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(216, 170, 34, .12), transparent 34%),
        linear-gradient(180deg, #ffffff, #fffaf0);
    box-shadow: 0 14px 30px rgba(148, 106, 16, .10);
}

/* Ikon ringkasan role terpilih. */
.selected-role-summary .role-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    margin-bottom: 0;
    border-radius: 50%;
}

/* Ukuran ikon SVG pada ringkasan role. */
.selected-role-summary .role-icon svg {
    width: 28px;
    height: 28px;
}

/* Nama role yang sedang aktif pada ringkasan pilihan. */
.selected-role-summary strong {
    display: block;
    color: var(--sipps-navy);
    font-family: var(--sipps-serif);
    font-size: 20px;
}

/* Tautan panduan PDF pada halaman login sesuai peran pengguna. */
.login-guide-link {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 15px;
    border: 1px solid rgba(31, 122, 67, .22);
    border-radius: 14px;
    color: var(--sipps-green-dark);
    text-decoration: none;
    background: linear-gradient(180deg, #ffffff, #f1fbf5);
    box-shadow: 0 12px 26px rgba(15, 77, 46, .08);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.login-guide-link:hover,
.login-guide-link:focus {
    border-color: var(--sipps-green);
    color: var(--sipps-green-dark);
    box-shadow: 0 18px 34px rgba(15, 77, 46, .14);
    transform: translateY(-1px);
}

.login-guide-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
}

.login-guide-icon svg {
    width: 24px;
    height: 24px;
}

.login-guide-link strong,
.login-guide-link small {
    display: block;
}

.login-guide-link strong {
    color: var(--sipps-navy);
    font-weight: 800;
}

.login-guide-link small {
    margin-top: 2px;
    color: #5f6876;
    line-height: 1.4;
}

/* Sub panel kecil seperti area import Excel atau bantuan tambahan. */
.section-subpanel {
    padding: 14px;
    border: 1px solid var(--sipps-green-line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f7fcf5);
}

/* Judul pada sub panel kecil di halaman admin. */
.section-subpanel h3 {
    color: var(--sipps-green-dark);
}

/* ================================================== */
/* Kelola akun pengguna */
/* Bagian ini khusus untuk halaman guru BK > kelola akun pengguna. */
/* ================================================== */
/* Header utama daftar akun: menyusun judul dan area aksi dalam satu baris. */
.directory-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

/* Pembungkus teks header: mencegah isi judul melebar berlebihan. */
.directory-heading > div {
    min-width: 0;
}

/* Area teks judul daftar akun agar tidak memberi ruang kosong berlebih. */
.directory-heading-copy {
    flex: 0 1 auto;
}

/* Kartu daftar akun: memberi ruang dalam agar isi tidak terlalu rapat. */
.account-directory-card .card-body {
    padding: 28px;
}

/* Judul besar daftar akun pada bagian atas panel. */
.directory-heading h2 {
    margin: 0;
    color: var(--sipps-navy);
    font-family: var(--sipps-serif);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.08;
}

/* Teks penjelas pendek di bawah judul daftar akun. */
.directory-heading p {
    margin: 8px 0 0;
    color: #677483;
    font-size: 14px;
    line-height: 1.6;
}

/* Grup aksi header: menampung pencarian dan tombol tambah akun. */
.directory-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex: 0 1 360px;
    gap: 8px;
    min-width: 0;
}

/* Kotak pencarian akun pada header daftar akun. */
.directory-search {
    width: min(100%, 360px);
    max-width: 100%;
    min-width: 0;
    height: 48px;
    display: inline-flex;
    align-items: center;
    flex: 1 1 280px;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(216, 170, 34, .26);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #fffef8);
    box-shadow: 0 12px 26px rgba(148, 106, 16, .08);
}

/* Area ikon pencarian agar ukuran ikon tetap konsisten. */
.directory-search span {
    width: 18px;
    height: 18px;
    color: #8b6d2a;
    flex: 0 0 18px;
}

/* Ukuran ikon SVG di dalam kotak pencarian. */
.directory-search span svg {
    width: 18px;
    height: 18px;
}

/* Input pencarian akun: memperluas area ketik di dalam search box. */
.directory-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #30414d;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}

/* Placeholder pencarian: membedakan teks petunjuk dari input aktif. */
.directory-search input::placeholder {
    color: #9aa5af;
}

/* Tombol tambah akun pada sisi kanan header daftar akun. */
.directory-add-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #0b3970, #06264a);
    box-shadow: 0 14px 28px rgba(6, 38, 74, .18);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* State hover/focus tombol tambah akun agar lebih jelas saat diinteraksi. */
.directory-add-btn:hover,
.directory-add-btn:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #124f93, #06264a);
    box-shadow: 0 16px 32px rgba(6, 38, 74, .24);
    transform: translateY(-1px);
}

/* Ukuran ikon pada tombol tambah akun. */
.directory-add-btn span,
.directory-add-btn svg {
    width: 18px;
    height: 18px;
}

/* Pembungkus seluruh panel tabel per role: memberi jarak antar panel. */
.account-group-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Panel tabel per role: bentuk dasar kartu untuk siswa, orangtua, dan guru BK. */
.account-role-panel {
    --account-accent: var(--sipps-blue);
    --account-accent-dark: #0b4d96;
    --account-soft: rgba(15, 90, 166, .08);
    padding: 14px;
    border: 1px solid rgba(216, 170, 34, .20);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 252, 245, .92));
    box-shadow: 0 12px 28px rgba(148, 106, 16, .06);
}

/* Variasi warna panel role siswa. */
.account-role-panel-blue {
    --account-accent: #0f6fd8;
    --account-accent-dark: #0b58ad;
    --account-avatar-bg: #0f6fd8;
    --account-soft: rgba(15, 111, 216, .09);
}

/* Variasi warna panel role orangtua/wali. */
.account-role-panel-green {
    --account-accent: #0f7138;
    --account-accent-dark: #0b5d2d;
    --account-avatar-bg: #0f7138;
    --account-soft: rgba(15, 113, 56, .09);
}

/* Variasi warna panel role guru BK. */
.account-role-panel-gold {
    --account-accent: #d49200;
    --account-accent-dark: #a97106;
    --account-avatar-bg: #d49200;
    --account-soft: rgba(212, 146, 0, .10);
}

/* Toolbar panel role: menata judul panel dan kontrol filter/export. */
.account-role-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

/* Area judul role: menyatukan ikon dan nama kelompok akun. */
.account-role-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Judul tiap kelompok akun seperti Akun Siswa atau Akun Guru BK. */
.account-role-title h3 {
    margin: 0;
    color: var(--account-accent-dark);
    font-family: var(--sipps-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

/* Ikon bulat di samping judul role. */
.account-role-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--account-avatar-bg, var(--account-accent));
    box-shadow: 0 10px 20px rgba(6, 38, 74, .12);
    flex: 0 0 34px;
}

/* Ukuran ikon SVG pada lingkaran role. */
.account-role-icon svg {
    width: 18px;
    height: 18px;
}

/* Kontrol panel role: menampung filter kelas dan tombol export. */
.account-role-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Gaya dasar untuk filter kelas dan tombol export. */
.account-role-filter,
.account-export-btn {
    min-height: 36px;
    border: 1px solid rgba(216, 170, 34, .24);
    border-radius: 8px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(148, 106, 16, .05);
}

/* Select filter role: dipakai untuk menyaring akun berdasarkan kelas. */
.account-role-filter {
    min-width: 122px;
    padding: 0 12px;
    color: #44525f;
}

/* Label statis pengganti filter pada panel Guru BK. */
.account-role-filter-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tombol export: mengekspor data yang tampil pada tabel role aktif. */
.account-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--account-accent-dark);
}

/* Ukuran ikon pada tombol export. */
.account-export-btn span,
.account-export-btn svg {
    width: 15px;
    height: 15px;
}

/* Bungkus tabel: menjaga tabel fleksibel dan bisa discroll jika sempit. */
.account-table-wrap {
    border: 1px solid rgba(216, 170, 34, .16);
    border-radius: 8px;
    background: #ffffff;
    overflow: auto;
}

/* Tabel akun utama: menetapkan lebar minimum agar kolom tidak rusak. */
.account-directory-table {
    margin-bottom: 0;
    min-width: 640px;
    table-layout: fixed;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
}

/* Kolom nomor: memberi lebar tetap pada kolom urutan. */
.account-directory-table thead th:first-child {
    width: 54px;
}

/* Kolom aksi: memberi ruang tetap untuk tombol ikon di sisi kanan. */
.account-directory-table thead th:last-child {
    width: 132px;
}

/* Kolom username dibuat stabil agar jarak tabel lebih proporsional. */
.account-directory-table thead th:nth-child(3),
.account-directory-table tbody td:nth-child(3) {
    width: 150px;
}

/* Kolom password dibuat lebih rapat agar tidak terlalu jauh dari username. */
.account-directory-table thead th:nth-child(4),
.account-directory-table tbody td:nth-child(4) {
    width: 132px;
}

/* Header tabel: warna dan tipografi judul kolom per role. */
.account-directory-table thead th {
    padding: 8px 12px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--account-accent), var(--account-accent-dark));
    border-bottom: 0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Isi tabel: jarak antar sel dan ukuran teks data akun. */
.account-directory-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #edf1e6;
    background: #ffffff;
    vertical-align: middle;
    font-size: 13px;
}

/* Hover baris tabel: memberi highlight ringan saat pointer diarahkan. */
.account-directory-table tbody tr:hover td {
    background: linear-gradient(180deg, var(--account-soft), rgba(255, 255, 255, .98));
}

/* Baris terakhir tabel: menghilangkan garis bawah penutup. */
.account-directory-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Nomor urut akun pada kolom pertama tabel. */
.account-row-number {
    width: 54px;
    text-align: center;
    color: #607080;
    font-size: 12px;
    font-weight: 700;
}

/* Nama utama akun pada kolom identitas pengguna. */
.account-user-name {
    color: #223140;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

/* Subteks akun: menampilkan relasi, kelas, atau informasi tambahan. */
.account-user-subtitle {
    margin-top: 3px;
    color: #7a8693;
    font-size: 11px;
    line-height: 1.35;
    word-break: break-word;
}

/* Username akun: dibuat sedikit lebih tegas agar mudah dipindai admin. */
.account-username-text {
    color: #425264;
    font-size: 13px;
    font-weight: 600;
}

/* Area password: menjaga tinggi baris tetap stabil saat toggle aktif. */
.account-password-cell {
    display: flex;
    align-items: center;
    min-height: 34px;
}

/* Badge password: menampilkan mode tersembunyi atau terlihat pada akun. */
.account-password-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #8b6913;
    background: #fff7dd;
    border: 1px solid rgba(216, 170, 34, .24);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

/* Sel aksi: area khusus untuk tombol lihat password. */
.account-action-cell {
    width: 132px;
    text-align: center;
    white-space: nowrap;
}

/* Grup aksi tabel akun: menyusun tombol lihat password dan hapus. */
.account-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Form hapus akun: menghilangkan margin default form agar sejajar tombol lain. */
.account-delete-form {
    margin: 0;
}

/* Tombol hapus akun pada daftar akun pengguna. */
.account-delete-btn {
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #c81f1f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(200, 31, 31, .18);
}

/* Efek hover tombol hapus agar aksi destruktif tetap jelas namun rapi. */
.account-delete-btn:hover,
.account-delete-btn:focus {
    color: #ffffff;
    background: #a91818;
}

/* Area input password form akun baru beserta tombol tampilkan password. */
.account-password-input {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Input password di form akun dibuat lentur mengikuti sisa lebar baris. */
.account-password-input .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

/* Tombol tampilkan password pada form akun baru. */
.account-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 108px;
    padding: 0 12px;
    border: 1px solid rgba(216, 170, 34, .24);
    border-radius: 8px;
    background: #fffef8;
    color: #7d601e;
    font-size: 12px;
    font-weight: 700;
}

/* Ukuran ikon pada tombol tampilkan password. */
.account-password-toggle svg {
    width: 15px;
    height: 15px;
}

/* Tombol ikon aksi pada tabel akun. */
.account-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    border: 0;
    border-radius: 50%;
    color: #647484;
    background: transparent;
}

/* Tombol ikon pertama: menghapus jarak kiri tambahan. */
.account-icon-btn:first-child {
    margin-left: 0;
}

/* Ukuran ikon SVG di tombol aksi tabel. */
.account-icon-btn svg {
    width: 16px;
    height: 16px;
}

/* State hover/focus tombol ikon agar aksi lebih mudah dikenali. */
.account-icon-btn:hover,
.account-icon-btn:focus {
    color: var(--account-accent-dark);
    background: rgba(255, 248, 229, .88);
}

/* Tombol aksi nonaktif: dipakai saat password akun belum tersedia. */
.account-icon-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
    background: transparent;
}

/* Pesan kosong: tampil saat hasil filter tidak menemukan data akun. */
.account-empty-state {
    padding: 18px !important;
    color: #6f7c89;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

/* Tombol kembali atau ganti peran pada halaman login. */
.change-role-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px 9px 15px;
    border: 1px solid rgba(31, 122, 67, .32);
    border-radius: 999px;
    color: var(--sipps-green-dark);
    background: linear-gradient(180deg, #ffffff, #eef8e8);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(15, 77, 46, .12);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

/* Ikon panah kecil di tombol ganti peran. */
.change-role-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* State hover/focus tombol ganti peran. */
.change-role-btn:hover,
.change-role-btn:focus {
    color: #ffffff;
    border-color: var(--sipps-green-dark);
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
    box-shadow: 0 13px 26px rgba(15, 77, 46, .22);
    transform: translateY(-1px);
}

/* Outline fokus tombol ganti peran untuk akses keyboard. */
.change-role-btn:focus-visible {
    outline: 3px solid rgba(31, 122, 67, .25);
    outline-offset: 2px;
}

/* State aktif tombol ganti peran saat ditekan. */
.change-role-btn:active {
    transform: translateY(0);
}

/* Tombol submit login utama. */
.login-submit {
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
    box-shadow: 0 12px 24px rgba(15, 77, 46, .22);
}

/* Hover tombol submit login. */
.login-submit:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #2a9052, #0b3a23);
}

/* ================================================== */
/* Layout aplikasi setelah login */
/* Bagian ini dipakai untuk sidebar, topbar, dan area konten utama. */
/* ================================================== */
.app-shell {
    position: relative;
    display: flex;
    min-height: 100vh;
    background:
        radial-gradient(circle at bottom left, rgba(216, 170, 34, .14), transparent 28%),
        linear-gradient(90deg, #fffdf4 0, #fffdf4 300px, #fffefa 300px, #f9fcf6 100%);
}

/* Sidebar utama navigasi aplikasi. */
.sidebar {
    width: 300px;
    flex: 0 0 300px;
    background:
        radial-gradient(circle at bottom left, rgba(216, 170, 34, .16), transparent 30%),
        linear-gradient(180deg, #fffdf4, #f8fbf1),
        #ffffff;
    border-right: 1px solid var(--sipps-green-line);
    padding: 28px 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 24;
    transition: width .24s ease, flex-basis .24s ease, padding .24s ease, opacity .18s ease, transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

/* Mode sidebar tertutup di desktop: menu disembunyikan penuh agar konten lebih luas. */
.app-shell.sidebar-enhanced.sidebar-collapsed .sidebar {
    width: 0;
    flex-basis: 0;
    padding: 0;
    border-right-color: transparent;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Area brand di atas sidebar. */
.brand {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 34px;
}

/* Grup logo pada identitas sekolah di sidebar. */
.brand-logo-pair {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Gambar logo sekolah dan instansi pada sidebar. */
.brand-logo-pair img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    padding: 5px;
    border: 1px solid var(--sipps-green-line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 77, 46, .10);
}

/* Kotak huruf brand atau inisial sistem. */
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-gold-dark));
    color: #ffffff;
    font-weight: 700;
}

/* Baris nama sekolah kecil di bawah brand utama. */
.brand small {
    display: block;
    margin-top: 3px;
    color: #526d5e;
    font-size: 12px;
    line-height: 1.35;
}

/* Nama utama SIPPS pada sidebar. */
.brand strong {
    display: block;
    color: var(--sipps-gold-dark);
    font-size: 26px;
    line-height: 1;
    letter-spacing: .02em;
}

/* Daftar menu navigasi pada sidebar. */
.sidebar-nav {
    gap: 8px;
}

/* Link menu standar pada sidebar aplikasi. */
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #274d36;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

/* State hover dan aktif menu sidebar. */
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: linear-gradient(135deg, #0f4d2e, #154b88);
    border-color: var(--sipps-gold);
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(15, 77, 46, .20);
    transform: translateY(-1px);
}

/* Accordion sidebar untuk menu yang memiliki submenu. */
.sidebar-accordion {
    position: relative;
    margin: 0 0 10px;
}

/* Summary accordion dibuat terasa seperti menu sidebar biasa. */
.sidebar-accordion-toggle {
    width: 100%;
    cursor: pointer;
    list-style: none;
    min-height: 52px;
    justify-content: space-between;
    border-radius: 14px;
}

/* Teks parent accordion diberi ruang fleksibel agar rapi saat menjadi dua baris. */
.sidebar-accordion-toggle > span:not(.app-menu-icon):not(.app-menu-chevron) {
    min-width: 0;
    flex: 1 1 auto;
}

/* Parent accordion aktif/open menjadi kotak aktif penuh. */
.sidebar-accordion.active > .sidebar-accordion-toggle,
.sidebar-accordion[open] > .sidebar-accordion-toggle {
    background: linear-gradient(135deg, #0f4d2e, #0b5a4d);
    border-color: var(--sipps-gold);
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(15, 77, 46, .20);
}

/* Ikon parent accordion aktif mengikuti warna teks putih. */
.sidebar-accordion.active > .sidebar-accordion-toggle .app-menu-icon,
.sidebar-accordion[open] > .sidebar-accordion-toggle .app-menu-icon {
    color: #ffffff;
}

/* Marker bawaan details disembunyikan agar panah custom yang tampil. */
.sidebar-accordion-toggle::-webkit-details-marker {
    display: none;
}

/* Panah kanan pada menu accordion sidebar. */
.app-menu-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

/* Panah berotasi saat accordion terbuka. */
.sidebar-accordion[open] > .sidebar-accordion-toggle .app-menu-chevron {
    transform: rotate(225deg);
}

/* Area submenu dibuat menyatu dengan parent tanpa garis timeline. */
.sidebar-submenu {
    position: relative;
    display: grid;
    gap: 6px;
    max-height: 0;
    margin: 0 4px 0 30px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height .24s ease, opacity .18s ease, padding .22s ease, margin .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Submenu terlihat saat accordion terbuka. */
.sidebar-accordion[open] .sidebar-submenu {
    max-height: 150px;
    margin-top: 8px;
    margin-bottom: 20px;
    padding: 8px;
    border-color: rgba(216, 170, 34, .22);
    background:
        radial-gradient(circle at top left, rgba(216, 170, 34, .12), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 248, 227, .88));
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 12px 26px rgba(148, 106, 16, .10), inset 0 1px 0 rgba(255, 255, 255, .78);
}

/* Menu setelah accordion diberi napas kecil agar tidak menempel pada submenu. */
.sidebar-accordion[open] + .nav-link {
    margin-top: 0;
}

/* Link submenu mengikuti visual menu utama namun lebih ringan. */
.sidebar-submenu-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 8px 11px;
    color: #375a44;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.28;
    text-decoration: none;
    position: relative;
    background: rgba(255, 255, 255, .42);
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Icon kecil submenu menggantikan bullet titik. */
.sidebar-submenu-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    color: rgba(55, 90, 68, .72);
    transition: color .18s ease, transform .18s ease;
}

.sidebar-submenu-icon svg {
    width: 17px;
    height: 17px;
}

/* Hover submenu tetap lembut agar tidak berebut fokus dengan parent. */
.sidebar-submenu-link:hover {
    color: var(--sipps-gold-dark);
    background: rgba(255, 249, 232, .98);
    border-color: rgba(216, 170, 34, .26);
    box-shadow: 0 7px 16px rgba(148, 106, 16, .07);
    transform: translateX(2px);
}

/* Submenu aktif menggunakan cream/gold sesuai konsep sidebar. */
.sidebar-submenu-link.active {
    color: var(--sipps-gold-dark);
    background: linear-gradient(180deg, #fffaf0, #fff1cf);
    border-color: rgba(216, 170, 34, .34);
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(148, 106, 16, .09);
}

/* Aksen kecil di sisi kiri submenu aktif agar statusnya cepat terbaca. */
.sidebar-submenu-link.active::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 999px;
    background: var(--sipps-gold-dark);
}

/* Icon submenu aktif ikut berubah ke gold. */
.sidebar-submenu-link.active .sidebar-submenu-icon,
.sidebar-submenu-link:hover .sidebar-submenu-icon {
    color: var(--sipps-gold-dark);
    transform: scale(1.06);
}

/* Fokus keyboard pada submenu agar tetap jelas dan rapi. */
.sidebar-submenu-link:focus-visible {
    outline: 2px solid rgba(216, 170, 34, .55);
    outline-offset: 2px;
}

/* Ikon di samping menu sidebar. */
.app-menu-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    color: var(--sipps-gold-dark);
}

/* Ukuran SVG untuk ikon menu sidebar. */
.app-menu-icon svg {
    width: 24px;
    height: 24px;
}

/* Warna ikon menu saat menu aktif atau dihover. */
.sidebar .nav-link:hover .app-menu-icon,
.sidebar .nav-link.active .app-menu-icon {
    color: #ffffff;
}

/* Link logout pada sidebar diberi warna khusus agar mudah dibedakan. */
.nav-logout {
    margin-top: 18px;
    color: #b42318 !important;
}

/* Hover logout agar tetap jelas sebagai aksi keluar. */
.nav-logout:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #b42318, #7a271a) !important;
    border-color: #f2b8ad !important;
}

/* Kartu bantuan di bagian bawah sidebar. */
.sidebar-help {
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(216, 170, 34, .16), transparent 36%),
        linear-gradient(180deg, #ffffff, #fff9e8);
    box-shadow: 0 16px 34px rgba(148, 106, 16, .10);
}

/* Ikon bantuan pada kartu sidebar help. */
.sidebar-help-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-gold), var(--sipps-gold-dark));
    font-weight: 800;
}

/* Judul bantuan pada sidebar. */
.sidebar-help strong {
    display: block;
    margin-bottom: 5px;
    color: var(--sipps-green-dark);
}

/* Deskripsi bantuan pada sidebar. */
.sidebar-help p {
    margin: 0;
    color: #526d5e;
    font-size: 12px;
    line-height: 1.6;
}

/* Area utama konten setelah sidebar. */
.main-content {
    min-width: 0;
    flex: 1;
}

/* Topbar (bagian atas aplikasi setelah login). */
.topbar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 253, 246, .88)),
        #fffdf6;
    border-bottom: 1px solid var(--sipps-green-line);
    padding: 26px 30px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 18px;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(14px);
}

/* Grup kiri topbar: menampung tombol buka/tutup menu. */
.topbar-left {
    display: grid;
    grid-template-columns: 50px;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* Tombol pojok kiri untuk membuka atau menutup sidebar. */
.sidebar-toggle {
    width: 50px;
    height: 50px;
    position: relative;
    display: inline-flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 12px;
    color: var(--sipps-navy);
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(148, 106, 16, .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

/* Garis hamburger pada tombol sidebar. */
.sidebar-toggle span {
    width: 20px;
    height: 2px;
    position: absolute;
    left: 50%;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
}

/* Garis atas hamburger. */
.sidebar-toggle span:nth-child(1) {
    top: 17px;
}

/* Garis tengah hamburger. */
.sidebar-toggle span:nth-child(2) {
    top: 24px;
}

/* Garis bawah hamburger. */
.sidebar-toggle span:nth-child(3) {
    top: 31px;
}

/* Hover dan fokus tombol sidebar. */
.sidebar-toggle:hover,
.sidebar-toggle:focus {
    color: #ffffff;
    border-color: var(--sipps-green-dark);
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
    box-shadow: 0 14px 28px rgba(15, 77, 46, .18);
    transform: translateY(-1px);
}

/* Outline fokus keyboard pada tombol sidebar. */
.sidebar-toggle:focus-visible {
    outline: 3px solid rgba(31, 122, 67, .22);
    outline-offset: 2px;
}

/* Latar gelap saat sidebar dibuka di mode mobile. */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 18;
    border: 0;
    background: rgba(2, 27, 51, .26);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease;
}

/* Area pencarian di topbar. */
.topbar-search {
    width: 100%;
    min-width: 0;
    max-width: 640px;
    position: relative;
    margin: 0;
}

/* Input pencarian di topbar dashboard. */
.topbar-search input {
    width: 100%;
    min-height: 54px;
    padding: 0 18px 0 52px;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 12px;
    color: var(--sipps-ink);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(148, 106, 16, .08);
    outline: none;
}

/* Fokus input pencarian topbar. */
.topbar-search input:focus {
    border-color: var(--sipps-green);
    box-shadow: 0 0 0 .2rem rgba(31, 122, 67, .12), 0 12px 28px rgba(15, 77, 46, .08);
}

/* Ikon pencarian di dalam input topbar. */
.topbar-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    width: 22px;
    height: 22px;
    color: var(--sipps-gold-dark);
    transform: translateY(-50%);
}

/* Ukuran SVG icon topbar search. */
.topbar-search-icon svg {
    width: 100%;
    height: 100%;
}

/* Grup aksi di sisi kanan topbar. */
.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    flex-wrap: nowrap;
}

/* Tombol notifikasi bulat di topbar. */
.notification-btn {
    width: 52px;
    height: 52px;
    position: relative;
    display: inline-flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 50%;
    color: var(--sipps-green-dark);
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(148, 106, 16, .10);
}

/* Ukuran ikon notifikasi. */
.notification-btn svg {
    width: 24px;
    height: 24px;
}

/* Badge angka notifikasi di pojok tombol. */
.notification-btn span {
    min-width: 18px;
    height: 18px;
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-gold), var(--sipps-gold-dark));
    font-size: 10px;
    font-weight: 800;
}

/* Label tanggal di topbar atau dashboard. */
.date-chip {
    min-height: 48px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 12px;
    color: var(--sipps-ink);
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(148, 106, 16, .08);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* Ikon kalender pada date chip. */
.date-chip svg {
    width: 22px;
    height: 22px;
    color: var(--sipps-gold-dark);
}

/* Padding utama area isi halaman setelah topbar. */
.content-wrap {
    padding: 26px 30px 36px;
}

/* Heading umum halaman internal. */
.page-heading {
    margin-bottom: 20px;
}

/* Judul utama halaman internal. */
.page-heading h1 {
    margin: 0;
    color: #111827;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Deskripsi singkat halaman internal. */
.page-heading p {
    margin: 6px 0 0;
    color: #53645a;
    font-size: 14px;
}

/* Kartu ringkas identitas user di topbar. */
.user-chip {
    border: 1px solid var(--sipps-green-line);
    border-radius: 16px;
    padding: 7px 12px 7px 7px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: min(100%, 320px);
    background: #ffffff;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(15, 77, 46, .08);
}

/* Topbar tanpa tanggal: memberi ruang lebih lega untuk identitas user. */
.topbar-no-date .user-chip {
    max-width: min(100%, 360px);
}

/* Topbar dengan tanggal: chip tanggal boleh tetap ringkas pada sisi kanan. */
.topbar-with-date .date-chip {
    order: 2;
}

/* Topbar tanpa tanggal: aksi kanan dibuat lebih rapat karena elemennya lebih sedikit. */
.topbar-no-date .topbar-actions {
    gap: 10px;
}

/* Avatar bulat untuk user yang sedang login. */
.user-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-gold-dark));
    font-size: 14px;
    font-weight: 800;
}

/* Avatar topbar siswa memakai warna biru. */
.role-siswa .user-avatar {
    background: #0b5099;
}

/* Avatar topbar orangtua/wali memakai warna hijau. */
.role-orangtua .user-avatar {
    background: #0f7138;
}

/* Avatar topbar Guru BK memakai warna emas. */
.role-guru_bk .user-avatar {
    background: #d49200;
}

/* Pembungkus teks nama dan role user. */
.user-chip-text {
    display: block;
    min-width: 0;
    overflow: hidden;
}

/* Teks dalam user chip dibuat bertumpuk. */
.user-chip-text strong,
.user-chip-text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role atau keterangan kecil di bawah nama user. */
.user-chip-text small {
    color: #526d5e;
    font-size: 12px;
    font-weight: 600;
}

/* Kartu statistik kecil pada dashboard. */
.stat-card {
    border: 1px solid var(--sipps-gold-line) !important;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(216, 170, 34, .12), transparent 34%),
        linear-gradient(180deg, #ffffff, #fffdf6);
    box-shadow: 0 15px 34px rgba(15, 77, 46, .10);
}

/* Menghapus pseudo elemen bawaan card statistik bila ada. */
.stat-card::before {
    content: none;
}

/* Angka utama pada card statistik. */
.stat-card .stat-number {
    font-size: 30px;
    font-weight: 700;
    color: var(--sipps-green-dark);
}

/* Menyamakan posisi vertikal isi sel tabel bootstrap. */
.table td,
.table th {
    vertical-align: middle;
}

/* ================================================== */
/* Dashboard dan panel analisis */
/* Bagian ini dipakai untuk tampilan utama setelah login. */
/* ================================================== */
.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

/* Judul sambutan dashboard. */
.dashboard-welcome h2 {
    margin: 0;
    color: #111827;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Deskripsi singkat di bawah sambutan dashboard. */
.dashboard-welcome p {
    margin: 8px 0 0;
    color: #53645a;
    font-size: 14px;
}

/* Grid kartu statistik pada dashboard utama. */
.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 14px;
}

/* Isi card statistik dashboard agar ikon dan angka sejajar rapi. */
.dashboard-stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 126px;
    padding: 22px;
}

/* Lingkaran ikon besar pada kartu statistik. */
.stat-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 13px 26px rgba(15, 77, 46, .18);
}

/* Ukuran SVG di dalam ikon statistik. */
.stat-icon svg {
    width: 32px;
    height: 32px;
}

/* Variasi warna ikon statistik biru. */
.stat-icon-blue {
    background: linear-gradient(135deg, #0f5aa6, #07376d);
}

/* Variasi warna ikon statistik hijau. */
.stat-icon-green {
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
}

/* Variasi warna ikon statistik emas. */
.stat-icon-gold {
    background: linear-gradient(135deg, var(--sipps-gold), var(--sipps-gold-dark));
}

/* Label kecil penjelas angka statistik. */
.stat-label {
    color: #4f5f55;
    font-size: 13px;
    font-weight: 700;
}

/* Hint kecil tambahan di bawah statistik. */
.stat-hint {
    color: var(--sipps-green);
    font-size: 12px;
    font-weight: 700;
}

/* Panel dashboard seperti grafik, ringkasan, atau workflow. */
.dashboard-panel {
    border: 1px solid var(--sipps-gold-line) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 34px rgba(15, 77, 46, .08);
}

/* Padding isi panel dashboard. */
.dashboard-panel .card-body {
    padding: 22px;
}

/* Header panel dashboard yang berisi judul dan info samping. */
.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

/* Judul panel dashboard. */
.panel-heading h2 {
    margin: 0;
    color: #17231b;
    font-size: 18px;
    font-weight: 800;
}

/* Badge kecil di sisi kanan judul panel. */
.panel-heading span {
    padding: 8px 12px;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 8px;
    color: #59695f;
    background: #fffdf7;
    font-size: 12px;
    font-weight: 700;
}

/* Layout dua kolom untuk panel rekomendasi dan grafik distribusi. */
.recommendation-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 22px;
    align-items: center;
}

/* Donut chart rekomendasi peminatan. */
.donut-chart {
    width: 230px;
    height: 230px;
    position: relative;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--chart);
    box-shadow: inset 0 0 0 1px rgba(15, 77, 46, .08), 0 16px 36px rgba(15, 77, 46, .10);
}

/* Lingkaran tengah donut chart untuk total data. */
.donut-chart > div {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 50%;
    color: #17231b;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(31, 122, 67, .08);
}

/* Teks di tengah donut dibuat bertumpuk. */
.donut-chart span,
.donut-chart strong {
    display: block;
}

/* Label kecil di tengah donut chart. */
.donut-chart span {
    font-size: 12px;
    color: #526d5e;
    font-weight: 700;
}

/* Angka total di tengah donut chart. */
.donut-chart strong {
    font-size: 28px;
    font-weight: 800;
}

/* Daftar distribusi hasil rekomendasi per kategori. */
.distribution-list {
    display: grid;
    gap: 12px;
}

/* Baris distribusi yang menampilkan warna, nama, dan jumlah. */
.distribution-item {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 10px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1e8;
    color: #24352b;
    font-size: 13px;
}

/* Angka atau nama penting pada item distribusi. */
.distribution-item strong {
    font-size: 13px;
}

/* Titik warna penanda kategori distribusi. */
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* Kotak insight singkat di bawah grafik rekomendasi. */
.insight-box {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #fffdf7, #fff9e6);
}

/* Ikon insight pada kotak kesimpulan cepat. */
.insight-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--sipps-gold-dark);
    background: #ffffff;
    border: 1px solid var(--sipps-gold-line);
}

/* Ukuran SVG pada ikon insight. */
.insight-icon svg {
    width: 26px;
    height: 26px;
}

/* Judul insight utama. */
.insight-box strong {
    display: block;
    color: #17231b;
    font-size: 14px;
}

/* Penjelasan singkat insight. */
.insight-box p {
    margin: 4px 0 0;
    color: #607166;
    font-size: 12px;
}

/* Alur proses peminatan yang ditampilkan berurutan. */
.process-flow {
    display: grid;
    grid-template-columns: 1fr 34px 1fr 34px 1fr;
    gap: 10px;
    align-items: start;
}

/* Satu langkah proses dalam alur peminatan. */
.process-step {
    text-align: center;
}

/* Ikon besar untuk setiap tahapan proses. */
.process-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 77, 46, .16);
}

/* Ukuran SVG pada ikon proses. */
.process-icon svg {
    width: 32px;
    height: 32px;
}

/* Warna ikon proses tahap pertama. */
.process-blue {
    background: linear-gradient(135deg, #0f5aa6, #07376d);
}

/* Warna ikon proses tahap kedua. */
.process-green {
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
}

/* Warna ikon proses tahap ketiga. */
.process-gold {
    background: linear-gradient(135deg, var(--sipps-gold), var(--sipps-gold-dark));
}

/* Judul singkat setiap langkah proses. */
.process-step strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

/* Deskripsi kecil di bawah langkah proses. */
.process-step small {
    display: block;
    color: #607166;
    font-size: 11px;
    line-height: 1.55;
}

/* Area panah penghubung antar langkah proses. */
.process-arrow {
    height: 64px;
    position: relative;
}

/* Garis putus-putus panah proses. */
.process-arrow::before {
    content: "";
    position: absolute;
    top: 31px;
    left: 0;
    right: 0;
    border-top: 2px dashed #b18423;
}

/* Ujung panah proses. */
.process-arrow::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #b18423;
    border-right: 2px solid #b18423;
    transform: rotate(45deg);
}

/* ================================================== */
/* Penjelasan peminatan untuk orangtua/wali */
/* Halaman ini dibuat sebagai panduan ringkas yang mudah dipindai. */
/* ================================================== */
.parent-explainer {
    display: grid;
    gap: 18px;
}

.parent-explainer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: stretch;
    padding: 26px;
    border: 1px solid rgba(216, 170, 34, .22);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(216, 170, 34, .16), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(242, 251, 239, .96));
    box-shadow: 0 18px 42px rgba(15, 77, 46, .10);
}

.parent-explainer-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 12px;
    padding: 0 12px;
    border: 1px solid var(--sipps-gold-line);
    border-radius: 999px;
    color: var(--sipps-gold-dark);
    background: #fffdf6;
    font-size: 12px;
    font-weight: 800;
}

.parent-explainer-copy h2 {
    max-width: 720px;
    margin: 0;
    color: var(--sipps-navy-dark);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.18;
}

.parent-explainer-copy p {
    max-width: 760px;
    margin: 12px 0 0;
    color: #526d5e;
    font-size: 15px;
    line-height: 1.75;
}

.parent-student-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--sipps-green-line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 77, 46, .08);
}

.parent-student-summary span,
.parent-student-summary small {
    color: #607166;
    font-size: 12px;
    font-weight: 700;
}

.parent-student-summary strong {
    margin: 8px 0 6px;
    color: var(--sipps-navy);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.parent-weight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.parent-weight-card {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(216, 170, 34, .20);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 77, 46, .07);
}

.parent-weight-value {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark));
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 12px 22px rgba(15, 77, 46, .16);
}

.parent-weight-card h3,
.parent-panel h3,
.parent-major-card h4 {
    margin: 0;
    color: var(--sipps-navy-dark);
    font-weight: 800;
}

.parent-weight-card h3 {
    font-size: 15px;
}

.parent-weight-card p {
    margin: 6px 0 0;
    color: #607166;
    font-size: 12px;
    line-height: 1.6;
}

.parent-explainer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr);
    gap: 18px;
}

.parent-panel {
    padding: 20px;
    border: 1px solid rgba(216, 170, 34, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 34px rgba(15, 77, 46, .08);
}

.parent-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.parent-panel-heading > span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--sipps-gold-dark);
    background: var(--sipps-gold-soft);
    border: 1px solid var(--sipps-gold-line);
}

.parent-panel-heading svg {
    width: 24px;
    height: 24px;
}

.parent-panel-heading h3 {
    font-size: 18px;
}

.parent-panel-heading p {
    margin: 5px 0 0;
    color: #607166;
    font-size: 13px;
    line-height: 1.6;
}

.parent-panel-heading-spread {
    justify-content: space-between;
}

.parent-panel-heading-spread > span {
    width: auto;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--sipps-green-dark);
    background: var(--sipps-green-soft);
    font-size: 12px;
    font-weight: 800;
}

.parent-process-list,
.parent-status-list {
    display: grid;
    gap: 10px;
}

.parent-process-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 12px;
    border: 1px solid #edf1e8;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #fffdf7);
}

.parent-process-item > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sipps-gold), var(--sipps-gold-dark));
    font-size: 13px;
    font-weight: 800;
}

.parent-process-item strong,
.parent-status-list strong {
    display: block;
    color: var(--sipps-navy);
    font-size: 13px;
    font-weight: 800;
}

.parent-process-item p {
    margin: 4px 0 0;
    color: #607166;
    font-size: 12px;
    line-height: 1.6;
}

.parent-decision-panel h3 {
    margin-bottom: 14px;
    font-size: 18px;
}

.parent-status-list div {
    padding: 13px 14px;
    border-left: 4px solid var(--sipps-green);
    border-radius: 10px;
    background: #f8fcf6;
}

.parent-status-list span {
    display: block;
    margin-top: 4px;
    color: #607166;
    font-size: 12px;
    line-height: 1.55;
}

.parent-major-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.parent-major-card {
    min-height: 170px;
    padding: 16px;
    border: 1px solid rgba(31, 122, 67, .15);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #fffdf7);
    box-shadow: 0 10px 24px rgba(15, 77, 46, .06);
}

.parent-major-index {
    width: 38px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 999px;
    color: var(--sipps-gold-dark);
    background: var(--sipps-gold-soft);
    font-size: 12px;
    font-weight: 800;
}

.parent-major-card h4 {
    font-size: 16px;
}

.parent-major-card p {
    margin: 8px 0 0;
    color: #607166;
    font-size: 12px;
    line-height: 1.65;
}

/* Daftar ringkasan status singkat pada dashboard. */
.summary-list {
    display: grid;
    gap: 2px;
}

/* Baris item ringkasan status. */
.summary-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1e8;
}

/* Menghilangkan garis bawah pada item terakhir ringkasan. */
.summary-list div:last-child {
    border-bottom: 0;
}

/* Label kiri pada ringkasan status. */
.summary-list span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #526d5e;
    font-size: 13px;
    font-weight: 700;
}

/* Ikon pada daftar ringkasan. */
.summary-list svg {
    width: 22px;
    height: 22px;
    color: #0f5aa6;
}

/* Angka utama pada ringkasan status. */
.summary-list strong {
    color: #17231b;
    font-size: 13px;
}

/* Tabel ringkas pada dashboard. */
.dashboard-table {
    margin-bottom: 0;
}

/* Header tabel dashboard. */
.dashboard-table th {
    color: #46584d;
    font-size: 12px;
    font-weight: 800;
}

/* Isi tabel dashboard. */
.dashboard-table td {
    color: #26352b;
    font-size: 13px;
}

/* Badge rekomendasi pada tabel dashboard. */
.recommendation-pill {
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f5aa6, var(--sipps-green));
    font-size: 12px;
    font-weight: 800;
}

/* Elemen yang hanya ingin tampil saat mode cetak. */
.print-only {
    display: none;
}

/* Panel rincian teknik skoring berbobot di halaman hasil peminatan. */
.weighted-score-panel {
    border: 1px solid rgba(216, 170, 34, .24);
    border-radius: 12px;
    padding: 16px;
    background:
        radial-gradient(circle at top right, rgba(216, 170, 34, .12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 250, 240, .94));
}

.weighted-score-panel h3 {
    margin: 0 0 12px;
    color: var(--sipps-navy);
    font-size: 16px;
    font-weight: 800;
}

.weighted-score-major {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(216, 170, 34, .18);
    padding-bottom: 10px;
}

.weighted-score-major span,
.weighted-score-grid span,
.weighted-score-total span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

.weighted-score-major strong,
.weighted-score-grid strong,
.weighted-score-total strong {
    color: var(--sipps-ink);
    font-weight: 800;
}

.weighted-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.weighted-score-grid > div,
.weighted-score-total {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(31, 122, 67, .12);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, .76);
}

.weighted-score-grid em,
.weighted-score-total em {
    color: var(--sipps-gold-dark);
    font-style: normal;
    font-weight: 800;
}

.weighted-score-total {
    border-color: rgba(216, 170, 34, .26);
    background: rgba(255, 247, 219, .62);
}

/* Tabel skor peminatan siswa dan orangtua dibuat lebih tegas dengan kepala tabel hijau. */
.weighted-score-table {
    overflow: hidden;
    border: 1px solid rgba(31, 122, 67, .18);
    border-radius: 8px;
    --bs-table-striped-bg: #f2fbf5;
    --bs-table-hover-bg: #e9f7ee;
}

.weighted-score-table thead th {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sipps-green), var(--sipps-green-dark)) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    font-weight: 800;
    vertical-align: middle;
}

.weighted-score-table tbody td {
    border-color: rgba(31, 122, 67, .14);
    vertical-align: middle;
}

.weighted-score-table tbody td:last-child {
    color: var(--sipps-green-dark);
}

/* Tabel skor pada detail konseling dibuat lebih tegas dengan header biru. */
.konseling-score-table {
    overflow: hidden;
    border: 1px solid rgba(21, 95, 209, .18);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(21, 95, 209, .08);
}

.konseling-score-table thead th {
    padding: 12px 10px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #155fd1, #0d4fb8) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    font-size: 13px;
    font-weight: 800;
    vertical-align: middle;
}

.konseling-score-table tbody td {
    padding: 10px;
    border-color: #dbe7f8;
    color: #10233f;
    vertical-align: middle;
}

.konseling-score-table tbody tr:nth-child(odd) td {
    background: #ffffff !important;
}

.konseling-score-table tbody tr:nth-child(even) td {
    background: #f4f8ff !important;
}

.konseling-score-table tbody td:last-child {
    color: #0b2f69;
}

/* Badge status detail konseling disejajarkan dengan tombol kembali. */
.konseling-detail-actions .badge,
.konseling-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.konseling-detail-actions .badge {
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

/* ================================================== */
/* Responsive */
/* Aturan ini merapikan tampilan saat layar lebih kecil. */
/* ================================================== */
@media (max-width: 1200px) {
    /* Topbar tablet menjaga tombol menu dan identitas akun tetap satu garis. */
    .topbar {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 22px 24px 16px;
    }

    /* Sisi kiri topbar mengikuti ukuran tombol menu. */
    .topbar-left {
        width: auto;
    }

    /* Search boleh memakai seluruh lebar saat topbar turun menjadi dua baris. */
    .topbar-search {
        max-width: none;
    }

    /* Grup aksi topbar berada sejajar dengan tombol menu. */
    .topbar-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* Chip tanggal dipindah ke baris baru agar tidak menekan identitas user. */
    .topbar-with-date .date-chip {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .login-shell {
        align-items: flex-start;
        padding: 18px;
    }

    .login-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .login-hero {
        min-height: 330px;
    }

    .login-hero-content,
    .login-form-inner {
        padding: 26px;
    }

    .login-hero h1 {
        font-size: 42px;
    }

    .dashboard-welcome {
        align-items: stretch;
        flex-direction: column;
    }

    /* Topbar mobile dipadatkan agar tetap nyaman di layar kecil. */
    .topbar {
        padding: 18px 18px 14px;
        gap: 12px;
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* Grup kiri topbar di mobile tetap sejajar agar tombol menu mudah dijangkau. */
    .topbar-left {
        width: auto;
        grid-template-columns: 48px;
        gap: 0;
    }

    /* Search di mobile tetap fleksibel dan tidak menekan elemen lain. */
    .topbar-search {
        width: 100%;
        max-width: none;
    }

    /* Search input diperkecil sedikit agar komposisinya lebih ringkas. */
    .topbar-search input {
        min-height: 48px;
        padding-left: 48px;
    }

    /* Ikon search ikut dirapikan saat tinggi input mengecil. */
    .topbar-search-icon {
        left: 16px;
        width: 20px;
        height: 20px;
    }

    /* Aksi topbar di mobile hanya menampilkan identitas akun. */
    .topbar-actions {
        width: auto;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

    /* Tombol menu dipadatkan sedikit di layar kecil agar proporsional. */
    .sidebar-toggle {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    /* Identitas user mengisi ruang agar tidak turun terlalu jauh. */
    .user-chip {
        max-width: none;
        padding: 6px 12px 6px 6px;
        gap: 8px;
        min-width: 0;
    }

    /* Chip tanggal, jika ada, ditempatkan satu baris penuh di bawah aksi utama. */
    .topbar-with-date .date-chip {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    /* Header daftar akun di mobile: diubah menjadi susunan vertikal. */
    .directory-heading {
        flex-direction: column;
        align-items: stretch;
    }

    /* Area aksi header di mobile: search dan tombol jadi satu kolom penuh. */
    .directory-actions {
        width: 100%;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    /* Kotak pencarian di mobile: melebar penuh mengikuti lebar layar. */
    .directory-search {
        width: 100%;
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Tombol tambah akun di mobile: dibentangkan agar mudah disentuh. */
    .directory-add-btn {
        width: 100%;
    }

    /* Toolbar panel role di mobile: judul dan kontrol dipisah menjadi kolom. */
    .account-role-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    /* Kontrol filter/export di mobile: mengisi lebar panel secara seimbang. */
    .account-role-controls {
        width: 100%;
        justify-content: space-between;
    }

    /* Filter role di mobile: dibiarkan lentur agar tidak memecah layout. */
    .account-role-filter {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Tombol export di mobile: tetap proporsional tanpa memanjang berlebihan. */
    .account-export-btn {
        flex: 0 0 auto;
    }

    /* Kartu daftar akun di mobile: padding diperkecil agar ruang lebih efisien. */
    .account-directory-card .card-body {
        padding: 20px;
    }

    /* Input password form akun pada mobile dibuat turun rapi jika ruang sempit. */
    .account-password-input {
        flex-wrap: wrap;
    }

    /* Tombol tampilkan password di mobile memanjang agar tetap mudah disentuh. */
    .account-password-toggle {
        width: 100%;
        min-height: 42px;
    }

    /* Kolom aksi di mobile diberi ruang lebih agar dua tombol tetap rapi. */
    .account-directory-table thead th:last-child,
    .account-action-cell {
        width: 148px;
    }

    .recommendation-layout {
        grid-template-columns: 1fr;
    }

    .weighted-score-grid {
        grid-template-columns: 1fr;
    }

    .weighted-score-major {
        align-items: flex-start;
        flex-direction: column;
    }

    .process-flow {
        grid-template-columns: 1fr;
    }

    .process-arrow {
        display: none;
    }

    .parent-explainer-hero,
    .parent-explainer-layout {
        grid-template-columns: 1fr;
    }

    .parent-weight-grid,
    .parent-major-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .role-select-grid {
        grid-template-columns: 1fr;
    }

    .app-shell {
        display: block;
    }

    /* Sidebar mobile berubah menjadi panel geser dari kiri. */
    .sidebar {
        width: min(300px, 86vw);
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        border-right: 1px solid var(--sipps-green-line);
        border-bottom: 0;
        transform: translateX(-104%);
        box-shadow: 0 22px 44px rgba(2, 27, 51, .22);
    }

    /* Sidebar mobile dibuka saat class sidebar-open aktif. */
    .app-shell.sidebar-enhanced.sidebar-open .sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Backdrop mobile aktif saat sidebar dibuka. */
    .app-shell.sidebar-enhanced.sidebar-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .content-wrap {
        padding: 18px;
    }
}

/* ================================================== */
/* Mobile kecil */
/* Aturan ini merapikan topbar dashboard pada layar ponsel yang sempit. */
/* ================================================== */
@media (max-width: 560px) {
    /* Topbar di mobile kecil dibuat lebih ringkas agar tidak memakan ruang. */
    .topbar {
        padding: 16px 14px 12px;
        gap: 10px;
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* Jarak menu dan search dipersempit agar komposisinya lebih padat. */
    .topbar-left {
        gap: 8px;
    }

    /* Kartu identitas dipadatkan supaya tetap nyaman di layar sempit. */
    .user-chip {
        gap: 8px;
        max-width: 100%;
        padding: 6px 10px 6px 6px;
    }

    /* Avatar user sedikit diperkecil agar ruang teks lebih lega. */
    .user-avatar {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    /* Nama akun tetap jelas tetapi lebih hemat ruang di mobile kecil. */
    .user-chip-text strong {
        font-size: 14px;
    }

    /* Label role dibuat sedikit lebih kecil agar tidak mudah terpotong. */
    .user-chip-text small {
        font-size: 11px;
    }

    /* Chip tanggal di mobile kecil diberi padding lebih hemat ruang. */
    .date-chip {
        padding: 0 14px;
        font-size: 12px;
    }

    .parent-explainer-hero,
    .parent-panel {
        padding: 16px;
    }

    .parent-explainer-copy h2 {
        font-size: 24px;
    }

    .parent-weight-grid,
    .parent-major-grid {
        grid-template-columns: 1fr;
    }

    .parent-weight-card {
        grid-template-columns: 58px 1fr;
    }

    .parent-weight-value {
        width: 52px;
        height: 52px;
        font-size: 15px;
    }

    .parent-panel-heading {
        align-items: flex-start;
    }

    .parent-panel-heading-spread {
        flex-direction: column;
    }
}

/* ================================================== */
/* Tabel dashboard Guru BK */
/* Bagian ini merapikan tabel verifikasi rapor dan kelola data peminatan. */
/* ================================================== */

/* Kartu tabel dashboard dibuat lebih premium dengan ruang yang lega. */
.guru-table-shell {
    overflow: hidden;
    border: 1px solid rgba(216, 170, 34, .18) !important;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(216, 170, 34, .10), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 252, 244, .96));
    box-shadow: 0 16px 34px rgba(148, 106, 16, .10) !important;
}

/* Area dalam kartu tabel diberi jarak nyaman agar komponen tidak sesak. */
.guru-table-shell .card-body {
    padding: 18px 18px 16px;
}

/* Toolbar tabel menampung filter kelas dan tombol aksi halaman. */
.guru-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Form filter menjaga dropdown tetap rapi pada desktop dan mobile. */
.guru-table-filter-form {
    margin: 0;
}

/* Dropdown filter dibuat seperti komponen tabel referensi. */
.guru-table-filter {
    position: relative;
    width: min(100%, 132px);
}

/* Select filter memakai font utama website dengan tinggi yang konsisten. */
.guru-table-filter select {
    appearance: none;
    width: 100%;
    min-height: 40px;
    padding: 0 38px 0 14px;
    border: 1px solid rgba(216, 170, 34, .26);
    border-radius: 12px;
    color: #58677d;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(148, 106, 16, .06);
}

/* Panah dropdown dibuat halus agar tetap serasi dengan tema SIPPS. */
.guru-table-filter::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #667587;
    border-bottom: 2px solid #667587;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

/* Kelompok tombol toolbar di halaman peminatan disusun rapat dan fleksibel. */
.guru-table-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Tombol toolbar disamakan tinggi dan ketegasannya. */
.guru-table-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 116px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

/* Tombol toolbar terang untuk aksi cetak. */
.guru-table-toolbar-btn-light {
    border: 1px solid #0f7138;
    color: #ffffff;
    background: #0f7138;
    box-shadow: 0 8px 16px rgba(15, 113, 56, .16);
}

.guru-table-toolbar-btn-light:hover,
.guru-table-toolbar-btn-light:focus {
    border-color: #0b5d2d;
    color: #ffffff;
    background: #0b5d2d;
}

/* Tombol toolbar utama memakai biru gelap agar kontras dengan header emas. */
.guru-table-toolbar-btn-primary {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #0b3970, #06264a);
    box-shadow: 0 12px 24px rgba(6, 38, 74, .16);
}

/* Bungkus tabel menjaga border luar tetap lembut dan tidak melebar liar. */
.guru-table-wrap {
    border: 1px solid rgba(216, 170, 34, .16);
    border-radius: 12px;
    background: #ffffff;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Tabel dashboard Guru BK di desktop dibuat mengikuti lebar container agar lebih utuh terlihat. */
.guru-table {
    width: 100%;
    margin-bottom: 0;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
}

/* Tabel verifikasi rapor pada desktop tidak lagi dipaksa terlalu lebar. */
.guru-table-verifikasi {
    min-width: 0;
}

/* Tabel peminatan pada desktop juga mengikuti ruang konten yang tersedia. */
.guru-table-peminatan {
    min-width: 0;
}

/* Header tabel dibuat emas pekat seperti referensi desain. */
.guru-table thead th {
    padding: 12px 10px;
    color: #ffffff;
    background: linear-gradient(180deg, #d39200, #b97a03);
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, .22);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
}

/* Sudut header dibulatkan agar tabel terasa lebih halus. */
.guru-table thead th:first-child {
    border-top-left-radius: 12px;
}

/* Sudut kanan header juga dibulatkan. */
.guru-table thead th:last-child {
    border-right: 0;
    border-top-right-radius: 12px;
}

/* Sel tabel diberi ruang lapang dan garis pemisah lembut. */
.guru-table tbody td {
    padding: 12px 10px;
    color: #22374b;
    border-bottom: 1px solid #efe6d2;
    border-right: 1px solid #f1ead9;
    background: #ffffff;
    font-size: 13px;
    vertical-align: middle;
}

/* Baris hover diberi sapuan warna lembut agar tetap elegan. */
.guru-table tbody tr:hover td {
    background: linear-gradient(180deg, #fffefb, #fff9ec);
}

/* Garis kanan terakhir dihapus agar pinggir tabel bersih. */
.guru-table tbody td:last-child {
    border-right: 0;
}

/* Garis bawah baris terakhir dihilangkan agar tabel tidak terasa berat. */
.guru-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Kolom tengah menggunakan alignment rapi untuk status dan hasil singkat. */
.guru-table-center {
    text-align: center;
}

/* Identitas siswa memakai hierarki teks yang lebih jelas. */
.guru-table-identity strong {
    display: block;
    color: var(--sipps-navy);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

/* Subteks identitas seperti NISN diberi warna lebih tenang. */
.guru-table-identity span {
    display: block;
    margin-top: 4px;
    color: #758399;
    font-size: 12px;
    line-height: 1.35;
}

/* Label kelas pada tabel peminatan dibuat sedikit lebih tegas. */
.guru-table-class-note {
    color: #5f78a2 !important;
    font-weight: 600;
}

/* Kolom kelas dibuat lebih tegas agar mudah dipindai cepat. */
.guru-table-class-cell {
    color: #2e4161;
    font-size: 14px;
    font-weight: 600;
}

/* Dokumen rapor memakai ikon file dan dua level teks seperti referensi. */
.guru-table-document {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* Ikon file diberi latar emas muda agar mudah dikenali. */
.guru-table-document-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 146, 0, .24);
    border-radius: 10px;
    color: #d18a00;
    background: #fff6dd;
}

/* Ikon dokumen versi polos dipakai saat file cukup ditandai dengan ikon tanpa card. */
.guru-table-document-icon-plain {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Ukuran ikon svg file dibuat konsisten di dalam sel dokumen. */
.guru-table-document-icon svg {
    width: 18px;
    height: 18px;
}

/* Nama file dokumen dibuat lebih tegas agar cepat terlihat. */
.guru-table-document strong {
    display: block;
    color: #23364a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}

/* Deskripsi kecil dokumen memakai teks yang lembut namun tetap terbaca. */
.guru-table-document span {
    display: block;
    margin-top: 4px;
    color: #7b8798;
    font-size: 10px;
    line-height: 1.4;
}

/* Catatan tabel dibatasi agar tetap rapi dan tidak melebar liar. */
.guru-table-note {
    color: #43556b;
    font-size: 11px;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Caption tambahan dipakai di bawah badge status proses. */
.guru-table-caption {
    margin-top: 6px;
    color: #6f7d8e;
    font-size: 11px;
    line-height: 1.35;
}

/* Teks netral pada status sederhana seperti "Belum". */
.guru-table-plain-text {
    color: #2e4161;
    font-size: 13px;
    font-weight: 600;
}

/* Sel aksi diberi padding sedikit lebih kecil agar kolom tombol tidak tampak terlalu lebar. */
.guru-table-action-cell {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

/* Kolom aksi dibuat vertikal seperti konsep tabel referensi. */
.guru-table-action-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
    width: min(100%, 92px);
    margin-inline: auto;
}

/* Form inline aksi tidak diberi margin agar stack tombol tetap rapat. */
.guru-table-inline-form {
    width: 100%;
    margin: 0;
}

/* Tombol aksi tabel dibuat lebih rapi, padat, dan mudah disentuh. */
.guru-table-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 78px;
    min-height: 31px;
    border-radius: 9px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

/* Tombol detail tampil outline biru lembut. */
.guru-table-btn-detail {
    border-color: #155fd1;
    color: #ffffff;
    background: #155fd1;
    box-shadow: 0 8px 16px rgba(21, 95, 209, .16);
}

/* Tombol detail saat hover sedikit lebih tegas. */
.guru-table-btn-detail:hover,
.guru-table-btn-detail:focus {
    border-color: #0f4fb4;
    color: #ffffff;
    background: #0f4fb4;
}

/* Tombol verifikasi memakai hijau penuh agar jelas sebagai aksi utama. */
.guru-table-btn-success {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #159649, #0f7138);
    box-shadow: 0 10px 18px rgba(21, 150, 73, .16);
}

/* Tombol verifikasi saat hover diberi kontras sedikit lebih dalam. */
.guru-table-btn-success:hover,
.guru-table-btn-success:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #12a14b, #0c622f);
}

/* Tombol tolak penuh merah untuk tabel verifikasi rapor. */
.guru-table-btn-danger {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #ef3e3e, #c81f1f);
    box-shadow: 0 10px 18px rgba(239, 62, 62, .16);
}

/* Tombol tolak saat hover dibuat sedikit lebih padat warnanya. */
.guru-table-btn-danger:hover,
.guru-table-btn-danger:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #f14545, #b81919);
}

/* Tombol hapus di tabel peminatan dibuat outline merah seperti referensi. */
.guru-table-btn-danger-outline {
    border-color: #c81f1f;
    color: #ffffff;
    background: #c81f1f;
    box-shadow: 0 8px 16px rgba(200, 31, 31, .16);
}

/* Hover tombol hapus tetap lembut namun tegas. */
.guru-table-btn-danger-outline:hover,
.guru-table-btn-danger-outline:focus {
    border-color: #a91818;
    color: #ffffff;
    background: #a91818;
}

/* Kolom aksi diberi lebar cukup agar tiga tombol tetap nyaman. */
.rapor-action-column {
    min-width: 116px;
}

/* Stack aksi rapor dibuat seragam agar tiga tombol terlihat sejajar dan stabil. */
.rapor-action-column .guru-table-action-stack {
    width: min(100%, 108px);
    gap: 6px;
}

/* Form tombol verifikasi mengikuti lebar tombol lain dalam stack. */
.rapor-action-column .guru-table-inline-form {
    width: 100%;
}

/* Tombol aksi rapor dibuat sama ukuran, teks center, dan mudah dipindai. */
.rapor-action-column .guru-table-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

/* Badge di dalam dua tabel guru dibuat seperti pill referensi. */
.guru-table-shell .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: .42em .68em;
    border-radius: 8px;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

/* Badge hijau untuk status berhasil atau lengkap. */
.guru-table-shell .text-bg-success {
    color: #1d8f46 !important;
    background: #dff4e4 !important;
}

/* Badge merah untuk penolakan atau status negatif. */
.guru-table-shell .text-bg-danger {
    color: #e23030 !important;
    background: #ffe1e1 !important;
}

/* Badge kuning untuk status menunggu. */
.guru-table-shell .text-bg-warning {
    color: #9b6800 !important;
    background: #fff0c9 !important;
}

/* Badge abu gelap untuk status netral seperti belum lengkap. */
.guru-table-shell .text-bg-secondary {
    color: #ffffff !important;
    background: #6d7687 !important;
}

/* Badge info dipakai untuk status tambahan dengan nuansa biru lembut. */
.guru-table-shell .text-bg-info {
    color: #2e5f91 !important;
    background: #e2eefc !important;
}

/* Badge primary diselaraskan dengan palet biru dashboard. */
.guru-table-shell .text-bg-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0f5aa6, #0b3970) !important;
}

/* Nilai atau hasil yang berdiri sendiri dibuat sedikit lebih tegas. */
.guru-table-emphasis {
    color: #2a3f57;
    font-size: 13px;
    font-weight: 600;
}

/* Pesan kosong di tabel diberi ruang lega agar tetap nyaman dilihat. */
.guru-table-empty {
    padding: 20px !important;
    color: #6f7d8e !important;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

/* Lebar kolom tabel verifikasi diatur agar mirip referensi dan seimbang. */
.guru-table-verifikasi thead th:nth-child(1) {
    width: 19%;
}

.guru-table-verifikasi thead th:nth-child(2) {
    width: 6%;
}

.guru-table-verifikasi thead th:nth-child(3) {
    width: 11%;
}

.guru-table-verifikasi thead th:nth-child(4) {
    width: 18%;
}

.guru-table-verifikasi thead th:nth-child(5) {
    width: 14%;
}

.guru-table-verifikasi thead th:nth-child(6) {
    width: 20%;
}

.guru-table-verifikasi thead th:nth-child(7) {
    width: 12%;
}

/* Lebar kolom tabel peminatan dibuat rapat agar tetap proporsional. */
.guru-table-peminatan thead th:nth-child(1) {
    width: 20%;
}

.guru-table-peminatan thead th:nth-child(2) {
    width: 14%;
}

.guru-table-peminatan thead th:nth-child(3) {
    width: 13%;
}

.guru-table-peminatan thead th:nth-child(4) {
    width: 13%;
}

.guru-table-peminatan thead th:nth-child(5) {
    width: 12%;
}

.guru-table-peminatan thead th:nth-child(6) {
    width: 14%;
}

.guru-table-peminatan thead th:nth-child(7) {
    width: 14%;
}

/* Dokumen dan catatan dibuat lebih patuh terhadap lebar kolom agar tidak memaksa tabel melar. */
.guru-table-verifikasi td:nth-child(4),
.guru-table-verifikasi td:nth-child(6),
.guru-table-peminatan td:nth-child(3),
.guru-table-peminatan td:nth-child(4),
.guru-table-peminatan td:nth-child(6) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Kolom aksi disejajarkan ke tengah agar tombol tidak terlihat menyebar. */
.guru-table-verifikasi td:nth-child(7),
.guru-table-peminatan td:nth-child(7) {
    text-align: center;
}

/* ================================================== */
/* Halaman daftar soal psikometri Guru BK */
/* Bagian ini mengatur form, filter, tabel, dan aksi soal. */
/* ================================================== */

/* Judul halaman soal memakai ruang yang sama dengan heading dashboard. */
.question-page-heading {
    margin-bottom: 18px;
}

/* Tombol utama halaman soal memakai aksen gold. */
.question-primary-btn {
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #d39200, #a66b00);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 22px rgba(166, 107, 0, .18);
}

/* Tombol tambah soal di toolbar sejajar dengan tombol cari. */
.question-toolbar-add {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    white-space: nowrap;
    margin-left: auto;
}

/* Hover tombol utama tetap dalam palet gold. */
.question-primary-btn:hover,
.question-primary-btn:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #e2a008, #925f00);
}

/* Card form soal dibuat sederhana dan dekat dengan tabel. */
.question-form-card {
    margin-bottom: 16px;
    border: 1px solid rgba(216, 170, 34, .16) !important;
    border-radius: 14px;
    background: #ffffff;
}

/* Judul form dibuat ringkas agar tidak mendominasi halaman. */
.question-form-card h2 {
    margin-bottom: 16px;
    color: var(--sipps-navy);
    font-weight: 800;
}

/* Tombol form diberi jarak konsisten. */
.question-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Toolbar tabel soal menampung search dan filter peminatan. */
.question-toolbar {
    margin-bottom: 12px;
}

/* Filter soal dibuat fleksibel agar tidak keluar card. */
.question-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Input search soal mengikuti gaya search pada halaman akun. */
.question-search {
    min-width: min(100%, 280px);
    max-width: 420px;
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(216, 170, 34, .24);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(148, 106, 16, .06);
}

/* Ikon search soal dibuat kecil dan tenang. */
.question-search span {
    width: 18px;
    height: 18px;
    display: inline-flex;
    color: var(--sipps-gold-dark);
}

/* Input search mengisi ruang tanpa border bawaan. */
.question-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #25364a;
    font-size: 13px;
    font-weight: 600;
}

/* Dropdown filter peminatan diberi lebar stabil. */
.question-filter-select {
    width: min(100%, 190px);
    min-height: 42px;
    border-color: rgba(216, 170, 34, .24);
    border-radius: 12px;
    color: #3f5268;
    font-size: 13px;
    font-weight: 700;
}

/* Tombol cari dibuat outline agar tidak bersaing dengan tambah soal. */
.question-secondary-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(216, 170, 34, .38);
    border-radius: 12px;
    color: var(--sipps-gold-dark);
    background: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

/* Tabel soal tetap proporsional dan hanya scroll di layar kecil. */
.question-table {
    min-width: 760px;
}

/* Lebar kolom tabel soal dibuat sesuai isi. */
.question-table thead th:nth-child(1) {
    width: 12%;
}

.question-table thead th:nth-child(2) {
    width: 54%;
}

.question-table thead th:nth-child(3) {
    width: 17%;
}

.question-table thead th:nth-child(4) {
    width: 17%;
}

/* Teks pertanyaan panjang dibungkus agar tabel tidak rusak. */
.question-text-cell {
    color: #2d4055;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Stack aksi soal dibuat ringkas namun tetap mudah diklik. */
.question-action-stack {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Form aksi table tidak membawa margin bawaan. */
.question-action-stack form {
    margin: 0;
}

/* Tombol aksi soal disamakan ukurannya. */
.question-btn {
    min-width: 76px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

/* Tombol edit menggunakan outline gold. */
.question-btn-edit {
    border-color: #0f7138;
    color: #ffffff;
    background: #0f7138;
    box-shadow: 0 8px 16px rgba(15, 113, 56, .16);
}

.question-btn-edit:hover,
.question-btn-edit:focus {
    border-color: #0b5d2d;
    color: #ffffff;
    background: #0b5d2d;
}

/* Tombol hapus menggunakan outline merah lembut. */
.question-btn-delete {
    border-color: #c81f1f;
    color: #ffffff;
    background: #c81f1f;
    box-shadow: 0 8px 16px rgba(200, 31, 31, .16);
}

.question-btn-delete:hover,
.question-btn-delete:focus {
    border-color: #a91818;
    color: #ffffff;
    background: #a91818;
}

/* Responsif halaman soal untuk tablet dan mobile. */
@media (max-width: 900px) {
    .question-filter-form,
    .question-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .question-search,
    .question-filter-select,
    .question-secondary-btn,
    .question-primary-btn {
        width: 100%;
        max-width: none;
    }

    .question-toolbar-add {
        margin-left: 0;
    }

    .question-table {
        min-width: 700px;
    }
}

/* Laptop: bila ruang mulai menyempit, tabel baru memakai lebar minimum yang lebih realistis. */
@media (max-width: 1280px) {
    .guru-table-verifikasi {
        min-width: 880px;
    }

    .guru-table-peminatan {
        min-width: 940px;
    }
}

/* Tablet: toolbar tabel dibuat turun rapi dan tombol tetap mudah dijangkau. */
@media (max-width: 900px) {
    .guru-table-shell .card-body {
        padding: 16px;
    }

    .guru-table-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .guru-table-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .guru-table-filter {
        width: 100%;
        max-width: 152px;
    }

    .guru-table-verifikasi {
        min-width: 860px;
    }

    .guru-table-peminatan {
        min-width: 920px;
    }
}

/* Mobile: tombol dan filter dipadatkan tanpa merusak keterbacaan tabel. */
@media (max-width: 560px) {
    .guru-table-shell .card-body {
        padding: 14px;
    }

    .guru-table-toolbar {
        gap: 8px;
        margin-bottom: 10px;
    }

    .guru-table-toolbar-actions,
    .guru-table-action-stack {
        width: 100%;
    }

    .guru-table-toolbar-btn,
    .guru-table-btn {
        width: 100%;
    }

    .rapor-action-column {
        min-width: 118px;
    }

    .rapor-action-column .guru-table-action-stack {
        width: 100%;
    }

    .rapor-action-column .guru-table-btn {
        min-height: 36px;
        font-size: 12px;
    }

    .guru-table-filter {
        width: 100%;
        max-width: none;
    }

    .guru-table thead th {
        padding: 12px 10px;
    }

    .guru-table tbody td {
        padding: 12px 10px;
    }

    .guru-table-verifikasi {
        min-width: 820px;
    }

    .guru-table-peminatan {
        min-width: 880px;
    }
}

/* ================================================== */
/* Print */
/* Aturan ini dipakai saat halaman dicetak. */
/* ================================================== */
@media print {
    .sidebar,
    .sidebar-backdrop,
    .topbar,
    .btn,
    .alert {
        display: none !important;
    }

    body,
    .main-content,
    .content-wrap {
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .print-only {
        display: block;
    }
}