/*
 * Pusat Digital SMANIP
 * Interface refresh: readable, calm and purpose-built.
 */

:root{
    --ui-navy:#10233f;
    --ui-navy-2:#183657;
    --ui-blue:#246bfd;
    --ui-blue-dark:#1556d8;
    --ui-sky:#eaf2ff;
    --ui-bg:#f4f6f8;
    --ui-paper:#ffffff;
    --ui-ink:#15253b;
    --ui-muted:#66768b;
    --ui-line:#dce3eb;
    --ui-green:#15956f;
    --ui-amber:#d98a16;
    --ui-red:#d34747;
    --ui-radius:16px;
    --ui-shadow:0 10px 30px rgba(16,35,63,.07);
    --font-body:"Poppins",sans-serif;
    --font-display:"Poppins",sans-serif;
}

html{font-size:16px}
body{
    background:var(--ui-bg);
    color:var(--ui-ink);
    font-family:"Poppins",sans-serif;
    font-size:16px;
    line-height:1.65;
}
body::before{display:none}
.ui-icon{
    display:block;
    width:18px;
    height:18px;
    flex:0 0 18px;
    color:currentColor;
}
h1,h2,h3,h4,h5,h6{
    color:var(--ui-navy);
    font-family:"Poppins",sans-serif;
    font-weight:700;
    letter-spacing:-.025em;
}
p{font-size:15px}
.container{width:min(100% - 48px,1280px)}
.public-layout main.container{padding-top:34px;padding-bottom:64px}

