/* =========================================================
   ADMIN — MI BAITUL AMAR
   ========================================================= */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button,input,select,textarea{font:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.section-eyebrow{display:block;margin-bottom:10px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border:2px solid transparent;border-radius:12px;font-family:var(--font-display);font-weight:700;font-size:15px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-accent{background:var(--accent);color:var(--primary-dark);}
.btn-accent:hover{box-shadow:0 10px 24px rgba(254,215,0,.28);}

/* ===== ADMIN ARTIKEL ===== */

.admin-body{background:#F4F6FA;min-height:100vh;}
.admin-shell{max-width:1180px;margin:0 auto;padding:48px 24px 80px;}
.admin-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;}.admin-page-head h1{font-family:var(--font-display);font-size:32px;}.admin-page-head p{color:var(--muted);margin-top:7px;}
.admin-table-wrap{background:var(--white);border:1px solid #E5E9F1;border-radius:18px;overflow:auto;}.admin-table{width:100%;border-collapse:collapse;min-width:780px;}.admin-table th,.admin-table td{padding:17px 18px;text-align:left;border-bottom:1px solid #EDF0F5;font-size:13.5px;vertical-align:middle;}.admin-table th{font-family:var(--font-display);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:#FAFBFD;}.admin-table td strong{display:block;font-family:var(--font-display);}.admin-table td small{display:block;color:var(--muted);margin-top:3px;}
.admin-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:var(--text-small);font-weight:700}.admin-status.published{background:#E7F7EE;color:#187246}.admin-status.draft{background:#EEF1F6;color:#667085}
.admin-actions{display:flex;align-items:center;gap:10px}.admin-actions a,.admin-actions button{border:0;background:none;color:var(--primary);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:0}.admin-actions button{color:#B42318}
.admin-empty-cell{text-align:center!important;color:var(--muted);padding:40px!important;}
.admin-login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.admin-login-card{width:min(100%,420px);background:var(--white);border:1px solid #E5E9F1;border-radius:22px;padding:36px;box-shadow:0 20px 50px rgba(10,17,40,.08)}.admin-brand{font-family:var(--font-display);font-weight:800;color:var(--primary);margin-bottom:24px}.admin-login-card h1{font-family:var(--font-display);font-size:28px}.admin-login-card>p{color:var(--muted);margin:6px 0 24px}.admin-login-card label,.admin-editor-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;margin-bottom:18px}.admin-login-card input,.admin-editor-form input,.admin-editor-form select{width:100%;min-height:46px;border:1px solid #D9DEE8;border-radius:11px;padding:10px 12px;font:inherit;background:#fff}.admin-login-card .btn{width:100%;justify-content:center;border:0;cursor:pointer}.admin-back-link{display:inline-block;margin-top:18px;color:var(--primary);font-size:13px;font-weight:700}.admin-alert{padding:13px 15px;border-radius:10px;margin-bottom:20px;font-size:13px}.admin-alert.error{background:#FFF0F0;color:#9D2929;border:1px solid #F0CACA}.admin-alert.success{background:#E9F8F0;color:#17623D;border:1px solid #BDE8CF}
.admin-editor-form{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}.admin-editor-main,.admin-editor-side,.admin-gallery-manager{background:var(--white);border:1px solid #E5E9F1;border-radius:18px;padding:26px}.admin-editor-side{position:sticky;top:24px}.admin-editor-form label>span{font-weight:400;color:var(--muted);font-size:var(--text-small)}.editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid #D9DEE8;border-bottom:0;border-radius:12px 12px 0 0;background:#FAFBFD}.editor-toolbar button{min-width:34px;height:34px;border:1px solid #E1E5EC;background:#fff;border-radius:7px;cursor:pointer;font:inherit;font-size:12px}.rich-editor{min-height:440px;border:1px solid #D9DEE8;border-radius:0 0 12px 12px;padding:20px;outline:none;line-height:1.8;font-size:15px}.rich-editor:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,42,170,.08)}.rich-editor p{margin:0 0 14px}.rich-editor blockquote{margin:18px 0;padding:8px 14px;border-left:3px solid var(--accent);background:#FFFBE6;color:#344054}.rich-editor ul{list-style:disc;padding-left:22px}.rich-editor ol{list-style:decimal;padding-left:22px}.admin-cover-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin:-6px 0 18px}.admin-save{width:100%;justify-content:center;border:0;cursor:pointer}.admin-gallery-manager{margin-top:28px}.admin-gallery-manager h2{font-family:var(--font-display);font-size:18px;margin-bottom:16px}.admin-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.admin-gallery-grid>div{position:relative}.admin-gallery-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}.admin-gallery-grid form{position:absolute;right:6px;top:6px}.admin-gallery-grid button{border:0;border-radius:7px;background:rgba(10,17,40,.8);color:#fff;padding:6px 8px;font-size:var(--text-small);cursor:pointer}

@media(max-width:900px){.admin-editor-form{grid-template-columns:1fr}.admin-editor-side{position:static}.admin-gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.admin-page-head{align-items:flex-start;flex-direction:column}.admin-gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== ADMIN PPDB ===== */
.ppdb-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
}

.ppdb-stat{
    background:var(--white);
    border:1px solid #E5E9F1;
    border-radius:16px;
    padding:18px;
}

.ppdb-stat span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:8px;
}

.ppdb-stat strong{
    display:block;
    font-family:var(--font-number);
    font-size:26px;
    line-height:1;
    color:var(--ink);
}

.ppdb-filter{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.ppdb-filter>div{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ppdb-filter>div:first-child{
    flex:1 1 280px;
}

.ppdb-filter label{
    font-size:12px;
    font-weight:700;
    color:var(--ink);
}

.ppdb-filter input,
.ppdb-filter select{
    min-height:44px;
    border:1px solid #D9DEE8;
    border-radius:10px;
    padding:9px 12px;
    font:inherit;
    background:#fff;
}

.ppdb-filter input{
    width:100%;
}

.ppdb-filter .btn{
    min-height:44px;
    border:0;
    cursor:pointer;
}

.ppdb-reset{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:0 8px;
    font-size:13px;
    font-weight:700;
    color:var(--primary);
}

.ppdb-table{
    min-width:1050px;
}

.ppdb-table td a{
    color:var(--primary);
    font-weight:700;
}

.admin-status.ppdb-baru{
    background:#EEF1F6;
    color:#475467;
}

.admin-status.ppdb-dihubungi{
    background:#EEF4FF;
    color:#3538CD;
}

.admin-status.ppdb-verifikasi{
    background:#FFF4E5;
    color:#B54708;
}

.admin-status.ppdb-diterima{
    background:#E7F7EE;
    color:#187246;
}

.admin-status.ppdb-ditolak,
.admin-status.ppdb-batal{
    background:#FFF0F0;
    color:#B42318;
}

@media(max-width:900px){
    .ppdb-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .ppdb-stats{
        grid-template-columns:1fr 1fr;
    }

    .ppdb-filter{
        align-items:stretch;
    }

    .ppdb-filter>div,
    .ppdb-filter .btn,
    .ppdb-reset{
        width:100%;
    }

    .ppdb-reset{
        justify-content:center;
    }
}

/* ===== ADMIN PPDB DETAIL ===== */
.ppdb-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.ppdb-detail-card{
    background:var(--white);
    border:1px solid #E5E9F1;
    border-radius:18px;
    padding:22px;
}

.ppdb-detail-card h2{
    margin:4px 0 18px;
    font-family:var(--font-display);
    color:var(--ink);
}

.ppdb-detail-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}

.ppdb-status-form{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
}

.ppdb-status-form>div{
    flex:1 1 220px;
}

.ppdb-status-form label{
    display:block;
    margin-bottom:6px;
    font-size:12px;
    font-weight:700;
    color:var(--ink);
}

.ppdb-status-form select{
    width:100%;
    min-height:44px;
    padding:9px 12px;
    border:1px solid #D9DEE8;
    border-radius:10px;
    background:#fff;
    font:inherit;
}

.ppdb-detail-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    margin:0;
}

.ppdb-detail-list>div{
    padding:14px 0;
    border-bottom:1px solid #EEF1F5;
}

.ppdb-detail-list>div:nth-last-child(-n+2){
    border-bottom:0;
}

.ppdb-detail-list .full{
    grid-column:1 / -1;
}

.ppdb-detail-list dt{
    margin-bottom:5px;
    font-size:var(--text-small);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
}

.ppdb-detail-list dd{
    margin:0;
    color:var(--ink);
    line-height:1.55;
}

.ppdb-detail-list a,
.ppdb-detail-link{
    color:var(--primary);
    font-weight:700;
}

.ppdb-detail-link{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 10px;
    border:1px solid #D9DEE8;
    border-radius:8px;
    text-decoration:none;
}

@media(max-width:800px){
    .ppdb-detail-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .ppdb-detail-list{
        grid-template-columns:1fr;
    }

    .ppdb-detail-list .full{
        grid-column:auto;
    }

    .ppdb-status-form{
        align-items:stretch;
    }

    .ppdb-status-form .btn{
        width:100%;
    }
}

/* ===== ADMIN HERO BANNER ===== */
.hero-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.hero-count{display:inline-flex;align-items:center;min-height:42px;padding:0 13px;border:1px solid #DCE3EF;border-radius:10px;background:#fff;color:var(--muted);font-family:var(--font-display);font-size:12px;font-weight:700;}
.admin-btn-disabled{pointer-events:none;opacity:.58;cursor:not-allowed;user-select:none;}
.hero-admin-list{display:grid;gap:16px;}
.hero-admin-card{display:grid;grid-template-columns:48px 220px minmax(0,1fr) auto;align-items:center;gap:20px;background:var(--white);border:1px solid #E5E9F1;border-radius:18px;padding:16px 18px;}
.hero-admin-order{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--tint);color:var(--primary);font-family:var(--font-display);font-weight:800;}
.hero-admin-preview{overflow:hidden;border-radius:12px;background:#EEF1F6;}
.hero-admin-preview img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.hero-admin-content{min-width:0;}
.hero-admin-eyebrow{display:block;margin-bottom:6px;color:var(--primary);font-family:var(--font-display);font-size:var(--text-small);font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.hero-admin-content h2{font-family:var(--font-display);font-size:18px;line-height:1.35;margin-bottom:6px;}
.hero-admin-content>p{max-width:720px;color:var(--muted);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hero-admin-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:var(--text-small);}
.hero-admin-meta strong{color:var(--ink);}
.hero-admin-actions{display:flex;align-items:center;gap:12px;white-space:nowrap;}
.hero-admin-actions a,.hero-admin-actions span{font-size:12.5px;font-weight:700;}
.hero-admin-actions a{color:var(--primary);}
.hero-action-disabled{color:#98A2B3;cursor:not-allowed;}
.hero-action-disabled.danger{color:#D7A09B;}
.admin-empty-card,.admin-info-note{background:var(--white);border:1px solid #E5E9F1;border-radius:16px;padding:22px;color:var(--muted);font-size:13px;}
.admin-info-note{margin-top:18px;background:#F8FAFF;border-color:#DCE5FA;}
.admin-info-note strong{color:var(--primary);}

@media(max-width:980px){
    .hero-admin-card{grid-template-columns:42px 180px minmax(0,1fr);}
    .hero-admin-actions{grid-column:2 / -1;justify-content:flex-end;border-top:1px solid #EEF1F5;padding-top:12px;}
}

@media(max-width:720px){
    .hero-head-actions{justify-content:flex-start;}
    .hero-admin-card{grid-template-columns:38px minmax(0,1fr);gap:14px;}
    .hero-admin-preview{grid-column:2;}
    .hero-admin-content{grid-column:2;}
    .hero-admin-actions{grid-column:2;justify-content:flex-start;}
}

@media(max-width:520px){
    .hero-admin-card{padding:14px;}
    .hero-admin-preview{width:100%;}
}

/* Hero Banner — Step 8 visual polish */
.hero-admin-card{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.hero-admin-card:hover{border-color:#D6DEEC;box-shadow:0 8px 24px rgba(10,17,40,.05);transform:translateY(-1px);}
.hero-admin-actions{padding-left:8px;}
.hero-admin-actions>a{display:inline-flex;align-items:center;min-height:32px;padding:0 9px;border-radius:8px;transition:background .16s ease;}
.hero-admin-actions>a:hover{background:#F1F5FF;}
.hero-delete-button{min-height:32px;padding:0 9px!important;border-radius:8px!important;transition:background .16s ease!important;}
.hero-delete-button:hover{background:#FFF0EF;text-decoration:none!important;}
.hero-action-disabled.danger{display:inline-flex;align-items:center;min-height:32px;padding:0 9px;border-radius:8px;background:#FBF7F7;}

@media(max-width:720px){
    .hero-admin-actions{padding-left:0;gap:5px;flex-wrap:wrap;}
    .hero-admin-actions>a,.hero-delete-button,.hero-action-disabled.danger{min-height:36px;}
}

/* ===== HERO BANNER FORM — STEP 4 ===== */
.hero-editor-form{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start;}
.hero-form-main{display:grid;gap:18px;}
.hero-form-side{position:sticky;top:92px;}
.hero-form-section{background:var(--white);border:1px solid #E5E9F1;border-radius:18px;padding:22px;}
.hero-form-section h2{font-family:var(--font-display);font-size:20px;line-height:1.3;margin:2px 0 18px;}
.hero-form-section label{display:grid;gap:7px;margin-top:16px;color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:700;}
.hero-form-section label>span,.hero-form-help,.hero-current-image{color:var(--muted);font-family:var(--font-body);font-size:var(--text-small);font-weight:400;line-height:1.5;}
.hero-form-section input[type="text"],.hero-form-section input[type="file"],.hero-form-section textarea{width:100%;border:1px solid #D9E0EA;border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-family:var(--font-body);font-size:13.5px;padding:12px 13px;outline:none;transition:border-color .18s ease,box-shadow .18s ease;}
.hero-form-section textarea{resize:vertical;line-height:1.55;}
.hero-form-section input:focus,.hero-form-section textarea:focus{border-color:#92A8E6;box-shadow:0 0 0 3px rgba(18,57,145,.08);}
.hero-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.hero-cta-box{border:1px solid #E6EAF1;border-radius:14px;background:#FAFBFD;padding:16px;}
.hero-cta-box>strong{font-family:var(--font-display);font-size:13px;}
.hero-cta-box label{margin-top:12px;}
.hero-image-preview{overflow:hidden;border-radius:14px;background:#EEF1F6;border:1px solid #E1E6EE;margin:14px 0 6px;}
.hero-image-preview img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.hero-image-placeholder{display:grid;place-items:center;min-height:210px;padding:25px;text-align:center;color:var(--muted);font-size:12px;}
.hero-current-image{margin:8px 0 0;}
.hero-sort-readonly{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin-top:18px;padding:13px 14px;border-radius:12px;background:#F5F7FB;}
.hero-sort-readonly span{font-size:12px;color:var(--muted);}
.hero-sort-readonly strong{font-family:var(--font-number);font-size:20px;color:var(--primary);}
.hero-sort-readonly small{grid-column:1/-1;color:var(--muted);font-size:var(--text-small);}
.hero-image-panel .admin-save{width:100%;margin-top:18px;}

@media(max-width:980px){
    .hero-editor-form{grid-template-columns:1fr;}
    .hero-form-side{position:static;}
}
@media(max-width:640px){
    .hero-cta-grid{grid-template-columns:1fr;}
    .hero-form-section{padding:17px;}
}

/* Hero Banner — delete action (Step 5) */
.hero-admin-actions form{margin:0;display:inline-flex;}
.hero-delete-button{appearance:none;border:0;background:transparent;padding:0;color:#B42318;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
.hero-delete-button:hover{text-decoration:underline;}
.hero-delete-button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px;}


/* Hero Banner — limit states (Step 6) */
.hero-count.minimum{border-color:#F0D6A8;background:#FFF9EE;color:#8A5A00;}
.hero-count.maximum{border-color:#F0CACA;background:#FFF3F2;color:#B42318;}
.hero-limit-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:14px 16px;border:1px solid #DCE5FA;border-radius:14px;background:#F8FAFF;color:var(--muted);font-size:12.5px;line-height:1.5;}
.hero-limit-panel strong{color:var(--primary);}
.hero-limit-panel.minimum{border-color:#F0D6A8;background:#FFF9EE;}
.hero-limit-panel.minimum strong{color:#8A5A00;}
.hero-limit-panel.maximum{border-color:#F0CACA;background:#FFF3F2;}
.hero-limit-panel.maximum strong{color:#B42318;}
.hero-limit-meter{display:grid;grid-template-columns:repeat(6,22px);gap:5px;flex:0 0 auto;}
.hero-limit-meter span{height:7px;border-radius:999px;background:#E2E7EF;}
.hero-limit-meter span.filled{background:var(--primary);}
.hero-limit-panel.minimum .hero-limit-meter span.filled{background:#B7791F;}
.hero-limit-panel.maximum .hero-limit-meter span.filled{background:#B42318;}
.hero-form-limit-note{margin-bottom:18px;padding:12px 14px;border:1px solid #DCE5FA;border-radius:12px;background:#F8FAFF;color:var(--muted);font-size:12px;line-height:1.5;}
.hero-form-limit-note strong{color:var(--primary);}
@media(max-width:640px){
    .hero-limit-panel{align-items:flex-start;flex-direction:column;}
}

/* Hero Banner — ordering controls (Step 7) */
.hero-order-controls{display:inline-flex;align-items:center;gap:5px;padding-right:2px;}
.hero-order-controls form{margin:0;display:inline-flex;}
.hero-order-button{appearance:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid #D9E1EF;border-radius:8px;background:#F8FAFF;color:var(--primary);font:inherit;font-family:var(--font-display);font-size:15px;font-weight:800;line-height:1;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease;}
.hero-order-button:hover{background:#EDF2FF;border-color:#AFC0EB;transform:translateY(-1px);}
.hero-order-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.hero-order-button.disabled{background:#F5F6F8;border-color:#EAECF0;color:#C7CDD6;cursor:not-allowed;transform:none;}

@media(max-width:720px){
    .hero-order-controls{width:100%;margin-bottom:2px;}
}

/* ===== ADMIN PRESTASI SISWA ===== */
.achievement-page-head{
    align-items:flex-end;
}

.achievement-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.achievement-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
}

.achievement-stat{
    background:var(--white);
    border:1px solid #E5E9F1;
    border-radius:16px;
    padding:18px;
}

.achievement-stat span{
    display:block;
    margin-bottom:8px;
    color:var(--muted);
    font-size:12px;
}

.achievement-stat strong{
    display:block;
    font-family:var(--font-number);
    font-size:26px;
    line-height:1;
    color:var(--ink);
}

.achievement-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.achievement-filter{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex:1 1 620px;
    flex-wrap:wrap;
}

.achievement-filter>div{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.achievement-search-field{
    flex:1 1 300px;
}

.achievement-filter label{
    font-size:12px;
    font-weight:700;
    color:var(--ink);
}

.achievement-filter input,
.achievement-filter select{
    min-height:44px;
    border:1px solid #D9DEE8;
    border-radius:10px;
    padding:9px 12px;
    font:inherit;
    background:#fff;
}

.achievement-filter input{
    width:100%;
}

.achievement-filter-btn{
    min-height:44px;
    border:0;
}

.achievement-reset{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:0 6px;
    color:var(--primary);
    font-size:13px;
    font-weight:700;
}

.achievement-csv-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.achievement-secondary-btn{
    min-height:44px;
    padding:10px 15px;
    border:1px solid #D9DEE8;
    background:var(--white);
    color:var(--primary);
    font-size:12.5px;
}

.achievement-secondary-btn:hover{
    box-shadow:0 8px 20px rgba(10,17,40,.07);
}

.achievement-table{
    min-width:1040px;
}

.achievement-table th:first-child,
.achievement-table td:first-child{
    width:64px;
    text-align:center;
}

.achievement-number{
    color:var(--muted);
    font-weight:700;
}

.achievement-year-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    padding:5px 10px;
    border-radius:999px;
    background:var(--tint);
    color:var(--primary);
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
}

.achievement-level-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:88px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(247,171,31,.14);
    color:#8A5A00;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
}

.achievement-row-actions form{
    display:inline-flex;
    margin:0;
}

.achievement-info-note{
    margin-top:18px;
}

@media(max-width:900px){
    .achievement-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .achievement-toolbar{
        align-items:stretch;
    }

    .achievement-csv-actions{
        width:100%;
    }
}

@media(max-width:600px){
    .achievement-page-head{
        align-items:flex-start;
    }

    .achievement-head-actions,
    .achievement-head-actions .btn{
        width:100%;
    }

    .achievement-stats{
        grid-template-columns:1fr 1fr;
    }

    .achievement-filter{
        align-items:stretch;
    }

    .achievement-filter>div,
    .achievement-filter .btn,
    .achievement-reset{
        width:100%;
    }

    .achievement-reset{
        justify-content:center;
    }

    .achievement-csv-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .achievement-secondary-btn{
        width:100%;
    }
}

/* ===== Prestasi: tambah / edit ===== */
.achievement-form-shell{max-width:980px;}
.achievement-form-head{align-items:flex-end;}
.achievement-form-head p{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6;}
.achievement-back-link{margin-top:0;white-space:nowrap;}
.achievement-form-card{background:var(--white);border:1px solid #E5E9F1;border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(10,17,40,.04);}
.achievement-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;}
.achievement-form-card label{display:flex;flex-direction:column;gap:7px;margin-bottom:20px;color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:700;}
.achievement-form-card label>span{color:var(--muted);font-family:var(--font-body);font-size:var(--text-small);font-weight:400;line-height:1.45;}
.achievement-form-card input,.achievement-form-card select,.achievement-form-card textarea{width:100%;min-height:48px;border:1px solid #D9E0EA;border-radius:11px;background:#fff;color:var(--ink);padding:11px 13px;font-family:var(--font-body);font-size:13.5px;transition:border-color .18s ease,box-shadow .18s ease;}
.achievement-form-card input:focus,.achievement-form-card select:focus,.achievement-form-card textarea:focus{border-color:#92A8E6;box-shadow:0 0 0 3px rgba(18,57,145,.08);outline:none;}
.achievement-form-wide{grid-column:1/-1;}
.achievement-year-field{max-width:220px;}
.achievement-form-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:6px;border-top:1px solid #EEF1F6;}
.achievement-cancel-btn{background:#fff;border-color:#D9DEE8;color:var(--primary);}
.achievement-cancel-btn:hover{box-shadow:0 8px 20px rgba(10,17,40,.07);}

@media(max-width:700px){
    .achievement-form-head{align-items:flex-start;}
    .achievement-back-link{width:100%;}
    .achievement-form-card{padding:18px;}
    .achievement-form-grid{grid-template-columns:1fr;gap:0;}
    .achievement-form-wide{grid-column:auto;}
    .achievement-year-field{max-width:none;}
    .achievement-form-footer{flex-direction:column-reverse;}
    .achievement-form-footer .btn{width:100%;}
}

/* Prestasi — CSV import */
.achievement-import-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:20px;align-items:start;}
.achievement-import-card{min-width:0;}
.achievement-file-field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:700;}
.achievement-file-field input[type=file]{width:100%;min-height:54px;border:1px dashed #C9D2E2;border-radius:12px;background:#F8FAFD;padding:12px;font-family:var(--font-body);font-size:13px;cursor:pointer;}
.achievement-file-field span{color:var(--muted);font-family:var(--font-body);font-size:var(--text-small);font-weight:400;line-height:1.45;}
.achievement-import-guide{background:#F8FAFD;border:1px solid #E2E7EF;border-radius:20px;padding:24px;}
.achievement-import-guide h2{margin:5px 0 8px;font-family:var(--font-display);font-size:20px;color:var(--ink);}
.achievement-import-guide>p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.6;}
.achievement-import-guide ul{margin:18px 0;padding-left:19px;color:var(--muted);font-size:12.5px;line-height:1.65;}
.achievement-import-guide li+li{margin-top:6px;}
.achievement-import-header-code{overflow-wrap:anywhere;background:#fff;border:1px solid #DCE3EE;border-radius:10px;padding:12px;color:#34405A;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:var(--text-small);line-height:1.55;}
.achievement-import-guide .btn{width:100%;justify-content:center;}
.achievement-import-errors{margin-bottom:20px;background:#FFF5F5;border:1px solid #F0CACA;border-radius:12px;padding:16px 18px;color:#8D2A2A;font-size:12.5px;line-height:1.55;}
.achievement-import-errors strong{font-family:var(--font-display);}
.achievement-import-errors ul{margin:8px 0 0;padding-left:20px;}
.achievement-import-errors p{margin:8px 0 0;}

@media (max-width:860px){
    .achievement-import-layout{grid-template-columns:1fr;}
}

/* ===== PRESTASI ADMIN — STEP 10 POLISH ===== */
.achievement-filter input:focus-visible,.achievement-filter select:focus-visible,.achievement-secondary-btn:focus-visible,.achievement-row-actions a:focus-visible,.achievement-row-actions button:focus-visible{outline:3px solid rgba(0,42,170,.15);outline-offset:2px;}
@media(max-width:680px){
  .achievement-toolbar{gap:16px;}
  .achievement-csv-actions{grid-template-columns:1fr;}
  .achievement-secondary-btn{width:100%;justify-content:center;}
  .achievement-table{min-width:940px;}
}

/* ===== ADMIN NAVBAR + DASHBOARD ===== */
.admin-topbar{position:sticky;top:0;z-index:100;padding:0;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.admin-topbar-inner{width:min(100%,1228px);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;}
.admin-topbar-brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto;}
.admin-topbar-brand strong{font-family:var(--font-display);color:var(--primary);font-size:15px;white-space:nowrap;}
.admin-topbar-brand span{font-size:var(--text-small);color:var(--muted);white-space:nowrap;}
.admin-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0;}
.admin-nav-main{display:flex;align-items:center;gap:2px;min-width:0;}
.admin-nav-main>a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:8px 10px;border-radius:9px;color:#4F5970;font-family:var(--font-display);font-size:12.5px;font-weight:700;white-space:nowrap;transition:background .18s ease,color .18s ease;}
.admin-nav-main>a:hover{background:#F2F5FA;color:var(--primary);}
.admin-nav-main>a.active{background:var(--tint);color:var(--primary);}
.admin-nav-badge{display:inline-flex!important;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#D92D20;color:#fff!important;font-family:var(--font-display);font-size:var(--text-small)!important;font-weight:800;line-height:1;}
.admin-nav-actions{display:flex;align-items:center;gap:7px;padding-left:11px;border-left:1px solid #E8ECF3;}
.admin-action-btn{display:inline-flex;align-items:center;gap:0;min-height:38px;padding:8px 11px!important;border-radius:9px;font-family:var(--font-display);font-size:var(--text-small)!important;font-weight:700;white-space:nowrap;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.admin-action-btn:hover{transform:translateY(-1px);}
.admin-website-btn{background:#F1F4FA;color:var(--primary);}
.admin-logout-btn{background:#B42318;color:#fff!important;}
.admin-logout-btn:hover{background:#912018;color:#fff!important;box-shadow:0 8px 18px rgba(180,35,24,.18);}

.dashboard-shell{padding-top:40px;}
.dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:22px;padding:30px;border-radius:22px;background:linear-gradient(135deg,var(--primary) 0%,#001D76 100%);color:#fff;overflow:hidden;position:relative;}
.dashboard-hero:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-80px;top:-120px;border:42px solid rgba(255,255,255,.06);pointer-events:none;}
.dashboard-hero .section-eyebrow{color:var(--accent);}
.dashboard-hero h1{font-family:var(--font-display);font-size:36px;line-height:1.1;}
.dashboard-hero p{margin-top:9px;color:rgba(255,255,255,.76);font-size:14px;}
.dashboard-view-site{position:relative;z-index:1;flex:0 0 auto;background:#fff;color:var(--primary);padding:12px 18px;border:0;font-size:13px;}
.dashboard-alert{display:flex;align-items:center;gap:13px;margin-bottom:20px;padding:14px 16px;border:1px solid #F1D58A;border-radius:14px;background:#FFF9E7;color:var(--ink);}
.dashboard-alert-icon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:var(--accent);color:var(--primary-dark);font-family:var(--font-display);font-weight:800;}
.dashboard-alert>span:nth-child(2){display:flex;flex-direction:column;min-width:0;}
.dashboard-alert strong{font-family:var(--font-display);font-size:13px;}
.dashboard-alert small{color:#786827;font-size:var(--text-small);}
.dashboard-alert-arrow{margin-left:auto;color:var(--primary);font-family:var(--font-display);font-weight:800;}
.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:38px;}
.dashboard-stat-card{display:flex;flex-direction:column;min-width:0;padding:19px 20px;border:1px solid #E4E9F1;border-radius:17px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.dashboard-stat-card:hover{transform:translateY(-2px);border-color:#CBD5E6;box-shadow:0 10px 24px rgba(10,17,40,.06);}
.dashboard-stat-card>span{color:var(--muted);font-size:var(--text-small);font-weight:700;}
.dashboard-stat-card strong{margin:8px 0 5px;font-family:var(--font-number);font-size:28px;line-height:1;color:var(--ink);}
.dashboard-stat-card small{color:var(--muted);font-size:var(--text-small);}
.dashboard-section{margin-bottom:38px;}
.dashboard-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:15px;}
.dashboard-section-head .section-eyebrow,.dashboard-activity-head .section-eyebrow{margin-bottom:5px;font-size:var(--text-small);}
.dashboard-section-head h2,.dashboard-activity-head h2{font-family:var(--font-display);font-size:21px;}
.dashboard-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.dashboard-menu-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:17px;padding:23px;border:1px solid #E4E9F1;border-radius:18px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.dashboard-menu-card:hover{transform:translateY(-2px);border-color:#C8D4E8;box-shadow:0 12px 28px rgba(10,17,40,.06);}
.dashboard-menu-number{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:var(--tint);color:var(--primary);font-family:var(--font-display);font-size:var(--text-small);font-weight:800;}
.dashboard-menu-card h3{font-family:var(--font-display);font-size:16px;margin-bottom:3px;}
.dashboard-menu-card p{color:var(--muted);font-size:12px;line-height:1.55;}
.dashboard-menu-arrow{font-family:var(--font-display);font-size:18px;color:var(--primary);}
.dashboard-activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.dashboard-activity-card{min-width:0;border:1px solid #E4E9F1;border-radius:18px;background:#fff;overflow:hidden;}
.dashboard-activity-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px 21px 15px;border-bottom:1px solid #EDF0F5;}
.dashboard-activity-head>a{color:var(--primary);font-size:var(--text-small);font-weight:700;white-space:nowrap;}
.dashboard-activity-list{display:flex;flex-direction:column;}
.dashboard-activity-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 21px;border-bottom:1px solid #F0F2F6;transition:background .18s ease;}
.dashboard-activity-item:last-child{border-bottom:0;}
.dashboard-activity-item:hover{background:#FAFBFD;}
.dashboard-activity-item>div{min-width:0;}
.dashboard-activity-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:12.5px;}
.dashboard-activity-item small{display:block;margin-top:3px;color:var(--muted);font-size:var(--text-small);}
.dashboard-activity-item .admin-status{flex:0 0 auto;}
.dashboard-empty{padding:24px 21px;color:var(--muted);font-size:12px;}

@media(max-width:1080px){
    .admin-topbar-inner{align-items:flex-start;flex-direction:column;gap:8px;}
    .admin-nav{width:100%;justify-content:space-between;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;}
    .admin-nav-main{flex:0 0 auto;}
    .admin-nav-actions{flex:0 0 auto;}
}
@media(max-width:820px){
    .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    .dashboard-activity-grid{grid-template-columns:1fr;}
}
@media(max-width:680px){
    .admin-topbar-inner{padding:10px 16px;}
    .admin-topbar-brand span{display:none;}
    .admin-nav{gap:12px;}
    .admin-nav-main>a{padding:7px 9px;font-size:var(--text-small);}
    .admin-nav-actions{padding-left:8px;}
    .admin-action-btn{padding:7px 9px!important;}
    .dashboard-shell{padding:28px 16px 60px;}
    .dashboard-hero{align-items:flex-start;flex-direction:column;padding:24px;}
    .dashboard-hero h1{font-size:30px;}
    .dashboard-view-site{width:100%;}
    .dashboard-menu-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
    .dashboard-stats{grid-template-columns:1fr 1fr;gap:10px;}
    .dashboard-stat-card{padding:15px;}
    .dashboard-stat-card strong{font-size:24px;}
    .dashboard-menu-card{grid-template-columns:auto 1fr;padding:18px;}
    .dashboard-menu-arrow{display:none;}
    .dashboard-alert small{display:none;}
    .dashboard-activity-item{padding:13px 16px;}
}


/* Aksi navbar admin: text-only */
.admin-website-btn,.admin-website-btn:hover{color:var(--primary)!important;}

/* ===== TESTIMONIAL ADMIN ===== */
.testimonial-page-head{align-items:flex-end;}
.testimonial-limit-panel{margin-bottom:20px;padding:14px 16px;border:1px solid #DCE5FA;border-radius:14px;background:#F8FAFF;color:var(--muted);font-size:13px;line-height:1.55;}
.testimonial-limit-panel strong{color:var(--primary);}
.testimonial-admin-list{display:grid;gap:12px;}
.testimonial-admin-card{display:grid;grid-template-columns:42px 48px minmax(0,1fr) auto;align-items:center;gap:16px;padding:17px 18px;background:var(--white);border:1px solid #E5E9F1;border-radius:18px;}
.testimonial-admin-order{font-family:var(--font-display);font-weight:800;color:var(--muted);text-align:center;}
.testimonial-admin-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#EEF3FF;color:var(--primary);font-family:var(--font-display);font-weight:800;}
.testimonial-admin-content{min-width:0;}
.testimonial-admin-content strong{display:block;font-family:var(--font-display);font-size:15px;}
.testimonial-admin-content span{display:block;margin-top:2px;color:var(--muted);font-size:12px;}
.testimonial-admin-content p{margin:8px 0 0;color:#495266;font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.testimonial-admin-actions{display:flex;align-items:center;gap:9px;}
.testimonial-admin-actions>a,.testimonial-admin-actions button{border:0;background:none;color:var(--primary);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;padding:7px 5px;}
.testimonial-admin-actions button[disabled]{opacity:.35;cursor:not-allowed;}
.testimonial-admin-actions form{margin:0;}
.testimonial-order-actions{display:flex;gap:3px;margin-right:4px;}
.testimonial-order-actions button{width:31px;height:31px;padding:0;border:1px solid #DFE5EF;border-radius:8px;background:#fff;}
.testimonial-form-shell{max-width:900px;}
.testimonial-form-card{background:var(--white);border:1px solid #E5E9F1;border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(10,17,40,.04);}
.testimonial-form-card label{display:flex;flex-direction:column;gap:7px;margin-bottom:20px;color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:700;}
.testimonial-form-card label>span{color:var(--muted);font-family:var(--font-body);font-size:var(--text-small);font-weight:400;}
.testimonial-form-card input,.testimonial-form-card textarea{width:100%;border:1px solid #D9E0EA;border-radius:11px;background:#fff;color:var(--ink);padding:12px 13px;font-family:var(--font-body);font-size:13.5px;outline:none;}
.testimonial-form-card textarea{resize:vertical;line-height:1.6;}
.testimonial-form-card input:focus,.testimonial-form-card textarea:focus{border-color:#92A8E6;box-shadow:0 0 0 3px rgba(18,57,145,.08);}
.testimonial-form-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:6px;border-top:1px solid #EEF1F6;}
.testimonial-cancel-btn{background:#F3F5F8;color:var(--ink);}
@media(max-width:760px){.testimonial-admin-card{grid-template-columns:36px 44px minmax(0,1fr);align-items:start}.testimonial-admin-actions{grid-column:2/-1;justify-content:flex-start;flex-wrap:wrap}.testimonial-page-head{align-items:flex-start}.testimonial-form-card{padding:18px}.testimonial-form-footer{flex-direction:column-reverse}.testimonial-form-footer .btn{width:100%;}}

/* Homepage admin grouping */
.homepage-admin-head{margin-bottom:18px;}
.admin-segmented-nav{display:inline-flex;align-items:center;gap:4px;margin-bottom:24px;padding:4px;border:1px solid #E2E7EF;border-radius:12px;background:#F4F6F9;}
.admin-segmented-nav a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border-radius:9px;color:#667085;font-family:var(--font-display);font-size:12.5px;font-weight:800;text-decoration:none;transition:background .16s ease,color .16s ease,box-shadow .16s ease;}
.admin-segmented-nav a:hover{color:var(--primary);}
.admin-segmented-nav a.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(10,17,40,.07);}
.admin-segmented-nav a span{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#E7EBF2;color:#667085;font-size:var(--text-small);}
.admin-segmented-nav a.active span{background:#EEF3FF;color:var(--primary);}
.homepage-admin-section{animation:homepageAdminFade .18s ease-out;}
.homepage-section-head{margin-bottom:18px;}
.homepage-section-head h2{font-family:var(--font-display);font-size:28px;line-height:1.15;margin:4px 0 7px;}
@keyframes homepageAdminFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:620px){.admin-segmented-nav{display:flex;width:100%;}.admin-segmented-nav a{flex:1;justify-content:center;padding:0 10px;}.homepage-section-head h2{font-size:24px;}}

/* ===== WEBSITE SETTINGS ===== */
.settings-shell{max-width:1040px;}
.settings-page-head p{max-width:700px;margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.65;}
.settings-form{display:grid;gap:18px;}
.settings-card{background:var(--white);border:1px solid #E5E9F1;border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(10,17,40,.035);}
.settings-card-head{display:flex;gap:16px;align-items:flex-start;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #EEF1F6;}
.settings-index{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:10px;background:var(--tint);color:var(--primary);font-family:var(--font-number);font-size:12px;font-weight:800;}
.settings-card-head h2{margin:1px 0 6px;font-family:var(--font-display);font-size:19px;color:var(--ink);}
.settings-card-head p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55;}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px;}
.settings-grid label{display:flex;flex-direction:column;gap:7px;margin-bottom:20px;color:var(--ink);font-family:var(--font-display);font-size:12.5px;font-weight:700;}
.settings-grid label>span{color:var(--muted);font-family:var(--font-body);font-size:var(--text-small);font-weight:400;line-height:1.45;}
.settings-grid input,.settings-grid textarea{width:100%;border:1px solid #D9E0EA;border-radius:11px;background:#fff;color:var(--ink);padding:11px 13px;font-family:var(--font-body);font-size:13.5px;line-height:1.55;transition:border-color .18s ease,box-shadow .18s ease;}
.settings-grid input{min-height:48px;}
.settings-grid textarea{resize:vertical;min-height:92px;}
.settings-grid input:focus,.settings-grid textarea:focus{border-color:#92A8E6;box-shadow:0 0 0 3px rgba(18,57,145,.08);outline:none;}
.settings-wide{grid-column:1/-1;}
.settings-actions{position:sticky;bottom:14px;z-index:10;display:flex;justify-content:flex-end;gap:10px;padding:14px;border:1px solid #E2E7EF;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 12px 35px rgba(10,17,40,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.settings-preview-btn{background:#fff;border-color:#D9DEE8;color:var(--primary);}
@media(max-width:700px){
  .settings-card{padding:20px 18px;}
  .settings-grid{grid-template-columns:1fr;gap:0;}
  .settings-wide{grid-column:auto;}
  .settings-actions{position:static;display:grid;grid-template-columns:1fr;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;}
  .settings-actions .btn{width:100%;justify-content:center;}
}


/* ===== MULTI ADMIN + AUDIT LOG ===== */
.admin-current-user{display:inline-flex;align-items:center;padding:0 10px;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.multiadmin-card{background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:24px;margin-bottom:24px}
.multiadmin-card h2{font-family:var(--font-display);margin:0 0 18px;font-size:20px}
.multiadmin-create-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:14px;align-items:end}
.multiadmin-create-form label,.audit-filter label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.multiadmin-create-form input,.multiadmin-create-form select,.audit-filter input,.audit-filter select,.multiadmin-reset input{width:100%;min-height:42px;border:1px solid #d9dee8;border-radius:10px;padding:9px 11px;background:#fff;font:inherit}
.multiadmin-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.multiadmin-actions summary,.audit-detail summary{cursor:pointer;font-weight:700}
.multiadmin-reset{display:flex;gap:8px;margin-top:8px;min-width:260px}
.audit-filter{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr auto;gap:12px;align-items:end;background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:18px;margin-bottom:22px}
.audit-filter-actions{display:flex;gap:8px}
.audit-table{min-width:1100px}.audit-table td{vertical-align:top}.audit-time{white-space:nowrap}
.audit-action{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eef4ff;color:#1849a9;font-size:var(--text-small);font-weight:800;letter-spacing:.04em}
.audit-detail pre{max-width:430px;max-height:260px;overflow:auto;margin:8px 0 14px;padding:12px;border-radius:9px;background:#f7f8fc;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
@media(max-width:1100px){.multiadmin-create-form{grid-template-columns:repeat(2,minmax(0,1fr))}.audit-filter{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.multiadmin-create-form,.audit-filter{grid-template-columns:1fr}.admin-current-user{padding:8px 0}}

.audit-detail strong{display:block;margin-top:10px;font-size:var(--text-small);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}


/* =========================================================
   ADMIN DESKTOP SIDEBAR
   Source base: baitulamar(20260827-061741)
   ========================================================= */

:root{
    --admin-sidebar-width: 286px;
    --admin-sidebar-bg: #ffffff;
    --admin-sidebar-border: #e7e9ee;
    --admin-sidebar-text: #273142;
    --admin-sidebar-muted: #8a94a6;
    --admin-sidebar-active: #0e4d13;
    --admin-sidebar-active-bg: #eef7ef;
}

/* Desktop-only gate */
.admin-desktop-lock{
    display:none;
}

.admin-desktop-app{
    min-height:100vh;
}

.admin-main-column{
    min-height:100vh;
}

.admin-with-sidebar .admin-main-column{
    margin-left:var(--admin-sidebar-width);
}

/* Sidebar */
.admin-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--admin-sidebar-width);
    z-index:100;
    background:var(--admin-sidebar-bg);
    border-right:1px solid var(--admin-sidebar-border);
}

.admin-sidebar-inner{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:22px 18px 18px;
    overflow-y:auto;
}

.admin-sidebar-top{
    min-height:0;
}

.admin-sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:3px 8px 18px;
    color:inherit;
    text-decoration:none;
}

.admin-sidebar-brand-mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    font-family:var(--font-display);
    font-size:14px;
    font-weight:800;
    letter-spacing:.04em;
}

.admin-sidebar-brand strong,
.admin-sidebar-brand small{
    display:block;
}

.admin-sidebar-brand strong{
    font-family:var(--font-display);
    font-size:14px;
    line-height:1.25;
}

.admin-sidebar-brand small{
    margin-top:3px;
    color:var(--admin-sidebar-muted);
    font-size:var(--text-small);
    font-weight:600;
}

.admin-sidebar-user{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 6px 20px;
    padding:12px;
    border:1px solid #eceef2;
    border-radius:13px;
    background:#fafbfc;
}

.admin-sidebar-avatar{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    background:#e7f2e8;
    color:var(--primary);
    font-size:12px;
    font-weight:800;
}

.admin-sidebar-user-copy{
    min-width:0;
}

.admin-sidebar-user-copy strong,
.admin-sidebar-user-copy small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-sidebar-user-copy strong{
    font-size:12px;
    color:#202938;
}

.admin-sidebar-user-copy small{
    margin-top:2px;
    color:var(--admin-sidebar-muted);
    font-size:var(--text-small);
    font-weight:600;
}

.admin-sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.admin-nav-group{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.admin-nav-eyebrow{
    display:block;
    padding:0 10px 7px;
    color:#9aa3b2;
    font-size:var(--text-small);
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.admin-side-link{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 11px;
    border-radius:10px;
    color:var(--admin-sidebar-text);
    text-decoration:none;
    font-size:12px;
    font-weight:650;
    transition:background-color .16s ease,color .16s ease;
}

a.admin-side-link:hover{
    background:#f5f7f8;
    color:#111827;
}

.admin-side-link.active{
    background:var(--admin-sidebar-active-bg);
    color:var(--admin-sidebar-active);
    font-weight:800;
}

.admin-side-link.disabled{
    cursor:not-allowed;
    color:#b1b7c1;
    background:transparent;
    user-select:none;
}

.admin-side-link.disabled small{
    padding:3px 6px;
    border-radius:999px;
    background:#f2f3f5;
    color:#a1a8b3;
    font-size:8px;
    line-height:1;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.admin-sidebar-badge{
    min-width:23px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    border-radius:999px;
    background:#f7ab1f;
    color:#27320a;
    font-size:var(--text-small);
    font-weight:800;
}

.admin-sidebar-bottom{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:20px;
    margin-top:24px;
    border-top:1px solid #eceef2;
}

.admin-sidebar-action{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    border-radius:10px;
    text-decoration:none;
    font-size:var(--text-small);
    font-weight:750;
}

.admin-sidebar-website{
    color:#344054;
    background:#f5f6f8;
}

.admin-sidebar-website:hover{
    background:#eceef2;
}

.admin-sidebar-logout{
    color:#b42318;
    background:#fff4f2;
}

.admin-sidebar-logout:hover{
    background:#fee4e2;
}

.admin-logout-form{margin:0;}
.admin-logout-form .admin-sidebar-action{width:100%;border:0;font:inherit;cursor:pointer;}

/* Remove legacy topbar footprint when sidebar is active */
.admin-with-sidebar .admin-topbar{
    display:none !important;
}

/* Main content sizing */
.admin-with-sidebar .admin-shell{
    width:auto;
    max-width:none;
    margin:0;
    padding-left:clamp(30px,3.2vw,54px);
    padding-right:clamp(30px,3.2vw,54px);
}

.admin-with-sidebar .dashboard-shell{
    max-width:1480px;
}

.admin-with-sidebar .admin-page-head,
.admin-with-sidebar .dashboard-hero{
    padding-top:34px;
}

/* Avoid very wide text/forms on big desktop screens */
.admin-with-sidebar .settings-shell,
.admin-with-sidebar .testimonial-form-shell{
    max-width:1320px;
}

/* Desktop layout breathing room */
@media (min-width:1100px) and (max-width:1280px){
    :root{--admin-sidebar-width:260px}

    .admin-sidebar-inner{
        padding-left:14px;
        padding-right:14px;
    }

    .admin-side-link{
        font-size:var(--text-small);
    }
}


/* =========================================================
   SIDEBAR OVERLAP FIX + DASHBOARD REFINEMENT
   ========================================================= */

/* Pastikan area menu punya ruang cukup untuk footer action sidebar */
.admin-sidebar-inner{
    overflow:hidden;
}

.admin-sidebar-top{
    display:flex;
    flex-direction:column;
    min-height:0;
    flex:1 1 auto;
}

.admin-sidebar-nav{
    min-height:0;
    overflow-y:auto;
    padding-right:4px;
    padding-bottom:24px;
    scrollbar-width:thin;
}

.admin-sidebar-nav::-webkit-scrollbar{
    width:6px;
}

.admin-sidebar-nav::-webkit-scrollbar-thumb{
    background:#d9dde4;
    border-radius:999px;
}

.admin-sidebar-bottom{
    flex:0 0 auto;
    position:relative;
    z-index:2;
    background:var(--admin-sidebar-bg);
    padding-bottom:2px;
}

/* Dashboard lebih operasional */
.dashboard-operational-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px;
}

.dashboard-metric-card{
    background:#fff;
    border:1px solid #e8ebef;
    border-radius:16px;
    padding:18px;
}

.dashboard-metric-card small{
    display:block;
    color:#8a94a6;
    font-size:var(--text-small);
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.dashboard-metric-card strong{
    display:block;
    margin-top:7px;
    font-family:var(--font-display);
    font-size:28px;
    line-height:1;
}

.dashboard-metric-card span{
    display:block;
    margin-top:7px;
    color:#667085;
    font-size:var(--text-small);
    line-height:1.5;
}

.dashboard-two-column{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:20px;
    align-items:start;
}

.dashboard-panel{
    background:#fff;
    border:1px solid #e8ebef;
    border-radius:16px;
    padding:20px;
}

.dashboard-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.dashboard-panel-head h2{
    margin:3px 0 0;
    font-family:var(--font-display);
    font-size:18px;
}

.dashboard-panel-head p{
    margin:5px 0 0;
    color:#667085;
    font-size:var(--text-small);
    line-height:1.6;
}

.dashboard-activity-list{
    display:flex;
    flex-direction:column;
}

.dashboard-activity-item{
    display:grid;
    grid-template-columns:110px 140px minmax(0,1fr);
    gap:14px;
    padding:12px 0;
    border-top:1px solid #eef0f3;
    font-size:var(--text-small);
}

.dashboard-activity-item:first-child{
    border-top:0;
}

.dashboard-activity-item time{
    color:#8a94a6;
    white-space:nowrap;
}

.dashboard-activity-item strong{
    color:#253041;
}

.dashboard-activity-item span{
    color:#5f6b7a;
    min-width:0;
}

.dashboard-empty{
    padding:18px 0;
    color:#8a94a6;
    font-size:12px;
}

.dashboard-alert-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.dashboard-alert-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 13px;
    border-radius:12px;
    background:#f8f9fb;
    text-decoration:none;
    color:#344054;
}

.dashboard-alert-item strong{
    display:block;
    font-size:var(--text-small);
}

.dashboard-alert-item small{
    display:block;
    margin-top:3px;
    color:#8a94a6;
    font-size:var(--text-small);
}

.dashboard-alert-count{
    min-width:28px;
    height:24px;
    display:grid;
    place-items:center;
    padding:0 7px;
    border-radius:999px;
    background:#eef7ef;
    color:#0e4d13;
    font-size:var(--text-small);
    font-weight:800;
}

.dashboard-quick-note{
    margin-top:14px;
    padding:13px;
    border:1px dashed #d9dee7;
    border-radius:12px;
    color:#667085;
    font-size:var(--text-small);
    line-height:1.6;
}

@media(max-width:1280px){
    .dashboard-operational-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

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


/* =========================================================
   ADMIN UI CORRECTION
   - Reuse existing brand blue only
   - Restore previous active-state shape
   - Equalize Prestasi controls
   ========================================================= */

/* Eyebrow sidebar = eyebrow halaman */
.admin-nav-eyebrow,
.admin-with-sidebar .section-eyebrow{
    color:var(--primary);
}

/*
 * Active navigation:
 * same shape/treatment as sidebar version before the previous polish;
 * only the colors are changed to the existing Baitul Amar blue palette.
 */
.admin-side-link.active{
    background:var(--tint);
    color:var(--primary);
    font-weight:800;
    box-shadow:none;
}

a.admin-side-link:hover{
    background:#F5F7FB;
    color:var(--primary);
}

/* Existing Baitul Amar brand blue, no new color token */
.admin-sidebar-website{
    background:var(--primary);
    color:var(--white);
}

.admin-sidebar-website:hover{
    background:var(--primary-dark);
    color:var(--white);
}

/* =========================================================
   PRESTASI — FILTER / ACTION ALIGNMENT
   Actual selectors from admin/prestasi.php
   ========================================================= */

.achievement-filter{
    align-items:flex-end;
}

/* Search, Tahun, Tingkat use exactly the same control height */
.achievement-filter input,
.achievement-filter select{
    height:48px;
    min-height:48px;
    padding-top:0;
    padding-bottom:0;
}

/* Filter button: same physical height as inputs/selects */
.achievement-filter .achievement-filter-btn{
    height:48px;
    min-height:48px;
    padding:0 24px;
    align-self:flex-end;
    line-height:1;
}

/* Keep Reset aligned when it appears */
.achievement-filter .achievement-reset{
    height:48px;
    min-height:48px;
    align-items:center;
}

/* CSV actions use the same vertical rhythm as filter controls */
.achievement-csv-actions{
    align-items:flex-end;
}

.achievement-csv-actions .achievement-secondary-btn{
    height:48px;
    min-height:48px;
    padding-top:0;
    padding-bottom:0;
}

/* Avoid generic .btn hover movement from making toolbar look misaligned */
.achievement-toolbar .btn:hover{
    transform:none;
}


/* =========================================================
   UNIFIED ADMIN FILTER / ACTION TOOLBAR
   PPDB + PRESTASI + reusable for other panels
   ========================================================= */

:root{
    --admin-toolbar-control-height:48px;
}

/* Every filter toolbar uses the same vertical rhythm */
.admin-filter-toolbar{
    align-items:flex-end;
    gap:12px;
}

/* Inputs + selects: exact same outer height */
.admin-filter-toolbar input,
.admin-filter-toolbar select{
    height:var(--admin-toolbar-control-height) !important;
    min-height:var(--admin-toolbar-control-height) !important;
    box-sizing:border-box;
    margin:0;
}

/* Unified select appearance, including arrow spacing */
.admin-body select{
    height:var(--admin-toolbar-control-height);
    min-height:var(--admin-toolbar-control-height);
    box-sizing:border-box;
    appearance:none;
    -webkit-appearance:none;
    padding:0 50px 0 14px;
    border:1px solid #D9DEE8;
    border-radius:10px;
    background-color:var(--white);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:16px 16px;
    color:var(--ink);
    font:inherit;
    line-height:1;
}

/* Same focus treatment throughout admin */
.admin-body select:focus,
.admin-body input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--tint);
}

/* All action buttons that sit beside a filter have identical geometry */
.admin-toolbar-primary,
.admin-toolbar-secondary,
.ppdb-filter .btn,
.achievement-filter .btn,
.achievement-csv-actions .btn{
    height:var(--admin-toolbar-control-height) !important;
    min-height:var(--admin-toolbar-control-height) !important;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0 18px;
    border-radius:10px;
    line-height:1;
    white-space:nowrap;
}

/* Primary = filtering action, existing yellow accent */
.admin-toolbar-primary{
    border:0;
}

/* Secondary = file/data actions; same style across panels */
.admin-toolbar-secondary,
.ppdb-export-btn,
.achievement-secondary-btn{
    height:var(--admin-toolbar-control-height) !important;
    min-height:var(--admin-toolbar-control-height) !important;
    padding:0 18px !important;
    border:1px solid #D9DEE8 !important;
    border-radius:10px !important;
    background:var(--white) !important;
    color:var(--primary) !important;
    box-shadow:none;
    font-weight:700;
}

.admin-toolbar-secondary:hover,
.ppdb-export-btn:hover,
.achievement-secondary-btn:hover{
    border-color:var(--primary) !important;
    background:var(--tint) !important;
    color:var(--primary) !important;
    transform:none;
}

/* PPDB — make search/status/filter/export visually one system */
.ppdb-filter{
    align-items:flex-end !important;
}

.ppdb-filter > div{
    gap:7px;
}

.ppdb-filter input,
.ppdb-filter select,
.ppdb-filter .btn,
.ppdb-filter .ppdb-export-btn{
    height:var(--admin-toolbar-control-height) !important;
    min-height:var(--admin-toolbar-control-height) !important;
}

/* Prestasi — same system as PPDB */
.achievement-toolbar{
    align-items:flex-end;
    gap:12px;
}

.achievement-filter{
    align-items:flex-end !important;
    gap:12px;
}

.achievement-filter > div{
    gap:7px;
}

.achievement-filter input,
.achievement-filter select,
.achievement-filter .achievement-filter-btn,
.achievement-secondary-btn{
    height:var(--admin-toolbar-control-height) !important;
    min-height:var(--admin-toolbar-control-height) !important;
}

.achievement-csv-actions{
    display:flex;
    align-items:flex-end;
    gap:10px;
}

/* Keep labels identical across panels */
.ppdb-filter label,
.achievement-filter label{
    margin:0;
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    color:var(--ink);
}

/* Reset links should not distort toolbar control height */
.ppdb-reset,
.achievement-reset{
    min-height:var(--admin-toolbar-control-height);
    display:inline-flex;
    align-items:center;
}

/* Desktop toolbar should stay on a clean baseline */
@media(min-width:1100px){
    .ppdb-filter,
    .achievement-toolbar{
        flex-wrap:nowrap;
    }

    .ppdb-filter > div:first-child,
    .achievement-search-field{
        min-width:0;
    }
}


/* =========================================================
   ACTIVITY LOG + ADMIN USER CONTROL CONSISTENCY
   ========================================================= */

/* Riwayat Aktivitas */
.audit-filter{
    align-items:flex-end;
    gap:12px;
}

.audit-filter label{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:0;
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    color:var(--ink);
}

.audit-filter input,
.audit-filter select,
.audit-filter .btn{
    height:var(--admin-toolbar-control-height) !important;
    min-height:var(--admin-toolbar-control-height) !important;
    box-sizing:border-box;
    margin:0;
}

.audit-filter-actions{
    display:flex;
    align-items:flex-end;
    gap:10px;
}

.audit-filter-actions .btn{
    padding:0 18px;
    border-radius:10px;
}

/* Admin User — same control geometry */
.multiadmin-create-form{
    align-items:flex-end;
    gap:12px;
}

.multiadmin-create-form label{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:0;
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    color:var(--ink);
}

.multiadmin-create-form input,
.multiadmin-create-form select,
.multiadmin-create-form .btn{
    height:var(--admin-toolbar-control-height) !important;
    min-height:var(--admin-toolbar-control-height) !important;
    box-sizing:border-box;
    margin:0;
}

.multiadmin-create-form input{
    padding-top:0;
    padding-bottom:0;
}

.multiadmin-create-form .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:10px;
    line-height:1;
    white-space:nowrap;
}

/* Inline admin actions */
.multiadmin-reset{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
}

.multiadmin-reset input,
.admin-inline-action{
    height:42px;
    min-height:42px;
    box-sizing:border-box;
}

.admin-inline-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border:1px solid #D9DEE8;
    border-radius:9px;
    background:var(--white);
    color:var(--primary);
    font:inherit;
    font-size:var(--text-small);
    font-weight:700;
    cursor:pointer;
}

.admin-inline-action:hover{
    border-color:var(--primary);
    background:var(--tint);
}

/* Make generic selects in Admin User match global select rhythm */
.multiadmin-create-form select{
    padding-right:50px;
    background-position:right 16px center;
}

/* Sidebar navigation remains where user left it */
.admin-sidebar-nav{
    overscroll-behavior:contain;
    scroll-behavior:auto;
}


/* Prestasi — regu dan multiple pembimbing */
.achievement-form-card textarea{width:100%;min-height:112px;resize:vertical;border:1px solid #D9E0EA;border-radius:11px;background:#fff;color:var(--ink);padding:11px 13px;font-family:var(--font-body);font-size:13.5px;line-height:1.55;transition:border-color .18s ease,box-shadow .18s ease;}
.achievement-name-list{margin:0;padding:0;list-style:none;line-height:1.45;}
.achievement-name-list li+li{margin-top:4px;}
.achievement-name-list li:not(:only-child){position:relative;padding-left:11px;}
.achievement-name-list li:not(:only-child)::before{content:"";position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:#AAB3C3;}

/* Prestasi: identitas pembimbing terhubung ke tabel people */
.achievement-teacher-list{display:flex;flex-direction:column;gap:6px;}
.achievement-teacher-item{display:flex;align-items:center;gap:8px;}
.achievement-teacher-avatar{width:28px;height:28px;flex:0 0 28px;border-radius:50%;object-fit:cover;background:#EEF2F7;border:1px solid #E2E7EF;}
.achievement-teacher-initial{display:inline-flex;align-items:center;justify-content:center;color:#526070;font-size:var(--text-small);font-weight:800;letter-spacing:.03em;}


/* Prestasi admin — samakan alignment dengan list Prestasi publik */
.achievement-table tbody td{
    vertical-align:top;
}

.achievement-name-list li{
    display:flex;
    align-items:flex-start;
    gap:7px;
}

.achievement-name-list li:not(:only-child){
    padding-left:0;
}

.achievement-name-list li:not(:only-child)::before{
    display:none;
}

.achievement-name-list-numbered .achievement-person-index{
    display:inline-flex;
    flex:0 0 18px;
    width:18px;
    justify-content:flex-end;
    color:var(--muted);
    font-weight:700;
    line-height:1.45;
}

.achievement-teacher-item{
    align-items:flex-start;
}

.achievement-teacher-avatar{
    margin-top:0;
}

.achievement-teacher-list .achievement-person-index{
    min-height:28px;
    align-items:center;
    line-height:1;
}

.achievement-teacher-list .achievement-person-name{
    padding-top:4px;
    line-height:1.45;
}

/* Avatar fallback harus center persis seperti avatar foto */
.achievement-teacher-list .achievement-teacher-initial{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    min-width:28px;
    flex:0 0 28px;
    margin:0;
    padding:0;
    line-height:1;
    text-align:center;
}


/* =========================================================
   MODUL ABSENSI GURU
   ========================================================= */

/* =========================================================
   STEP 4 — PANEL ADMIN ABSENSI GURU
   Tambahkan isi file ini ke CSS admin utama setelah testing.
   ========================================================= */

.attendance-admin-shell{display:grid;gap:24px}
.attendance-admin-shell .admin-page-head{margin-bottom:0}
.attendance-date-filter{display:flex;align-items:end;gap:8px;flex-wrap:wrap}
.attendance-date-filter label{display:flex;flex-direction:column;gap:6px;font-size:var(--text-small);font-weight:800;color:var(--muted,#667085);text-transform:uppercase;letter-spacing:.05em}
.attendance-date-filter input,
.attendance-date-filter button,
.attendance-date-filter a{height:42px;border-radius:9px;font:inherit;font-size:12.5px}
.attendance-date-filter input{border:1px solid #d9dee8;background:#fff;padding:0 11px;color:#172033}
.attendance-date-filter button{border:0;background:var(--primary,var(--primary));color:#fff;padding:0 15px;font-weight:800;cursor:pointer}
.attendance-date-filter a{display:inline-flex;align-items:center;text-decoration:none;padding:0 12px;border:1px solid #d9dee8;background:#fff;color:var(--primary,var(--primary));font-weight:800}

.attendance-admin-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.attendance-admin-stats article{background:#fff;border:1px solid #e5e9f1;border-radius:14px;padding:18px}
.attendance-admin-stats span{display:block;font-size:var(--text-small);color:#667085;margin-bottom:8px}
.attendance-admin-stats strong{display:block;font-size:27px;line-height:1;font-family:var(--font-body,"Plus Jakarta Sans",sans-serif)}
.attendance-admin-stats small{display:block;margin-top:7px;color:#8a93a3;font-size:var(--text-small)}

.attendance-admin-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:18px}
.attendance-admin-card{background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:24px}
.attendance-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.attendance-card-head h2{margin:0;font-size:19px;font-family:var(--font-display,"Raleway",sans-serif)}
.attendance-card-head .section-eyebrow{margin-bottom:5px}
.attendance-qr-layout{display:grid;grid-template-columns:244px 1fr;align-items:center;gap:25px}
.attendance-admin-qr{width:244px;height:244px;padding:12px;display:grid;place-items:center;border:1px solid #edf0f5;background:#fff}
.attendance-admin-qr img,.attendance-admin-qr canvas{max-width:100%;height:auto}
.attendance-qr-meta>span{display:block;font-size:var(--text-small);text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:#667085}
.attendance-qr-meta>strong{display:block;font-size:30px;margin:6px 0 10px}
.attendance-qr-meta p{font-size:12.5px;line-height:1.6;color:#667085;margin:0 0 15px}
.attendance-test-scan{font-size:12px;font-weight:800;color:var(--primary,var(--primary));text-decoration:none}

.attendance-config-list{margin:0}
.attendance-config-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #edf0f5}
.attendance-config-list>div:first-child{padding-top:0}
.attendance-config-list>div:last-child{border-bottom:0;padding-bottom:0}
.attendance-config-list dt{font-size:12px;color:#667085}
.attendance-config-list dd{margin:0;font-size:12.5px;font-weight:800}

.attendance-status-pill{display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border-radius:999px;font-size:var(--text-small);font-weight:800;white-space:nowrap}
.attendance-status-pill.is-present{background:#e9f8f0;color:#17623d}
.attendance-status-pill.is-late{background:#fff4df;color:#986a10}
.attendance-status-pill.is-excused{background:#eaf1ff;color:#2455aa}
.attendance-status-pill.is-absent{background:#fff0f0;color:#9d2929}
.attendance-status-pill.is-pending{background:#eef1f6;color:#667085}

.attendance-list-card{padding:0;overflow:hidden}
.attendance-list-head{padding:22px 24px;margin-bottom:0;border-bottom:1px solid #edf0f5}
.attendance-list-count{font-size:var(--text-small);color:#667085}
.attendance-table-wrap{overflow:auto}
.attendance-table{width:100%;border-collapse:collapse;min-width:850px}
.attendance-table th,.attendance-table td{padding:15px 18px;text-align:left;border-bottom:1px solid #edf0f5;font-size:12.5px;vertical-align:middle}
.attendance-table th{background:#fafbfd;color:#667085;text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-small);font-weight:800}
.attendance-table td strong{display:block;font-family:var(--font-display,"Raleway",sans-serif);font-size:12.5px}
.attendance-table td small{display:block;margin-top:3px;font-size:var(--text-small);color:#8a93a3}
.attendance-table tbody tr:last-child td{border-bottom:0}
.attendance-note{max-width:220px;color:#667085}
.attendance-empty{text-align:center!important;padding:36px!important;color:#667085}
.attendance-history-note{padding:14px 16px;background:#eef4ff;border:1px solid #dbe7ff;border-radius:12px;font-size:12px;color:#42526b}

@media(max-width:1050px){
    .attendance-admin-stats{grid-template-columns:repeat(3,1fr)}
    .attendance-admin-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
    .attendance-admin-stats{grid-template-columns:repeat(2,1fr)}
    .attendance-page-head{align-items:flex-start!important;flex-direction:column}
    .attendance-date-filter{width:100%}
    .attendance-date-filter label{flex:1}
    .attendance-date-filter input{width:100%}
    .attendance-qr-layout{grid-template-columns:1fr}
    .attendance-admin-qr{margin:0 auto}
}


/* STEP 5 — MANAJEMEN AKUN GURU */
.teacher-account-shell,.teacher-account-form-shell{display:grid;gap:22px}
.teacher-account-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.teacher-secondary-btn{background:#fff!important;border:1px solid #d9dee8!important;color:var(--primary,var(--primary))!important}
.teacher-account-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.teacher-account-stats article{background:#fff;border:1px solid #e5e9f1;border-radius:14px;padding:18px}
.teacher-account-stats span{display:block;font-size:var(--text-small);color:#667085;margin-bottom:8px}
.teacher-account-stats strong{display:block;font-size:27px;line-height:1}
.teacher-account-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.teacher-account-filter input,.teacher-account-filter select{height:42px;border:1px solid #d9dee8;border-radius:9px;background:#fff;padding:0 11px;font:inherit;font-size:12.5px}
.teacher-account-filter input{width:min(100%,330px)}
.teacher-account-filter select{min-width:180px}
.teacher-account-filter .btn{height:42px}
.teacher-filter-reset{font-size:12px;font-weight:800;color:var(--primary,var(--primary));padding:8px;text-decoration:none}
.teacher-account-table{min-width:950px!important}
.teacher-username{font-family:var(--font-body,"Plus Jakarta Sans",sans-serif)!important}
.teacher-muted{color:#8a93a3;font-size:12px}
.admin-status.teacher-active{background:#e7f7ee;color:#187246}
.admin-status.teacher-inactive{background:#fff0f0;color:#9d2929}
.admin-status.teacher-unregistered{background:#eef1f6;color:#667085}
.teacher-actions{flex-wrap:wrap;row-gap:7px}
.teacher-actions form{margin:0}
.teacher-actions button.teacher-disable{color:#b42318}
.teacher-actions button.teacher-enable{color:#187246}
.teacher-account-footnote{font-size:var(--text-small);color:#667085;line-height:1.7;margin:0}
.teacher-form-card{max-width:760px;background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:26px;display:grid;gap:19px}
.teacher-form-card label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}
.teacher-form-card input[type=text],.teacher-form-card input[type=password],.teacher-form-card select{width:100%;min-height:46px;border:1px solid #d9dee8;border-radius:11px;padding:10px 12px;font:inherit;background:#fff}
.teacher-form-card label>span:not(.teacher-checkbox span){font-size:var(--text-small);font-weight:400;color:#667085}
.teacher-password-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.teacher-checkbox{flex-direction:row!important;align-items:flex-start!important;gap:10px!important;padding:15px;border:1px solid #e5e9f1;border-radius:12px;background:#fafbfd}
.teacher-checkbox input{margin-top:3px}
.teacher-checkbox>span{display:block}
.teacher-checkbox strong{display:block;font-size:12.5px}
.teacher-checkbox small{display:block;margin-top:3px;color:#667085;font-weight:400;line-height:1.5}
.teacher-form-info,.teacher-form-warning{padding:13px 15px;border-radius:10px;font-size:12px;line-height:1.6}
.teacher-form-info{background:#eef4ff;border:1px solid #dbe7ff;color:#42526b}
.teacher-form-warning{background:#fff8e9;border:1px solid #f0dfb6;color:#7b5d1d}
.teacher-form-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:3px}
.teacher-password-card{max-width:600px}
@media(max-width:800px){
    .teacher-account-stats{grid-template-columns:repeat(2,1fr)}
    .teacher-account-head{align-items:flex-start!important;flex-direction:column}
    .teacher-password-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
    .teacher-account-filter input,.teacher-account-filter select{width:100%;max-width:none}
    .teacher-account-filter .btn{flex:1}
    .teacher-form-card{padding:20px}
}

/* =========================================================
   ABSENSI GURU — INTERNAL SEGMENTED NAVIGATION
   TEMPEL DI PALING BAWAH assets/css/admin.css
   ========================================================= */

.attendance-segmented{
    display:inline-flex;
    align-items:center;
    gap:4px;
    width:max-content;
    max-width:100%;
    padding:4px;
    border:1px solid #dfe4ec;
    border-radius:12px;
    background:#f5f7fa;
}

.attendance-segmented a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    color:#667085;
    white-space:nowrap;
    transition:none;
}

.attendance-segmented a:hover{
    color:var(--primary);
    background:#fff;
}

.attendance-segmented a.is-active{
    color:#fff;
    background:var(--primary);
    box-shadow:none;
}

.attendance-segmented a.is-active:hover{
    color:#fff;
    background:var(--primary);
}

@media(max-width:600px){
    .attendance-segmented{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }

    .attendance-segmented a{
        width:100%;
        padding:0 10px;
    }
}



/* =========================================================
   ABSENSI GURU — PENGATURAN
   ========================================================= */
.attendance-settings-shell{display:grid;gap:24px}
.attendance-settings-shell .admin-page-head{margin-bottom:0}
.attendance-settings-card{background:#fff;border:1px solid #e5e9f1;border-radius:18px;overflow:hidden}
.attendance-setting-section{padding:24px;border-bottom:1px solid #edf0f5}
.attendance-setting-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}
.attendance-setting-section-head h2{margin:0;font-size:19px}
.attendance-setting-section-head p{margin:6px 0 0;color:#667085;font-size:12px;line-height:1.6}
.attendance-setting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.attendance-setting-grid>label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:700}
.attendance-setting-grid input[type=time],.attendance-setting-grid input[type=number]{width:100%;height:44px;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:0 11px;font:inherit;color:#172033}
.attendance-setting-grid>label>span{font-size:var(--text-small);font-weight:400;color:#7b8494;line-height:1.45}
.attendance-number-field{display:flex;align-items:center;border:1px solid #d9dee8;border-radius:10px;overflow:hidden;background:#fff}
.attendance-number-field input[type=number]{border:0;border-radius:0;min-width:0}
.attendance-number-field>span{padding:0 12px;color:#667085;font-size:var(--text-small);border-left:1px solid #edf0f5;white-space:nowrap}
.attendance-locked-field{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;border:1px solid #e1e5ec;border-radius:10px;background:#f7f8fa}
.attendance-locked-field strong{font-size:12.5px}
.attendance-locked-field span{font-size:var(--text-small);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8a93a3}
.attendance-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.attendance-toggle input{position:absolute;opacity:0;pointer-events:none}
.attendance-toggle-track{position:relative;width:42px;height:24px;border-radius:999px;background:#cbd2dd;transition:.15s ease}
.attendance-toggle-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16);transition:.15s ease}
.attendance-toggle input:checked+.attendance-toggle-track{background:var(--primary)}
.attendance-toggle input:checked+.attendance-toggle-track::after{transform:translateX(18px)}
.attendance-toggle-label{font-size:12px;font-weight:800}
.attendance-settings-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:20px 24px;background:#fafbfd}
@media(max-width:1050px){.attendance-setting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.attendance-setting-grid{grid-template-columns:1fr}.attendance-setting-section-head{flex-direction:column}}

/* =========================================================
   ABSENSI GURU — REKAP BULANAN
   ========================================================= */
.attendance-recap-shell{display:grid;gap:24px}
.attendance-recap-head{margin-bottom:0}
.attendance-recap-filter{display:flex;align-items:end;gap:9px;flex-wrap:wrap;background:#fff;border:1px solid #e5e9f1;border-radius:14px;padding:16px}
.attendance-recap-filter label{display:flex;flex-direction:column;gap:6px;font-size:var(--text-small);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#667085}
.attendance-recap-filter input,.attendance-recap-filter select{height:42px;border:1px solid #d9dee8;border-radius:9px;background:#fff;padding:0 11px;font:inherit;font-size:12.5px;color:#172033;min-width:160px}
.attendance-recap-filter select[name=teacher_id]{min-width:240px}
.attendance-recap-filter .btn{height:42px}
.attendance-recap-reset{height:42px;display:inline-flex;align-items:center;padding:0 10px;font-size:12px;font-weight:800;color:var(--primary);text-decoration:none}
.attendance-recap-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.attendance-recap-stats article{background:#fff;border:1px solid #e5e9f1;border-radius:14px;padding:18px}
.attendance-recap-stats span{display:block;font-size:var(--text-small);color:#667085;margin-bottom:8px}
.attendance-recap-stats strong{display:block;font-size:27px;line-height:1}
.attendance-recap-note{padding:14px 16px;background:#fff8e9;border:1px solid #f0dfb6;border-radius:12px;font-size:var(--text-small);color:#70571f;line-height:1.65}
.attendance-recap-summary-table{min-width:1080px}
.attendance-recap-detail-table{min-width:930px}
@media(max-width:1050px){.attendance-recap-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
    .attendance-recap-head{align-items:flex-start!important;flex-direction:column}
    .attendance-recap-filter{align-items:stretch}
    .attendance-recap-filter label{width:100%}
    .attendance-recap-filter input,.attendance-recap-filter select,.attendance-recap-filter select[name=teacher_id]{width:100%;min-width:0}
    .attendance-recap-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){.attendance-segmented{grid-template-columns:repeat(5,1fr)}}


/* =========================================================
   STEP 9 — KALENDER KERJA & LIBUR
   ========================================================= */
.attendance-calendar-shell{display:grid;gap:24px}
.attendance-calendar-head{margin-bottom:0}
.attendance-calendar-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px}
.attendance-calendar-settings-card,.attendance-calendar-exception-card{padding:24px}
.attendance-calendar-help{margin:-6px 0 18px;color:#667085;font-size:var(--text-small);line-height:1.6}
.attendance-weekday-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.attendance-weekday-checks label{display:flex;align-items:center;gap:9px;min-height:42px;padding:0 12px;border:1px solid #e2e6ed;border-radius:10px;background:#fff;font-size:12px;font-weight:700;cursor:pointer}
.attendance-weekday-checks input{width:16px;height:16px}
.attendance-calendar-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.attendance-calendar-form-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.attendance-calendar-form-grid label.is-wide{grid-column:1/-1}
.attendance-calendar-form-grid input,.attendance-calendar-form-grid select,.attendance-calendar-form-grid textarea{width:100%;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:10px 11px;font:inherit;font-size:12.5px;color:#172033}
.attendance-calendar-form-grid input,.attendance-calendar-form-grid select{height:44px}
.attendance-calendar-form-grid textarea{resize:vertical}
.attendance-calendar-form-footer{display:flex;justify-content:flex-end;margin-top:18px}
.attendance-calendar-month-card{padding:0;overflow:hidden}
.attendance-calendar-month-head{padding:22px 24px;margin:0;border-bottom:1px solid #edf0f5}
.attendance-calendar-month-head p{margin:5px 0 0;color:#667085;font-size:var(--text-small)}
.attendance-calendar-month-filter{display:flex;align-items:center;gap:8px}
.attendance-calendar-month-filter input{height:42px;border:1px solid #d9dee8;border-radius:9px;background:#fff;padding:0 10px;font:inherit;font-size:12px}
.attendance-calendar-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid #edf0f5;background:#fafbfd;font-size:var(--text-small);color:#667085}
.attendance-calendar-legend span{display:inline-flex;align-items:center;gap:6px}
.attendance-calendar-legend i{width:9px;height:9px;border-radius:50%;display:block}
.attendance-calendar-legend i.is-work{background:#2b8a57}
.attendance-calendar-legend i.is-off{background:#9aa3b2}
.attendance-calendar-legend i.is-special{background:var(--primary)}
.attendance-calendar-table-wrap{overflow:auto}
.attendance-calendar-table{min-width:760px}
.attendance-calendar-table td strong{display:block}
.attendance-calendar-table td small{display:block;margin-top:3px;color:#667085;font-size:var(--text-small)}
.attendance-calendar-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:var(--text-small);font-weight:800}
.attendance-calendar-pill.is-work{background:#e9f8f0;color:#17623d}
.attendance-calendar-pill.is-off{background:#eef1f6;color:#667085}
.attendance-calendar-manual{display:inline-flex;margin-left:5px;padding:4px 7px;border-radius:999px;background:#eaf1ff;color:#2455aa;font-size:var(--text-small);font-weight:800}
.attendance-inline-form{margin:0}
.attendance-inline-form button{border:0;background:transparent;padding:0;color:#b42318;font:inherit;font-size:var(--text-small);font-weight:800;cursor:pointer}
.attendance-recap-note-success{background:#edf8f2;border-color:#caead7;color:#285e43}
.attendance-recap-summary-step9{min-width:1180px}
@media(max-width:1000px){.attendance-calendar-grid{grid-template-columns:1fr}}
@media(max-width:700px){
    .attendance-calendar-form-grid{grid-template-columns:1fr}
    .attendance-calendar-form-grid label.is-wide{grid-column:auto}
    .attendance-calendar-month-head{align-items:flex-start!important;flex-direction:column}
    .attendance-calendar-month-filter{width:100%}
    .attendance-calendar-month-filter input{flex:1}
}
@media(max-width:600px){
    .attendance-segmented{grid-template-columns:repeat(5,1fr)}
    .attendance-segmented a{font-size:var(--text-small);padding:0 5px}
}


/* =========================================================
   STEP 10 — VALIDASI LOKASI
   ========================================================= */
.attendance-location-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.attendance-location-admin-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.attendance-location-admin-grid label>input{height:44px;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:0 11px;font:inherit;font-size:12.5px}
.attendance-location-admin-grid label>span{font-size:var(--text-small);font-weight:400;color:#667085}
.attendance-location-admin-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.attendance-location-admin-actions>span{font-size:var(--text-small);color:#667085}
.attendance-location-admin-pill{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#e9f8f0;color:#17623d;font-size:var(--text-small);font-weight:800}
.attendance-table td>.attendance-location-admin-pill+small{display:block;margin-top:4px;color:#8a93a3;font-size:var(--text-small)}
@media(max-width:700px){.attendance-location-admin-grid{grid-template-columns:1fr}}


/* STEP 11 — FINALISASI ABSENSI */
.attendance-row-actions{display:flex;gap:8px;flex-wrap:wrap}.attendance-row-actions a{font-size:var(--text-small);font-weight:800;color:var(--primary);text-decoration:none;white-space:nowrap}.attendance-manual-shell,.attendance-detail-shell{display:grid;gap:24px}.attendance-manual-card{max-width:700px;background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:24px;display:grid;gap:18px}.attendance-manual-card label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}.attendance-manual-card select,.attendance-manual-card textarea{width:100%;border:1px solid #d9dee8;border-radius:10px;padding:10px 11px;font:inherit;background:#fff}.attendance-manual-card select{height:44px}.attendance-manual-card textarea{resize:vertical}.attendance-manual-footer{display:flex;justify-content:flex-end;gap:8px}.attendance-manual-warning{max-width:700px;padding:13px 15px;border:1px solid #f0dfb6;border-radius:11px;background:#fff8e9;color:#70571f;font-size:var(--text-small);line-height:1.6}.attendance-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.attendance-detail-grid h2{margin:7px 0 18px;font-size:28px}.attendance-detail-list{margin:0}.attendance-detail-list>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #edf0f5}.attendance-detail-list>div:last-child{border-bottom:0}.attendance-detail-list dt{font-size:var(--text-small);color:#667085}.attendance-detail-list dd{margin:0;font-size:12px;font-weight:800}.attendance-detail-note p{margin:8px 0 0;color:#667085;line-height:1.6}@media(max-width:700px){.attendance-detail-grid{grid-template-columns:1fr}}


/* PORTAL GURU — IMPORT FINGERPRINT */
.fingerprint-import-shell{display:grid;gap:22px}.fingerprint-upload-card,.fingerprint-preview-card{padding:24px}.fingerprint-upload-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.fingerprint-upload-form input[type=file]{min-height:42px;max-width:480px;padding:8px;border:1px solid #d9dee8;border-radius:10px;background:#fff;font:inherit;font-size:12px}.fingerprint-help{margin:12px 0 0;color:#667085;font-size:var(--text-small);line-height:1.6}.fingerprint-map-table{min-width:820px}.fingerprint-map-table select{width:100%;min-width:280px;height:40px;border:1px solid #d9dee8;border-radius:9px;background:#fff;padding:0 10px;font:inherit;font-size:var(--text-small)}.fingerprint-preview-actions{display:flex;justify-content:flex-end;margin-top:16px}.fingerprint-cancel-form{text-align:right;margin-top:8px}.fingerprint-cancel-form button{border:0;background:transparent;color:#b42318;font:inherit;font-size:var(--text-small);font-weight:800;cursor:pointer}
\n\n/* DUPLICATE PEOPLE REPAIR */\n.teacher-duplicate-alert{display:flex;align-items:center;justify-content:space-between;gap:16px}\n.teacher-duplicate-alert>div{display:grid;gap:3px}\n.teacher-duplicate-alert span{font-size:var(--text-small);line-height:1.5}\n.teacher-duplicate-alert .btn{flex:0 0 auto}\n@media(max-width:700px){.teacher-duplicate-alert{align-items:flex-start;flex-direction:column}}\n

/* =========================================================
   STEP 13 — DATA GURU / MASTER PERSONEL
   ========================================================= */
.teacher-data-shell,.teacher-data-form-shell,.teacher-detail-shell{display:grid;gap:22px}.teacher-data-head{margin-bottom:0}.teacher-data-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.teacher-data-stats article{background:#fff;border:1px solid #e5e9f1;border-radius:14px;padding:18px}.teacher-data-stats span{display:block;font-size:var(--text-small);color:#667085;margin-bottom:7px}.teacher-data-stats strong{font-size:26px}.teacher-data-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.teacher-data-filter input,.teacher-data-filter select{height:42px;border:1px solid #d9dee8;border-radius:9px;background:#fff;padding:0 11px;font:inherit;font-size:12px}.teacher-data-filter input{width:min(100%,360px)}.teacher-data-filter select{min-width:170px}.teacher-data-table{min-width:1050px!important}.teacher-data-person{display:flex;align-items:center;gap:11px;min-width:250px}.teacher-data-person img,.teacher-data-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}.teacher-data-avatar{display:grid;place-items:center;background:#edf1f8;color:var(--primary);font-weight:800}.teacher-data-person strong,.teacher-data-person small{display:block}.teacher-data-person small{margin-top:3px;color:#7b8494;font-size:var(--text-small)}.teacher-employment-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:var(--text-small);font-weight:800}.teacher-employment-status.is-aktif{background:#e9f8f0;color:#17623d}.teacher-employment-status.is-cuti{background:#fff4df;color:#986a10}.teacher-employment-status.is-nonaktif,.teacher-employment-status.is-keluar{background:#eef1f6;color:#667085}.teacher-master-form{display:grid;gap:18px;max-width:980px}.teacher-master-card{background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:24px}.teacher-master-section-head{margin-bottom:18px}.teacher-master-section-head h2,.teacher-photo-editor h2,.teacher-detail-summary h2,.teacher-master-card h2{margin:4px 0 0;font-size:19px}.teacher-master-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.teacher-master-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}.teacher-master-grid label.is-wide{grid-column:1/-1}.teacher-master-grid input,.teacher-master-grid select,.teacher-master-grid textarea{width:100%;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:10px 11px;font:inherit;font-size:12.5px}.teacher-master-grid input,.teacher-master-grid select{height:44px}.teacher-master-grid textarea{resize:vertical}.teacher-master-grid small{font-size:var(--text-small);font-weight:400;color:#667085}.teacher-photo-editor{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:22px}.teacher-photo-preview{width:130px;height:130px;border-radius:16px;overflow:hidden;background:#eef1f6;display:grid;place-items:center;font-size:40px;font-weight:800;color:var(--primary)}.teacher-photo-preview img{width:100%;height:100%;object-fit:cover}.teacher-photo-editor p{margin:7px 0 13px;color:#667085;font-size:var(--text-small)}.teacher-photo-editor input[type=file]{font-size:12px}.teacher-master-footer{display:flex;justify-content:flex-end;gap:8px}.teacher-detail-actions{display:flex;gap:8px}.teacher-detail-hero{display:grid;grid-template-columns:180px 1fr;gap:24px;background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:24px}.teacher-detail-photo{width:180px;height:180px;border-radius:18px;overflow:hidden;background:#eef1f6;display:grid;place-items:center;font-size:48px;font-weight:800;color:var(--primary)}.teacher-detail-photo img{width:100%;height:100%;object-fit:cover}.teacher-detail-summary{min-width:0}.teacher-detail-summary h2{font-size:22px;margin:10px 0 18px}.teacher-detail-summary dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}.teacher-detail-summary dl div{padding:12px;background:#f8f9fb;border-radius:10px}.teacher-detail-summary dt,.teacher-detail-list dt{font-size:var(--text-small);color:#667085}.teacher-detail-summary dd,.teacher-detail-list dd{margin:4px 0 0;font-size:12px;font-weight:700}.teacher-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.teacher-detail-list{margin:16px 0 0}.teacher-detail-list div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid #edf0f5}.teacher-detail-list div:last-child{border-bottom:0}.teacher-detail-attendance{padding:0;overflow:hidden}.teacher-detail-attendance .attendance-card-head{padding:22px 24px;margin:0;border-bottom:1px solid #edf0f5}.teacher-detail-link{font-size:var(--text-small);font-weight:800;color:var(--primary);text-decoration:none}.teacher-danger-zone{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-color:#f0d0d0}.teacher-danger-zone p{margin:7px 0 0;max-width:650px;color:#667085;font-size:var(--text-small);line-height:1.6}.teacher-danger-actions{display:flex;gap:8px;flex-wrap:wrap}.teacher-danger-actions form{margin:0}.teacher-danger-btn{background:#b42318!important;color:#fff!important;border-color:#b42318!important}.teacher-danger-btn:disabled{opacity:.45;cursor:not-allowed}.teacher-delete-protection{grid-column:1/-1;width:100%;padding:11px 13px;border-radius:10px;background:#fff5f5;color:#8e2929;font-size:var(--text-small);line-height:1.5}@media(max-width:1100px){.teacher-data-stats{grid-template-columns:repeat(3,1fr)}.teacher-detail-summary dl{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.teacher-master-grid,.teacher-detail-grid{grid-template-columns:1fr}.teacher-master-grid label.is-wide{grid-column:auto}.teacher-photo-editor,.teacher-detail-hero{grid-template-columns:1fr}.teacher-detail-photo,.teacher-photo-preview{width:120px;height:120px}.teacher-detail-summary dl{grid-template-columns:1fr 1fr}.teacher-danger-zone{flex-direction:column}.teacher-data-stats{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   STEP 14 — PORTAL STAFF & GURU / MASTER PERSONEL
   ========================================================= */
.teacher-type-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:var(--text-small);font-weight:800}.teacher-type-pill.is-guru{background:#eaf1ff;color:#2455aa}.teacher-type-pill.is-staf{background:#f1ecff;color:#6746a6}.teacher-type-pill.is-unknown{background:#eef1f6;color:#667085}.teacher-detail-badges{display:flex;gap:7px;flex-wrap:wrap}.teacher-structure-admin{padding:0;overflow:hidden}.teacher-structure-admin>.attendance-card-head{padding:22px 24px;margin:0;border-bottom:1px solid #edf0f5}.teacher-structure-admin>.attendance-card-head p{margin:5px 0 0;color:#667085;font-size:var(--text-small)}.teacher-delete-confirm-shell{display:grid;gap:22px}.teacher-delete-confirm-card{max-width:720px}.teacher-delete-confirm-card>p{color:#667085;line-height:1.65;font-size:12px}.teacher-delete-counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:18px 0}.teacher-delete-counts span{padding:12px;border:1px solid #e5e9f1;border-radius:10px;font-size:var(--text-small);color:#667085}.teacher-delete-counts strong{display:block;margin-top:5px;font-size:20px;color:#172033}.teacher-delete-confirm-card form{display:grid;gap:12px;margin-top:20px}.teacher-delete-confirm-card form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}.teacher-delete-confirm-card form input{height:44px;border:1px solid #d9dee8;border-radius:10px;padding:0 11px;font:inherit}.teacher-delete-confirm-card form .teacher-danger-btn{justify-self:start}.attendance-segmented{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:800px){.teacher-delete-counts{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   STEP 15 — ADMIN UI CONSISTENCY / SPACING / DROPDOWN
   ========================================================= */
:root{
    --admin-control-height:44px;
    --admin-control-radius:10px;
    --admin-control-border:#D9DEE8;
    --admin-surface-border:#E5E9F1;
    --admin-section-gap:22px;
}

/* One dropdown language across the whole admin panel. */
.admin-body select{
    appearance:none;
    -webkit-appearance:none;
    min-height:var(--admin-control-height);
    border:1px solid var(--admin-control-border);
    border-radius:var(--admin-control-radius);
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
    background-size:14px 14px;
    padding:0 40px 0 12px;
    color:var(--ink);
    font-family:var(--font-body);
    font-size:12.5px;
    line-height:1.2;
    cursor:pointer;
    box-shadow:none;
}
.admin-body select:hover{border-color:#BFC7D4;}
.admin-body select:focus{border-color:#92A8E6;box-shadow:0 0 0 3px rgba(18,57,145,.08);outline:none;}
.admin-body select:disabled{background-color:#F3F5F8;color:#98A2B3;cursor:not-allowed;}

/* Harmonize generic text/date/search controls that sit beside dropdowns. */
.admin-body input[type="text"],
.admin-body input[type="search"],
.admin-body input[type="email"],
.admin-body input[type="password"],
.admin-body input[type="number"],
.admin-body input[type="date"],
.admin-body input[type="month"],
.admin-body input[type="time"]{
    min-height:var(--admin-control-height);
    border-color:var(--admin-control-border);
    border-radius:var(--admin-control-radius);
}

/* Overall rhythm: slightly tighter shell, equal vertical gaps, calmer cards. */
.admin-shell{padding:40px 28px 72px;}
.admin-page-head{gap:20px;margin-bottom:24px;}
.admin-page-head h1{line-height:1.18;}
.admin-page-head p{max-width:760px;line-height:1.65;}
.admin-table th,.admin-table td{padding:15px 18px;}
.admin-table-wrap,.attendance-admin-card,.teacher-master-card{border-color:var(--admin-surface-border);}

.teacher-data-shell,
.teacher-data-form-shell,
.teacher-detail-shell,
.attendance-admin-shell,
.attendance-recap-shell,
.attendance-calendar-shell,
.fingerprint-import-shell{gap:var(--admin-section-gap);}

.teacher-data-stats,.attendance-admin-stats,.attendance-recap-stats{gap:10px;}
.teacher-data-stats article,.attendance-admin-stats article,.attendance-recap-stats article{padding:16px 17px;}

.admin-filter-surface,
.teacher-data-filter,
.ppdb-filter,
.achievement-filter,
.audit-filter{
    border-radius:14px;
}
.teacher-data-filter{
    padding:14px;
    background:#fff;
    border:1px solid var(--admin-surface-border);
    align-items:flex-end;
}
.teacher-data-filter input{flex:1 1 300px;width:auto;min-width:240px;}
.teacher-data-filter select{min-width:165px;}
.teacher-data-filter .btn{min-height:var(--admin-control-height);}
.teacher-filter-reset{min-height:var(--admin-control-height);display:inline-flex;align-items:center;padding:0 8px;}

/* Rekap: dedicated date-range toolbar. */
.attendance-recap-filter{
    display:grid;
    grid-template-columns:minmax(145px,.8fr) minmax(145px,.8fr) minmax(240px,1.45fr) minmax(190px,1fr) auto;
    align-items:end;
    gap:10px;
    padding:16px;
    margin:0;
}
.attendance-recap-filter label{min-width:0;}
.attendance-recap-filter input,
.attendance-recap-filter select,
.attendance-recap-filter select[name=teacher_id]{width:100%;min-width:0;height:var(--admin-control-height);}
.attendance-recap-filter-actions{display:flex;align-items:center;gap:8px;min-height:var(--admin-control-height);}
.attendance-recap-filter-actions .btn{height:var(--admin-control-height);padding:0 16px;white-space:nowrap;}
.attendance-recap-reset{min-height:var(--admin-control-height);display:inline-flex;align-items:center;padding:0 7px;}

/* Data Guru list is now intentionally master-data-only: no attendance count column. */
.teacher-data-table{min-width:920px!important;}
.teacher-data-person{min-width:235px;}
.teacher-structure-admin{margin-top:2px;}

@media(max-width:1100px){
    .attendance-recap-filter{grid-template-columns:repeat(2,minmax(0,1fr));}
    .attendance-recap-filter-actions{grid-column:1/-1;}
}
@media(max-width:760px){
    .admin-shell{padding:30px 18px 56px;}
    .admin-page-head{margin-bottom:20px;}
    .attendance-recap-filter{grid-template-columns:1fr;}
    .attendance-recap-filter-actions{grid-column:auto;flex-wrap:wrap;}
    .teacher-data-filter{align-items:stretch;}
    .teacher-data-filter input,.teacher-data-filter select,.teacher-data-filter .btn{width:100%;min-width:0;}
}


/* =========================================================
   STEP 16 — DATA STAFF & GURU / SEGMENTED REKAP / SPACING
   ========================================================= */
.teacher-data-segmented,.recap-view-segmented{
    display:inline-grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(150px,auto);
    gap:4px;
    width:max-content;
    max-width:100%;
    padding:4px;
    border:1px solid var(--admin-surface-border,#E5E9F1);
    border-radius:12px;
    background:#F5F7FA;
}
.teacher-data-segmented a,.recap-view-segmented a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border-radius:8px;
    color:#667085;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.teacher-data-segmented a:hover,.recap-view-segmented a:hover{background:#fff;color:var(--primary);}
.teacher-data-segmented a.is-active,.recap-view-segmented a.is-active,
.teacher-data-segmented a.is-active:hover,.recap-view-segmented a.is-active:hover{background:var(--primary);color:#fff;}

/* Avoid sections visually sticking to each other on master/admin pages. */
.teacher-data-shell,.teacher-detail-shell,.teacher-data-form-shell,.attendance-recap-shell{row-gap:24px;}
.teacher-data-segmented + .teacher-data-stats,
.teacher-data-segmented + .teacher-structure-admin,
.recap-view-segmented + .attendance-list-card{margin-top:2px;}
.teacher-master-form{display:grid;gap:22px;}
.teacher-master-card + .teacher-master-card{margin-top:0;}
.teacher-nonemployee-panel{margin-top:0!important;}
.teacher-detail-grid + .teacher-master-card,.teacher-detail-hero + .teacher-detail-grid{margin-top:2px;}

/* Portal account status: compact switch instead of a stretched checkbox card. */
.portal-account-toggle{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:12px!important;
    min-height:58px;
    padding:12px 14px;
    border:1px solid #E2E6ED;
    border-radius:12px;
    background:#FAFBFD;
    cursor:pointer;
}
.portal-account-toggle>input{position:absolute;opacity:0;pointer-events:none;}
.portal-account-toggle-control{
    position:relative;
    flex:0 0 42px;
    width:42px;
    height:24px;
    border-radius:999px;
    background:#CBD2DC;
    transition:background .16s ease;
}
.portal-account-toggle-control>span{
    position:absolute;
    top:3px;left:3px;
    width:18px;height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(16,24,40,.18);
    transition:transform .16s ease;
}
.portal-account-toggle>input:checked + .portal-account-toggle-control{background:var(--primary);}
.portal-account-toggle>input:checked + .portal-account-toggle-control>span{transform:translateX(18px);}
.portal-account-toggle>input:focus-visible + .portal-account-toggle-control{outline:3px solid rgba(0,42,170,.14);outline-offset:2px;}
.portal-account-toggle-copy{min-width:0;display:block;}
.portal-account-toggle-copy strong{display:block;font-size:12.5px;color:#172033;}
.portal-account-toggle-copy small{display:block;margin-top:3px;font-size:var(--text-small);font-weight:400;color:#667085;line-height:1.45;}

/* Pagination shared by recap views. */
.admin-pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    padding:15px 18px;
    border-top:1px solid #EDF0F5;
    background:#FAFBFD;
}
.admin-pagination a{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border:1px solid #D9DEE8;
    border-radius:8px;
    background:#fff;
    color:var(--primary);
    text-decoration:none;
    font-size:var(--text-small);
    font-weight:800;
}
.admin-pagination span{font-size:var(--text-small);color:#667085;}
.admin-pagination a.is-disabled{opacity:.42;pointer-events:none;color:#667085;}

@media(max-width:700px){
    .teacher-data-segmented,.recap-view-segmented{width:100%;grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;}
    .teacher-data-segmented a,.recap-view-segmented a{padding:0 8px;font-size:var(--text-small);}
    .admin-pagination{justify-content:space-between;flex-wrap:wrap;}
    .admin-pagination span{order:-1;width:100%;text-align:center;}
}


/* =========================================================
   STEP 17 — ADMIN RHYTHM + SINGLE SEGMENTED COMPONENT
   ========================================================= */
:root{
    --admin-section-gap:28px;
    --admin-block-gap:20px;
    --admin-segmented-height:40px;
}

/* One segmented component for Homepage, Absensi, Rekap and Data Staff & Guru. */
.admin-segmented-nav{
    display:inline-flex;
    align-items:center;
    gap:4px;
    width:max-content;
    max-width:100%;
    min-height:48px;
    margin:0;
    padding:4px;
    border:1px solid var(--admin-surface-border,#E2E7EF);
    border-radius:12px;
    background:#F4F6F9;
}
.admin-segmented-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:var(--admin-segmented-height);
    padding:0 16px;
    border-radius:8px;
    color:#667085;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.admin-segmented-nav a:hover{
    background:#fff;
    color:var(--primary,var(--primary));
}
.admin-segmented-nav a.is-active,
.admin-segmented-nav a.active,
.admin-segmented-nav a[aria-current="page"]{
    background:var(--primary,var(--primary));
    color:#fff;
    box-shadow:none;
}
.admin-segmented-nav a.is-active:hover,
.admin-segmented-nav a.active:hover,
.admin-segmented-nav a[aria-current="page"]:hover{
    background:var(--primary,var(--primary));
    color:#fff;
}
.admin-segmented-nav a>span{
    display:grid;
    place-items:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#E7EBF2;
    color:#667085;
    font-size:var(--text-small);
}
.admin-segmented-nav a[aria-current="page"]>span,
.admin-segmented-nav a.is-active>span,
.admin-segmented-nav a.active>span{
    background:rgba(255,255,255,.18);
    color:#fff;
}

/* Consistent section rhythm, especially Data Staff & Guru. */
.teacher-data-shell,
.teacher-detail-shell,
.teacher-data-form-shell,
.attendance-recap-shell,
.attendance-admin-shell,
.attendance-calendar-shell,
.attendance-settings-shell{
    display:grid;
    align-content:start;
    row-gap:var(--admin-section-gap);
}
.teacher-data-shell>.admin-page-head,
.teacher-data-shell>.admin-alert,
.teacher-data-shell>.admin-segmented-nav,
.teacher-data-shell>.teacher-data-stats,
.teacher-data-shell>.teacher-data-filter,
.teacher-data-shell>.admin-table-wrap,
.teacher-data-shell>.teacher-structure-admin{
    margin-top:0!important;
    margin-bottom:0!important;
}
.teacher-data-stats{
    gap:14px;
}
.teacher-data-filter{
    margin:0!important;
}
.teacher-structure-admin{
    margin:0!important;
}
.teacher-master-card,
.attendance-admin-card{
    scroll-margin-top:88px;
}

/* Old module-specific segmented classes are intentionally retired. */
.teacher-data-segmented,
.recap-view-segmented,
.attendance-segmented{
    margin:0;
}

@media(max-width:760px){
    :root{--admin-section-gap:22px;--admin-block-gap:16px;}
    .admin-segmented-nav{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
    }
    .admin-segmented-nav a{
        width:100%;
        min-width:0;
        padding:0 10px;
        white-space:normal;
        text-align:center;
        line-height:1.25;
    }
}
@media(max-width:460px){
    .admin-segmented-nav{grid-template-columns:1fr;}
}

/* =========================================================
   STEP 20 — DATA STAF & GURU FILTER BUTTON ALIGNMENT
   ========================================================= */
.teacher-data-filter .btn{
    height:var(--admin-control-height);
    min-height:var(--admin-control-height);
    padding:0 16px;
    border-width:1px;
    line-height:1;
    align-self:flex-end;
    white-space:nowrap;
    transform:none;
}
.teacher-data-filter .btn:hover{
    transform:none;
}
@media(max-width:800px){
    .teacher-data-filter .btn{
        width:100%;
        align-self:stretch;
    }
}

/* STEP 18 — PAYROLL / SLIP GAJI */
.payroll-shell{display:block}.payroll-admin-tabs{margin-bottom:30px}.payroll-period-filter,.payroll-toolbar,.payroll-head-actions,.payroll-workflow,.payroll-payment-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.payroll-period-filter select,.payroll-period-filter input,.payroll-payment-form select,.payroll-payment-form input{height:44px;border:1px solid #D9DEE8;border-radius:10px;background:#fff;padding:0 12px;font:inherit;font-size:12.5px;color:#172033}.payroll-period-filter select{min-width:145px}.payroll-period-filter input{width:96px}.payroll-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--primary);border-radius:10px;background:var(--primary);color:#fff!important;font-family:var(--font-display);font-size:12px;font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap}.payroll-btn.secondary{background:#fff;color:var(--primary)!important;border-color:#D6DEEC}.payroll-btn:disabled{opacity:.5;cursor:not-allowed}.payroll-period-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:22px 24px;background:#fff;border:1px solid #E5E9F1;border-radius:16px}.payroll-period-banner h2{font-family:var(--font-display);font-size:21px;margin:3px 0}.payroll-period-banner p{font-size:12px;color:#667085}.payroll-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.payroll-stats article{padding:18px;background:#fff;border:1px solid #E5E9F1;border-radius:14px}.payroll-stats span{display:block;color:#667085;font-size:var(--text-small);font-weight:700}.payroll-stats strong{display:block;margin-top:7px;font-family:var(--font-display);font-size:22px;color:#172033}.payroll-toolbar{margin-bottom:18px}.payroll-status{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border-radius:999px;font-size:var(--text-small);font-weight:800;text-transform:capitalize}.payroll-status.draft{background:#EEF1F6;color:#667085}.payroll-status.final{background:#FFF4E5;color:#9A5B00}.payroll-status.paid{background:#E7F7EE;color:#187246}.payroll-status.unset{background:#F8F9FB;color:#98A2B3;border:1px solid #E8ECF3}.payroll-two-col,.payroll-detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;align-items:start}.payroll-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-card{background:#fff;border:1px solid #E5E9F1;border-radius:16px;padding:22px}.payroll-form,.payroll-stack-form{display:grid;gap:14px}.payroll-form label,.payroll-stack-form label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#344054}.payroll-form label span{font-weight:500;color:#667085;font-size:var(--text-small)}.payroll-form input,.payroll-form select,.payroll-inline-form input,.payroll-stack-form input{width:100%;height:44px;border:1px solid #D9DEE8;border-radius:10px;background:#fff;padding:0 12px;font:inherit;font-size:12.5px}.payroll-section-title{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:20px 0 12px}.payroll-section-title:first-child{margin-top:0}.payroll-section-title h3{font-family:var(--font-display);font-size:16px}.payroll-section-title span{font-size:var(--text-small);color:#667085}.payroll-inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.payroll-add-form{grid-template-columns:minmax(0,1.4fr) minmax(120px,.7fr) auto;margin-top:16px}.payroll-type-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.payroll-type-list span{padding:7px 9px;background:#F4F6FA;border-radius:8px;font-size:var(--text-small);font-weight:700;color:#475467}.payroll-line,.payroll-total{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #EDF0F5;font-size:12px}.payroll-line span small{display:block;margin-top:3px;color:#98A2B3;font-size:var(--text-small)}.payroll-total{border-bottom:0;padding-top:16px;font-family:var(--font-display);font-size:13px}.payroll-text-danger{border:0;background:transparent;color:#B42318;font:inherit;font-size:var(--text-small);font-weight:800;cursor:pointer}.payroll-override{margin-top:16px;padding:12px 0;border-top:1px solid #EDF0F5}.payroll-override summary{cursor:pointer;font-size:var(--text-small);font-weight:800;color:var(--primary)}.payroll-override form{margin-top:12px}.payroll-net-card{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;padding:24px;background:#0E1B3D;border-radius:16px;color:#fff}.payroll-net-card>div:first-child span,.payroll-net-card small{display:block}.payroll-net-card>div:first-child span{font-size:var(--text-small);opacity:.72}.payroll-net-card>div:first-child strong{display:block;margin:6px 0;font-family:var(--font-display);font-size:28px}.payroll-net-card small{font-size:var(--text-small);opacity:.65}.payroll-net-card .payroll-btn.secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#fff!important}.payroll-payment-form input{min-width:190px}.payroll-paid-note{font-size:var(--text-small);font-weight:700}.payroll-settings-card{max-width:620px}.payroll-table td{white-space:nowrap}.payroll-table td:first-child{white-space:normal;min-width:220px}
@media(max-width:1050px){.payroll-stats{grid-template-columns:repeat(2,1fr)}.payroll-two-col,.payroll-detail-grid{grid-template-columns:1fr}.payroll-net-card{align-items:flex-start;flex-direction:column}}

/* Keep the reopen reason and its action together inside the payroll summary. */
.payroll-reopen-form{display:flex;align-items:center;gap:10px}
.payroll-reopen-form input[name="reopen_reason"]{width:240px;min-width:0;height:44px;padding:0 12px;border:1px solid #D9DEE8;border-radius:10px;background:#fff;font:inherit;font-size:12.5px;color:#172033}
.payroll-reopen-form .payroll-btn{flex:0 0 auto}
@media(max-width:600px){.payroll-reopen-form{width:100%;flex-wrap:wrap}.payroll-reopen-form input[name="reopen_reason"]{flex:1 1 100%;width:100%}}

/* Step 19 — information architecture simplification */
.payroll-nav-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}.payroll-nav-row .admin-segmented-nav{margin-bottom:0}.payroll-settings-link{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 13px;border:1px solid #e2e7ef;border-radius:11px;background:#fff;color:#667085;font-family:var(--font-display);font-size:12px;font-weight:800;text-decoration:none}.payroll-settings-link:hover,.payroll-settings-link.is-active{color:var(--primary);border-color:#cdd8eb;background:#f8faff}.payroll-settings-link span{display:inline}.identity-segmented-nav{margin-bottom:22px}.settings-card[id]{scroll-margin-top:24px}.teacher-detail-nav{margin-bottom:18px}.dashboard-link-card{display:block;color:inherit;text-decoration:none;transition:border-color .16s ease,transform .16s ease}.dashboard-link-card:hover{border-color:#cfd7e6;transform:translateY(-1px)}
.admin-sidebar-nav{gap:18px}.admin-nav-group{gap:3px}.admin-sidebar-bottom{padding-top:14px;border-top:1px solid #eceef2}
@media(max-width:900px){.payroll-nav-row{align-items:stretch;flex-direction:column}.payroll-settings-link{align-self:flex-start}}

/* =========================================================
   STEP 20 — ADMIN ACTION HIERARCHY & IA REFINEMENT
   ========================================================= */
.btn,
.payroll-btn,
.admin-actions a,
.admin-actions button{
    box-sizing:border-box;
}
.btn-primary,
.btn.btn-primary,
.btn-accent,
.payroll-btn:not(.secondary){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border:1px solid var(--primary,var(--primary));
    border-radius:10px;
    background:var(--primary,var(--primary));
    color:#fff!important;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    box-shadow:none;
    transform:none;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-accent:hover,
.payroll-btn:not(.secondary):hover{
    background:#001f7f;
    border-color:#001f7f;
    box-shadow:none;
    transform:none;
}
.btn-secondary,
.btn.btn-secondary,
.teacher-secondary-btn,
.payroll-btn.secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border:1px solid #d8dee9!important;
    border-radius:10px;
    background:#fff!important;
    color:#24324a!important;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    box-shadow:none;
    transform:none;
}
.btn-secondary:hover,
.btn.btn-secondary:hover,
.teacher-secondary-btn:hover,
.payroll-btn.secondary:hover{
    border-color:#bfc8d7!important;
    background:#f8fafc!important;
    color:#172033!important;
    transform:none;
}
.btn-tertiary,
.btn.btn-tertiary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 12px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:#667085!important;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
}
.btn-tertiary:hover,
.btn.btn-tertiary:hover{background:#f5f7fa;color:#344054!important;}
.btn-settings,
.btn.btn-settings{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
    padding:0 14px;
    border:1px solid #dce2eb;
    border-radius:10px;
    background:#f8fafc;
    color:#475467!important;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    box-shadow:none;
}
.btn-settings:hover,.btn-settings.is-active{background:#eef3fb;border-color:#cbd6e7;color:var(--primary,var(--primary))!important;}
.btn-danger,
.btn.btn-danger,
.teacher-danger-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border:1px solid #f0b8b4!important;
    border-radius:10px;
    background:#fff5f4!important;
    color:#b42318!important;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
}
.btn-danger:hover,.teacher-danger-btn:hover{background:#fee4e2!important;border-color:#e99a94!important;}
.btn-utility,
.btn.btn-utility{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border:1px solid #e1e6ee;border-radius:9px;background:#fff;color:#475467!important;font-size:var(--text-small);font-weight:800;text-decoration:none;}
.btn-compact{min-height:34px!important;padding:0 10px!important;font-size:var(--text-small)!important;}
.admin-actions a{display:inline-flex;align-items:center;min-height:34px;padding:0 9px;border:1px solid transparent;border-radius:8px;color:#475467;text-decoration:none;font-size:var(--text-small);font-weight:800;background:transparent;}
.admin-actions a:hover{background:#f4f6f9;color:var(--primary,var(--primary));}

.attendance-nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;}
.attendance-nav-row .admin-segmented-nav{margin:0;}
.admin-settings-row{display:flex;justify-content:flex-end;margin:0 0 18px;}

/* Dashboard V2 */
.dashboard-v2-shell{display:grid;gap:20px;}
.dashboard-v2-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:26px 28px;border:1px solid #e4e9f1;border-radius:18px;background:#fff;}
.dashboard-v2-hero h1{margin:5px 0 7px;font-size:30px;}
.dashboard-v2-hero p{max-width:720px;margin:0;color:#667085;}
.dashboard-v2-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.dashboard-v2-metric{display:flex;min-height:142px;flex-direction:column;justify-content:space-between;padding:20px;border:1px solid #e4e9f1;border-radius:16px;background:#fff;color:#172033;text-decoration:none;transition:border-color .15s ease,transform .15s ease;}
.dashboard-v2-metric:hover{border-color:#cbd5e3;transform:translateY(-1px);}
.dashboard-v2-metric span{font-size:var(--text-small);font-weight:800;color:#667085;}
.dashboard-v2-metric strong{font-family:var(--font-display);font-size:28px;line-height:1.05;}
.dashboard-v2-metric small{font-size:var(--text-small);color:#98a2b3;}
.dashboard-v2-workspace{padding:24px;border:1px solid #e4e9f1;border-radius:18px;background:#fff;}
.dashboard-v2-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.dashboard-v2-section-head h2{margin:4px 0 0;font-size:19px;}
.dashboard-v2-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.dashboard-v2-shortcuts a{display:grid;grid-template-columns:1fr auto;grid-template-areas:'title arrow' 'desc arrow';gap:4px 12px;align-items:center;padding:16px;border:1px solid #e8ecf2;border-radius:12px;color:#172033;text-decoration:none;background:#fbfcfe;}
.dashboard-v2-shortcuts a:hover{border-color:#cfd8e5;background:#fff;}
.dashboard-v2-shortcuts strong{grid-area:title;font-size:12px;}.dashboard-v2-shortcuts span{grid-area:desc;color:#7a8699;font-size:var(--text-small);}.dashboard-v2-shortcuts b{grid-area:arrow;font-size:17px;color:#98a2b3;}

/* Individual staff detail */
.teacher-person-range-filter{display:grid;grid-template-columns:minmax(180px,240px) minmax(180px,240px) auto;gap:12px;align-items:end;margin:18px 0;}
.teacher-person-range-filter label{display:grid;gap:7px;font-size:var(--text-small);font-weight:800;color:#475467;}
.teacher-person-range-filter input{height:44px;border:1px solid #d9dee8;border-radius:10px;padding:0 12px;font:inherit;}
.teacher-person-attendance-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 18px;}
.teacher-person-attendance-stats article{padding:15px;border:1px solid #e7ebf1;border-radius:12px;background:#fbfcfe;}.teacher-person-attendance-stats span{display:block;font-size:var(--text-small);font-weight:800;color:#7a8699;}.teacher-person-attendance-stats strong{display:block;margin-top:5px;font-family:var(--font-display);font-size:20px;}
.teacher-salary-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:start;}
.teacher-allowance-type-add{margin-top:22px;padding-top:18px;border-top:1px solid #edf0f4;}
.teacher-allowance-type-add .payroll-inline-form{margin-top:10px;}

/* Integrated attendance settings */
.attendance-settings-integrated{margin-top:18px;}
.attendance-calendar-inline-form{display:grid;gap:14px;padding-top:16px;border-top:1px solid #edf0f4;}
.attendance-calendar-integrated-grid{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:16px;margin-top:18px;align-items:start;}
.attendance-calendar-integrated-grid .attendance-admin-card{margin:0;}
.attendance-calendar-integrated-grid label,.attendance-month-filter label{display:grid;gap:7px;font-size:var(--text-small);font-weight:800;color:#475467;}
.attendance-calendar-integrated-grid input,.attendance-calendar-integrated-grid select,.attendance-calendar-integrated-grid textarea,.attendance-month-filter input{width:100%;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:10px 12px;font:inherit;}
.attendance-calendar-integrated-grid input,.attendance-calendar-integrated-grid select,.attendance-month-filter input{height:44px;padding-top:0;padding-bottom:0;}
.attendance-calendar-integrated-grid form{display:grid;gap:12px;}
.attendance-month-filter{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:10px;align-items:end;margin-bottom:14px;}

/* Old navigation helpers are retired visually. */
.identity-segmented-nav{display:none!important;}
.payroll-admin-tabs{display:none!important;}

@media(max-width:1180px){.dashboard-v2-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}.teacher-salary-layout{grid-template-columns:1fr;}}
@media(max-width:900px){.dashboard-v2-shortcuts{grid-template-columns:1fr 1fr}.attendance-calendar-integrated-grid{grid-template-columns:1fr}.teacher-person-range-filter{grid-template-columns:1fr 1fr}.teacher-person-range-filter .btn{grid-column:1/-1}.teacher-person-attendance-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.attendance-nav-row{align-items:stretch;flex-direction:column}.attendance-nav-row .btn-settings{align-self:flex-start;}}

/* =========================================================
   STEP 21 — CONSISTENT ACTION BARS + SEMANTIC BUTTON COLORS
   ========================================================= */
:root{
    --admin-action-blue:var(--primary);
    --admin-action-blue-hover:#001F80;
    --admin-action-yellow:var(--accent);
    --admin-action-yellow-soft:#FFF8CC;
    --admin-action-yellow-border:#E7C300;
    --admin-action-red:#B42318;
    --admin-action-red-soft:#FFF1F0;
    --admin-action-red-border:#E9A7A1;
    --admin-action-green:#187246;
    --admin-action-green-soft:#EAF8F0;
    --admin-action-neutral:#475467;
    --admin-action-neutral-soft:#F8FAFC;
    --admin-action-height:44px;
}

/* All button families share one geometry; color now communicates intent. */
.admin-body .btn,
.admin-body .payroll-btn{
    min-height:var(--admin-action-height);
    padding:0 16px;
    border-radius:10px;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    line-height:1;
    box-shadow:none;
    transform:none;
    transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.admin-body .btn:hover,
.admin-body .payroll-btn:hover{transform:none;}
.admin-body .btn:disabled,
.admin-body .payroll-btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none;}

/* Primary: only the main commit/apply action. */
.admin-body .btn-primary,
.admin-body .btn-accent,
.admin-body .payroll-btn:not(.secondary){
    background:var(--admin-action-blue)!important;
    border:1px solid var(--admin-action-blue)!important;
    color:#fff!important;
}
.admin-body .btn-primary:hover,
.admin-body .btn-accent:hover,
.admin-body .payroll-btn:not(.secondary):hover{
    background:var(--admin-action-blue-hover)!important;
    border-color:var(--admin-action-blue-hover)!important;
}

/* Secondary: neutral support action, never competes with primary. */
.admin-body .btn-secondary,
.admin-body .payroll-btn.secondary,
.admin-body .teacher-secondary-btn{
    background:#fff!important;
    border:1px solid #D6DDE8!important;
    color:#344054!important;
}
.admin-body .btn-secondary:hover,
.admin-body .payroll-btn.secondary:hover,
.admin-body .teacher-secondary-btn:hover{
    background:#F8FAFC!important;
    border-color:#BFC9D8!important;
    color:#172033!important;
}

/* Settings: school accent yellow, visually unique across every panel. */
.admin-body .btn-settings,
.admin-body .btn.btn-settings{
    background:var(--admin-action-yellow-soft)!important;
    border:1px solid var(--admin-action-yellow-border)!important;
    color:#5E4B00!important;
}
.admin-body .btn-settings:hover,
.admin-body .btn-settings.is-active{
    background:var(--admin-action-yellow)!important;
    border-color:var(--admin-action-yellow-border)!important;
    color:#352B00!important;
}
.admin-body .btn-settings .btn-icon{font-size:14px;line-height:1;}

/* Warning: consequential action (close/finalize period), not ordinary secondary. */
.admin-body .btn-warning{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--admin-action-height);
    padding:0 16px;
    border:1px solid var(--admin-action-red-border)!important;
    border-radius:10px;
    background:var(--admin-action-red-soft)!important;
    color:var(--admin-action-red)!important;
    font-family:var(--font-display);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}
.admin-body .btn-warning:hover{background:#FFE2DF!important;border-color:#D97870!important;}

/* Danger: irreversible/destructive action gets the strongest red. */
.admin-body .btn-danger,
.admin-body .teacher-danger-btn{
    background:var(--admin-action-red)!important;
    border:1px solid var(--admin-action-red)!important;
    color:#fff!important;
}
.admin-body .btn-danger:hover,
.admin-body .teacher-danger-btn:hover{background:#8F1C14!important;border-color:#8F1C14!important;}

/* Utility: export/download/preview. Slightly tinted so it is visibly different from forms. */
.admin-body .btn-utility,
.admin-body .settings-preview-btn{
    background:#F3F5F8!important;
    border:1px solid #D7DEE9!important;
    color:#344054!important;
}
.admin-body .btn-utility:hover,
.admin-body .settings-preview-btn:hover{background:#E9EDF3!important;border-color:#C4CEDC!important;}

/* Tertiary: navigation/cancel/reset. */
.admin-body .btn-tertiary{
    background:transparent!important;
    border:1px solid transparent!important;
    color:#667085!important;
}
.admin-body .btn-tertiary:hover{background:#F1F3F6!important;color:#344054!important;}

/* Header actions always live at the right side of a page title. */
.admin-page-head{align-items:flex-start;}
.admin-page-head-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex:0 0 auto;
}
.admin-context-note{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 10px;
    border-radius:999px;
    background:#EEF2F7;
    color:#667085;
    font-size:var(--text-small);
    font-weight:800;
}

/* Filter surface = controls that change what is being viewed. */
.admin-filter-surface{
    padding:16px;
    border:1px solid #E2E7EF;
    border-radius:14px;
    background:#fff;
}
.admin-filter-surface label > span,
.payroll-period-filter label > span,
.attendance-date-filter label > span{
    display:block;
    margin-bottom:6px;
    color:#667085;
    font-size:var(--text-small);
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

/* PPDB: export is visually separated from the apply action. */
.ppdb-filter{align-items:flex-end;}
.ppdb-filter .admin-toolbar-primary{order:3;}
.ppdb-filter .ppdb-export-btn{order:4;margin-left:8px;}
.ppdb-filter .ppdb-reset{order:5;}
.ppdb-filter .ppdb-export-btn::before{content:'↓';font-size:13px;font-weight:800;}

/* Data staff: same filter rhythm as PPDB. */
.teacher-data-filter .btn-primary{flex:0 0 auto;}
.teacher-data-filter .teacher-filter-reset{color:#667085;}
.teacher-data-filter .teacher-filter-reset:hover{color:#344054;background:#F1F3F6;border-radius:8px;}

/* Attendance: tabs/settings first, date filter below as a dedicated toolbar. */
.attendance-nav-row{
    margin-bottom:0;
    padding-bottom:4px;
}
.attendance-filter-bar{margin-bottom:20px;}
.attendance-date-filter{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    gap:10px;
    flex-wrap:wrap;
}
.attendance-date-filter label{display:block;min-width:240px;}
.attendance-date-filter input{width:100%;height:var(--admin-action-height);}
.attendance-date-filter .btn{height:var(--admin-action-height);}

/* Recap: filter applies on left; export remains a page-level utility on right header. */
.attendance-recap-filter{
    grid-template-columns:minmax(190px,260px) minmax(190px,260px) auto!important;
    justify-content:start;
}
.attendance-recap-filter-actions{justify-content:flex-start;}

/* Payroll: settings in header, period as filter surface, workflow actions in one toolbar. */
.payroll-period-bar{margin:0 0 18px;}
.payroll-period-filter{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    gap:10px;
    flex-wrap:wrap;
}
.payroll-period-filter label{display:block;}
.payroll-period-filter select{min-width:190px;}
.payroll-period-filter input{width:120px;}
.payroll-period-filter select,
.payroll-period-filter input{height:var(--admin-action-height);}
.admin-action-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:0 0 18px;
    padding:14px 16px;
    border:1px solid #E2E7EF;
    border-radius:14px;
    background:#fff;
}
.admin-action-toolbar-main,
.admin-action-toolbar-secondary{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.admin-action-toolbar form{margin:0;}

/* Generic form footer/action groups align primary on the right where appropriate. */
.achievement-form-footer,
.testimonial-form-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

/* Row actions remain low emphasis; destructive text becomes red only. */
.admin-actions{gap:6px;}
.admin-actions a,
.admin-actions button{
    min-height:32px;
    padding:0 9px;
    border-radius:8px;
}
.admin-actions button,
.admin-actions a[href*="hapus"],
.admin-actions a[href*="delete"]{color:var(--admin-action-red)!important;}

@media(max-width:900px){
    .admin-page-head-actions{width:100%;justify-content:flex-start;margin-left:0;}
    .admin-action-toolbar{align-items:stretch;flex-direction:column;}
    .admin-action-toolbar-main,.admin-action-toolbar-secondary{width:100%;}
    .attendance-recap-filter{grid-template-columns:1fr 1fr!important;}
    .attendance-recap-filter-actions{grid-column:1/-1;}
}
@media(max-width:650px){
    .ppdb-filter .ppdb-export-btn{margin-left:0;}
    .attendance-date-filter label,.attendance-date-filter .btn,
    .payroll-period-filter label,.payroll-period-filter .btn{width:100%;}
    .payroll-period-filter select,.payroll-period-filter input{width:100%;}
    .attendance-recap-filter{grid-template-columns:1fr!important;}
    .attendance-recap-filter-actions{grid-column:auto;}
    .admin-action-toolbar-main,.admin-action-toolbar-secondary{display:grid;grid-template-columns:1fr;}
    .admin-action-toolbar .btn{width:100%;}
}

/* =========================================================
   STEP 22 — CTA, SPACING, READING FLOW & SIDEBAR ICONS
   ========================================================= */
:root{
    --admin-space-1:8px;
    --admin-space-2:12px;
    --admin-space-3:16px;
    --admin-space-4:24px;
    --admin-space-5:32px;
    --admin-space-6:40px;
    --admin-content-max:1240px;
}

/* Sidebar icons: one visual grammar, no icon on group labels. */
.admin-side-link{gap:11px;}
.admin-side-link>i{width:18px;flex:0 0 18px;text-align:center;font-size:16px;line-height:1;color:currentColor;opacity:.82;}
.admin-side-link.active>i{opacity:1;}
.admin-sidebar-action{gap:10px;justify-content:flex-start;}
.admin-sidebar-action>i{width:18px;text-align:center;font-size:15px;line-height:1;}
.admin-sidebar-badge{margin-left:auto;}

/* Strong page-level CTA: reserved for the single most important creation/process action. */
.admin-body .btn-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:54px;
    padding:0 24px;
    border:1px solid var(--accent)!important;
    border-radius:18px;
    background:var(--accent)!important;
    color:var(--primary-dark)!important;
    font-family:var(--font-display);
    font-size:13px;
    font-weight:800;
    letter-spacing:.005em;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(254,215,0,.14);
    transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.admin-body .btn-cta:hover{background:#FFE033!important;border-color:#FFE033!important;transform:translateY(-1px);box-shadow:0 12px 24px rgba(254,215,0,.22);}
.admin-body .btn-cta:disabled{background:#F3E9A8!important;border-color:#F3E9A8!important;color:#83762E!important;box-shadow:none;transform:none;}
.admin-body .btn-cta i{font-size:15px;}

/* Predictable canvas and vertical rhythm across modules. */
.admin-with-sidebar .admin-shell{max-width:var(--admin-content-max);padding:40px 32px 72px;}
.admin-page-head{margin-bottom:var(--admin-space-5);gap:var(--admin-space-4);align-items:flex-start;}
.admin-page-head h1{line-height:1.16;}
.admin-page-head p{max-width:760px;line-height:1.65;}
.admin-segmented-nav{margin-bottom:var(--admin-space-4);}
.admin-filter-surface,.admin-filter-toolbar{margin-bottom:var(--admin-space-5);}
.admin-alert{margin-bottom:var(--admin-space-4);}
.admin-table-wrap{margin-top:0;}

/* Reusable reading-order section: context left, actions right, content below. */
.admin-content-section{margin-top:var(--admin-space-5);}
.admin-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--admin-space-4);margin-bottom:var(--admin-space-3);}
.admin-section-head>div:first-child{min-width:0;}
.admin-section-head h2{margin:3px 0 0;font-family:var(--font-display);font-size:20px;line-height:1.25;}
.admin-section-head p{margin-top:6px;max-width:700px;color:var(--muted);font-size:var(--text-small);line-height:1.6;}
.admin-section-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;flex:0 0 auto;}

/* Homepage: clear separation between header/tabs/section action/list. */
.homepage-admin-head{margin-bottom:var(--admin-space-4)!important;}
.homepage-admin-section{padding-top:var(--admin-space-2);}
.homepage-section-head{margin-bottom:var(--admin-space-4)!important;align-items:flex-end!important;}
.homepage-section-head+.hero-limit-panel{margin-top:0;}
.hero-head-actions{gap:12px;}

/* Content lists: creation CTA never competes with filters/utilities. */
.achievement-page-head,.teacher-data-head{align-items:flex-end;}
.achievement-head-actions,.teacher-data-head>a{flex:0 0 auto;}
.achievement-filter-toolbar,.teacher-data-filter,.ppdb-filter{padding:16px;border:1px solid #E2E7EF;border-radius:14px;background:#fff;}
.teacher-data-filter{align-items:center;gap:10px;}
.teacher-data-filter input{flex:1 1 360px;width:auto;min-width:260px;}
.teacher-data-filter select{flex:0 0 180px;}

/* PPDB: filtering and exporting are separate mental tasks. */
.ppdb-stats{margin-bottom:var(--admin-space-4);}
.ppdb-filter{margin-bottom:var(--admin-space-5);}
.ppdb-filter .ppdb-export-btn{margin-left:0;}

/* Attendance: header -> navigation/settings -> date -> summary -> work area. */
.attendance-admin-shell{gap:0;}
.attendance-admin-shell .admin-page-head{margin-bottom:var(--admin-space-4);}
.attendance-nav-row{margin-bottom:var(--admin-space-4);align-items:center;}
.attendance-filter-bar{margin-bottom:var(--admin-space-4);}
.attendance-admin-stats{margin-bottom:var(--admin-space-5);}
.attendance-admin-grid{margin-top:0;}
.attendance-date-filter{gap:12px;}
.attendance-date-filter label{min-width:260px;}
.attendance-nav-row .btn-settings i{font-size:14px;}

/* Payroll: settings belongs to page header, period to filter, process CTA to list section. */
.payroll-shell>.admin-page-head{margin-bottom:var(--admin-space-4);}
.payroll-period-bar{margin-bottom:var(--admin-space-4);}
.payroll-period-banner{margin-bottom:var(--admin-space-4);}
.payroll-stats{margin-bottom:var(--admin-space-5);}
.payroll-list-section{margin-top:0;}
.admin-action-toolbar-compact{margin-bottom:var(--admin-space-3);padding:10px 12px;background:#FAFBFC;}
.admin-toolbar-label{color:#667085;font-size:var(--text-small);font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.payroll-list-section .admin-table-wrap{margin-top:0;}

/* Dashboard and settings use the same section rhythm. */
.dashboard-v2-shell{gap:var(--admin-space-5);}
.dashboard-v2-hero{margin-bottom:0;}
.dashboard-v2-workspace{padding:var(--admin-space-4);}
.settings-page-head{margin-bottom:var(--admin-space-5)!important;}

/* Form/detail pages: reduce random vertical jumps. */
.teacher-detail-shell{gap:var(--admin-space-4);}
.teacher-detail-actions{align-items:center;}
.teacher-detail-nav{margin-bottom:0;}
.teacher-person-range-filter{margin:0 0 var(--admin-space-4);padding:16px;border:1px solid #E2E7EF;border-radius:14px;background:#fff;}
.teacher-salary-layout{gap:var(--admin-space-4);}
.teacher-master-card+.teacher-master-card{margin-top:0;}

/* Utility buttons can carry icons without changing geometry. */
.btn i{font-size:14px;line-height:1;}

@media(max-width:1180px){
  .admin-with-sidebar .admin-shell{padding-left:24px;padding-right:24px;}
  .admin-section-head{align-items:flex-start;}
}

/* STEP 28 — read-only financial detail + centralized staff edit */
#financial-data{scroll-margin-top:24px;}
.teacher-master-section-head p{margin:7px 0 0;color:#667085;font-size:var(--text-small);line-height:1.6;}
.teacher-financial-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;}
.teacher-financial-summary div{padding:16px;background:#f8f9fb;border:1px solid #edf0f5;border-radius:12px;}
.teacher-financial-summary dt{font-size:var(--text-small);color:#667085;}
.teacher-financial-summary dd{margin:6px 0 0;font-family:var(--font-display);font-size:14px;font-weight:800;color:#172033;overflow-wrap:anywhere;}
.teacher-financial-allowances{display:grid;gap:0;border-top:1px solid #edf0f5;}
.teacher-financial-allowances div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid #edf0f5;font-size:12px;}
.teacher-financial-allowances strong{font-family:var(--font-display);font-size:12.5px;white-space:nowrap;}
.teacher-financial-empty{padding:16px;border:1px dashed #d9dee8;border-radius:11px;background:#fafbfc;color:#667085;font-size:var(--text-small);}
.teacher-financial-action{display:flex;justify-content:flex-end;margin-top:18px;}
.teacher-allowance-edit-list{display:grid;gap:10px;}
.teacher-allowance-edit-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(180px,.85fr) auto;align-items:end;gap:10px;padding:12px;border:1px solid #e5e9f1;border-radius:12px;background:#fafbfc;}
.teacher-allowance-edit-row label{display:grid;gap:7px;font-size:12px;font-weight:700;}
.teacher-allowance-edit-row input{width:100%;height:44px;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:0 11px;font:inherit;font-size:12.5px;}
.teacher-allowance-type-delete{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 13px;border:1px solid #b42318;border-radius:10px;background:#fff5f5;color:#b42318;font:inherit;font-size:var(--text-small);font-weight:800;cursor:pointer;}
.teacher-allowance-type-delete:hover{background:#feecec;}
.teacher-new-allowance{margin-top:22px;padding-top:2px;border-top:1px solid #edf0f5;}
.teacher-allowance-save-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid #edf0f5;}
.teacher-allowance-save-row p{margin:0;color:#667085;font-size:var(--text-small);line-height:1.6;}
.teacher-allowance-save-row .btn{flex:0 0 auto;}
.teacher-financial-migration strong{color:#172033;}
@media(max-width:800px){.teacher-financial-summary{grid-template-columns:1fr}.teacher-allowance-edit-row{grid-template-columns:1fr}.teacher-allowance-type-delete{justify-self:start}.teacher-allowance-save-row{align-items:flex-start;flex-direction:column}.teacher-allowance-save-row .btn{width:100%;justify-content:center}}

/* STEP 23 — DISPENSASI KETERLAMBATAN PER SLIP */
.payroll-detail-page{width:100%;max-width:none;margin:0}.payroll-detail-page .payroll-detail-grid{grid-template-columns:1fr;gap:18px}.payroll-detail-page .payroll-net-card{max-width:none;margin:18px 0 0}.payroll-detail-page .payroll-card{padding:24px;border-radius:18px}.payroll-detail-page .payroll-net-card{border-radius:18px}.payroll-detail-page .payroll-section-title{margin:0 0 16px}.payroll-detail-page .payroll-section-title h3,.payroll-dispensation-details>summary h3{font-size:18px}
.payroll-deduction-card{min-width:0}
.payroll-section-description{margin:-4px 0 15px;color:#667085;font-size:var(--text-small);line-height:1.55}
.payroll-late-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:4px 0 22px}
.payroll-late-summary>div{min-width:0;padding:13px;border:1px solid #e5e9f1;border-radius:12px;background:#f8fafc}
.payroll-late-summary span,.payroll-late-summary small{display:block;color:#667085;font-size:var(--text-small);line-height:1.5}
.payroll-late-summary strong{display:block;margin:5px 0 3px;color:#172033;font-family:var(--font-display);font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.payroll-late-summary .is-dispensation{border-color:#b9dec9;background:#f1faf5}
.payroll-late-summary .is-dispensation strong{color:#187246}
.payroll-late-summary .is-applied{border-color:#cfd9ef;background:#f3f6fc}
.payroll-late-summary .is-applied strong{color:var(--primary)}
.payroll-dispensation-cap-note{display:flex;align-items:flex-start;gap:9px;margin:-10px 0 18px;padding:11px 12px;border-radius:10px;background:#fff8e8;color:#7a5400;font-size:var(--text-small);line-height:1.55}.payroll-dispensation-cap-note i{margin-top:1px;font-size:12px}
.payroll-subsection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:22px 0 10px;padding-top:19px;border-top:1px solid #edf0f5}
.payroll-subsection-head h4{margin:0;color:#172033;font-family:var(--font-display);font-size:13px;line-height:1.35}
.payroll-subsection-head p{margin:4px 0 0;color:#667085;font-size:var(--text-small);line-height:1.55}
.payroll-empty-state{padding:14px;border:1px dashed #d8dee9;border-radius:11px;background:#fafbfc;color:#667085;font-size:var(--text-small);text-align:center}
.payroll-dispensation-list{display:grid;gap:8px}
.payroll-dispensation-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 13px;border:1px solid #dce9e1;border-radius:11px;background:#f7fcf9}
.payroll-dispensation-item>div{min-width:0}
.payroll-dispensation-item strong{display:block;color:#172033;font-family:var(--font-display);font-size:var(--text-small);line-height:1.45}
.payroll-dispensation-item p{margin:3px 0 0;color:#667085;font-size:var(--text-small);line-height:1.55;overflow-wrap:anywhere}
.payroll-dispensation-item>span{color:#187246;font-family:var(--font-display);font-size:var(--text-small);font-weight:800;white-space:nowrap}
.payroll-dispensation-form{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(150px,.8fr);gap:11px;margin-top:12px;padding:15px;border:1px solid #e4e9f1;border-radius:12px;background:#fafbfc}
.payroll-dispensation-form label{display:grid;gap:7px;color:#344054;font-size:var(--text-small);font-weight:800}
.payroll-dispensation-form label>span{line-height:1.4}
.payroll-dispensation-form input,.payroll-dispensation-form textarea{box-sizing:border-box;width:100%;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:0 12px;color:#172033;font:inherit;font-size:12px;outline:none}
.payroll-dispensation-form input{height:44px}
.payroll-dispensation-form textarea{min-height:78px;padding-top:11px;padding-bottom:11px;line-height:1.55;resize:vertical}
.payroll-dispensation-form input:focus,.payroll-dispensation-form textarea:focus{border-color:#8fa6d6;box-shadow:0 0 0 3px rgba(0,42,170,.07)}
.payroll-dispensation-form .is-wide{grid-column:1/-1}
.payroll-dispensation-form .payroll-btn{gap:8px}
.payroll-dispensation-details>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none}.payroll-dispensation-details>summary::-webkit-details-marker{display:none}.payroll-dispensation-details>summary h3{margin:0;color:#172033;font-family:var(--font-display);font-size:18px}.payroll-dispensation-details>summary>div:first-child>span{display:block;margin-top:4px;color:#667085;font-size:var(--text-small)}.payroll-dispensation-summary{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:#667085;font-size:var(--text-small);white-space:nowrap}.payroll-dispensation-summary i{display:grid;place-items:center;width:28px;height:28px;border:1px solid #d9dee8;border-radius:50%;color:var(--primary);font-size:var(--text-small);transition:transform .18s ease}.payroll-dispensation-details[open] .payroll-dispensation-summary i{transform:rotate(180deg)}.payroll-dispensation-content{padding-top:18px;margin-top:18px;border-top:1px solid #edf0f5}.payroll-dispensation-content .payroll-section-description{margin-top:-3px}
.payroll-manual-deduction-form{grid-template-columns:minmax(180px,1fr) minmax(120px,.5fr) minmax(180px,1fr) auto;align-items:center;gap:10px;margin-top:14px;padding-top:15px;border-top:1px solid #edf0f5}.payroll-manual-deduction-form .payroll-btn{min-height:44px}
.payroll-calculation-card .payroll-dispensation-cap-note{margin:14px 0 0}
.payroll-workflow .payroll-btn{gap:8px}
@media(max-width:1180px){.payroll-detail-page .payroll-detail-grid{grid-template-columns:1fr}.payroll-detail-page .payroll-net-card{max-width:none}.payroll-late-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.payroll-manual-deduction-form{grid-template-columns:minmax(170px,1fr) minmax(110px,.5fr) minmax(170px,1fr) auto}}
@media(max-width:700px){.payroll-late-summary{grid-template-columns:1fr}.payroll-dispensation-form,.payroll-manual-deduction-form{grid-template-columns:1fr}.payroll-dispensation-form .is-wide{grid-column:auto}.payroll-dispensation-item{grid-template-columns:minmax(0,1fr) auto}.payroll-dispensation-item form{grid-column:1/-1}.payroll-dispensation-item .payroll-text-danger{padding:0}.payroll-dispensation-details>summary{align-items:flex-start}.payroll-dispensation-summary{align-items:flex-end;flex-direction:column;gap:5px}.payroll-add-form{grid-template-columns:1fr}.payroll-add-form .payroll-btn{width:100%}}

/* STEP 29 — complete PPDB workflow */
.ppdb-admin-shell,.ppdb-detail-shell,.ppdb-edit-shell{display:grid;gap:24px;}
.admin-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;}
.ppdb-admin-shell .admin-page-head,.ppdb-detail-shell .admin-page-head,.ppdb-edit-shell .admin-page-head{margin-bottom:0;}
.ppdb-stats{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:0;}
.ppdb-filter-complete{display:grid!important;grid-template-columns:minmax(260px,1.7fr) repeat(4,minmax(130px,.7fr)) auto auto;align-items:end;margin-bottom:0;}
.ppdb-filter-complete>div,.ppdb-filter-complete>div:first-child{min-width:0;flex:none;}
.ppdb-filter-complete input,.ppdb-filter-complete select{width:100%;}
.admin-status.ppdb-menunggu_daftar_ulang{background:#f2edff;color:#6941c6;}
.admin-status.ppdb-selesai{background:#e4f7f4;color:#087d6b;}
.ppdb-detail-card-wide{grid-column:1/-1;}
.ppdb-status-complete{display:grid;grid-template-columns:minmax(180px,.6fr) minmax(260px,1fr);gap:14px;}
.ppdb-status-complete>div{min-width:0;}
.ppdb-status-complete .is-wide{grid-column:1/-1;}
.ppdb-status-form input,.ppdb-status-form textarea{width:100%;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:10px 12px;font:inherit;font-size:12.5px;}
.ppdb-status-form input{height:44px;}.ppdb-status-form textarea{resize:vertical;}
.ppdb-status-complete .btn{justify-self:start;}
.ppdb-history{display:grid;gap:0;margin-top:4px;border-top:1px solid #edf0f5;}
.ppdb-history article{display:grid;grid-template-columns:130px minmax(190px,.65fr) minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid #edf0f5;align-items:start;}
.ppdb-history span,.ppdb-history small{color:#667085;font-size:var(--text-small);line-height:1.55;}.ppdb-history strong{font-size:var(--text-small);}
.ppdb-admin-edit-form{max-width:none!important;}.ppdb-admin-edit-form .teacher-master-card{scroll-margin-top:24px;}
.ppdb-edit-shell .admin-alert ul{margin:8px 0 0;padding-left:20px;}.ppdb-edit-shell .admin-alert li{margin-top:3px;}
@media(max-width:1280px){.ppdb-filter-complete{grid-template-columns:repeat(4,minmax(0,1fr));}.ppdb-filter-complete .is-search{grid-column:span 2}.ppdb-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.ppdb-filter-complete{grid-template-columns:1fr 1fr}.ppdb-filter-complete .is-search{grid-column:1/-1}.ppdb-detail-card-wide{grid-column:auto}.ppdb-status-complete{grid-template-columns:1fr}.ppdb-status-complete .is-wide{grid-column:auto}.ppdb-history article{grid-template-columns:1fr;gap:4px}.ppdb-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .admin-page-head,.admin-section-head{flex-direction:column;align-items:flex-start!important;}
  .admin-page-head-actions,.admin-section-actions{margin-left:0;justify-content:flex-start;}
  .admin-body .btn-cta{min-height:50px;padding:0 20px;border-radius:16px;}
}

/* =========================================================
   STEP 23 — ADMIN UI POLISH & CONSISTENCY
   ========================================================= */

/* Global reading rhythm */
.admin-with-sidebar .admin-shell{padding-top:0;padding-bottom:56px;}
.admin-page-head{margin-bottom:26px;align-items:center;}
.admin-page-head>div:first-child{max-width:820px;}
.admin-page-head h1{margin-bottom:8px;}
.admin-page-head p{max-width:760px;line-height:1.65;}
.admin-page-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;}
.admin-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:30px 0 16px;}
.admin-section-heading h2{margin:5px 0 6px;font-family:var(--font-display);font-size:21px;line-height:1.2;color:var(--ink);}
.admin-section-heading p{margin:0;max-width:680px;color:var(--muted);font-size:12.5px;line-height:1.6;}
.admin-filter-surface{margin-bottom:26px;}
.admin-content-section,.attendance-admin-card,.multiadmin-card,.settings-card{margin-top:0;}

/* One global back affordance */
.btn.btn-back,.admin-back-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:max-content;min-height:38px;margin:30px 0 10px;padding:0 2px;border:0!important;background:transparent!important;color:#667085!important;border-radius:8px;font-size:var(--text-small);font-weight:800;text-decoration:none;box-shadow:none!important;}
.btn.btn-back::before,.admin-back-link::before{content:'\F12F';font-family:'bootstrap-icons';font-size:14px;line-height:1;}
.btn.btn-back .bi{display:none;}
.btn.btn-back:hover,.admin-back-link:hover{color:var(--primary)!important;transform:none!important;}
.admin-page-head .btn.btn-back{margin:0;}

/* Settings always reads as a header utility */
.btn.btn-settings{min-height:42px;padding:0 15px;border:1px solid #e6b838;background:#fff7d6;color:#5e4a00!important;box-shadow:none;}
.btn.btn-settings:hover{background:#ffefad;border-color:#dba91f;color:#443500!important;transform:none;}
.btn.btn-settings .bi{font-size:13px;}

/* Sidebar: fixed icon column + left-aligned labels */
.admin-side-link,.admin-sidebar-action{justify-content:flex-start;text-align:left;}
.admin-side-link>span:not(.admin-sidebar-badge),.admin-sidebar-action>span{min-width:0;text-align:left;}
.admin-side-link .admin-sidebar-badge{margin-left:auto;}
.admin-nav-icon{width:20px;min-width:20px;height:20px;display:inline-grid;place-items:center;border-radius:6px;font-size:14px;line-height:1;}
.admin-side-link.active .admin-nav-icon{background:rgba(255,255,255,.72);}
.nav-icon-dashboard{color:#3157c8}.nav-icon-home{color:#d89200}.nav-icon-achievement{color:#b77900}.nav-icon-article{color:#2672c9}.nav-icon-profile{color:#16857a}.nav-icon-ppdb{color:#7650c7}.nav-icon-staff{color:#278650}.nav-icon-attendance{color:#0087a6}.nav-icon-payroll{color:#c66b16}.nav-icon-admin{color:#c2413a}.nav-icon-history{color:#5967ad}.nav-icon-website{color:#47705a}.nav-icon-logout{color:#b42318}

/* Dashboard V3 */
.dashboard-v3-shell{display:grid;gap:22px;}
.dashboard-v3-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:34px;padding:34px 36px;border-radius:24px;background:linear-gradient(135deg,var(--primary) 0%,#073b99 58%,#0f6b52 135%);color:#fff;box-shadow:0 18px 42px rgba(0,42,170,.14);}
.dashboard-v3-hero::after{content:'';position:absolute;right:-80px;top:-150px;width:360px;height:360px;border:70px solid rgba(255,216,0,.12);border-radius:50%;}
.dashboard-v3-hero-copy,.dashboard-v3-hero-actions{position:relative;z-index:1;}
.dashboard-v3-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:15px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.12);font-size:var(--text-small);font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.dashboard-v3-hero h1{margin:0 0 9px;font-size:34px;color:#fff;}
.dashboard-v3-hero p{max-width:700px;margin:0;color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.65;}
.dashboard-v3-date{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:rgba(255,255,255,.82);font-size:var(--text-small);font-weight:700;}
.dashboard-v3-hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:178px;}
.dashboard-v3-site-link,.dashboard-v3-history-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 15px;border-radius:11px;text-decoration:none;font-size:var(--text-small);font-weight:800;}
.dashboard-v3-site-link{background:#ffd800;color:#00236f;}.dashboard-v3-site-link:hover{background:#f3ca00;}
.dashboard-v3-history-link{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;}.dashboard-v3-history-link:hover{background:rgba(255,255,255,.14);}
.dashboard-v3-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.dashboard-v3-metric{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:132px;padding:20px;border:1px solid #e4e9f1;border-radius:18px;background:#fff;color:#172033;text-decoration:none;transition:.16s ease;}
.dashboard-v3-metric:hover{transform:translateY(-2px);border-color:#ccd6e5;box-shadow:0 12px 28px rgba(16,24,40,.06);}
.dashboard-v3-metric-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;font-size:19px;}
.metric-ppdb .dashboard-v3-metric-icon{background:#f3edff;color:#7650c7}.metric-attendance .dashboard-v3-metric-icon{background:#e7f8fb;color:#0087a6}.metric-payroll .dashboard-v3-metric-icon{background:#fff2df;color:#c66b16}.metric-content .dashboard-v3-metric-icon{background:#eef3ff;color:#3157c8}
.dashboard-v3-metric-copy{min-width:0;display:flex;flex-direction:column;gap:5px;}
.dashboard-v3-metric-copy small{color:#667085;font-size:var(--text-small);font-weight:800;text-transform:uppercase;letter-spacing:.04em;}.dashboard-v3-metric-copy strong{font-family:var(--font-number);font-size:27px;line-height:1.05;}.dashboard-v3-metric-copy em{color:#98a2b3;font-size:var(--text-small);font-style:normal;}
.dashboard-v3-arrow{color:#b4bcc8;font-size:14px;}
.dashboard-v3-workspace{padding:26px;border:1px solid #e4e9f1;border-radius:20px;background:#fff;}
.dashboard-v3-workspace .admin-section-heading{margin:0 0 18px;}
.dashboard-v3-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.dashboard-v3-shortcuts>a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid #e8ecf2;border-radius:13px;background:#fbfcfe;color:#172033;text-decoration:none;transition:.15s ease;}
.dashboard-v3-shortcuts>a:hover{background:#fff;border-color:#cfd8e5;transform:translateY(-1px);}
.dashboard-v3-shortcuts .shortcut-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#f1f4fa;color:var(--primary);font-size:15px;}
.dashboard-v3-shortcuts strong,.dashboard-v3-shortcuts small{display:block;}.dashboard-v3-shortcuts strong{font-size:var(--text-small)}.dashboard-v3-shortcuts small{margin-top:3px;color:#7a8699;font-size:var(--text-small);}.dashboard-v3-shortcuts>a>.bi{color:#a2acba;font-size:var(--text-small);}

/* Attendance reading order */
.attendance-nav-row{justify-content:flex-start;margin-bottom:0;}
.attendance-section-heading{margin-top:28px;}
.attendance-filter-bar{margin-top:0;}
.attendance-recap-filter{margin-top:0;}
.attendance-settings-shell>.btn-back{margin-top:30px;}
.attendance-settings-shell .admin-page-head{padding-top:0!important;margin-top:4px;}
.attendance-settings-card,.attendance-settings-integrated{margin-bottom:24px;}
.attendance-setting-section{padding-top:2px;}

/* Prestasi hierarchy */
.achievement-list-heading{margin-top:30px;margin-bottom:14px;}
.achievement-toolbar{align-items:flex-start;margin-bottom:18px;}
.achievement-filter{flex:1 1 680px;}
.achievement-csv-actions{align-self:flex-end;}

/* Semantic account-state actions */
.multiadmin-actions button.btn-deactivate{border:1px solid #f3c66d;background:#fff5dc;color:#8a5600;}
.multiadmin-actions button.btn-deactivate:hover{background:#ffe9b3;border-color:#dda840;}
.multiadmin-actions button.btn-activate{border:1px solid #b7e4ca;background:#eaf8f0;color:#17623d;}
.multiadmin-actions button.btn-activate:hover{background:#d8f1e3;border-color:#8fd0ad;}

/* Section spacing normalization */
.achievement-stats,.attendance-admin-stats,.payroll-stats,.ppdb-stats{margin-bottom:28px;}
.admin-table-wrap{margin-top:0;}
.admin-action-toolbar{margin-top:14px;margin-bottom:18px;}

@media(max-width:1280px){
  .dashboard-v3-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dashboard-v3-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* =========================================================
   STEP 24 — RHYTHM / BACK CONTROL / SURFACE CLEANUP
   Final override layer to remove legacy collisions.
   ========================================================= */
:root{
    --admin-leading-title:1.12;
    --admin-leading-heading:1.24;
    --admin-leading-body:1.55;
    --admin-page-top:36px;
    --admin-page-bottom:64px;
    --admin-section-space:32px;
    --admin-block-space:24px;
    --admin-inner-space:16px;
}

/* Typography: one predictable leading system. */
.admin-body{line-height:var(--admin-leading-body);}
.admin-body .section-eyebrow{
    margin:0 0 8px;
    line-height:1.2;
}
.admin-body .admin-page-head h1,
.admin-body .dashboard-v3-hero h1{
    margin:0;
    line-height:var(--admin-leading-title);
}
.admin-body .admin-page-head p{
    margin:8px 0 0;
    line-height:var(--admin-leading-body);
}
.admin-body .admin-section-heading h2,
.admin-body .admin-section-head h2,
.admin-body .attendance-card-head h2,
.admin-body .attendance-setting-section-head h2,
.admin-body .teacher-master-section-head h2,
.admin-body .settings-card-head h2,
.admin-body .ppdb-detail-card h2,
.admin-body .multiadmin-card h2,
.admin-body .payroll-section-title h3{
    line-height:var(--admin-leading-heading);
}
.admin-body .admin-section-heading p,
.admin-body .admin-section-head p,
.admin-body .attendance-setting-section-head p,
.admin-body .teacher-master-section-head p,
.admin-body .settings-card-head p{
    line-height:var(--admin-leading-body);
}

/* The page owns its top spacing; headers no longer add a second top offset. */
.admin-with-sidebar .admin-shell{
    padding-top:var(--admin-page-top)!important;
    padding-bottom:var(--admin-page-bottom)!important;
}
.admin-with-sidebar .admin-page-head,
.admin-with-sidebar .dashboard-hero{
    padding-top:0!important;
}
.admin-page-head{
    margin:0 0 var(--admin-block-space)!important;
    gap:24px;
    align-items:flex-start!important;
}
.admin-page-head-actions,
.teacher-detail-actions,
.achievement-head-actions{
    align-self:flex-start;
    margin-left:auto;
}

/* One and only page-level back control. */
.admin-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:max-content;
    min-height:34px;
    margin:0 0 14px;
    padding:0;
    border:0;
    background:transparent;
    color:#667085;
    font-family:var(--font-display);
    font-size:var(--text-small);
    font-weight:800;
    line-height:1;
    text-decoration:none;
    box-shadow:none;
    transition:color .15s ease;
}
.admin-back-button .bi{font-size:14px;line-height:1;}
.admin-back-button:hover{color:var(--primary);}
.admin-back-button:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px;}
.admin-back-button + .admin-page-head{margin-top:0!important;}
/* Legacy classes only survive on login; panel pages use admin-back-button. */
.admin-body .btn.btn-back{margin:0!important;}

/* Consistent section rhythm without margin stacking. */
.admin-section-heading{
    margin:var(--admin-section-space) 0 var(--admin-inner-space)!important;
    align-items:flex-end;
}
.admin-section-heading:first-child{margin-top:0!important;}
.admin-filter-surface,
.admin-filter-toolbar{
    margin-top:0!important;
    margin-bottom:var(--admin-block-space)!important;
}
.admin-alert{margin:0 0 var(--admin-block-space)!important;}
.admin-segmented-nav{margin:0 0 var(--admin-block-space)!important;}
.admin-table-wrap{margin-top:0!important;}

/* Keep related content together; avoid double gaps from grid + margins. */
.teacher-data-shell,
.teacher-data-form-shell,
.teacher-detail-shell,
.attendance-admin-shell,
.attendance-recap-shell,
.attendance-settings-shell,
.attendance-detail-shell,
.attendance-manual-shell{
    row-gap:0!important;
}
.teacher-master-form{gap:var(--admin-block-space)!important;}
.teacher-master-footer{margin-top:0;}
.teacher-detail-nav + .admin-alert{margin-top:0!important;}
.teacher-detail-nav + .teacher-detail-hero,
.teacher-detail-nav + .teacher-master-card,
.teacher-detail-nav + .teacher-salary-layout{margin-top:0!important;}

/* Attendance: page -> tabs -> section headline -> filter -> stats -> work area. */
.attendance-nav-row{margin:0 0 var(--admin-block-space)!important;}
.attendance-section-heading{margin:0 0 var(--admin-inner-space)!important;}
.attendance-filter-bar,
.attendance-recap-filter{margin:0 0 var(--admin-block-space)!important;}
.attendance-admin-stats,
.attendance-recap-stats{margin:0 0 var(--admin-section-space)!important;}
.attendance-admin-grid{margin:0 0 var(--admin-section-space)!important;}
.attendance-list-card{margin-top:0!important;}

/* Detail staff: filters inside a content surface should be toolbars, not another card. */
.teacher-person-attendance-panel{padding:24px;}
.teacher-person-attendance-panel .attendance-card-head{
    margin:0 0 18px;
    padding:0;
    border:0;
}
.teacher-person-range-filter{
    margin:0 0 20px!important;
    padding:0 0 20px!important;
    border:0!important;
    border-bottom:1px solid #E8ECF2!important;
    border-radius:0!important;
    background:transparent!important;
}
.teacher-person-attendance-stats{margin:0 0 20px;}
.teacher-person-attendance-stats article{
    border:0;
    background:#F7F9FC;
}

/* Settings Absensi: outer sections are surfaces; children are panes, never cards inside cards. */
.attendance-settings-shell > .admin-page-head{margin-bottom:var(--admin-block-space)!important;}
.attendance-settings-card{
    margin:0 0 var(--admin-block-space)!important;
    overflow:visible;
}
.attendance-settings-integrated{margin-top:0!important;}
.attendance-settings-pane{
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.attendance-calendar-integrated-grid{
    gap:24px;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #EDF0F4;
}
.attendance-calendar-create{
    padding-right:24px;
    border-right:1px solid #EDF0F4;
}
.attendance-calendar-list{min-width:0;}
.attendance-settings-preview{
    margin:20px 0;
    padding:18px 0;
    border-top:1px solid #EDF0F4;
    border-bottom:1px solid #EDF0F4;
    background:transparent;
}
.attendance-settings-preview .attendance-card-head{margin-bottom:16px;}
.fingerprint-upload-form{margin-bottom:0;}

/* Dashboard: shortcut tiles are already cards; their parent should not be another card. */
.dashboard-v3-shell{gap:24px;}
.dashboard-v3-hero{margin-top:0!important;}
.dashboard-v3-workspace{
    padding:8px 0 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.dashboard-v3-workspace .admin-section-heading{margin:0 0 16px!important;}

/* Prestasi: avoid large empty jumps between summary and data controls. */
.achievement-stats{margin-bottom:0!important;}
.achievement-list-heading{margin:var(--admin-section-space) 0 var(--admin-inner-space)!important;}
.achievement-toolbar{margin:0 0 var(--admin-block-space)!important;}

/* Settings/profile form: top-level cards only, consistent separation. */
.settings-form{display:grid;gap:var(--admin-block-space);}
.settings-card{margin:0!important;}
.settings-actions{margin-top:0!important;}

/* Admin user form and list are sibling surfaces, not visually glued. */
.multiadmin-card{margin:0 0 var(--admin-block-space)!important;}

/* Back/detail pages should not start with a segmented nav before context. */
.attendance-detail-shell .attendance-detail-grid,
.attendance-manual-shell .attendance-manual-card{margin-top:0;}

@media(max-width:1180px){
    .admin-with-sidebar .admin-shell{padding-top:32px!important;padding-bottom:56px!important;}
    .attendance-calendar-create{padding-right:0;border-right:0;}
    .attendance-calendar-integrated-grid{grid-template-columns:1fr;}
}

/* =========================================================
   STEP 25 — DATA STAF & GURU SECTION RHYTHM / OPEN SECTION
   ========================================================= */
/* Step 24 intentionally removed stacked margins, but Data Staf & Guru is a
   true page-level stack. Restore one controlled gap at the parent level so
   header, tabs, summary, filters and data never visually stick together. */
.teacher-data-shell{
    row-gap:28px!important;
}

/* Direct children rely on the parent's gap only; no additive margins. */
.teacher-data-shell>.admin-page-head,
.teacher-data-shell>.admin-alert,
.teacher-data-shell>.admin-segmented-nav,
.teacher-data-shell>.teacher-data-stats,
.teacher-data-shell>.teacher-data-filter,
.teacher-data-shell>.admin-table-wrap,
.teacher-data-shell>.teacher-structure-admin{
    margin-top:0!important;
    margin-bottom:0!important;
}

/* Personel Struktur follows the same open-section grammar as other modules:
   section heading on the page surface, table as the only bordered surface. */
.teacher-structure-admin{
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.teacher-structure-admin>.teacher-structure-heading{
    margin:0 0 16px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    align-items:flex-start;
}
.teacher-structure-admin>.teacher-structure-heading h2{
    margin:4px 0 0;
}
.teacher-structure-admin>.teacher-structure-heading p{
    max-width:860px;
    margin:7px 0 0;
    color:#667085;
    font-size:12px;
    line-height:var(--admin-leading-body,1.55);
}
.teacher-structure-admin>.admin-table-wrap{
    margin:0!important;
}

/* =========================================================
   STEP 26 — CENTERED ADMIN CANVAS + STAFF DETAIL/FORM RHYTHM
   ========================================================= */
:root{
    --admin-shell-inline:32px;
    --teacher-form-max:1144px;
}

/* Center every admin page inside the usable area to the right of the sidebar.
   Legacy sidebar rules set margin:0; this final layer deliberately restores
   a centered canvas while keeping the same readable content width. */
.admin-with-sidebar .admin-main-column{
    min-width:0;
}
.admin-with-sidebar .admin-shell{
    width:100%!important;
    max-width:calc(var(--admin-content-max) + (var(--admin-shell-inline) * 2))!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:var(--admin-shell-inline)!important;
    padding-right:var(--admin-shell-inline)!important;
}

/* The staff form is intentionally a little narrower than data-heavy pages,
   but the whole page column (back control, heading, form, danger zone) stays
   centered instead of hanging from the left edge. */
.admin-with-sidebar .teacher-data-form-shell{
    max-width:var(--teacher-form-max)!important;
}

/* Staff detail: context -> navigation -> active tab content. */
.teacher-detail-shell{
    row-gap:0!important;
}
.teacher-detail-shell>.admin-back-button{
    margin-bottom:14px!important;
}
.teacher-detail-shell>.admin-page-head{
    margin-bottom:24px!important;
}
.teacher-detail-shell>.teacher-detail-nav{
    margin-bottom:28px!important;
}
.teacher-detail-shell>.admin-alert{
    margin-bottom:24px!important;
}
.teacher-detail-hero + .teacher-detail-grid{
    margin-top:28px!important;
}
.teacher-detail-grid{
    gap:24px!important;
}
.teacher-salary-layout{
    gap:24px!important;
}

/* Staff form: keep one predictable vertical rhythm between form sections. */
.teacher-data-form-shell{
    row-gap:0!important;
}
.teacher-data-form-shell>.admin-back-button{
    margin-bottom:14px!important;
}
.teacher-data-form-shell>.admin-page-head{
    margin-bottom:28px!important;
}
.teacher-data-form-shell>.admin-alert{
    margin-bottom:24px!important;
}
.teacher-master-form{
    width:100%;
    max-width:none!important;
    gap:28px!important;
}
.teacher-master-card{
    margin:0!important;
}
.teacher-master-form + .teacher-danger-zone{
    margin-top:32px!important;
}
.teacher-master-footer{
    margin-top:0!important;
    padding-top:2px;
}

/* Keep cards internally calm after increasing the page-level separation. */
.teacher-master-section-head{
    margin-bottom:20px!important;
}
.teacher-photo-editor{
    gap:24px!important;
}

@media(max-width:1180px){
    :root{--admin-shell-inline:24px;}
    .admin-with-sidebar .teacher-data-form-shell{
        max-width:100%!important;
    }
}

/* =========================================================
   STEP 27 — REAL CONTENT COLUMN + PRESTASI / ABSENSI STABILITY
   ========================================================= */
/*
 * The admin content now lives inside .admin-main-column in the markup.
 * Center the page inside the usable canvas (the viewport minus the fixed
 * sidebar), not inside the full browser viewport.
 */
.admin-with-sidebar .admin-main-column{
    width:calc(100% - var(--admin-sidebar-width));
    min-width:0;
    margin-left:var(--admin-sidebar-width);
}
.admin-with-sidebar .admin-shell{
    box-sizing:border-box;
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* Prestasi: keep the filter as the flexible region and utilities as a clear
   sibling. This prevents the CSV actions from squeezing the search controls
   or pushing the page off-center. */
.achievement-page-head,
.achievement-toolbar,
.achievement-filter,
.achievement-stats,
.achievement-toolbar>*{
    min-width:0;
}
.achievement-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    column-gap:20px;
    row-gap:14px;
}
.achievement-filter{
    width:100%;
    flex:initial;
}
.achievement-csv-actions{
    justify-content:flex-end;
}

/* Absensi: all wide grid/table regions must be allowed to shrink inside the
   centered content column instead of forcing the canvas toward the sidebar. */
.attendance-admin-shell,
.attendance-admin-grid,
.attendance-admin-grid>*,
.attendance-admin-stats,
.attendance-filter-bar,
.attendance-list-card,
.attendance-table-wrap{
    min-width:0;
}
.attendance-filter-bar{
    width:100%;
    box-sizing:border-box;
}
.attendance-date-filter{
    width:100%;
}
.attendance-date-filter label{
    flex:0 1 280px;
    min-width:220px;
}
.attendance-list-card{
    width:100%;
}

/* The panel is desktop-only, but 1100–1350 px screens have a much smaller
   usable area after subtracting the sidebar. Stack secondary actions sooner
   so both pages keep a clean reading order. */
@media(max-width:1380px){
    .achievement-toolbar{
        grid-template-columns:1fr;
    }
    .achievement-csv-actions{
        justify-content:flex-start;
    }
    .attendance-admin-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .attendance-admin-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:1180px){
    .achievement-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .achievement-filter{
        align-items:flex-end;
    }
}

/* =========================================================
   STEP 28 — PRESTASI TOOLBAR + ABSENSI HISTORY SPACING
   ========================================================= */
/* Prestasi: CSV utilities belong to the section heading, never to the
   filter row. This keeps the reading order stable at every desktop width. */
.achievement-list-heading{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:24px!important;
}
.achievement-list-heading > div:first-child{
    min-width:0;
}
.achievement-list-heading .achievement-csv-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-left:auto;
    flex:0 0 auto;
}
.achievement-filter-row{
    display:grid!important;
    grid-template-columns:minmax(320px,1fr) 210px 220px auto!important;
    align-items:end!important;
    gap:14px!important;
    width:100%!important;
    margin:0 0 var(--admin-block-space)!important;
}
.achievement-filter-row > div,
.achievement-filter-row input,
.achievement-filter-row select{
    min-width:0;
    width:100%;
}
.achievement-filter-row .achievement-filter-btn{
    width:auto!important;
    min-width:148px;
}
.achievement-filter-row .achievement-reset{
    grid-column:1 / -1;
    width:max-content;
    margin-top:-2px;
}

/* Absensi: historical notice and attendance list are separate content
   blocks. A legacy zero-margin rule previously made their borders touch. */
.attendance-history-note{
    margin:0 0 var(--admin-block-space)!important;
}
.attendance-history-note + .attendance-list-card{
    margin-top:0!important;
}
.attendance-admin-grid + .attendance-list-card{
    margin-top:var(--admin-block-space)!important;
}

/* Rekap absensi also needs explicit separation between the period note
   and the summary table card. */
.attendance-recap-note{
    margin:0 0 var(--admin-block-space)!important;
}
.attendance-recap-note + .attendance-list-card{
    margin-top:0!important;
}

@media(max-width:1450px){
    .achievement-list-heading{
        align-items:flex-start!important;
        flex-direction:column;
    }
    .achievement-list-heading .achievement-csv-actions{
        justify-content:flex-start;
        margin-left:0;
    }
    .achievement-filter-row{
        grid-template-columns:minmax(280px,1fr) repeat(2,minmax(180px,220px)) auto!important;
    }
}
@media(max-width:1220px){
    .achievement-filter-row{
        grid-template-columns:minmax(0,1fr) minmax(170px,.45fr)!important;
    }
    .achievement-filter-row .achievement-search-field{
        grid-column:1 / -1;
    }
    .achievement-filter-row .achievement-filter-btn{
        justify-self:start;
    }
}

/* =========================================================
   STEP 39 — PENGATURAN ABSENSI: CLEAN SECTIONED LAYOUT
   ========================================================= */
.attendance-settings-v2{
    --attendance-settings-gap:28px;
    --attendance-settings-inner:22px;
    display:block!important;
}
.attendance-settings-v2 > .admin-back-button{margin-bottom:14px!important;}
.attendance-settings-v2 > .attendance-settings-page-head{margin:0 0 28px!important;}
.attendance-settings-v2 > .admin-alert{margin:0 0 20px!important;}

.attendance-settings-section{
    margin:0 0 var(--attendance-settings-gap);
    overflow:hidden;
    border:1px solid #E2E7EF;
    border-radius:18px;
    background:#fff;
    box-shadow:none;
}
.attendance-settings-section:last-of-type{margin-bottom:0;}
.attendance-settings-section-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:24px 26px 20px;
    border-bottom:1px solid #E9EDF3;
}
.attendance-settings-section-heading h2{
    margin:5px 0 7px;
    font-family:var(--font-display,"Raleway",sans-serif);
    font-size:20px;
    line-height:1.2;
    color:#172033;
}
.attendance-settings-section-heading p,
.attendance-settings-group-copy p,
.attendance-import-preview-head p{
    margin:0;
    max-width:760px;
    color:#667085;
    font-size:12px;
    line-height:1.65;
}

.attendance-settings-form{display:block;}
.attendance-settings-group{
    margin:0;
    padding:22px 26px;
    border:0;
    border-bottom:1px solid #EDF0F4;
    border-radius:0;
    background:transparent;
}
.attendance-settings-group:last-child{border-bottom:0;}
.attendance-settings-group-switch,
.attendance-settings-group-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}
.attendance-settings-group-head{margin-bottom:18px;}
.attendance-settings-group-copy h3,
.attendance-calendar-records-head h3,
.attendance-import-upload h3,
.attendance-import-preview h3{
    margin:0 0 6px;
    font-family:var(--font-display,"Raleway",sans-serif);
    font-size:15px;
    line-height:1.3;
    color:#172033;
}
.attendance-settings-fields{margin-top:18px;}
.attendance-settings-v2 .attendance-setting-grid,
.attendance-settings-v2 .attendance-location-admin-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.attendance-settings-v2 .attendance-location-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.attendance-location-points{display:grid;grid-template-columns:1fr;gap:14px}
.attendance-location-point{min-width:0;padding:18px;border:1px solid #DDE4EE;border-radius:14px;background:#FAFBFD}
.attendance-location-point header{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.attendance-location-point-number{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#E8EEFF;color:var(--primary);font-family:var(--font-display);font-size:12px;font-weight:800}
.attendance-location-point h4{margin:0;color:#172033;font-family:var(--font-display);font-size:13px}
.attendance-location-point p{margin:3px 0 0;color:#667085;font-size:11px}
.attendance-location-point-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.attendance-location-point-fields label:last-child{grid-column:auto;max-width:none}
.attendance-location-accuracy{display:flex;align-items:end;gap:16px;margin-top:14px;padding:14px 16px;border-radius:12px;background:#F7F9FC}
.attendance-location-accuracy label{display:grid;gap:7px;min-width:180px;color:#475467;font-size:var(--text-small);font-weight:800}
.attendance-location-accuracy input{width:100%;min-width:0;height:44px;border:1px solid #D8DFEA;border-radius:10px;background:#fff;color:#172033;font:inherit;padding:0 12px}
.attendance-location-accuracy p{margin:0 0 11px;color:#667085;font-size:12px;line-height:1.55}
.attendance-settings-v2 .attendance-location-point-fields label{
    display:grid;
    gap:7px;
    min-width:0;
    color:#475467;
    font-size:var(--text-small);
    font-weight:800;
}
.attendance-settings-v2 .attendance-location-point-fields>label>input{
    width:100%;
    min-width:0;
    height:44px;
    padding:0 12px;
    border:1px solid #D8DFEA;
    border-radius:10px;
    background:#fff;
    color:#172033;
    font:inherit;
}
.attendance-settings-v2 .attendance-location-point-fields .attendance-number-field,
.attendance-settings-v2 .attendance-location-accuracy .attendance-number-field{
    display:flex;
    align-items:center;
    min-height:44px;
    border:1px solid #D8DFEA;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}
.attendance-settings-v2 .attendance-location-point-fields .attendance-number-field input,
.attendance-settings-v2 .attendance-location-accuracy .attendance-number-field input{
    width:100%;
    min-width:0;
    height:42px;
    padding:0 12px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#172033;
    font:inherit;
}
.attendance-settings-v2 .attendance-setting-grid label,
.attendance-settings-v2 .attendance-location-admin-grid label,
.attendance-calendar-create-form label,
.attendance-month-filter label{
    display:grid;
    gap:7px;
    min-width:0;
    color:#475467;
    font-size:var(--text-small);
    font-weight:800;
}
.attendance-settings-v2 .attendance-setting-grid input,
.attendance-settings-v2 .attendance-location-admin-grid input,
.attendance-calendar-create-form input,
.attendance-calendar-create-form select,
.attendance-calendar-create-form textarea,
.attendance-month-filter input,
.attendance-import-preview select{
    width:100%;
    min-width:0;
    border:1px solid #D8DFEA;
    border-radius:10px;
    background:#fff;
    color:#172033;
    font:inherit;
}
.attendance-settings-v2 .attendance-setting-grid input,
.attendance-settings-v2 .attendance-location-admin-grid input,
.attendance-calendar-create-form input,
.attendance-calendar-create-form select,
.attendance-month-filter input,
.attendance-import-preview select{height:44px;padding:0 12px;}
.attendance-calendar-create-form textarea{min-height:84px;padding:11px 12px;resize:vertical;}
.attendance-settings-v2 .attendance-number-field,
.attendance-settings-v2 .attendance-locked-field{min-height:44px;}
.attendance-location-admin-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
    color:#667085;
    font-size:var(--text-small);
}
.attendance-settings-section-actions{
    display:flex;
    justify-content:flex-end;
    padding:18px 26px;
    background:#FAFBFC;
}

/* Kalender */
.attendance-weekday-group{padding-bottom:24px;}
.attendance-weekday-form{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:18px;
}
.attendance-settings-v2 .attendance-weekday-checks{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.attendance-settings-v2 .attendance-weekday-checks label{margin:0;}
.attendance-calendar-workspace{
    display:grid;
    grid-template-columns:minmax(280px,.75fr) minmax(0,1.35fr);
    gap:0;
    padding:0!important;
    border-bottom:0!important;
}
.attendance-calendar-editor,
.attendance-calendar-records{min-width:0;padding:24px 26px;}
.attendance-calendar-editor{border-right:1px solid #EDF0F4;}
.attendance-calendar-create-form{display:grid;gap:13px;margin-top:18px;}
.attendance-calendar-create-form .btn{justify-self:start;}
.attendance-calendar-records-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
}
.attendance-settings-v2 .attendance-month-filter{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:0;
    flex:0 0 auto;
}
.attendance-settings-v2 .attendance-month-filter label{min-width:158px;}
.attendance-settings-table-wrap{
    overflow:auto;
    border:1px solid #E5E9F1;
    border-radius:12px;
    background:#fff;
}
.attendance-settings-table-wrap .attendance-table{min-width:680px;}
.attendance-settings-table-wrap .attendance-table th{background:#F8FAFC;}
.attendance-settings-table-wrap .attendance-table tbody tr:last-child td{border-bottom:0;}

/* Import fingerprint */
.attendance-import-upload{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
    gap:24px;
    align-items:center;
    padding:22px 26px;
    border-bottom:1px solid #EDF0F4;
}
.attendance-import-upload-copy{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
    align-items:start;
}
.attendance-import-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#EDF3FF;
    color:var(--primary);
    font-size:20px;
}
.attendance-import-upload-copy p{margin:0;color:#667085;font-size:var(--text-small);line-height:1.65;}
.attendance-import-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    margin:0;
}
.attendance-import-form input[type=file]{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:5px 6px;
    border:1px solid #D8DFEA;
    border-radius:10px;
    background:#fff;
    color:#475467;
    font-size:var(--text-small);
}
.attendance-import-form input[type=file]::file-selector-button{
    min-height:32px;
    margin-right:10px;
    padding:0 11px;
    border:0;
    border-radius:7px;
    background:#F1F4F8;
    color:#344054;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}
.attendance-import-preview{
    margin:0;
    padding:22px 26px;
    border:0;
    border-bottom:1px solid #EDF0F4;
    background:#FBFCFE;
}
.attendance-import-preview-head{margin-bottom:16px;}
.attendance-import-preview-head h3{margin-top:5px;}
.attendance-import-preview-form{margin:0;}
.attendance-import-preview-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:14px;
}
.attendance-import-cancel-form{margin:8px 0 0;display:flex;justify-content:flex-end;}
.attendance-import-history{padding:22px 26px 26px;}
.attendance-import-history-head{margin-bottom:16px;}

@media(max-width:1180px){
    .attendance-settings-v2 .attendance-setting-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .attendance-calendar-workspace{grid-template-columns:1fr;}
    .attendance-calendar-editor{border-right:0;border-bottom:1px solid #EDF0F4;}
    .attendance-import-upload{grid-template-columns:1fr;align-items:start;}
}
@media(max-width:900px){
    .attendance-settings-v2 .attendance-location-admin-grid{grid-template-columns:1fr;}
    .attendance-location-point-fields{grid-template-columns:1fr;}
    .attendance-location-accuracy{align-items:flex-start;flex-direction:column;gap:10px;}
    .attendance-location-accuracy p{margin:0;}
    .attendance-settings-group-switch,
    .attendance-settings-group-head,
    .attendance-weekday-form,
    .attendance-calendar-records-head{align-items:flex-start;flex-direction:column;}
    .attendance-settings-v2 .attendance-month-filter{width:100%;}
    .attendance-settings-v2 .attendance-month-filter label{flex:1;min-width:0;}
}
@media(max-width:700px){
    .attendance-settings-section-heading,
    .attendance-settings-group,
    .attendance-calendar-editor,
    .attendance-calendar-records,
    .attendance-import-upload,
    .attendance-import-preview,
    .attendance-import-history{padding-left:20px;padding-right:20px;}
    .attendance-settings-v2 .attendance-setting-grid{grid-template-columns:1fr;}
    .attendance-settings-section-actions{padding:16px 20px;justify-content:stretch;}
    .attendance-settings-section-actions .btn{width:100%;}
    .attendance-import-form{grid-template-columns:1fr;}
    .attendance-import-form .btn{width:100%;}
}

/* STEP 31 — canonical settings and document actions */
.admin-body .btn-settings,.admin-body .btn.btn-settings{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 15px;border:1px solid #e6b838!important;border-radius:10px;background:#fff7d6!important;color:#5e4a00!important;font-family:var(--font-display);font-size:12px;font-weight:800;line-height:1;text-decoration:none;box-shadow:none;transform:none}.admin-body .btn-settings:hover,.admin-body .btn-settings.is-active{border-color:#dba91f!important;background:#ffefad!important;color:#443500!important;transform:none}.admin-body .btn-settings .bi{font-size:13px;line-height:1}
.admin-body .btn-document,.admin-body .btn.btn-document{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 15px;border:1px solid #cbd8ee!important;border-radius:10px;background:#f0f5ff!important;color:#234c99!important;font-family:var(--font-display);font-size:12px;font-weight:800;line-height:1;text-decoration:none;box-shadow:none;transform:none}.admin-body .btn-document:hover,.admin-body .btn.btn-document:hover{border-color:#aebfdf!important;background:#e3ecff!important;color:#163d88!important;transform:none}.admin-body .btn-document .bi{font-size:14px;line-height:1}
.admin-body .admin-document-link{display:inline-flex;align-items:center;gap:5px;color:#234c99!important}.admin-body .admin-document-link .bi{font-size:13px}.admin-body .btn-utility{gap:7px}.admin-body .btn-utility .bi{font-size:13px;line-height:1}

/* STEP 30 — PPDB settings and protected deletion */
.ppdb-settings-shell,.ppdb-settings-form{display:grid;gap:22px}.ppdb-settings-head{margin-bottom:0}.ppdb-settings-card{padding:24px;border:1px solid #e3e8f0;border-radius:18px;background:#fff}.ppdb-settings-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.ppdb-settings-card-head h2{margin:4px 0 0;font-size:19px}.ppdb-settings-card-head p{max-width:650px;margin:7px 0 0;color:#667085;font-size:var(--text-small);line-height:1.65}.ppdb-live-state{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;border-radius:999px;font-size:var(--text-small);font-weight:900;text-transform:uppercase;white-space:nowrap}.ppdb-live-state i{font-size:6px}.ppdb-live-state.is-open{background:#e7f7ee;color:#177245}.ppdb-live-state.is-closed{background:#fff0ef;color:#b42318}.ppdb-status-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.ppdb-status-options label{cursor:pointer}.ppdb-status-options input{position:absolute;opacity:0;pointer-events:none}.ppdb-status-options label>span{display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:17px;border:1px solid #e0e5ed;border-radius:13px;background:#fafbfd;transition:.16s ease}.ppdb-status-options label>span>i{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#eef1f6;color:#667085}.ppdb-status-options strong,.ppdb-status-options small{grid-column:2}.ppdb-status-options strong{font-size:12px}.ppdb-status-options small{margin-top:4px;color:#667085;font-size:var(--text-small)}.ppdb-status-options input:checked+span{border-color:#9eb3e2;background:#f2f6ff;box-shadow:0 0 0 3px rgba(0,42,170,.06)}.ppdb-status-options input:checked+span>i{background:var(--primary);color:#fff}.ppdb-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.ppdb-settings-fields{display:grid;gap:15px;margin-top:20px}.ppdb-settings-fields label{display:grid;gap:7px;color:#344054;font-size:var(--text-small);font-weight:800}.ppdb-settings-fields label small{color:#7a8496;font-size:var(--text-small);font-weight:500}.ppdb-settings-fields input,.ppdb-settings-fields textarea{width:100%;border:1px solid #d9dee8;border-radius:10px;background:#fff;padding:10px 11px;color:#172033;font:inherit;font-size:12px}.ppdb-settings-fields input{height:44px}.ppdb-settings-fields textarea{resize:vertical;line-height:1.6}.ppdb-danger-setting{border-color:#efcecb;background:#fffafa}.ppdb-danger-setting .ppdb-settings-card-head{align-items:center}.ppdb-setting-switch{display:flex;align-items:center;gap:9px;min-width:max-content;cursor:pointer}.ppdb-setting-switch input{position:absolute;opacity:0}.ppdb-setting-switch span{position:relative;width:38px;height:22px;border-radius:999px;background:#cbd2dc;transition:.18s}.ppdb-setting-switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 4px rgba(0,0,0,.2)}.ppdb-setting-switch input:checked+span{background:#b42318}.ppdb-setting-switch input:checked+span::after{transform:translateX(16px)}.ppdb-setting-switch strong{font-size:var(--text-small);color:#8e2929}.ppdb-settings-actions{display:flex;justify-content:flex-end;gap:9px}.ppdb-delete-zone{display:flex;align-items:center;justify-content:space-between;gap:24px;border-color:#efcecb;background:#fffafa}.ppdb-delete-zone h2{margin:4px 0 0}.ppdb-delete-zone p{margin:7px 0 0;color:#667085;font-size:var(--text-small)}.ppdb-delete-shell{display:grid;gap:22px}.ppdb-delete-card{max-width:720px;padding:24px;border:1px solid #efcecb;border-radius:18px;background:#fff}.ppdb-delete-warning{display:flex;gap:14px;padding:16px;border-radius:12px;background:#fff2f0;color:#8e2929}.ppdb-delete-warning>i{font-size:21px}.ppdb-delete-warning p{margin:5px 0 0;font-size:var(--text-small);line-height:1.6}.ppdb-delete-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.ppdb-delete-card dl div{padding:12px;border-radius:10px;background:#f8fafc}.ppdb-delete-card dt{color:#667085;font-size:var(--text-small)}.ppdb-delete-card dd{margin:5px 0 0;font-size:var(--text-small);font-weight:800}.ppdb-delete-card form{display:grid;gap:12px;padding-top:18px;border-top:1px solid #edf0f5}.ppdb-delete-card form label{display:grid;gap:8px;font-size:var(--text-small)}.ppdb-delete-card form input{height:44px;border:1px solid #d9dee8;border-radius:10px;padding:0 11px;font:inherit}.ppdb-delete-card form>div{display:flex;justify-content:flex-end;gap:8px}@media(max-width:850px){.ppdb-settings-grid,.ppdb-status-options{grid-template-columns:1fr}.ppdb-settings-card-head,.ppdb-danger-setting .ppdb-settings-card-head,.ppdb-delete-zone{align-items:flex-start;flex-direction:column}.ppdb-delete-card dl{grid-template-columns:1fr}.ppdb-settings-actions{justify-content:stretch}.ppdb-settings-actions .btn{flex:1}}

/* Payroll: attendance review lives alongside deductions. */
.payroll-absence-dates{margin:0 0 16px;color:#64748b;font-size:.8rem;line-height:1.6;overflow-wrap:anywhere}
.payroll-attendance-review{margin:16px 0 20px;border:1px solid #f3d49d;border-radius:14px;background:#fffbf3;overflow:hidden}
.payroll-attendance-review summary{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;color:#854d0e;font-size:.85rem}
.payroll-attendance-review summary span{font-size:.75rem;font-weight:500}
.payroll-attendance-review>p{margin:0;padding:0 16px 12px;font-size:.8rem;line-height:1.6;color:#785d36}
.payroll-review-form{display:grid;gap:14px;padding:0 16px 16px}
.payroll-review-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;max-height:320px;overflow:auto}
.payroll-review-dates label,.payroll-review-reason{display:grid;gap:6px;min-width:0;color:#334155;font-size:.8rem;font-weight:600}
.payroll-review-form select,.payroll-review-form textarea{width:100%;min-width:0;padding:10px;border:1px solid #d6dde8;border-radius:9px;background:#fff;font:inherit;color:#172033}
.payroll-review-form small{font-size:.75rem;line-height:1.5;color:#64748b}
.payroll-review-form .payroll-btn{justify-self:start}
@media(max-width:600px){.payroll-review-dates{grid-template-columns:1fr}.payroll-review-form .payroll-btn{width:100%}}

.teacher-employment-status.is-aktif_non_payroll{background:#e9f8f0;color:#17623d}
.pengajuan-admin-filter{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;margin-bottom:20px}
.pengajuan-admin-filter select{width:100%;min-height:44px;border:1px solid #d9dee8;border-radius:10px;padding:10px 12px;background:#fff;color:#172033;font:inherit}
@media(max-width:700px){.pengajuan-admin-filter{display:grid;grid-template-columns:1fr}.pengajuan-admin-filter .attendance-recap-filter-actions{justify-content:flex-start}}