/*!
 * Sistem Al Hasan — lapisan desain bersama (paket perapihan V1–V2, 30 Agustus 2026;
 * kerangka tiga ukuran dan komponen bersama redesain website Tahap 1, 22 Oktober 2026).
 *
 * Satu berkas untuk SELURUH halaman internal (admin + portal). Dibangun di atas
 * Bootstrap 5.3 yang sudah dipakai V1: berkas ini hanya menyetel token dan
 * beberapa komponen, TIDAK mengganti Bootstrap dan TIDAK menambah dependency.
 *
 * Aturan yang dipegang berkas ini:
 *   - warna hanya boleh berasal dari token di :root (jangan menulis hex di halaman);
 *   - makna tidak pernah disampaikan oleh warna/ikon saja — selalu ada teks;
 *   - fokus keyboard selalu terlihat;
 *   - `prefers-reduced-motion` dihormati;
 *   - halaman cetak membuang seluruh kerangka navigasi (lihat blok @media print).
 */

:root {
    /* Identitas: hijau Al Hasan yang tenang di atas latar netral hangat. */
    --ah-green-900: #0b3f27;
    --ah-green-800: #0f5132;
    --ah-green-700: #146c43;
    --ah-green-600: #198754;
    --ah-green-100: #e3f1e9;
    --ah-green-050: #f1f8f4;

    --ah-ink: #1c2320;
    --ah-ink-soft: #4a544e;
    --ah-ink-muted: #59665e;
    --ah-surface: #ffffff;
    --ah-canvas: #f4f6f4;
    --ah-line: #dfe4e0;
    --ah-line-strong: #c6cfc9;

    --ah-info: #0b6a8f;
    --ah-info-bg: #e6f2f8;
    --ah-warn: #8a5a00;
    --ah-warn-bg: #fdf3e2;
    --ah-danger: #a52218;
    --ah-danger-bg: #fbeae9;
    --ah-ok: #16653c;
    --ah-ok-bg: #e6f4ec;

    --ah-radius: 12px;
    --ah-radius-sm: 8px;
    --ah-shadow: 0 1px 2px rgba(16, 32, 24, .06), 0 8px 24px rgba(16, 32, 24, .06);
    --ah-space: 1rem;
    --ah-sidebar-w: 240px;
    --ah-rail-w: 46px;
    --ah-panel-w: 420px;
    --ah-bottombar-h: 60px;
    --ah-topbar-h: 56px;
    --ah-touch: 44px;

    --bs-body-bg: var(--ah-canvas);
    --bs-body-color: var(--ah-ink);
    --bs-link-color: var(--ah-green-700);
    --bs-link-hover-color: var(--ah-green-900);
    --bs-border-color: var(--ah-line);
}

body.ah {
    background: var(--ah-canvas);
    color: var(--ah-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* --- Fokus & aksesibilitas ------------------------------------------------ */

.ah :focus-visible,
.ah-shell :focus-visible {
    outline: 3px solid var(--ah-green-600);
    outline-offset: 2px;
    border-radius: 4px;
}

.ah-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    background: var(--ah-green-800);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--ah-radius-sm) 0;
}

.ah-skip:focus {
    left: 0;
}

.ah-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ah *,
    .ah *::before,
    .ah *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Kerangka: topbar + sidebar + konten ---------------------------------- */

.ah-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ah-topbar {
    position: sticky;
    top: 0;
    z-index: 1035;
    background: var(--ah-green-800);
    color: #fff;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    min-height: 56px;
}

.ah-topbar a { color: #fff; }

.ah-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .01em;
}

.ah-brand__mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fff;
    color: var(--ah-green-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ah-brand__text small {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    opacity: .8;
    line-height: 1;
}

.ah-topbar__spacer { flex: 1 1 auto; min-width: 0; }

/* Nama pesantren boleh terpotong; tombol tidak boleh terdorong keluar layar. */
.ah-brand { min-width: 0; overflow: hidden; }
.ah-brand__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-topbar__btn { flex: 0 0 auto; }

@media (max-width: 575.98px) {
    .ah-topbar { gap: .4rem; padding: .5rem .5rem; }
    .ah-brand__text small { display: none; }
    .ah-topbar__btn { padding: .35rem .5rem; }
}

/* Judul halaman di topbar hanya untuk HP; di ukuran lain merek pesantren. */
.ah-topbar__title {
    display: none;
    min-width: 0;
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ah-brand { display: none; }
    .ah-topbar__title { display: block; flex: 1 1 auto; }
    .ah-topbar__spacer { display: none; }
    .ah-topbar .ah-profile { display: none; }
}

.ah-topbar__bell { position: relative; }
.ah-topbar__bell[aria-current="page"] { background: rgba(255, 255, 255, .16); }
.ah-topbar__count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ah-danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ah-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.ah-profile__name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-profile__caret { font-size: .7rem; opacity: .8; }

@media (max-width: 767.98px) {
    .ah-profile__name, .ah-profile__caret { display: none; }
}

.ah-topbar__btn {
    min-width: var(--ah-touch);
    min-height: var(--ah-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
    border-radius: var(--ah-radius-sm);
    padding: .35rem .7rem;
    text-decoration: none;
    font-size: .875rem;
}

.ah-topbar__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ah-body {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
}

.ah-sidebar {
    width: var(--ah-sidebar-w);
    flex: 0 0 var(--ah-sidebar-w);
    background: var(--ah-surface);
    border-right: 1px solid var(--ah-line);
    padding: 1rem .75rem 2rem;
    overflow-y: auto;
    max-height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
}

.ah-nav-group {
    margin: 1.1rem 0 .35rem;
    padding: 0 .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ah-ink-muted);
}

.ah-nav-group:first-child { margin-top: 0; }

.ah-nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .6rem;
    min-height: var(--ah-touch);
    border-radius: var(--ah-radius-sm);
    color: var(--ah-ink-soft);
    text-decoration: none;
    font-size: .9rem;
}

.ah-nav a:hover { background: var(--ah-green-050); color: var(--ah-green-900); }

.ah-nav a[aria-current="page"] {
    background: var(--ah-green-100);
    color: var(--ah-green-900);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ah-green-700);
}

.ah-nav a i { width: 1.15rem; text-align: center; flex: 0 0 auto; opacity: .85; }

.ah-nav__badge { margin-left: auto; }

.ah-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem clamp(.85rem, 2vw, 1.75rem) 3rem;
}

/* Desktop lebar: isi dibatasi 1320px agar baris tidak terlalu panjang. */
@media (min-width: 1400px) {
    .ah-main { max-width: calc(1320px + 3.5rem); }
}

/* Bilah bawah HP: 4–5 menu utama sesuai akun. */
.ah-bottombar { display: none; }

@media (max-width: 575.98px) {
    .ah-bottombar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: var(--ah-surface);
        border-top: 1px solid var(--ah-line);
        box-shadow: 0 -2px 10px rgba(16, 32, 24, .06);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .ah-bottombar ul { display: flex; }
    .ah-bottombar li { flex: 1 1 0; min-width: 0; }

    .ah-bottombar a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        min-height: var(--ah-bottombar-h);
        padding: .35rem .15rem;
        color: var(--ah-ink-muted);
        font-size: .7rem;
        font-weight: 600;
        text-decoration: none;
    }

    .ah-bottombar a span:not(.ah-bottombar__count):not(.ah-visually-hidden) {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ah-bottombar i { font-size: 1.1rem; }
    .ah-bottombar a[aria-current="page"] { color: var(--ah-green-800); }
    .ah-bottombar a[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 25%;
        right: 25%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--ah-green-700);
    }

    .ah-bottombar__count {
        position: absolute;
        top: 4px;
        left: calc(50% + 4px);
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--ah-danger);
        color: #fff;
        font-size: .66rem;
        line-height: 18px;
    }

    .ah-has-bottombar .ah-main { padding-bottom: calc(var(--ah-bottombar-h) + 3rem + env(safe-area-inset-bottom, 0px)); }
}

/* Grup sidebar dapat dilipat di desktop; di laci semua grup terbuka. */
.ah-nav-group__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    border-radius: 4px;
}

.ah-nav-group__btn i { font-size: .65rem; transition: transform .15s ease-out; }
.ah-nav-group__btn[aria-expanded="false"] i { transform: rotate(-90deg); }
.ah-nav-group__btn:hover { color: var(--ah-green-900); }
.ah-nav-group__text { display: none; }

@media (min-width: 992px) {
    .ah-nav-sec.is-collapsed .ah-nav { display: none; }
}

.ah-drawer-head,
.ah-drawer-foot { display: none; }

/* Rel ikon (HP besar / tablet tegak, 576–991px). */
.ah-rail { display: none; }

@media (min-width: 576px) and (max-width: 991.98px) {
    .ah-rail {
        display: block;
        flex: 0 0 var(--ah-rail-w);
        width: var(--ah-rail-w);
        position: sticky;
        top: var(--ah-topbar-h);
        height: calc(100dvh - var(--ah-topbar-h));
        overflow-y: auto;
        scrollbar-width: thin;
        background: var(--ah-surface);
        border-right: 1px solid var(--ah-line);
        padding: .4rem 0 1.5rem;
    }
}

.ah-rail a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ah-touch);
    height: var(--ah-touch);
    margin: 0 auto 2px;
    border-radius: var(--ah-radius-sm);
    color: var(--ah-ink-soft);
}

.ah-rail a:hover { background: var(--ah-green-050); color: var(--ah-green-900); }
.ah-rail a[aria-current="page"] { background: var(--ah-green-100); color: var(--ah-green-900); }
.ah-rail__sep { height: 1px; margin: .35rem .5rem; background: var(--ah-line); }
.ah-rail__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ah-danger);
}

.ah-tip {
    position: fixed;
    z-index: 1070;
    padding: .3rem .55rem;
    border-radius: 6px;
    background: var(--ah-ink);
    color: #fff;
    font-size: .8rem;
    white-space: nowrap;
    pointer-events: none;
}

/* Ponsel & tablet: sidebar menjadi laci yang dapat dibuka/ditutup. */
@media (max-width: 991.98px) {
    .ah-sidebar {
        position: fixed;
        inset: 56px auto 0 0;
        z-index: 1040;
        width: min(85vw, 320px);
        max-height: none;
        height: calc(100dvh - 56px);
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        box-shadow: var(--ah-shadow);
    }

    .ah-nav-group__btn { display: none; }
    .ah-nav-group__text { display: inline; }

    .ah-drawer-head {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: 0 .6rem .9rem;
        margin-bottom: .5rem;
        border-bottom: 1px solid var(--ah-line);
    }

    .ah-drawer-head .ah-avatar { background: var(--ah-green-100); color: var(--ah-green-900); }
    .ah-drawer-head b { display: block; line-height: 1.2; }
    .ah-drawer-head span:not(.ah-avatar) { display: block; color: var(--ah-ink-muted); font-size: .8rem; }

    .ah-drawer-foot {
        display: block;
        margin-top: 1rem;
        padding-top: .5rem;
        border-top: 1px solid var(--ah-line);
    }

    .ah-shell.is-nav-open .ah-sidebar { transform: translateX(0); }

    .ah-shell.is-nav-open .ah-scrim {
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(16, 32, 24, .38);
        z-index: 1039;
    }
}