/* Header */
.site-header,
.site-header.header-dark,
.site-header.header-light{
    border-bottom:1px solid var(--ui-line);
    background:#fff;
    box-shadow:0 4px 18px rgba(16,35,63,.06);
    color:var(--ui-navy);
    backdrop-filter:none;
}
.site-header::after{display:none}
.topbar{min-height:86px}
.brand{gap:13px;color:var(--ui-navy)}
.brand img,
.brand-mark{
    width:60px;
    height:60px;
    flex-basis:60px;
    border:0;
    border-radius:13px;
    background:var(--ui-blue);
    box-shadow:none;
    font-family:"Poppins",sans-serif;
    font-size:15px;
    letter-spacing:-.04em;
}
.brand img.brand-logo{
    padding:0;
    border:1px solid #183f80;
    background:#071631;
    object-fit:cover;
}
.brand-kicker{
    color:var(--ui-blue);
    font-size:10px;
    letter-spacing:.11em;
}
.brand h1{margin-top:2px;color:var(--ui-navy);font-size:21px}
.brand p{margin-top:3px;color:#78879a;font-size:11px}
.nav-links{gap:3px}
.nav-links a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:11px 13px;
    border-radius:9px;
    color:#43546b;
    font-size:13px;
    font-weight:600;
}
.nav-links a:hover,
.nav-links a.active{
    background:var(--ui-sky);
    color:var(--ui-blue-dark);
    transform:none;
}
.nav-links a.active::after{display:none}
.status-pill{
    margin-left:9px;
    padding:8px 12px;
    border:1px solid #bfe6d9;
    background:#edf9f5;
    color:#127759;
    font-size:11px;
    letter-spacing:0;
}
.status-pill.warn{border-color:#f1d7a7;background:#fff7e8;color:#95600c}
.pulse-dot{width:8px;height:8px;flex-basis:8px;background:var(--ui-green);box-shadow:none}
.pulse-dot::after{display:none}
.menu-toggle{border-color:var(--ui-line);background:#f7f9fb}
.menu-toggle > span:not(.sr-only){background:var(--ui-navy)}

/* Shared components */
.card{
    border:1px solid var(--ui-line);
    border-radius:var(--ui-radius);
    background:#fff;
    box-shadow:var(--ui-shadow);
}
.btn{
    min-height:48px;
    padding:12px 20px;
    border-radius:10px;
    background:var(--ui-blue);
    box-shadow:none;
    font-family:"Poppins",sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:0;
}
.btn:hover{
    background:var(--ui-blue-dark);
    box-shadow:none;
    filter:none;
    transform:translateY(-1px);
}
.btn-outline{
    border-color:#c6d2e1;
    background:#fff;
    color:var(--ui-navy);
}
.btn-outline:hover{border-color:#94a8c0;background:#f7f9fc;box-shadow:none}
.btn-small{min-height:40px;padding:9px 14px;font-size:12px}
.help{font-size:13px}
.flash,.error,.success,.warning{font-size:14px}
.eyebrow,.section-kicker{
    color:var(--ui-blue);
    font-size:12px;
    letter-spacing:.08em;
}

label,
.field-label{
    color:#34455b;
    font-size:14px;
    font-weight:600;
    letter-spacing:0;
}
input,select,textarea{
    min-height:52px;
    padding:13px 15px;
    border:1px solid #cbd6e2;
    border-radius:10px;
    background:#fff;
    color:var(--ui-ink);
    font-family:"Poppins",sans-serif;
    font-size:14px;
    font-weight:400;
}
textarea{line-height:1.65}
input::placeholder,textarea::placeholder{color:#9aa7b6}
input:hover,select:hover,textarea:hover{border-color:#9fb0c4}
input:focus,select:focus,textarea:focus{
    border-color:var(--ui-blue);
    box-shadow:0 0 0 3px rgba(36,107,253,.12);
}
input[type="checkbox"],input[type="radio"]{width:19px;min-height:19px}

table{font-size:14px}
th{
    padding:14px 16px;
    color:#53657d;
    font-size:12px;
    letter-spacing:.045em;
}
td{padding:15px 16px;color:#2f425b;font-size:14px}
.booking-badge{padding:6px 11px;font-size:11px}

/* Booking page */
.booking-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin:8px 0 26px;
}
.page-breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:#8794a5;font-size:13px}
.page-breadcrumb a{color:var(--ui-blue);font-weight:600;text-decoration:none}
.booking-page-head h1{margin:0 0 8px;font-size:42px;line-height:1.12}
.booking-page-head p{max-width:720px;margin:0;color:var(--ui-muted);font-size:16px}
.booking-calendar-link{
    display:grid;
    min-width:330px;
    grid-template-columns:46px 1fr auto;
    align-items:center;
    gap:13px;
    padding:15px 17px;
    border:1px solid #cbd9eb;
    border-radius:13px;
    background:#fff;
    color:var(--ui-ink);
    text-decoration:none;
    transition:border-color .2s ease,transform .2s ease;
}
.booking-calendar-link:hover{border-color:var(--ui-blue);transform:translateY(-2px)}
.calendar-link-date{
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    border-radius:10px;
    background:var(--ui-sky);
    color:var(--ui-blue);
    font-size:16px;
    font-weight:700;
}
.booking-calendar-link > span:nth-child(2){display:grid}
.booking-calendar-link strong{font-size:13px}
.booking-calendar-link small{color:var(--ui-muted);font-size:11px}
.booking-calendar-link b{color:var(--ui-blue);font-size:19px}
.booking-page > .warning{margin-bottom:18px}
.booking-form-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    align-items:start;
    gap:22px;
}
.booking-form-main{display:grid;gap:18px}
.form-section{
    padding:30px;
    border:1px solid var(--ui-line);
    border-radius:var(--ui-radius);
    background:#fff;
    box-shadow:0 6px 20px rgba(16,35,63,.045);
}
.form-section-head{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:26px;
    padding-bottom:20px;
    border-bottom:1px solid #e7ebf0;
}
.section-number{
    display:grid;
    width:40px;
    height:40px;
    flex:0 0 40px;
    place-items:center;
    border-radius:10px;
    background:var(--ui-navy);
    color:#fff;
    font-size:15px;
    font-weight:700;
}
.form-section-head h2{margin:0 0 3px;font-size:21px}
.form-section-head p{margin:0;color:var(--ui-muted);font-size:13px}
.form-fields{display:grid;gap:20px}
.form-fields.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-fields.three-columns{grid-template-columns:1.25fr 1fr 1fr}
.field-group{display:grid;align-content:start;gap:8px;min-width:0}
.field-wide{grid-column:1/-1}
.required{color:var(--ui-red)}
.optional{
    margin-left:5px;
    padding:3px 7px;
    border-radius:5px;
    background:#eef1f5;
    color:#758397;
    font-size:10px;
    font-weight:500;
}
.equipment-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.equipment-option{
    display:flex;
    min-height:52px;
    align-items:center;
    gap:10px;
    margin:0;
    padding:11px 13px;
    border:1px solid #d5dee8;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease;
}
.equipment-option:hover{border-color:#a9bad0;background:#f8fafc}
.equipment-option:has(input:checked){border-color:var(--ui-blue);background:#f1f6ff}
.equipment-option input{margin:0}
.equipment-option span{font-size:13px;font-weight:500}

.booking-form-aside{
    position:sticky;
    top:108px;
    display:grid;
    gap:14px;
}
.aside-card{
    padding:20px;
    border:1px solid var(--ui-line);
    border-radius:14px;
    background:#fff;
}
.aside-kicker{
    display:block;
    margin-bottom:13px;
    color:#6f7e91;
    font-size:11px;
    font-weight:600;
}
.booking-open-status{display:flex;align-items:flex-start;gap:12px}
.status-icon{width:12px;height:12px;flex:0 0 12px;margin-top:5px;border-radius:50%}
.status-icon.is-open{background:var(--ui-green);box-shadow:0 0 0 5px #e7f6f1}
.status-icon.is-closed{background:var(--ui-red);box-shadow:0 0 0 5px #fbeaea}
.booking-open-status > div{display:grid}
.booking-open-status strong{font-size:15px}
.booking-open-status small{margin-top:3px;color:var(--ui-muted);font-size:12px;line-height:1.55}
.aside-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.aside-card-head .aside-kicker{margin:0}
.aside-card-head a{color:var(--ui-blue);font-size:12px;font-weight:600;text-decoration:none}
.slot-preview-panel{color:var(--ui-muted)}
.slot-empty{display:grid;justify-items:center;padding:22px 12px;text-align:center}
.slot-empty > span{
    display:grid;
    width:46px;
    height:46px;
    margin-bottom:11px;
    place-items:center;
    border-radius:10px;
    background:var(--ui-sky);
    color:var(--ui-blue);
    font-size:14px;
    font-weight:700;
}
.slot-empty strong{color:var(--ui-ink);font-size:13px}
.slot-empty p{margin:4px 0 0;color:var(--ui-muted);font-size:11px}
.slot-preview-panel > h4{margin-bottom:11px;font-size:14px}
.slot-preview-panel .slot-list{display:grid;grid-template-columns:1fr;gap:7px}
.slot-preview-panel .slot{
    padding:10px 11px;
    border-radius:8px;
    font-size:11px;
}
.booking-guide-card ul{display:grid;gap:9px;margin:0;padding-left:19px;color:#52637a}
.booking-guide-card li{padding-left:3px;font-size:12px}
.submit-card{border-color:#bed0eb;background:#f8fbff}
.terms-check{display:flex;align-items:flex-start;gap:10px;margin:0;cursor:pointer}
.terms-check input{flex:0 0 19px;margin-top:2px}
.terms-check span{font-size:12px;line-height:1.5}
.terms-copy{margin:9px 0 0;color:var(--ui-muted);font-size:11px}
.booking-submit{width:100%;margin-top:18px}
.booking-submit span{margin-left:auto;font-size:18px}
.submit-card > small{display:block;margin-top:9px;color:#7a889a;font-size:10px;text-align:center}

/* Home page */
.home-hero{
    border-radius:18px;
    box-shadow:0 14px 38px rgba(16,35,63,.14);
}
.home-hero .hero-grid{padding:58px}
.hero-copy h2{font-size:clamp(44px,5vw,66px)}
.hero-copy > p{font-size:16px}
.hero-card{border-radius:14px}
.quick-actions{gap:16px}
.quick-action{
    padding:20px;
    border-color:var(--ui-line);
    border-radius:13px;
    box-shadow:none;
}
.quick-action:hover{border-color:#a9bfdd;box-shadow:var(--ui-shadow);transform:translateY(-2px)}
.quick-action::after{display:none}
.quick-action-icon{border-radius:9px;background:var(--ui-sky);font-size:12px}
.quick-action-icon .ui-icon{width:21px;height:21px}
.quick-action strong{font-family:"Poppins",sans-serif;font-size:15px}
.quick-action small{font-size:12px}
.home-section{padding:32px}
.section-heading h3{font-size:28px}
.text-link{font-size:12px}
.announcement-card p,.empty-state p{font-size:13px}

/* Daily and weekly schedule */
.page-jadual main.container{width:min(100% - 48px,1280px)}
.page-jadual main > .card{padding:32px}
.page-jadual main > .card > .grid-3:first-child{
    align-items:center;
    grid-template-columns:1fr 1.5fr 1fr;
}
.page-jadual main > .card > .grid-3:first-child > div:nth-child(2){text-align:center}
.page-jadual main > .card > .grid-3:first-child > div:last-child{text-align:right}
.page-jadual main > .card > .grid-3:first-child h2{margin:0;font-size:26px}
.page-jadual form{margin:18px 0}
.page-jadual form .grid-3{align-items:center}
.page-jadual form label{display:inline-flex;align-items:center;margin:0 18px 0 0;font-size:14px}
.calendar-promo{
    margin:22px 0;
    padding:18px;
    border-color:#cbd8e7;
    border-radius:12px;
    background:#f3f7fc;
}
.calendar-promo-icon{border-radius:9px;background:var(--ui-blue);box-shadow:none;font-size:14px}
.calendar-promo strong{font-family:"Poppins",sans-serif;font-size:14px}
.calendar-promo small{font-size:12px}

/* Calendar */
.calendar-hero{
    border-radius:18px;
    box-shadow:0 14px 38px rgba(16,35,63,.13);
}
.calendar-hero h2{font-size:44px}
.calendar-hero p{font-size:15px}
.calendar-hero-badge{border-radius:12px}
.calendar-hero-badge strong{font-family:"Poppins",sans-serif;font-size:38px}
.calendar-hero-badge span{font-size:11px;letter-spacing:0;text-transform:none}
.calendar-stats > div{padding:17px 19px;border-radius:12px;box-shadow:none}
.calendar-stats span{font-size:12px}
.calendar-stats strong{font-family:"Poppins",sans-serif;font-size:25px}
.calendar-card{padding:26px}
.calendar-title > span{font-size:11px;letter-spacing:0;text-transform:none}
.calendar-title h3{font-size:27px}
.month-picker-form input{font-size:13px}
.calendar-legend{font-size:12px}
.calendar-weekday{padding:12px;font-size:11px}
.calendar-day{min-height:170px;padding:10px}
.day-number{font-family:"Poppins",sans-serif;font-size:13px}
.today-label,.booking-count{font-size:9px}
.calendar-event{font-size:10px}
.calendar-event .event-time{font-size:9px}
.calendar-event summary strong{font-size:10px}
.calendar-event summary small{font-size:9px}
.event-details{font-size:10px}

/* Login */
.login-shell{
    border-radius:18px;
    box-shadow:0 18px 45px rgba(16,35,63,.13);
}
.login-visual{
    padding:54px;
    background:
        linear-gradient(rgba(9,29,58,.72),rgba(9,29,58,.92)),
        url("../images/pusat-digital-hero.png") center/cover;
}
.login-visual::after{display:none}
.login-visual h2{font-size:46px}
.login-visual p{font-size:15px}
.login-signal{font-size:11px;letter-spacing:0}
.login-card{width:min(100% - 76px,420px)}
.login-icon{border-radius:11px;background:var(--ui-blue);box-shadow:none}
.login-icon{overflow:hidden;padding:0;background:#071631}
.login-icon img{display:block;width:100%;height:100%;object-fit:cover}
.login-heading span:not(.login-icon){font-size:11px;letter-spacing:.06em}
.login-heading h2{font-size:30px}
.login-intro{font-size:13px}
.back-home{font-size:12px}

/* Footer */
.footer-grid{padding-top:48px;padding-bottom:46px}
.footer-brand strong{font-family:"Poppins",sans-serif;font-size:17px}
.footer-logo{
    width:64px;
    height:64px;
    flex:0 0 64px;
    border:1px solid rgba(74,160,255,.35);
    border-radius:12px;
    object-fit:cover;
}
.footer-brand p{font-size:12px}
.footer-links > span,.footer-contact > span{font-size:11px;letter-spacing:.06em}
.footer-links a,.footer-contact a{font-size:12px}
.footer-contact small,.footer-bottom{font-size:10px}

/* Admin */
.admin-layout .site-header{background:#fff}
.admin-layout .brand h1{color:var(--ui-navy)}
.admin-layout .admin-top-actions a{color:#43546b}
.admin-layout .admin-user strong{color:var(--ui-navy);font-size:12px}
.admin-layout .admin-user small{font-size:10px}
.admin-sidebar{top:86px;background:var(--ui-navy)}
.admin-sidebar .sidebar-nav a{font-size:12px}
.admin-sidebar .sidebar-nav a{grid-template-columns:22px 1fr}
.admin-sidebar .sidebar-nav .ui-icon{width:18px;height:18px;color:#7892b5}
.admin-sidebar .sidebar-nav a.active .ui-icon,
.admin-sidebar .sidebar-nav a:hover .ui-icon{color:#63d9ff}
.sidebar-heading span,.nav-index{font-size:10px}
.sidebar-heading strong{font-family:"Poppins",sans-serif;font-size:19px}
.sidebar-status strong{font-size:11px}
.sidebar-status small{font-size:10px}
.admin-main.container{margin-top:86px;margin-left:272px;padding:34px 38px 54px}
.admin-main::before{font-size:10px}
.admin-main > h2:first-child{font-size:32px}
.stat h2{font-family:"Poppins",sans-serif;font-size:36px}
.stat p{font-size:12px}

@media (max-width:1050px){
    .container{width:min(100% - 32px,1280px)}
    .booking-form-shell{grid-template-columns:1fr 300px}
    .nav-links a{padding-inline:9px;font-size:12px}
    .status-pill{display:none}
}

@media (max-width:920px){
    .public-layout .nav-links{background:#fff}
    .public-layout .nav-links a{
        border-bottom-color:var(--ui-line);
        color:var(--ui-ink);
        font-size:15px;
    }
    .public-layout .nav-links a.active{background:var(--ui-sky);color:var(--ui-blue)}
    .booking-page-head{align-items:flex-start;flex-direction:column}
    .booking-calendar-link{width:100%;min-width:0}
    .booking-form-shell{grid-template-columns:1fr}
    .booking-form-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
    .submit-card{grid-column:1/-1}
    .admin-main.container{margin-top:86px;margin-left:0}
}

@media (max-width:720px){
    html{font-size:15px}
    body{font-size:15px}
    .container{width:min(100% - 24px,1280px)}
    .public-layout main.container{padding-top:24px;padding-bottom:44px}
    .brand h1{font-size:18px}
    .booking-page-head h1{font-size:34px}
    .booking-page-head p{font-size:14px}
    .form-section{padding:22px}
    .form-section-head{margin-bottom:21px}
    .form-fields.two-columns,.form-fields.three-columns{grid-template-columns:1fr}
    .field-wide{grid-column:auto}
    .equipment-options{grid-template-columns:1fr}
    .booking-form-aside{grid-template-columns:1fr}
    .submit-card{grid-column:auto}
    .home-hero .hero-grid{padding:36px 24px}
    .hero-copy h2{font-size:38px}
    .page-jadual main.container{width:min(100% - 24px,1280px)}
    .page-jadual main > .card{padding:20px}
    .page-jadual main > .card > .grid-3:first-child{grid-template-columns:1fr 1fr}
    .page-jadual main > .card > .grid-3:first-child > div:nth-child(2){grid-column:1/-1;grid-row:1;text-align:left}
    .page-jadual main > .card > .grid-3:first-child > div:last-child{text-align:right}
    .page-jadual form .grid-3{grid-template-columns:1fr}
    .calendar-hero h2{font-size:34px}
    .calendar-agenda{font-size:13px}
    .agenda-booking strong{font-size:12px}
    .agenda-booking span{font-size:10px}
    .agenda-booking p{font-size:11px}
    .login-visual h2{font-size:34px}
    .login-card{width:min(100% - 48px,420px)}
    .admin-main.container{padding:26px 16px 42px}
}

@media (max-width:430px){
    .booking-page-head h1{font-size:30px}
    .booking-calendar-link{grid-template-columns:42px 1fr auto;padding:13px}
    .form-section{padding:18px}
    .form-section-head h2{font-size:19px}
    .section-number{width:36px;height:36px;flex-basis:36px}
}

/* Compact booking form */
.booking-page-head{margin-bottom:20px}
.booking-page-head h1{font-size:36px}
.booking-page-head p{font-size:14px}
.booking-form-shell{grid-template-columns:minmax(0,1fr) 310px;gap:18px}
.booking-form-main{
    display:block;
    overflow:hidden;
    border:1px solid var(--ui-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 20px rgba(16,35,63,.045);
}
.form-section{
    padding:23px 26px;
    border:0;
    border-bottom:1px solid #e4e9ef;
    border-radius:0;
    box-shadow:none;
}
.form-section:last-child{border-bottom:0}
.form-section-head{
    align-items:center;
    gap:11px;
    margin-bottom:18px;
    padding-bottom:0;
    border:0;
}
.section-number{
    width:30px;
    height:30px;
    flex-basis:30px;
    border-radius:7px;
    background:var(--ui-sky);
    color:var(--ui-blue);
    font-size:12px;
}
.section-number .ui-icon{width:17px;height:17px}
.form-section-head h2{margin:0;font-size:18px}
.form-section-head p{display:none}
.form-fields{gap:15px}
.field-group{gap:6px}
.form-fields.three-columns{grid-template-columns:1.2fr 1fr 1fr}
.booking-form-main input,
.booking-form-main select{min-height:47px;padding:10px 13px}
.booking-form-main textarea{min-height:88px;padding:11px 13px}
.equipment-options{gap:8px}
.equipment-option{min-height:45px;padding:9px 11px}
.booking-form-aside{top:104px;gap:12px}
.aside-card{padding:18px}
.slot-empty{padding:17px 8px}
.slot-empty > span{width:40px;height:40px;margin-bottom:8px}
.slot-empty > span .ui-icon{width:19px;height:19px}
.submit-card{background:#fff}
.booking-submit{margin-top:14px}

@media (max-width:920px){
    .booking-form-shell{grid-template-columns:1fr}
    .booking-form-aside{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
    .booking-page-head h1{font-size:30px}
    .booking-form-aside{grid-template-columns:1fr}
    .form-section{padding:20px}
}

/* Secure admin workspace */
.admin-main::before{display:none}
.admin-page-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
    padding-bottom:20px;
    border-bottom:1px solid var(--ui-line);
}
.admin-page-heading > div:first-child{display:grid}
.admin-page-heading > div:first-child > span{
    color:var(--ui-blue);
    font-size:11px;
    font-weight:700;
}
.admin-page-heading h1{margin:3px 0 2px;font-size:31px}
.admin-page-heading p{margin:0;color:var(--ui-muted);font-size:12px}
.admin-security-state{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    border:1px solid #bfe1d5;
    border-radius:11px;
    background:#f0faf6;
    color:#157557;
}
.admin-security-state.attention{border-color:#efd29e;background:#fff8ea;color:#97600d}
.admin-security-state > span{display:grid;line-height:1.3}
.admin-security-state small{font-size:9px}
.admin-security-state strong{font-size:12px}
.admin-main > .card{
    margin:0 0 18px;
    border-radius:14px;
    box-shadow:0 7px 22px rgba(16,35,63,.055);
}
.admin-main > .card > h2:first-child,
.admin-main > .card > h3:first-child{
    margin-bottom:20px;
    padding-bottom:16px;
    font-size:21px;
}
.admin-card-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
    padding-bottom:19px;
    border-bottom:1px solid var(--ui-line);
}
.admin-card-heading > div{display:grid}
.admin-card-heading > div > span{
    color:var(--ui-blue);
    font-size:10px;
    font-weight:700;
}
.admin-card-heading h2{margin:3px 0 3px;font-size:22px}
.admin-card-heading p{margin:0;color:var(--ui-muted);font-size:12px}
.security-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border:1px solid #c6d8ef;
    border-radius:9px;
    background:#f5f9ff;
    color:var(--ui-blue-dark);
    font-size:10px;
    font-weight:600;
    white-space:nowrap;
}
.security-badge .ui-icon{width:15px;height:15px}
.admin-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.admin-form-grid .password-field{grid-column:1/-1}
.admin-form-actions{
    display:flex;
    grid-column:1/-1;
    justify-content:flex-end;
    padding-top:3px;
}
.password-control{
    display:flex;
    overflow:hidden;
    border:1px solid #cbd6e2;
    border-radius:10px;
    background:#fff;
    transition:border-color .2s ease,box-shadow .2s ease;
}
.password-control:focus-within{border-color:var(--ui-blue);box-shadow:0 0 0 3px rgba(36,107,253,.12)}
.password-control input{
    min-width:0;
    flex:1;
    border:0;
    border-radius:0;
    box-shadow:none!important;
}
.password-tool{
    min-width:60px;
    border:0;
    border-left:1px solid var(--ui-line);
    background:#f5f7fa;
    color:#38506d;
    cursor:pointer;
    font:600 11px "Poppins",sans-serif;
}
.password-tool:hover{background:var(--ui-sky);color:var(--ui-blue)}
.password-strength{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:10px;
    margin-top:3px;
}
.password-strength::before{
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--strength-color,#dce3eb) var(--strength-width,0%),#e8edf2 var(--strength-width,0%));
    content:"";
}
.password-strength small{color:var(--ui-muted);font-size:10px}
.password-strength[data-score="1"]{--strength-color:#dc4c4c;--strength-width:25%}
.password-strength[data-score="2"]{--strength-color:#db8b19;--strength-width:50%}
.password-strength[data-score="3"]{--strength-color:#4e9f76;--strength-width:75%}
.password-strength[data-score="4"]{--strength-color:#12805d;--strength-width:100%}
.password-strength > span{display:none}
.table-actions{display:flex;align-items:center;gap:6px}
.table-actions form{margin:0}
.role-badge,.account-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 8px;
    border-radius:7px;
    background:#eef3f8;
    color:#41546d;
    font-size:10px;
    font-weight:600;
    white-space:nowrap;
}
.account-status.active{background:#ebf8f3;color:#147255}
.account-status.inactive{background:#f3f4f6;color:#6d7785}
.account-status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.security-alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
    padding:15px 17px;
    border:1px solid #efd29e;
    border-radius:12px;
    background:#fff8ea;
    color:#82530d;
}
.security-alert .ui-icon{margin-top:2px}
.security-alert strong{font-size:13px}
.security-alert p{margin:2px 0 0;font-size:11px}
.profile-form{display:grid;gap:0}
.profile-form-section{padding:23px 0;border-bottom:1px solid var(--ui-line)}
.profile-form-section:first-of-type{padding-top:0}
.profile-form-section h3{margin-bottom:16px;font-size:18px}
.profile-form-section > p{margin:-10px 0 17px;color:var(--ui-muted);font-size:11px}
.profile-actions{display:flex;justify-content:flex-end;padding-top:20px}

.admin-sidebar{
    box-shadow:8px 0 30px rgba(9,25,48,.08);
}
.admin-sidebar .sidebar-nav a{min-height:45px}
.admin-sidebar .sidebar-nav a.active{
    border-color:rgba(101,169,255,.22);
    background:#174e9a;
    box-shadow:none;
}
.admin-sidebar .sidebar-nav a.active::before{display:none}
.dashboard{gap:16px}
.stat{
    min-height:130px;
    padding:22px;
    border-radius:13px;
    box-shadow:none;
}
.stat::before{height:4px;background:var(--ui-blue)}
.stat::after{display:none}
.stat h2{font-size:38px}
.stat p{font-size:13px}
.page-dashboard .grid-2 > .card,
.page-dashboard .grid-3 > .card{box-shadow:none}
.admin-main .table-wrap{border-radius:11px}
.admin-main th{background:#f3f6f9}

/* Login security controls */
.login-captcha{display:grid;gap:7px;margin-bottom:14px}
.local-captcha{
    display:grid;
    grid-template-columns:1fr 110px;
    align-items:center;
    gap:9px;
    padding:8px;
    border:1px solid var(--ui-line);
    border-radius:10px;
    background:#f7f9fb;
}
.local-captcha > span{
    padding-left:8px;
    color:var(--ui-navy);
    font-size:17px;
    font-weight:700;
    letter-spacing:.04em;
}
.local-captcha input{min-height:42px;background:#fff;text-align:center}
.login-security-note{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    padding:10px 11px;
    border-radius:9px;
    background:#f0f7ff;
    color:#49617e;
}
.login-security-note .ui-icon{width:16px;height:16px;color:var(--ui-blue)}
.login-security-note span{font-size:10px;line-height:1.45}
.g-recaptcha{max-width:100%;overflow:hidden}

@media (max-width:720px){
    .admin-page-heading{align-items:flex-start}
    .admin-security-state{padding:9px}
    .admin-security-state small{display:none}
    .admin-form-grid{grid-template-columns:1fr}
    .admin-form-grid .password-field{grid-column:auto}
    .admin-form-actions{grid-column:auto}
    .admin-card-heading{align-items:flex-start;flex-direction:column}
    .profile-form-section .grid-2{grid-template-columns:1fr}
    .table-actions{align-items:stretch;flex-direction:column}
    .local-captcha{grid-template-columns:1fr 95px}
}