@media (min-width: 992px) {
    .ah-topbar__toggle { display: none; }
    .ah-scrim { display: none; }
}

/* --- Kepala halaman, breadcrumb, tindakan utama --------------------------- */

.ah-page-head {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: .9rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--ah-line);
}

.ah-page-head h1 {
    font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem);
    font-weight: 700;
    margin: 0 0 .2rem;
}

.ah-page-head p { color: var(--ah-ink-muted); margin: 0; max-width: 68ch; font-size: .925rem; }

.ah-page-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.ah-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    padding: 0;
    margin: 0 0 .5rem;
    list-style: none;
    font-size: .82rem;
    color: var(--ah-ink-muted);
}

.ah-crumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .6; }

.ah-crumbs a { color: var(--ah-ink-muted); text-decoration: none; }
.ah-crumbs a:hover { color: var(--ah-green-800); text-decoration: underline; }

/* --- Kartu, panel, tabel -------------------------------------------------- */

.ah-card {
    background: var(--ah-surface);
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius);
    box-shadow: var(--ah-shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.ah-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--ah-line);
    background: var(--ah-green-050);
    font-weight: 600;
}

.ah-card__body { padding: 1.1rem; }
.ah-card__foot {
    padding: .7rem 1.1rem;
    border-top: 1px solid var(--ah-line);
    color: var(--ah-ink-muted);
    font-size: .85rem;
}

.ah-stats { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.25rem; }

.ah-stat {
    background: var(--ah-surface);
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius);
    padding: .9rem 1rem;
}

.ah-stat__label { color: var(--ah-ink-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.ah-stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.ah-stat__hint { color: var(--ah-ink-muted); font-size: .8rem; }

/* Tabel lebar menggulir di dalam wadahnya sendiri, bukan melebarkan halaman. */
.ah-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ah-table-wrap > table { margin-bottom: 0; }

.ah-table { width: 100%; border-collapse: collapse; }
.ah-table th, .ah-table td { padding: .65rem .8rem; border-bottom: 1px solid var(--ah-line); vertical-align: top; }
.ah-table thead th { background: var(--ah-green-050); color: var(--ah-ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ah-table tbody tr:hover { background: var(--ah-green-050); }
.ah-table td .ah-cell-sub { display: block; color: var(--ah-ink-muted); font-size: .8rem; }

.ah-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.ah-actions form { display: inline; margin: 0; }

/* --- Badge & status (selalu ada teks, tidak hanya warna) ------------------ */

.ah-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ah-badge--ok { background: var(--ah-ok-bg); color: var(--ah-ok); border-color: #b9dfc9; }
.ah-badge--warn { background: var(--ah-warn-bg); color: var(--ah-warn); border-color: #f0dcb4; }
.ah-badge--danger { background: var(--ah-danger-bg); color: var(--ah-danger); border-color: #f2c4c0; }
.ah-badge--info { background: var(--ah-info-bg); color: var(--ah-info); border-color: #bcdcea; }
.ah-badge--muted { background: #eef0ee; color: var(--ah-ink-soft); border-color: var(--ah-line-strong); }

/* --- Formulir ------------------------------------------------------------- */

.ah-fieldset {
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius);
    padding: 1rem 1.1rem 1.2rem;
    margin: 0 0 1.1rem;
}

.ah-fieldset > legend {
    float: none;
    width: auto;
    padding: 0 .45rem;
    margin: 0 0 .35rem -.45rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ah-green-900);
}

.ah-fieldset__hint { color: var(--ah-ink-muted); font-size: .85rem; margin: -.15rem 0 .9rem; }

.ah-field-error { color: var(--ah-danger); font-size: .82rem; margin-top: .25rem; display: block; }
.ah-input-invalid { border-color: var(--ah-danger) !important; }

.ah .form-label { font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.ah .form-control, .ah .form-select { min-height: var(--ah-touch); border-color: var(--ah-line-strong); border-radius: var(--ah-radius-sm); }
.ah .form-control:focus, .ah .form-select:focus { border-color: var(--ah-green-600); box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .18); }
.ah .btn { min-height: var(--ah-touch); border-radius: var(--ah-radius-sm); font-weight: 600; }
.ah .btn-sm { min-height: 36px; font-weight: 500; }
.ah .btn-primary { --bs-btn-bg: var(--ah-green-700); --bs-btn-border-color: var(--ah-green-700); --bs-btn-hover-bg: var(--ah-green-800); --bs-btn-hover-border-color: var(--ah-green-800); --bs-btn-active-bg: var(--ah-green-900); }
.ah .btn-outline-primary { --bs-btn-color: var(--ah-green-800); --bs-btn-border-color: var(--ah-green-700); --bs-btn-hover-bg: var(--ah-green-700); --bs-btn-hover-border-color: var(--ah-green-700); }

/* --- Pesan & keadaan ------------------------------------------------------ */

.ah-note {
    display: flex;
    gap: .7rem;
    padding: .8rem 1rem;
    border-radius: var(--ah-radius-sm);
    border: 1px solid var(--ah-line);
    background: var(--ah-surface);
    margin-bottom: 1rem;
}

.ah-note__title { font-weight: 700; display: block; margin-bottom: .1rem; }
.ah-note--ok { background: var(--ah-ok-bg); border-color: #b9dfc9; color: #12482c; }
.ah-note--warn { background: var(--ah-warn-bg); border-color: #f0dcb4; color: #6f4700; }
.ah-note--danger { background: var(--ah-danger-bg); border-color: #f2c4c0; color: #7d1a13; }
.ah-note--info { background: var(--ah-info-bg); border-color: #bcdcea; color: #084f6b; }

.ah-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ah-ink-muted);
}

.ah-empty__icon { font-size: 1.8rem; opacity: .45; margin-bottom: .5rem; }
.ah-empty__title { font-weight: 700; color: var(--ah-ink-soft); margin-bottom: .25rem; }

.ah-danger-zone {
    border: 1px solid #f2c4c0;
    background: var(--ah-danger-bg);
    border-radius: var(--ah-radius-sm);
    padding: .85rem 1rem;
}

/* --- Tab modul (Pengajian, Akun, Laporan) --------------------------------- */

.ah-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--ah-line);
    margin-bottom: 1.25rem;
    padding: 0;
    list-style: none;
}

.ah-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--ah-touch);
    padding: .5rem .95rem;
    border-radius: var(--ah-radius-sm) var(--ah-radius-sm) 0 0;
    text-decoration: none;
    color: var(--ah-ink-soft);
    font-weight: 600;
    font-size: .92rem;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
}

.ah-tabs a:hover { background: var(--ah-green-050); color: var(--ah-green-900); }

.ah-tabs a[aria-current="page"] {
    background: var(--ah-surface);
    border-color: var(--ah-line);
    color: var(--ah-green-900);
    box-shadow: inset 0 3px 0 var(--ah-green-700);
}

/* Di HP tab modul menjadi chip yang dapat digeser, bukan baris bertumpuk. */
@media (max-width: 575.98px) {
    .ah-tabs {
        flex-wrap: nowrap;
        gap: .4rem;
        overflow-x: auto;
        border-bottom: 0;
        padding-bottom: .25rem;
        scrollbar-width: none;
    }

    .ah-tabs::-webkit-scrollbar { display: none; }
    .ah-tabs li { flex: 0 0 auto; }

    .ah-tabs a {
        border: 1px solid var(--ah-line-strong);
        border-radius: 999px;
        margin: 0;
        padding: .4rem .9rem;
        background: var(--ah-surface);
        white-space: nowrap;
    }

    .ah-tabs a[aria-current="page"] {
        background: var(--ah-green-700);
        border-color: var(--ah-green-700);
        color: #fff;
        box-shadow: none;
    }
}

/* --- Menu ⋯ dan menu profil (<details>, tetap jalan tanpa JavaScript) ---- */

.ah-menu { position: relative; display: inline-block; }
.ah-menu > summary { list-style: none; cursor: pointer; }
.ah-menu > summary::-webkit-details-marker { display: none; }

.ah-menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ah-touch);
    min-height: var(--ah-touch);
    padding: 0 .6rem;
    border: 1px solid var(--ah-line-strong);
    border-radius: var(--ah-radius-sm);
    background: var(--ah-surface);
    color: var(--ah-ink-soft);
}

.ah-menu__btn:hover, .ah-menu[open] > .ah-menu__btn { background: var(--ah-green-050); color: var(--ah-green-900); }

.ah-menu__list {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 4px);
    right: 0;
    min-width: 210px;
    max-width: min(320px, calc(100vw - 16px));
    padding: .35rem;
    background: var(--ah-surface);
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius-sm);
    box-shadow: var(--ah-shadow);
    color: var(--ah-ink);
    text-align: left;
}

.ah-menu__list form { margin: 0; }

.ah-menu__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: var(--ah-touch);
    padding: .5rem .7rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ah-ink);
    font-size: .9rem;
    text-align: left;
    text-decoration: none;
}

.ah-topbar .ah-menu__list a.ah-menu__item { color: var(--ah-ink); }
.ah-menu__item i { width: 1.1rem; text-align: center; color: var(--ah-ink-muted); }
.ah-menu__item:hover { background: var(--ah-green-050); color: var(--ah-green-900); }
.ah-menu__item--danger, .ah-menu__item--danger i { color: var(--ah-danger); }
.ah-menu__item--danger:hover { background: var(--ah-danger-bg); color: var(--ah-danger); }
.ah-menu__sep { height: 1px; margin: .3rem 0; background: var(--ah-line); border: 0; }

.ah-menu__info {
    padding: .45rem .7rem .6rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--ah-line);
    font-size: .85rem;
}

.ah-menu__info b { display: block; }
.ah-menu__info span { color: var(--ah-ink-muted); }

/* --- Panel samping (tambah/ubah/detail) ---------------------------------- */
/* Tanpa JavaScript: bagian biasa di halaman. Dengan JavaScript: panel kanan. */

.ah-panel {
    background: var(--ah-surface);
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius);
    box-shadow: var(--ah-shadow);
    margin-bottom: 1.25rem;
}

.ah-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--ah-line);
    background: var(--ah-green-050);
}

.ah-panel__head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.ah-panel__body { padding: 1.1rem; }

.ah-panel__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 0 0;
}

.ah-js .ah-panel {
    position: fixed;
    top: var(--ah-topbar-h);
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: var(--ah-panel-w);
    margin: 0;
    border-radius: 0;
    border-width: 0 0 0 1px;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(16, 32, 24, .12);
}

.ah-js .ah-panel__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.ah-js .ah-panel__body > form { flex: 1 0 auto; display: flex; flex-direction: column; }

.ah-js .ah-panel__foot {
    position: sticky;
    bottom: -1.1rem;
    margin: auto -1.1rem -1.1rem;
    padding: .75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--ah-surface);
    border-top: 1px solid var(--ah-line);
}

.ah-panel-scrim { display: none; }

@media (min-width: 1200px) {
    .ah-js.ah-panel-open .ah-main { padding-right: calc(var(--ah-panel-w) + 1.5rem); }
}

@media (max-width: 1199.98px) {
    .ah-js .ah-panel-scrim {
        display: block;
        position: fixed;
        inset: var(--ah-topbar-h) 0 0 0;
        z-index: 1044;
        background: rgba(16, 32, 24, .38);
    }
}

@media (max-width: 991.98px) {
    .ah-js .ah-panel { width: 70vw; }
}

@media (max-width: 575.98px) {
    .ah-js .ah-panel { top: 0; width: 100vw; z-index: 1050; border: 0; }
    .ah-js .ah-panel-scrim { display: none; }
}

/* --- Dialog konfirmasi ---------------------------------------------------- */

.ah-dialog {
    width: min(460px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--ah-radius);
    box-shadow: 0 20px 48px rgba(16, 32, 24, .25);
    color: var(--ah-ink);
}

.ah-dialog::backdrop { background: rgba(16, 32, 24, .45); }
.ah-dialog__box { padding: 1.25rem 1.25rem 1rem; margin: 0; }
.ah-dialog__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; }
.ah-dialog__text { color: var(--ah-ink-soft); margin: 0 0 1rem; white-space: pre-line; }
.ah-dialog__reason { margin-bottom: 1rem; }
.ah-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
body.ah .btn-danger { --bs-btn-bg: var(--ah-danger); --bs-btn-border-color: var(--ah-danger); --bs-btn-hover-bg: #8a1c14; --bs-btn-hover-border-color: #8a1c14; }

/* --- Pemberitahuan (toast) ------------------------------------------------ */

.ah-toasts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}

.ah-toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .5rem .7rem .9rem;
    border-radius: var(--ah-radius-sm);
    border: 1px solid var(--ah-line);
    border-left-width: 4px;
    background: var(--ah-surface);
    box-shadow: var(--ah-shadow);
    pointer-events: auto;
    animation: ah-toast-in .18s ease-out;
}

.ah-toast > i { margin-top: .2rem; }
.ah-toast__text { flex: 1 1 auto; font-size: .9rem; }
.ah-toast__close { border: 0; background: none; color: var(--ah-ink-muted); width: 32px; height: 32px; border-radius: 6px; flex: 0 0 auto; }
.ah-toast__close:hover { background: var(--ah-green-050); }
.ah-toast--ok { border-left-color: var(--ah-ok); } .ah-toast--ok > i { color: var(--ah-ok); }
.ah-toast--info { border-left-color: var(--ah-info); } .ah-toast--info > i { color: var(--ah-info); }
.ah-toast--warn { border-left-color: var(--ah-warn); } .ah-toast--warn > i { color: var(--ah-warn); }
.ah-toast--danger { border-left-color: var(--ah-danger); } .ah-toast--danger > i { color: var(--ah-danger); }

@keyframes ah-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
    .ah-toasts { left: 1rem; right: 1rem; width: auto; }
    .ah-has-bottombar .ah-toasts { bottom: calc(var(--ah-bottombar-h) + .75rem + env(safe-area-inset-bottom, 0px)); }
}

/* --- Bilah pilihan massal & proses massal -------------------------------- */

.ah-selbar {
    position: sticky;
    bottom: .75rem;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 1rem 0;
    padding: .6rem .9rem;
    border-radius: var(--ah-radius);
    background: var(--ah-green-900);
    color: #fff;
    box-shadow: var(--ah-shadow);
}

.ah-selbar[hidden] { display: none; }
.ah-selbar__count { font-weight: 700; margin-right: auto; }
.ah-selbar .btn-link { color: #fff; }

@media (max-width: 575.98px) {
    .ah-has-bottombar .ah-selbar { bottom: calc(var(--ah-bottombar-h) + .5rem + env(safe-area-inset-bottom, 0px)); }
}

.ah-bulk {
    background: var(--ah-surface);
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.ah-bulk__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; }
.ah-bulk__bar { display: flex; align-items: center; gap: .75rem; }
.ah-bulk__progress { flex: 1 1 auto; height: 12px; accent-color: var(--ah-green-700); }
.ah-bulk__count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-bulk__current { color: var(--ah-ink-muted); font-size: .88rem; min-height: 1.3em; margin: .4rem 0 .6rem; overflow-wrap: anywhere; }
.ah-bulk__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ah-bulk__summary { font-weight: 700; margin: .75rem 0 .35rem; }
.ah-bulk__failed { margin: 0 0 .75rem; padding-left: 1.2rem; color: var(--ah-danger); overflow-wrap: anywhere; }
.ah-bulk__failed b { color: var(--ah-ink); }

/* --- Tabel menjadi kartu di HP (opsional: .ah-table--cards) -------------- */

@media (max-width: 575.98px) {
    .ah-table--cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ah-table--cards, .ah-table--cards tbody, .ah-table--cards tr, .ah-table--cards td { display: block; width: 100%; }

    .ah-table--cards tr {
        margin-bottom: .75rem;
        padding: .5rem .85rem;
        border: 1px solid var(--ah-line);
        border-radius: var(--ah-radius-sm);
        background: var(--ah-surface);
    }

    .ah-table--cards tbody tr:hover { background: var(--ah-surface); }

    .ah-table--cards td {
        display: flex;
        gap: .75rem;
        justify-content: space-between;
        padding: .35rem 0;
        border-bottom: 1px solid var(--ah-line);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .ah-table--cards td:last-child { border-bottom: 0; }

    .ah-table--cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        color: var(--ah-ink-muted);
        font-size: .8rem;
        font-weight: 600;
    }

    .ah-table--cards td[data-label=""]::before { display: none; }
}

/* --- Cetak: kerangka navigasi dibuang seluruhnya -------------------------- */

@media print {
    .ah-topbar,
    .ah-sidebar,
    .ah-rail,
    .ah-bottombar,
    .ah-toasts,
    .ah-panel-scrim,
    .ah-selbar,
    .ah-dialog,
    .ah-scrim,
    .ah-skip,
    .ah-tabs,
    .ah-page-head__actions,
    .ah-actions,
    .ah-no-print {
        display: none !important;
    }

    .ah-shell, .ah-body { display: block; }
    .ah-main { padding: 0; }
    body.ah { background: #fff; }
    .ah-card { box-shadow: none; border-color: #999; }
}

/* A-10: angka halaman panjang tidak mendorong lebar dokumen pada ponsel. */
body.ah .pagination { flex-wrap: wrap; row-gap: .5rem; }

/* A-14: adaptor Bootstrap mengikuti token yang sama, termasuk kontras AA. */
body.ah .text-muted { color: var(--ah-ink-muted) !important; }
body.ah .ah-topbar .text-white-50 { color: var(--ah-green-100) !important; }
body.ah .card { --bs-card-bg: var(--ah-surface); border-radius: var(--ah-radius); }
body.ah .card-header { background: var(--ah-green-050) !important; }
body.ah .table { --bs-table-bg: var(--ah-surface); --bs-table-color: var(--ah-ink); }
body.ah .table th { color: var(--ah-ink-soft); background: var(--ah-green-050); }
body.ah .btn-outline-secondary { --bs-btn-color: var(--ah-ink-soft); --bs-btn-border-color: var(--ah-ink-muted); --bs-btn-hover-bg: var(--ah-ink-soft); }
body.ah .btn-outline-warning { --bs-btn-color: var(--ah-warn); --bs-btn-border-color: var(--ah-warn); --bs-btn-hover-color: var(--ah-surface); --bs-btn-hover-bg: var(--ah-warn); }
body.ah .btn-outline-danger { --bs-btn-color: var(--ah-danger); --bs-btn-border-color: var(--ah-danger); --bs-btn-hover-bg: var(--ah-danger); }
body.ah .btn-success { --bs-btn-bg: var(--ah-green-700); --bs-btn-border-color: var(--ah-green-700); }
body.ah .btn-sm { min-height: var(--ah-touch); }
body.ah .modal-content { border-radius: var(--ah-radius); background: var(--ah-surface); }
body.ah .modal-header { background: var(--ah-green-050); }
body.ah .table .d-flex.gap-1 { flex-wrap: wrap; }
body.ah input::placeholder, body.ah textarea::placeholder { color: var(--ah-ink-muted); opacity: 1; }
body.ah :focus-visible { scroll-margin-top: 5rem; }
body.ah .ah-topbar :focus-visible { outline-color: var(--ah-surface); }
body.ah code { color: var(--ah-danger); }

/* --- Pesan kredensial akun siap salin (6 September 2026) ------------------ */
/* Panel tampil satu kali setelah akun baru berhasil dibuat. Ia sengaja tidak
   ikut tercetak: isinya rahasia dan tidak boleh berakhir di tumpukan kertas. */

body.ah .ah-kredensial { border-color: var(--ah-green-700); }
body.ah .ah-kredensial .ah-card__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }

body.ah .ah-kredensial__data { display: grid; gap: .5rem 1.25rem; margin: 0 0 1rem; }
body.ah .ah-kredensial__data > div { display: grid; gap: .1rem; }
body.ah .ah-kredensial__data dt { font-size: .82rem; color: var(--ah-ink-muted); font-weight: 600; }
body.ah .ah-kredensial__data dd { margin: 0; word-break: break-word; }
body.ah .ah-kredensial__data code { font-size: 1rem; }
body.ah .ah-kredensial__sandi { font-size: 1.15rem; letter-spacing: .02em; }

body.ah .ah-kredensial__label { font-weight: 700; margin-bottom: .35rem; }

body.ah .ah-kredensial__teks {
    background: var(--ah-green-050);
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius-sm);
    padding: .9rem 1rem;
    margin-bottom: .85rem;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ah-ink);
}

body.ah .ah-kredensial__status:empty { display: none; }
body.ah .ah-kredensial__status {
    margin: .6rem 0 .35rem;
    font-weight: 600;
    color: var(--ah-green-900);
}

/* Layar lebar boleh dua kolom; ponsel tetap satu kolom penuh. */
@media (min-width: 48em) {
    body.ah .ah-kredensial__data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Redesain website Tahap 2 — navigasi, peran & Beranda (22 Oktober 2026)
   ========================================================================== */

/* --- Pencarian menu (keputusan AQ) ---------------------------------------- */
/* Hanya untuk menu dan tab yang boleh dibuka akun; berjalan di peramban.
   Tanpa JavaScript kotak ini disembunyikan karena tidak ada fungsinya. */
.ah-nojs .ah-search, .ah-nojs .ah-topbar__find { display: none !important; }

.ah-search { position: relative; min-width: 0; }
.ah-search__icon { position: absolute; left: .7rem; top: 20px; transform: translateY(-50%); font-size: .8rem; opacity: .7; pointer-events: none; }
.ah-search__input {
    width: 100%;
    min-height: 40px;
    padding: .4rem .75rem .4rem 2rem;
    border-radius: var(--ah-radius-sm);
    border: 1px solid var(--ah-line-strong);
    background: var(--ah-surface);
    color: var(--ah-ink);
    font-size: .9rem;
}
.ah-search--top { flex: 0 1 300px; margin-left: 1rem; }
.ah-search--top .ah-search__input { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; }
.ah-search--top .ah-search__input::placeholder { color: rgba(255, 255, 255, .78); }
.ah-search--top .ah-search__icon { color: #fff; }
.ah-search__results {
    position: absolute;
    z-index: 1065;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 240px;
    max-height: min(60vh, 360px);
    overflow-y: auto;
    margin: 0;
    padding: .3rem;
    list-style: none;
    background: var(--ah-surface);
    color: var(--ah-ink);
    border: 1px solid var(--ah-line);
    border-radius: var(--ah-radius-sm);
    box-shadow: var(--ah-shadow);
}
.ah-search__results li { margin: 0; }
.ah-search__results a, .ah-search__results .ah-search__none {
    display: flex;
    flex-direction: column;
    min-height: var(--ah-touch);
    justify-content: center;
    padding: .35rem .65rem;
    border-radius: 6px;
    color: var(--ah-ink);
    text-decoration: none;
    font-size: .9rem;
}
.ah-search__results a small, .ah-search__none { color: var(--ah-ink-muted); font-size: .78rem; }
.ah-search__results a[aria-selected="true"], .ah-search__results a:hover { background: var(--ah-green-100); color: var(--ah-green-900); }
.ah-topbar .ah-search__results a { color: var(--ah-ink); }

.ah-topbar__find { display: none; }
@media (max-width: 991.98px) {
    .ah-search--top { display: none; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .ah-topbar__find { display: inline-flex; }
}

.ah-drawer-search { display: none; }
@media (max-width: 991.98px) {
    .ah-drawer-search { display: block; padding: 0 .4rem .75rem; }
    .ah-drawer-search .ah-search__results { position: static; box-shadow: none; margin-top: .35rem; max-height: none; }
}

/* --- Pemilih peran (A-2, keputusan AR) ------------------------------------ */
.ah-peran { display: none; }
@media (min-width: 992px) { .ah-peran { display: inline-block; } }
.ah-peran__pill { border-radius: 999px; font-weight: 600; white-space: nowrap; }
.ah-peran__head { margin: .2rem .7rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ah-ink-muted); }
.ah-peran__item { justify-content: space-between; }
.ah-peran__item > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ah-peran__item small { color: var(--ah-ink-muted); font-size: .78rem; }
.ah-peran__item[aria-current="true"] { background: var(--ah-green-050); }
.ah-peran__note { margin: .35rem .7rem .2rem; font-size: .75rem; color: var(--ah-ink-muted); max-width: 30ch; }

.ah-drawer-peran { display: none; }
@media (max-width: 991.98px) {
    .ah-drawer-peran { display: block; margin: 0 .4rem .75rem; border: 1px solid var(--ah-line); border-radius: var(--ah-radius-sm); }
    .ah-drawer-peran > summary { display: flex; align-items: center; gap: .35rem; min-height: var(--ah-touch); padding: .4rem .7rem; cursor: pointer; list-style: none; font-size: .9rem; }
    .ah-drawer-peran > summary::-webkit-details-marker { display: none; }
    .ah-drawer-peran > summary i { margin-left: auto; font-size: .7rem; }
    .ah-drawer-peran__list { padding: .25rem; border-top: 1px solid var(--ah-line); }
    .ah-drawer-peran__list form { margin: 0; }
}

/* --- Lonceng dengan pratinjau 5 terbaru (N-3) ----------------------------- */
.ah-bell > summary { position: relative; }
.ah-bell > summary[data-current="page"] { background: rgba(255, 255, 255, .16); }
.ah-bell__list { width: min(360px, calc(100vw - 16px)); max-width: none; }
.ah-bell__head { margin: .2rem .7rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ah-ink-muted); }
.ah-bell__empty { margin: .4rem .7rem .6rem; font-size: .88rem; color: var(--ah-ink-muted); }
.ah-bell__item span { display: flex; flex-direction: column; min-width: 0; }
.ah-bell__item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ah-bell__item small { color: var(--ah-ink-muted); font-size: .78rem; }
.ah-bell__item.is-unread b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-info); margin-right: .4rem; vertical-align: middle; }
@media (max-width: 575.98px) {
    .ah-bell .ah-menu__list { position: fixed; top: calc(var(--ah-topbar-h) + 4px); right: 8px; left: 8px; width: auto; }
}

/* --- Keluar lewat formulir POST di menu dan laci (A-4) -------------------- */
.ah-logout { margin: 0; }
.ah-drawer-foot__btn {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: var(--ah-touch);
    padding: .55rem .6rem;
    border: 0;
    border-radius: var(--ah-radius-sm);
    background: none;
    color: var(--ah-danger);
    font-size: .9rem;
    text-align: left;
}
.ah-drawer-foot__btn:hover { background: var(--ah-danger-bg); }
.ah-drawer-foot__btn i { width: 1.15rem; text-align: center; }

/* Bilah bawah: butir "Menu" membuka laci. */
.ah-bottombar a[data-ah-drawer] { cursor: pointer; }

/* --- Tab modul dari peta menu --------------------------------------------- */
.ah-modtabs { margin-bottom: .25rem; }
.ah-tabs--module { margin-bottom: 1rem; }
.ah-modtabs + .ah-page-head { margin-top: 0; }

/* Chip penyaring (notifikasi, pilih anak). */
.ah-chips { border-bottom: 0; gap: .4rem; }
.ah-chips a { border: 1px solid var(--ah-line-strong); border-radius: 999px; margin: 0; background: var(--ah-surface); padding: .35rem .9rem; }
.ah-chips a[aria-current="page"] { background: var(--ah-green-700); border-color: var(--ah-green-700); color: #fff; box-shadow: none; }

/* Kerangka polos saat kata sandi sementara wajib diganti (A-3). */
.ah-bare .ah-main { margin: 0 auto; max-width: 44rem; width: 100%; }
.ah-narrow { max-width: 40rem; }

/* Kolom sekunder (~) disembunyikan di tablet. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ah-col-secondary { display: none; }
}

/* --- Beranda (B-1 s.d. B-5) ----------------------------------------------- */
.ah-beranda__section { margin-bottom: 1.25rem; }
.ah-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; margin-bottom: .6rem; }
.ah-section-head h2 { text-transform: uppercase; letter-spacing: .05em; color: var(--ah-ink-soft); }

.ah-task-grid { display: grid; gap: .85rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ah-task-grid--one { grid-template-columns: 1fr; }
@media (max-width: 1199.98px) { .ah-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ah-task-grid--one { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .ah-task-grid { grid-template-columns: 1fr; } }

.ah-task {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem;
    background: var(--ah-surface);
    border: 1px solid var(--ah-line);
    border-left: 4px solid var(--ah-green-700);
    border-radius: var(--ah-radius);
    min-width: 0;
}
.ah-task--warn { background: var(--ah-warn-bg); border-color: #f0d9ad; border-left-color: var(--ah-warn); }
.ah-task__num { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--ah-ink); }
.ah-task__title { margin: 0; font-weight: 600; }
.ah-task__note { margin: 0; font-size: .8rem; color: var(--ah-warn); }
.ah-task__btn { align-self: flex-start; margin-top: .45rem; }

.ah-stat--link { display: block; text-decoration: none; color: inherit; }
.ah-stat--link:hover { border-color: var(--ah-green-600); background: var(--ah-green-050); color: inherit; }
.ah-stat--warn { background: var(--ah-warn-bg); border-color: #f0d9ad; }
.ah-stat--warn .ah-stat__value { color: var(--ah-warn); }
@media (max-width: 575.98px) {
    .ah-beranda__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ah-schedule-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ah-schedule { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); }
.ah-schedule__title { margin: 0; font-weight: 700; }
.ah-schedule__meta { margin: 0 0 .4rem; color: var(--ah-ink-muted); font-size: .88rem; }
.ah-schedule .btn { align-self: flex-start; }

.ah-progress-list, .ah-mini-list { list-style: none; margin: 0; padding: 0; }
.ah-progress-list li + li, .ah-mini-list li + li { border-top: 1px solid var(--ah-line); }
.ah-progress-list a { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto; align-items: center; gap: .75rem; min-height: var(--ah-touch); padding: .35rem 0; color: inherit; text-decoration: none; }
.ah-progress-list__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-progress-list__bar { height: 8px; border-radius: 999px; background: var(--ah-line); overflow: hidden; }
.ah-progress-list__bar i { display: block; height: 100%; background: var(--ah-green-700); }
.ah-progress-list__num { font-variant-numeric: tabular-nums; color: var(--ah-ink-muted); font-size: .85rem; }

.ah-mini-list a, .ah-mini-list__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--ah-touch); padding: .4rem 0; color: inherit; text-decoration: none; }
.ah-mini-list__row { justify-content: flex-start; }
.ah-mini-list__main { display: flex; flex-direction: column; min-width: 0; }
.ah-mini-list__main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-mini-list__main small { color: var(--ah-ink-muted); font-size: .8rem; }
.ah-avatar--soft { background: var(--ah-green-100); color: var(--ah-green-900); }

@media (max-width: 575.98px) {
    .ah-btn-block-sm { width: 100%; justify-content: center; }
    .ah-page-head__actions { width: 100%; }
}

/* Orang tua: dirancang HP dulu, kartu besar dan huruf lebih besar. */
.ah-kv { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0; }
.ah-kv dt { font-size: .78rem; color: var(--ah-ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ah-kv dd { margin: 0; font-size: 1.05rem; font-weight: 600; }
/* Teks panjang (catatan klinik V5): satu kolom, tidak tebal, tidak melebar. */
.ah-kv--stack { grid-template-columns: 1fr; }
.ah-kv--stack dd { font-size: 1rem; font-weight: 400; }
.ah-break { overflow-wrap: anywhere; min-width: 0; }
.ah-parent-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ah-parent-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); font-size: 1.05rem; }
.ah-parent-card--hl { border-color: var(--ah-green-600); box-shadow: inset 4px 0 0 var(--ah-green-700); }
.ah-parent-card__title { margin: 0; font-weight: 700; font-size: 1.1rem; }
.ah-parent-card__text { margin: 0 0 .5rem; color: var(--ah-ink-soft); }
.ah-parent-card .btn { align-self: flex-start; min-height: var(--ah-touch); }

/* --- Pusat notifikasi (N-3) ----------------------------------------------- */
.ah-notif-group { margin-bottom: 1.25rem; }
.ah-notif-group__title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ah-ink-muted); margin: 0 0 .5rem; }
.ah-notif { margin: 0; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); overflow: hidden; }
.ah-notif__item { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .35rem .85rem .35rem 0; border-left: 4px solid transparent; }
.ah-notif__item + .ah-notif__item { border-top: 1px solid var(--ah-line); }
.ah-notif__item.is-unread { border-left-color: var(--ah-info); background: #f6fafc; }
.ah-notif__link { flex: 1 1 18rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; padding: .5rem .85rem; color: inherit; text-decoration: none; min-height: var(--ah-touch); }
.ah-notif__link:hover { background: var(--ah-green-050); color: inherit; }
.ah-notif__main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; }
.ah-notif__main b { font-weight: 600; }
.ah-notif__isi { font-size: .88rem; color: var(--ah-ink-soft); overflow-wrap: anywhere; }
.ah-notif__main small { color: var(--ah-ink-muted); font-size: .78rem; }
.ah-notif__state { display: flex; flex-wrap: wrap; gap: .3rem; }
.ah-notif__mark { margin: 0 0 0 .85rem; }

/* --- Halaman masuk (A-1) -------------------------------------------------- */
body.ah-masuk { min-height: 100dvh; background: var(--ah-green-050); }
.ah-masuk__wrap { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.ah-masuk__id { display: none; }
.ah-masuk__form { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 26rem; margin: 0 auto; padding: 1.25rem; }
.ah-masuk__mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--ah-green-800); color: #fff; font-size: 1.4rem; }
.ah-masuk__mark--small { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: .5rem; }
@media (min-width: 992px) {
    .ah-masuk__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ah-masuk__id { display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: 3rem clamp(2rem, 6vw, 5rem); background: var(--ah-green-800); color: #fff; }
    .ah-masuk__id .ah-masuk__mark { background: #fff; color: var(--ah-green-800); }
    .ah-masuk__name { margin: .5rem 0 0; font-size: 2rem; font-weight: 800; }
    .ah-masuk__tag { margin: 0; max-width: 32ch; font-size: 1.05rem; color: var(--ah-green-100); }
    .ah-masuk__mark--small { display: none; }
}

.ah-reveal { position: relative; }
.ah-reveal .form-control { padding-right: 7.5rem; }
.ah-reveal__btn {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 36px;
    padding: .2rem .6rem;
    border: 0;
    border-radius: 6px;
    background: var(--ah-green-050);
    color: var(--ah-green-900);
    font-size: .82rem;
}
.ah-nojs .ah-reveal__btn { display: none; }
.ah-nojs .ah-reveal .form-control { padding-right: .75rem; }

/* --- Ganti kata sandi (A-3): syarat sebagai daftar centang ---------------- */
.ah-checklist { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .85rem; color: var(--ah-ink-muted); }
.ah-checklist li { display: flex; align-items: center; gap: .45rem; }
.ah-checklist li i { font-size: .55rem; }
.ah-checklist li.is-ok { color: var(--ah-ok); }
.ah-checklist li.is-ok i::before { content: "\f00c"; font-size: .75rem; }

/* --- Akses ditolak (A-5) -------------------------------------------------- */
.ah-denial { max-width: 40rem; }

@media print {
    .ah-modtabs, .ah-search, .ah-peran, .ah-bell { display: none !important; }
}

/* Tombol kecil bertinggi sentuh 44px: teks di tengah, bukan di atas. */
.ah-card__head .btn-sm, .ah-card .ah-table .btn-sm, .ah-denial .btn, .ah-task__btn, .ah-schedule .btn, .ah-parent-card .btn, .ah-page-head__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

/* ==========================================================================
 * Redesain website Tahap 3 (23 Oktober 2026): halaman lama ke kerangka baru.
 * Grafik tanpa pustaka, saringan, chip berangka, kisi foto, zona unggah,
 * matriks dengan kolom lengket, lipatan HP, kartu kanal, penyunting berita.
 * ========================================================================== */

:root {
    /* Palet grafik dari token yang sama; selalu disertai angka tertulis. */
    --ah-chart-1: var(--ah-green-700);
    --ah-chart-2: var(--ah-info);
    --ah-chart-3: #b7791f;
    --ah-chart-4: #7a4fa0;
    --ah-chart-5: var(--ah-danger);
    --ah-chart-6: var(--ah-ink-muted);
}

.ah-chart { margin: 0; }
.ah-chart__title { font-weight: 700; font-size: .95rem; margin-bottom: .75rem; }
.ah-chart__empty { color: var(--ah-ink-muted); font-size: .9rem; margin: 0; padding: 1.25rem 0; text-align: center; border: 1px dashed var(--ah-line-strong); border-radius: var(--ah-radius-sm); }
.ah-chart__bars, .ah-chart__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ah-chart__bars li { display: grid; grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .88rem; }
.ah-chart__label { overflow-wrap: anywhere; color: var(--ah-ink-soft); }
.ah-chart__track { height: 12px; background: var(--ah-line); border-radius: 999px; overflow: hidden; }
.ah-chart__fill { display: block; height: 100%; border-radius: 999px; }
.ah-chart__num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ah-chart__c1 { background: var(--ah-chart-1); }
.ah-chart__c2 { background: var(--ah-chart-2); }
.ah-chart__c3 { background: var(--ah-chart-3); }
.ah-chart__c4 { background: var(--ah-chart-4); }
.ah-chart__c5 { background: var(--ah-chart-5); }
.ah-chart__c6 { background: var(--ah-chart-6); }
.ah-chart__donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ah-chart__donut { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; }
.ah-chart__donut span { width: 84px; height: 84px; border-radius: 50%; background: var(--ah-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; }
.ah-chart__donut small { font-weight: 400; font-size: .72rem; color: var(--ah-ink-muted); }
.ah-chart__legend { flex: 1 1 12rem; }
.ah-chart__legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; font-size: .88rem; }
.ah-chart__key { width: 12px; height: 12px; border-radius: 3px; }
.ah-chart__line { width: 100%; height: 130px; display: block; overflow: visible; }
.ah-chart__line polyline { fill: none; stroke: var(--ah-chart-1); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ah-chart__line circle { fill: var(--ah-chart-1); }
.ah-chart__axis { stroke: var(--ah-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ah-chart__data { margin-top: .5rem; font-size: .85rem; }
.ah-chart__data summary { cursor: pointer; color: var(--ah-green-700); min-height: var(--ah-touch); display: inline-flex; align-items: center; }
.ah-chart-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: 1.25rem; }
.ah-chart-grid > .ah-card { margin-bottom: 0; }
.ah-progress-list__item { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto; align-items: center; gap: .75rem; min-height: var(--ah-touch); padding: .35rem 0; }

/* Chip berangka dan segmen tema. */
.ah-chips__count { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--ah-green-100); color: var(--ah-green-900); font-size: .78rem; font-weight: 700; text-align: center; }
.ah-chips a[aria-current="page"] .ah-chips__count { background: rgba(255, 255, 255, .25); color: #fff; }

/* Saringan: sebaris di layar lebar, terlipat di HP. */
.ah-filter { margin-bottom: 1rem; }
.ah-filter > summary { display: none; list-style: none; }
.ah-filter > summary::-webkit-details-marker { display: none; }
.ah-filter__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); padding: .75rem .85rem; }
.ah-filter__form > div { flex: 1 1 11rem; min-width: 0; }
.ah-filter__form > .ah-filter__wide { flex: 2 1 16rem; }
.ah-filter__form .form-label { font-size: .8rem; margin-bottom: .2rem; color: var(--ah-ink-muted); font-weight: 600; }
.ah-filter__actions { display: flex; gap: .4rem; flex: 0 0 auto; }
.ah-filter__actions .btn { min-height: var(--ah-touch); display: inline-flex; align-items: center; }
@media (max-width: 575.98px) {
    .ah-js .ah-filter > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--ah-touch); margin-bottom: .5rem; }
    .ah-filter__form > div, .ah-filter__actions { flex: 1 1 100%; }
    .ah-filter__actions .btn { flex: 1 1 0; justify-content: center; }
}

/* Daftar dengan baris yang membuka panel. */
.ah-table tr.is-selected { background: var(--ah-green-050); box-shadow: inset 4px 0 0 var(--ah-green-700); }
.ah-row-link { font-weight: 600; text-decoration: none; }
.ah-row-link:hover { text-decoration: underline; }
.ah-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ah-line); background: var(--ah-green-050); flex: 0 0 auto; }
.ah-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--ah-ink-muted); font-size: .7rem; }
.ah-title-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ah-title-cell > span { min-width: 0; overflow-wrap: anywhere; }
.ah-meta { color: var(--ah-ink-muted); font-size: .82rem; }
.ah-list-plain { list-style: none; margin: 0; padding: 0; }
.ah-list-plain li { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--ah-line); overflow-wrap: anywhere; }
.ah-list-plain li:last-child { border-bottom: 0; }
.ah-list-plain b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-panel .ah-kv { grid-template-columns: 1fr; gap: .1rem; }
.ah-panel .ah-kv dd { font-size: .95rem; margin-bottom: .45rem; overflow-wrap: anywhere; }
.ah-panel .ah-tabs { margin-bottom: .85rem; }
.ah-decision { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ah-decision form { margin: 0; }
.ah-decision .btn { min-height: var(--ah-touch); }

/* Kisi foto galeri (W-3) dan zona unggah. */
.ah-media { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); list-style: none; margin: 0 0 1rem; padding: 0; }
.ah-media a { display: flex; flex-direction: column; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); overflow: hidden; color: inherit; text-decoration: none; height: 100%; }
.ah-media a:hover, .ah-media a[aria-current="true"] { border-color: var(--ah-green-600); box-shadow: 0 0 0 2px var(--ah-green-100); }
.ah-media img, .ah-media__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ah-green-050); display: flex; align-items: center; justify-content: center; color: var(--ah-ink-muted); }
.ah-media__cap { padding: .5rem .65rem; font-size: .85rem; display: flex; flex-direction: column; gap: .1rem; }
.ah-media__cap b { font-weight: 600; overflow-wrap: anywhere; }
.ah-media__cap small { color: var(--ah-ink-muted); }
.ah-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1.25rem; border: 2px dashed var(--ah-line-strong); border-radius: var(--ah-radius); background: var(--ah-surface); text-align: center; color: var(--ah-ink-soft); min-height: 7rem; }
.ah-drop.is-over { border-color: var(--ah-green-600); background: var(--ah-green-050); }
.ah-drop input[type="file"] { max-width: 100%; }
.ah-drop__hint { font-size: .82rem; color: var(--ah-ink-muted); margin: 0; }
.ah-drop__list { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .85rem; text-align: left; width: 100%; }
.ah-drop__list li { overflow-wrap: anywhere; }

/* Matriks rekap keuangan (K-7): kolom komponen lengket saat digeser. */
.ah-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.ah-matrix th, .ah-matrix td { padding: .55rem .7rem; border-bottom: 1px solid var(--ah-line); border-right: 1px solid var(--ah-line); text-align: right; white-space: nowrap; background: var(--ah-surface); }
.ah-matrix thead th { background: var(--ah-green-050); color: var(--ah-ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.ah-matrix th[scope="row"], .ah-matrix thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; white-space: normal; min-width: 10rem; box-shadow: 1px 0 0 var(--ah-line-strong); }
.ah-matrix th[scope="row"] { background: var(--ah-surface); font-weight: 600; }
.ah-matrix tfoot th, .ah-matrix tfoot td, .ah-matrix .ah-matrix__total { font-weight: 700; background: var(--ah-green-050); }
.ah-matrix tfoot th[scope="row"] { background: var(--ah-green-050); }
.ah-fold { background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); margin-bottom: .6rem; }
.ah-fold > summary { display: flex; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; min-height: var(--ah-touch); cursor: pointer; font-weight: 700; }
.ah-fold > summary b { font-variant-numeric: tabular-nums; }
.ah-fold > .ah-list-plain { padding: 0 .9rem .5rem; }
.ah-only-sm { display: none; }
@media (max-width: 575.98px) {
    .ah-only-sm { display: block; }
    .ah-hide-sm { display: none !important; }
}

/* Kartu kanal notifikasi (N-2). */
.ah-channels { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 1.25rem; }
.ah-channel { display: flex; flex-direction: column; gap: .55rem; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); padding: 1rem 1.1rem; }
.ah-channel--paused { background: var(--ah-canvas); }
.ah-channel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ah-channel__head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.ah-channel__meta { color: var(--ah-ink-muted); font-size: .86rem; margin: 0; }
.ah-channel__meta + .ah-channel__meta { margin-top: -.3rem; }
.ah-channel__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ah-channel__foot form { margin: 0; }
.ah-channel__foot .btn { min-height: var(--ah-touch); }
.ah-channel details.ah-channel__env { font-size: .85rem; }
.ah-channel details.ah-channel__env summary { color: var(--ah-green-700); cursor: pointer; }

/* Penyunting berita (W-2): isi di kiri, simpan di kanan; HP menempel bawah. */
.ah-editor { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .ah-editor { grid-template-columns: minmax(0, 2.2fr) minmax(16rem, 1fr); } }
.ah-editor__side { display: grid; gap: 1rem; }
.ah-editor__side .ah-card { margin-bottom: 0; }
.ah-editor .note-editor { background: var(--ah-surface); }
.ah-editor__cover { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--ah-radius-sm); border: 1px solid var(--ah-line); margin-bottom: .6rem; }
@media (max-width: 575.98px) {
    .ah-sticky-sm { position: sticky; bottom: calc(var(--ah-bottombar-h) + env(safe-area-inset-bottom, 0px)); z-index: 5; background: var(--ah-surface); border-top: 1px solid var(--ah-line); margin: 0 -1.1rem -1.1rem; padding: .75rem 1.1rem; }
    .ah-sticky-sm .btn { flex: 1 1 0; justify-content: center; }
}
.ah-preview { max-width: 46rem; }
.ah-preview__body img { max-width: 100%; height: auto; }

/* Dialog: ketik nama untuk mengonfirmasi tindakan yang tidak dapat dibatalkan. */
.ah-dialog__match { margin-top: .75rem; }
.ah-dialog__match .form-label { font-size: .88rem; }

/* Wizard impor (K-5). */
.ah-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: ah-step; font-size: .85rem; }
.ah-steps li { counter-increment: ah-step; display: inline-flex; align-items: center; gap: .35rem; color: var(--ah-ink-muted); }
.ah-steps li::before { content: counter(ah-step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--ah-line-strong); font-weight: 700; }
.ah-steps li[aria-current="step"] { color: var(--ah-green-900); font-weight: 700; }
.ah-steps li[aria-current="step"]::before { background: var(--ah-green-700); border-color: var(--ah-green-700); color: #fff; }
.ah-steps li.is-done::before { content: "\2713"; background: var(--ah-green-100); border-color: var(--ah-green-100); color: var(--ah-green-900); }

@media print {
    .ah-filter, .ah-chips, .ah-decision, .ah-channel__foot { display: none !important; }
    .ah-matrix th[scope="row"] { position: static; }
}
.ah-list-plain .ah-cell-sub { display: block; color: var(--ah-ink-muted); font-size: .8rem; font-weight: 400; }

/* ==========================================================================
   Redesain Tahap 4 — perizinan, pengajian, cetak (I-1 s.d. I-7, J-1 s.d. J-6)
   ========================================================================== */

/* Tata letak dua kolom: isi utama + kolom samping. HP menumpuk. */
.ah-split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 1rem; }
.ah-split > * { min-width: 0; }
.ah-split .ah-card { margin-bottom: 0; }
.ah-split__col { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 992px) {
    .ah-split { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); }
    .ah-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Daftar + detail berdampingan (I-3): mulai tablet. */
@media (min-width: 768px) {
    .ah-split--list { grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.3fr); }
}
@media (max-width: 767.98px) {
    /* HP: bila detail dibuka, daftar disembunyikan; tombol Kembali tersedia. */
    .ah-split--list.has-detail > .ah-split__list { display: none; }
}
.ah-only-split-sm { display: none; }
@media (max-width: 767.98px) { .ah-only-split-sm { display: inline-flex; } }

/* Segmen (Mingguan/Daftar, Santri/Guru/Gabungan). */
.ah-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--ah-line-strong); border-radius: 999px; padding: 3px; background: var(--ah-surface); margin-bottom: 1rem; max-width: 100%; }
.ah-seg a { display: inline-flex; align-items: center; min-height: calc(var(--ah-touch) - 6px); padding: .25rem .95rem; border-radius: 999px; color: var(--ah-ink-soft); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ah-seg a:hover { color: var(--ah-green-800); background: var(--ah-green-050); }
.ah-seg a[aria-current="page"] { background: var(--ah-green-700); color: #fff; }

/* Linimasa riwayat. */
.ah-tl { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--ah-line); }
.ah-tl__item { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: 0 0 .9rem .35rem; overflow-wrap: anywhere; }
.ah-tl__item::before { content: ""; position: absolute; left: -1.62rem; top: .3rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--ah-surface); border: 2px solid var(--ah-green-600); }
.ah-tl__item--warn::before { border-color: var(--ah-warn); }
.ah-tl__item--danger::before { border-color: var(--ah-danger); }
.ah-tl__item:last-child { padding-bottom: 0; }
.ah-tl__meta { font-size: .8rem; color: var(--ah-ink-muted); }
.ah-tl__title { font-weight: 600; }
.ah-tl__text { color: var(--ah-ink-soft); font-size: .92rem; }

/* Langkah alur vertikal (I-1). */
.ah-vsteps { list-style: none; margin: 0; padding: 0; counter-reset: ah-vstep; display: grid; gap: .55rem; }
.ah-vsteps li { counter-increment: ah-vstep; display: flex; align-items: flex-start; gap: .6rem; }
.ah-vsteps li::before { content: counter(ah-vstep); flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ah-green-100); color: var(--ah-green-900); font-weight: 700; font-size: .85rem; }

/* Tindakan dengan formulir dialog (details[data-ah-dialog]). */
.ah-acts { display: grid; gap: .55rem; }
.ah-act > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: var(--ah-touch); }
.ah-act > summary::-webkit-details-marker { display: none; }
.ah-act[open] > summary { margin-bottom: .6rem; }
.ah-act__body { border: 1px solid var(--ah-line); border-radius: var(--ah-radius-sm); padding: .85rem; background: var(--ah-canvas); }
.ah-act__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; }
.ah-dialog--form { width: min(560px, calc(100vw - 2rem)); }
.ah-dialog--form .ah-act__body { border: 0; background: transparent; padding: 1.25rem 1.25rem 1rem; }
.ah-act__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .85rem; }
.ah-act__actions .btn { min-height: var(--ah-touch); }

/* Pita mode admin (I-4). */
.ah-ribbon { display: flex; gap: .6rem; align-items: flex-start; background: var(--ah-warn-bg); color: var(--ah-warn); border: 1px solid #f0d49a; border-radius: var(--ah-radius-sm); padding: .6rem .85rem; margin-bottom: 1rem; font-size: .92rem; }

/* Alasan cepat (I-4): hanya tampil bila JavaScript aktif. */
.ah-quick { display: none; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.ah-js .ah-quick { display: flex; }
.ah-quick .btn { min-height: var(--ah-touch); border-radius: 999px; }

/* Daftar antrean (I-3) dan kartu izin orang tua (I-7). */
.ah-qlist { list-style: none; margin: 0; padding: 0; }
.ah-qlist li + li { border-top: 1px solid var(--ah-line); }
.ah-qlist a { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .7rem .9rem; min-height: var(--ah-touch); color: inherit; text-decoration: none; }
.ah-qlist a:hover { background: var(--ah-green-050); }
.ah-qlist a[aria-current="true"] { background: var(--ah-green-050); box-shadow: inset 4px 0 0 var(--ah-green-700); }
.ah-qlist a.is-late { box-shadow: inset 4px 0 0 var(--ah-warn); }
.ah-qlist a.is-late[aria-current="true"] { background: var(--ah-warn-bg); }
.ah-qlist__main { display: flex; flex-direction: column; min-width: 0; }
.ah-qlist__main b { font-weight: 600; overflow-wrap: anywhere; }
.ah-qlist__main small { color: var(--ah-ink-muted); }
.ah-qlist .ah-badge { flex: 0 0 auto; }
.ah-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-bottom: 1rem; }
.ah-icard { display: flex; flex-direction: column; gap: .35rem; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); padding: .9rem 1rem; color: inherit; text-decoration: none; min-width: 0; }
a.ah-icard:hover { border-color: var(--ah-green-600); box-shadow: 0 0 0 2px var(--ah-green-100); }
.ah-icard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; font-weight: 700; }
.ah-icard__text { overflow-wrap: anywhere; }
.ah-icard__meta { color: var(--ah-ink-muted); font-size: .88rem; overflow-wrap: anywhere; }

/* Panel info "Akan diteruskan ke" (I-4). */
.ah-info-list { margin: 0; display: grid; gap: .6rem; }
.ah-info-list dt { font-size: .78rem; color: var(--ah-ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ah-info-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Jadwal mingguan (J-1): baris waktu × kolom hari. */
.ah-week-wrap { overflow-x: auto; margin-bottom: 1rem; }
.ah-week { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); }
.ah-week th, .ah-week td { border-bottom: 1px solid var(--ah-line); border-right: 1px solid var(--ah-line); padding: .4rem; vertical-align: top; }
.ah-week thead th { background: var(--ah-green-050); font-size: .8rem; text-align: center; color: var(--ah-ink-soft); }
.ah-week thead th.is-today { color: var(--ah-green-900); box-shadow: inset 0 -3px 0 var(--ah-green-700); }
.ah-week th[scope="row"] { width: 7.5rem; font-size: .82rem; color: var(--ah-ink-soft); background: var(--ah-canvas); }
.ah-week tr > :last-child { border-right: 0; }
.ah-week tbody tr:last-child > * { border-bottom: 0; }
.ah-block { display: flex; flex-direction: column; gap: .05rem; padding: .35rem .45rem; margin-bottom: .3rem; border-radius: 6px; background: var(--ah-green-050); border-left: 3px solid var(--ah-green-700); color: inherit; text-decoration: none; font-size: .78rem; overflow-wrap: anywhere; }
.ah-block:hover { background: var(--ah-green-100); }
.ah-block b { font-weight: 700; font-size: .82rem; }
.ah-block--warn { background: var(--ah-warn-bg); border-left-color: var(--ah-warn); }
.ah-block--off { background: var(--ah-canvas); border-left-color: var(--ah-line-strong); color: var(--ah-ink-muted); }
.ah-daypick { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.ah-daypick a { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; min-height: var(--ah-touch); padding: .2rem .6rem; border: 1px solid var(--ah-line-strong); border-radius: 999px; color: var(--ah-ink-soft); text-decoration: none; font-weight: 600; background: var(--ah-surface); }
.ah-daypick a[aria-current="page"] { background: var(--ah-green-700); border-color: var(--ah-green-700); color: #fff; }
.ah-week--grid { display: none; }
.ah-week--day { display: block; }
@media (min-width: 992px) {
    .ah-week--grid { display: block; }
    .ah-week--day { display: none; }
}

/* Kartu peserta pertemuan (J-2). */
.ah-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ah-people li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem .9rem; border-top: 1px solid var(--ah-line); min-height: var(--ah-touch); }
.ah-people li:first-child { border-top: 0; }
.ah-people__main { display: flex; flex-direction: column; min-width: 0; }
.ah-people__main b { font-weight: 600; overflow-wrap: anywhere; }
.ah-people__main small { color: var(--ah-ink-muted); }
.ah-people [hidden] { display: none !important; }
.ah-sumline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--ah-line); font-size: .92rem; }
.ah-stepper { margin-bottom: 1rem; }

/* Bilah tindakan bawah (J-2, I-3, I-4). Di HP menempel di atas bilah bawah. */
.ah-actbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); padding: .7rem .9rem; margin-bottom: 1rem; }
.ah-actbar form { margin: 0; }
.ah-actbar .btn { min-height: var(--ah-touch); }
@media (max-width: 575.98px) {
    .ah-actbar { position: sticky; bottom: calc(var(--ah-bottombar-h) + env(safe-area-inset-bottom, 0px)); z-index: 6; border-radius: 0; margin: 0 -.85rem 1rem; box-shadow: 0 -4px 12px rgba(16, 32, 24, .08); }
    .ah-actbar > :last-child { flex: 1 1 100%; }
    .ah-actbar .btn { flex: 1 1 0; justify-content: center; }
    .ah-actbar__btns { display: flex; gap: .5rem; flex: 1 1 100%; }
}
.ah-actbar__btns { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Bilah persentase bertumpuk per jadwal (J-4). */
.ah-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ah-stack li { display: grid; gap: .25rem; }
.ah-stack__label { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.ah-stack__label span:last-child { color: var(--ah-ink-muted); white-space: nowrap; }
.ah-stack__bar { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--ah-canvas); }
.ah-stack__bar > span { display: block; height: 100%; }
.ah-stack__key { display: flex; flex-wrap: wrap; gap: .35rem .9rem; list-style: none; margin: .6rem 0 0; padding: 0; font-size: .8rem; color: var(--ah-ink-soft); }
.ah-stack__key i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.ah-k-hadir { background: var(--ah-green-600); }
.ah-k-terlambat { background: #c98a1b; }
.ah-k-izin { background: var(--ah-info); }
.ah-k-sakit { background: #7a63b8; }
.ah-k-alpa { background: var(--ah-danger); }

@media print {
    .ah-seg, .ah-actbar, .ah-acts, .ah-quick, .ah-daypick { display: none !important; }
    .ah-split { display: block; }
    .ah-week--grid { display: block !important; }
    .ah-week--day { display: none !important; }
}

/* Filter lanjutan di dalam bilah saring (I-2, I-6, J-4). */
.ah-filter__more { flex: 1 1 100%; order: 10; border-top: 1px dashed var(--ah-line); padding-top: .4rem; }
.ah-filter__more > summary { cursor: pointer; color: var(--ah-green-700); font-weight: 600; min-height: var(--ah-touch); display: inline-flex; align-items: center; }
.ah-filter__more-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding-top: .4rem; }
.ah-filter__more-body > div { flex: 1 1 11rem; min-width: 0; }
.ah-filter__more-body > .ah-filter__wide { flex: 2 1 16rem; }
.ah-filter__more-body > p { flex: 1 1 100%; }
.ah-filter__form > .ah-filter__actions { order: 20; }
@media (max-width: 575.98px) { .ah-filter__more-body > div { flex: 1 1 100%; } }

/* Bilah tindakan yang hanya ada di HP (I-5). */
.ah-actbar.ah-only-sm { display: none; }
@media (max-width: 575.98px) { .ah-actbar.ah-only-sm { display: flex; } }

/* ==========================================================================
   Redesain Tahap 5 — pembinaan (V-1 s.d. V-7, M-4)
   ========================================================================== */

/* Langkah wizard (V-3 buka kasus, V-5 siapkan publikasi). */
.ah-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0 0 1rem; padding: 0; counter-reset: ah-step; font-size: .88rem; }
.ah-steps li { counter-increment: ah-step; display: inline-flex; align-items: center; gap: .4rem; color: var(--ah-ink-muted); }
.ah-steps li::before { content: counter(ah-step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--ah-line-strong); background: var(--ah-surface); font-weight: 700; font-size: .8rem; }
.ah-steps li.is-current { color: var(--ah-green-900); font-weight: 700; }
.ah-steps li.is-current::before { background: var(--ah-green-700); border-color: var(--ah-green-700); color: #fff; }
.ah-steps li.is-done::before { content: "✓"; background: var(--ah-green-100); border-color: var(--ah-green-100); color: var(--ah-green-900); }

/* Papan kasus per status (V-3). Tidak ada seret-lepas: status berubah lewat
   dialog beralasan di halaman detail. */
.ah-board { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 768px) { .ah-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ah-board__col { background: var(--ah-canvas); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); padding: .6rem; min-width: 0; }
.ah-board__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; margin: 0 0 .5rem; padding: 0 .2rem; }
.ah-board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ah-board__more { display: inline-flex; min-height: var(--ah-touch); align-items: center; padding: 0 .2rem; font-size: .88rem; }

/* Total poin terhadap ambang (V-2). */
.ah-meter { display: grid; gap: .3rem; }
.ah-meter__bar { height: .7rem; border-radius: 999px; background: var(--ah-canvas); border: 1px solid var(--ah-line); overflow: hidden; }
.ah-meter__bar > span { display: block; height: 100%; background: var(--ah-green-600); }
.ah-meter__bar--warn > span { background: var(--ah-warn); }
.ah-meter__label { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--ah-ink-soft); }
.ah-big { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--ah-ink); }
.ah-big small { font-size: .85rem; font-weight: 400; color: var(--ah-ink-muted); }

/* Isi publikasi (V-5 pratinjau, V-7 orang tua). */
.ah-pub { display: grid; gap: .6rem; overflow-wrap: anywhere; }
.ah-pub h3 { font-size: .95rem; font-weight: 700; margin: .4rem 0 0; }
.ah-pub p { margin: 0; white-space: pre-wrap; }
.ah-pub-list a.is-unread b::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: .4rem; border-radius: 50%; background: var(--ah-info); vertical-align: middle; }

/* Isian yang hanya relevan untuk pilihan tertentu (V-4 hasil sesi). */
.ah-js [data-ah-when][hidden] { display: none !important; }
.ah-check-list { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; }
.ah-check-list label { display: flex; gap: .55rem; align-items: flex-start; border: 1px solid var(--ah-line); border-radius: var(--ah-radius-sm); padding: .55rem .7rem; min-height: var(--ah-touch); background: var(--ah-surface); overflow-wrap: anywhere; }
.ah-check-list input { margin-top: .2rem; flex: 0 0 auto; }
.ah-poin-hint { font-size: .88rem; color: var(--ah-ink-soft); }

@media print {
    .ah-steps, .ah-board__more { display: none !important; }
}
/* Isi sel bertingkat (teks + keterangan kecil) tetap satu blok saat tabel menjadi kartu. */
.ah-cell-wrap { display: inline-block; min-width: 0; }
@media (max-width: 575.98px) { .ah-table--cards .ah-cell-wrap { display: block; text-align: right; overflow-wrap: anywhere; } }

/* =========================================================================
   Redesain Tahap 6 — data pesantren & penugasan (D-1 … D-10, M-1 … M-3, G-1)
   ========================================================================= */

/* D-1: baris arsip abu-abu; kolom opsional disembunyikan di HP. */
.ah-row-muted td { color: var(--ah-ink-muted); }
@media (max-width: 575.98px) { .ah-table--cards .ah-col-opt { display: none; } }

/* D-2/D-10: kepala profil santri. */
.ah-profile-head .ah-card__body { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ah-profile-head .ah-avatar { width: 48px; height: 48px; font-size: 1.2rem; background: var(--ah-green-100); color: var(--ah-green-900); display: inline-grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.ah-profile-head__main { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.ah-profile-head .ah-menu { flex: 0 0 auto; }

/* D-3: navigasi bagian formulir, lengket di kiri pada desktop. */
.ah-formnav { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.ah-formnav__side { display: none; }
@media (min-width: 992px) {
    .ah-formnav { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; }
    .ah-formnav__side { display: block; position: sticky; top: 5rem; }
    .ah-formnav__side a { display: block; padding: .45rem .6rem; border-radius: var(--ah-radius-sm); color: var(--ah-ink-soft); text-decoration: none; }
    .ah-formnav__side a:hover { background: var(--ah-green-100); color: var(--ah-green-900); }
}
.ah-formnav__main { min-width: 0; }

/* D-4/D-5: bilah tindakan menempel di bawah layar. */
.ah-actbar--sticky { position: sticky; bottom: 0; z-index: 6; box-shadow: 0 -4px 12px rgba(16, 32, 24, .08); }
.ah-actbar__text { flex: 1 1 12rem; font-weight: 600; }

/* D-7: pasangan wali berdampingan. */
.ah-compare { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ah-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ah-compare__item { border: 1px solid var(--ah-line); border-radius: var(--ah-radius); padding: .85rem 1rem; background: var(--ah-surface); min-width: 0; overflow-wrap: anywhere; }
.ah-compare__item h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.ah-compare__item ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.ah-compare__item mark { background: var(--ah-warn-bg); padding: 0 .15rem; }

/* M-2: kartu kamar dengan bilah keterisian. */
.ah-room { display: flex; flex-direction: column; gap: .45rem; }
.ah-room__bar { height: .55rem; border-radius: 999px; background: var(--ah-canvas); border: 1px solid var(--ah-line); overflow: hidden; }
.ah-room__bar > span { display: block; height: 100%; background: var(--ah-green-600); }
.ah-room__bar--warn > span { background: var(--ah-warn); }
.ah-room__bar--full > span { background: var(--ah-danger); }

/* M-3: kartu semester aktif. */
.ah-semester { border-left: 4px solid var(--ah-green-700); }

/* G-1: menu jenis penugasan (kiri di desktop, pilihan di atas pada HP). */
.ah-jenis { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .ah-jenis { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } }
.ah-jenis__menu { list-style: none; margin: 0; padding: .4rem; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); }
.ah-jenis__menu a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: var(--ah-touch); padding: .35rem .65rem; border-radius: var(--ah-radius-sm); color: var(--ah-ink); text-decoration: none; }
.ah-jenis__menu a[aria-current="page"] { background: var(--ah-green-100); color: var(--ah-green-900); font-weight: 700; }
.ah-jenis__menu a.is-future { color: var(--ah-ink-muted); }
.ah-jenis__group { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ah-ink-muted); padding: .6rem .65rem .2rem; }
.ah-jenis__select { display: block; }
@media (min-width: 992px) { .ah-jenis__select { display: none; } }
@media (max-width: 991.98px) { .ah-jenis__menu { display: none; } }
.ah-js .ah-jenis__select button { display: none; }
.ah-hak { display: flex; flex-wrap: wrap; gap: .25rem; }
/* Bilah pilihan tetap terlihat tanpa JavaScript (D-5). */
.ah-nojs .ah-selbar[hidden] { display: flex; position: static; }
.ah-nojs .ah-selbar [data-ah-select-clear] { display: none; }
/* Teks tersembunyi (posisi absolut) di kepala tabel lebar tidak boleh lolos
   dari wadah gulir dan melebarkan halaman (M-1 pada 768px). */
.ah-table-wrap { position: relative; }

/* =========================================================================
   Redesain Tahap 7 — penilaian & rapor (R-1 … R-8, M-5)
   ========================================================================= */

/* Hanya dengan/ tanpa JavaScript. */
.ah-nojs .ah-js-only { display: none !important; }

/* Bilah konteks "Konteks: semester ▾ kelas ▾ · Tersimpan untuk sesi ini". */
.ah-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; background: var(--ah-green-100); border-radius: var(--ah-radius); padding: .6rem .85rem; margin-bottom: 1rem; }
.ah-ctx__lead { color: var(--ah-ink); }
.ah-ctx__field { margin: 0; min-width: 0; flex: 0 1 16rem; }
.ah-ctx__field .form-select { min-height: var(--ah-touch); }
.ah-ctx__note { margin-left: auto; font-size: .8rem; color: var(--ah-ink-soft); }
.ah-js .ah-ctx__go { display: none; }
@media (max-width: 575.98px) { .ah-ctx__field { flex: 1 1 100%; } .ah-ctx__note { margin-left: 0; } }

/* R-1: rencana. */
.ah-plan-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ah-plan-table .form-select, .ah-plan-table .form-control { min-width: 0; }
.ah-hapus-mapel { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .85rem; color: var(--ah-ink-soft); min-height: 32px; }
.ah-plan-table tr.is-hapus td { opacity: .55; text-decoration: line-through; }
.ah-input-num { max-width: 7.5rem; font-variant-numeric: tabular-nums; }
.ah-field-warn { color: var(--ah-warn); }
.form-select.is-warn { border-color: var(--ah-warn); background-color: var(--ah-warn-bg); }
.ah-signer-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ah-signer { min-width: 0; }
.ah-ttd { min-height: 76px; margin-top: .5rem; display: flex; align-items: center; }
.ah-ttd img { max-width: 100%; height: auto; max-height: 76px; border: 1px dashed var(--ah-line-strong); border-radius: var(--ah-radius-sm); background: var(--ah-surface); padding: .2rem; }
.ah-ttd--card { justify-content: center; padding: .75rem .75rem 0; }

/* R-2/R-3/R-4: kisi per kelas. Kolom nama tetap terlihat saat digulir. */
/* Bilah Simpan draf/Serahkan kisi: menempel di bawah layar; di HP memakai
   posisi .ah-actbar bawaan di atas bilah navigasi bawah. */
@media (min-width: 576px) { .ah-actbar--kisi { position: sticky; bottom: 0; z-index: 6; box-shadow: 0 -4px 12px rgba(16, 32, 24, .08); } }
.ah-kisi-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.ah-kisi-wrap { max-height: none; }
.ah-kisi { border-collapse: separate; border-spacing: 0; }
.ah-kisi th, .ah-kisi td { vertical-align: middle; white-space: nowrap; }
.ah-kisi .ah-input-num { width: 4.6rem; min-height: 38px; padding: .3rem .45rem; text-align: right; }
.ah-kisi .form-select-sm { min-width: 9.5rem; min-height: 38px; }
.ah-kisi__nama { position: sticky; left: 0; z-index: 2; background: var(--ah-surface); min-width: 11rem; white-space: normal !important; box-shadow: 1px 0 0 var(--ah-line); }
.ah-kisi thead .ah-kisi__nama { z-index: 3; }
.ah-kisi__pos { display: none; }
.ah-kisi td[data-rapor-akhir], .ah-kisi td[data-rapor-predikat] { font-weight: 700; font-variant-numeric: tabular-nums; }
.ah-kisi tr.is-locked td, .ah-kisi tr.is-locked th { background: var(--ah-canvas); }
.ah-kisi input[readonly] { background: transparent; border-color: transparent; }
.ah-kisi tr.is-changed th { box-shadow: inset 3px 0 0 var(--ah-warn), 1px 0 0 var(--ah-line); }
.ah-koreksi { margin: .75rem 0; padding: .75rem .9rem; border: 1px solid var(--ah-warn); border-radius: var(--ah-radius-sm); background: var(--ah-warn-bg); }
.ah-js .ah-koreksi[hidden] { display: none; }
.ah-kisi-pager { display: none; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0 1rem; }
.ah-kisi-pager .btn { min-height: var(--ah-touch); }
.ah-kisi-pager__pos { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    /* HP: satu santri per kartu (Sebelumnya/Berikutnya dengan JavaScript; tanpa JavaScript kartu bertumpuk). */
    .ah-kisi, .ah-kisi tbody, .ah-kisi tr, .ah-kisi td, .ah-kisi th { display: block; width: 100%; }
    .ah-kisi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ah-kisi tr { border: 1px solid var(--ah-line); border-radius: var(--ah-radius); margin-bottom: .75rem; background: var(--ah-surface); padding: .35rem .75rem; }
    .ah-kisi td, .ah-kisi th { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--ah-line); white-space: normal; }
    .ah-kisi td:last-child { border-bottom: 0; }
    .ah-kisi td[data-label]::before { content: attr(data-label); font-size: .82rem; font-weight: 600; color: var(--ah-ink-soft); }
    .ah-kisi td[data-label=""]::before { display: none; }
    .ah-kisi__nama { position: static; box-shadow: none; font-size: 1.02rem; }
    .ah-kisi__pos { display: inline; }
    .ah-kisi .ah-input-num { width: 6.5rem; min-height: var(--ah-touch); }
    .ah-kisi .form-select-sm { min-height: var(--ah-touch); max-width: 60%; }
    .ah-kisi.is-paged tbody tr { display: none; }
    .ah-kisi.is-paged tbody tr.is-current { display: block; }
    .ah-kisi-pager { display: flex; }
    .ah-kisi-pager[hidden] { display: none; }
}
.ah-col-check { width: 2.5rem; text-align: center; }
.ah-col-check .form-check-input { width: 1.25rem; height: 1.25rem; }
.ah-komponen { border: 1px solid var(--ah-line); border-radius: var(--ah-radius-sm); padding: .6rem .8rem .8rem; margin: 0 0 .65rem; }
.ah-komponen legend { float: none; width: auto; font-size: .95rem; font-weight: 700; margin: 0; padding: 0 .25rem; }
.ah-komponen__grid { display: grid; gap: .6rem; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); align-items: start; }
.ah-komponen__grid label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; }
.ah-panel .ah-komponen__grid { grid-template-columns: 1fr; }

/* R-5: matriks kelengkapan. Simbol + warna + teks tersembunyi + legenda. */
.ah-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin: 0 0 .75rem; font-size: .85rem; color: var(--ah-ink-soft); }
.ah-sel { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: var(--ah-radius-sm); font-weight: 800; text-decoration: none; border: 1px solid transparent; line-height: 1; }
.ah-sel--ok { background: var(--ah-ok-bg); color: var(--ah-ok); }
.ah-sel--info { background: var(--ah-info-bg); color: var(--ah-info); }
.ah-sel--warn { background: var(--ah-warn-bg); color: var(--ah-warn); border-color: var(--ah-warn); }
.ah-sel--muted { background: var(--ah-canvas); color: var(--ah-ink-soft); border-color: var(--ah-line-strong); }
.ah-sel--empty { background: transparent; color: var(--ah-ink-muted); border-color: var(--ah-line); }
a.ah-sel { min-width: var(--ah-touch); height: var(--ah-touch); }
a.ah-sel:hover, a.ah-sel:focus-visible, a.ah-sel.is-current { outline: 2px solid var(--ah-green-700); outline-offset: 1px; }
.ah-matrix th, .ah-matrix td { text-align: center; white-space: nowrap; }
.ah-matrix .ah-kisi__nama { text-align: left; }
.ah-matrix tr.is-current th, .ah-matrix tr.is-current td { background: var(--ah-green-050); }
.ah-matrix-list { display: none; list-style: none; margin: 0; padding: 0; }
.ah-matrix-list a { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; justify-content: space-between; padding: .75rem .9rem; min-height: var(--ah-touch); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); background: var(--ah-surface); margin-bottom: .5rem; color: var(--ah-ink); text-decoration: none; }
.ah-matrix-list span { font-size: .85rem; color: var(--ah-ink-soft); }
@media (max-width: 575.98px) { .ah-matrix-wrap { display: none; } .ah-matrix-list { display: block; } }
.ah-bahan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ah-bahan-list li { overflow-wrap: anywhere; }
.ah-bahan-list a { display: flex; align-items: center; gap: .55rem; min-height: var(--ah-touch); color: var(--ah-ink); text-decoration: none; }

/* R-6: pratinjau rapor dan navigasi santri di panel. */
.ah-panel-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.ah-rapor-doc { border: 1px solid var(--ah-line); border-radius: var(--ah-radius-sm); padding: .9rem 1rem; background: var(--ah-surface); margin-top: 1rem; overflow-wrap: anywhere; }
.ah-rapor-doc .ah-rapor-doc__judul { font-size: 1.15rem; font-weight: 800; margin: 0 0 .4rem; }
.ah-rapor-doc h3 { font-size: 1rem; font-weight: 700; margin-top: .9rem; }
.ah-rapor-doc table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: .5rem 0; }
.ah-rapor-doc td, .ah-rapor-doc th { border: 1px solid var(--ah-line); padding: .35rem .45rem; word-break: break-word; }
.ah-rapor-doc .sign td { border: 0; text-align: center; }
.ah-rapor-doc img { max-width: 100%; height: auto; }

@media (min-width: 576px) { .ah-rapor-table td:nth-child(2) { min-width: 10rem; } .ah-rapor-table td:nth-child(6) { white-space: nowrap; } }

/* R-7: kartu penanda tangan. */
.ah-signer-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ah-signer-card { margin: 0; }

/* R-8: rapor anak. */
.ah-rapor-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.ah-rapor-list a { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; align-items: center; padding: .75rem .95rem; min-height: var(--ah-touch); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); background: var(--ah-surface); color: var(--ah-ink); text-decoration: none; }
.ah-rapor-list a > .ah-badge { grid-row: 1 / span 2; grid-column: 2; }
.ah-rapor-list a[aria-current="page"] { border-color: var(--ah-green-700); box-shadow: inset 3px 0 0 var(--ah-green-700); }
.ah-rapor-card .ah-card__head { flex-wrap: wrap; gap: .5rem; }

@media print {
    .ah-ctx, .ah-kisi-tools, .ah-kisi-pager, .ah-legend { display: none !important; }
}