:root{
    --admin-bg:#EAF4FF;
    --admin-surface:#fff;
    --admin-soft:#F3F7FC;
    --admin-border:#C8DDF3;
    --admin-text:#10213e;
    --admin-muted:#64748b;
    --admin-green:#0F5FB5;
    --admin-green-soft:#EAF4FF;
    --admin-red:#c93636;
    --admin-red-soft:#fdeaea;
    --admin-amber:#9a6500;
    --admin-amber-soft:#fff4d8;
}

.admin-page{max-width:1180px;margin:0 auto}
.admin-surface{background:var(--admin-surface);border:1px solid var(--admin-border);border-radius:18px;padding:24px}
.admin-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.admin-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:var(--admin-green-soft);color:var(--admin-green);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.admin-title{margin:8px 0 4px;font-size:30px;line-height:1.15;color:var(--admin-text)}
.admin-copy{margin:0;max-width:760px;color:var(--admin-muted);line-height:1.5}
.admin-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.ui-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px;padding:10px 14px;font:inherit;font-size:14px;font-weight:800;text-decoration:none;cursor:pointer}
.ui-btn.primary{background:var(--admin-green);color:#fff}
.ui-btn.soft{background:var(--admin-green-soft);color:var(--admin-green)}
.ui-btn.warn{background:var(--admin-amber-soft);color:var(--admin-amber)}
.ui-btn.danger{background:var(--admin-red-soft);color:var(--admin-red)}
.ui-btn.outline{background:transparent;color:var(--admin-text);border:1px solid var(--admin-border)}
.ui-btn.small{min-height:34px;padding:7px 11px;font-size:13px}

.metric-strip{display:grid;grid-template-columns:repeat(var(--metric-count,3),minmax(0,1fr));border:1px solid var(--admin-border);border-radius:14px;margin-bottom:18px;overflow:hidden;background:var(--admin-surface)}
.metric{padding:14px 16px;border-right:1px solid var(--admin-border)}
.metric:last-child{border-right:0}
.metric-label{display:block;color:var(--admin-muted);font-size:12px;font-weight:800}
.metric-value{display:block;margin-top:5px;color:var(--admin-text);font-size:25px;line-height:1;font-weight:900}

.admin-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px;border:1px solid var(--admin-border);border-radius:14px;background:var(--admin-soft)}
.toolbar-fields{display:flex;align-items:end;gap:10px;flex:1;flex-wrap:wrap}
.toolbar-field{min-width:150px;flex:1}
.toolbar-field.grow{flex:2;min-width:220px}
.field-label{display:block;margin-bottom:5px;color:var(--admin-muted);font-size:11px;font-weight:900;text-transform:uppercase}
.admin-page input,.admin-page select,.admin-page textarea{min-height:42px;padding:10px 12px;border:1px solid var(--admin-border);border-radius:10px;background:var(--admin-surface);color:var(--admin-text);font:inherit}
.admin-page textarea{min-height:90px;resize:vertical}
.field-help{margin:5px 0 0;color:var(--admin-muted);font-size:12px}

.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:10px 12px;border-bottom:1px solid var(--admin-border);color:var(--admin-muted);font-size:11px;text-align:left;text-transform:uppercase;letter-spacing:.03em}
.data-table td{padding:13px 12px;border-bottom:1px solid var(--admin-border);vertical-align:middle;color:var(--admin-text)}
.data-table tbody tr:last-child td{border-bottom:0}
.primary-text{font-weight:900;color:var(--admin-text)}
.secondary-text{margin-top:3px;color:var(--admin-muted);font-size:12px}
.row-actions{display:flex;gap:7px;flex-wrap:wrap}
.row-actions form{margin:0}
.status-chip{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:var(--admin-green-soft);color:var(--admin-green);font-size:11px;font-weight:900;white-space:nowrap}
.status-chip.off{background:#edf1f5;color:#637083}
.status-chip.warn{background:var(--admin-amber-soft);color:var(--admin-amber)}
.empty-state{padding:30px;border:1px dashed var(--admin-border);border-radius:14px;text-align:center;color:var(--admin-muted)}

.compact-list{display:grid;gap:9px}
.compact-row{display:grid;grid-template-columns:minmax(170px,1.5fr) repeat(3,minmax(110px,1fr)) auto;gap:14px;align-items:center;padding:13px 14px;border:1px solid var(--admin-border);border-radius:13px;background:var(--admin-surface)}
.compact-label{display:none;color:var(--admin-muted);font-size:11px;font-weight:800;text-transform:uppercase}

.editor-details{border:1px solid var(--admin-border);border-radius:14px;background:var(--admin-surface);overflow:hidden}
.editor-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer}
.editor-details summary::-webkit-details-marker{display:none}
.editor-details[open] summary{border-bottom:1px solid var(--admin-border);background:var(--admin-soft)}
.editor-body{padding:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-field.full{grid-column:1/-1}
.inline-check{display:inline-flex;align-items:center;gap:8px;color:var(--admin-text);font-weight:700}
.inline-check input{width:18px;min-height:18px}

.settings-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:16px}
.settings-block{border:1px solid var(--admin-border);border-radius:14px;padding:18px}
.settings-block.full{grid-column:1/-1}
.settings-title{margin:0 0 4px;color:var(--admin-text);font-size:19px}
.settings-copy{margin:0 0 16px;color:var(--admin-muted);font-size:13px}
.form-stack{display:grid;gap:13px}
.notice{padding:11px 13px;border-radius:10px;margin-bottom:14px;font-weight:700}
.notice-success{background:var(--admin-green-soft);color:var(--admin-green)}
.notice-error{background:var(--admin-red-soft);color:var(--admin-red)}

.screen-only{display:block}
.sidebar-overlay{display:none}

html[data-theme="dark"]{
    --admin-bg:#0f1d2b;
    --admin-surface:#172638;
    --admin-soft:#132234;
    --admin-border:#2d4158;
    --admin-text:#f2f6fb;
    --admin-muted:#aebbd0;
    --admin-green-soft:#173A61;
    --admin-red-soft:#49272b;
    --admin-amber-soft:#46391f;
}
html[data-theme="dark"] .admin-surface,
html[data-theme="dark"] .metric-strip,
html[data-theme="dark"] .compact-row,
html[data-theme="dark"] .editor-details,
html[data-theme="dark"] .settings-block{box-shadow:none}

@media(max-width:900px){
    .admin-surface{padding:18px}
    .metric-strip{grid-template-columns:repeat(2,1fr)}
    .metric:nth-child(2n){border-right:0}
    .metric:nth-child(-n+2){border-bottom:1px solid var(--admin-border)}
    .compact-row{grid-template-columns:1fr 1fr}
    .compact-row > :first-child{grid-column:1/-1}
    .compact-row > :last-child{grid-column:1/-1}
    .compact-label{display:block}
    .settings-grid{grid-template-columns:1fr}
    .settings-block.full{grid-column:auto}
}

@media(max-width:992px){
    .mobile-menu-btn{display:block}
    .wrapper{display:block;padding:14px}
    .main{width:100%;padding:16px}
    .sidebar{
        display:block!important;
        position:fixed;
        z-index:1200;
        top:0;
        left:0;
        width:min(310px,86vw);
        height:100dvh;
        padding:14px;
        background:#082F6D;
        transform:translateX(-105%);
        transition:transform .22s ease;
        overflow-y:auto;
        box-shadow:14px 0 35px rgba(2,12,27,.28);
    }
    .sidebar.show-sidebar{transform:translateX(0)}
    .sidebar-overlay{
        display:block;
        position:fixed;
        z-index:1190;
        inset:0;
        width:100%;
        height:100%;
        padding:0;
        border:0;
        background:rgba(2,12,27,.52);
        opacity:0;
        visibility:hidden;
        transition:opacity .2s ease,visibility .2s ease;
    }
    body.menu-open{overflow:hidden}
    body.menu-open .sidebar-overlay{opacity:1;visibility:visible}
}

@media(max-width:640px){
    .admin-surface{padding:14px;border-radius:14px}
    .admin-header{display:block;margin-bottom:16px}
    .admin-title{font-size:24px}
    .admin-copy{font-size:14px}
    .admin-actions{margin-top:14px}
    .admin-actions .ui-btn{width:100%}
    .metric-strip{
        display:flex;
        margin-bottom:14px;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scroll-snap-type:x proximity;
        scrollbar-width:thin;
    }
    .metric{
        flex:0 0 142px;
        padding:12px;
        border-right:1px solid var(--admin-border)!important;
        border-bottom:0!important;
        scroll-snap-align:start;
    }
    .metric:last-child{border-right:0!important}
    .metric-value{font-size:22px}
    .admin-toolbar,.toolbar-fields{display:grid;grid-template-columns:1fr;width:100%}
    .toolbar-field,.toolbar-field.grow{min-width:0}
    .form-grid{grid-template-columns:1fr}
    .form-field.full{grid-column:auto}
    .table-scroll{overflow:visible}
    .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}
    .responsive-table thead{display:none}
    .responsive-table tr{padding:12px;border:1px solid var(--admin-border);border-radius:13px;margin-bottom:10px}
    .responsive-table td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:7px 0;border:0}
    .responsive-table td::before{content:attr(data-label);color:var(--admin-muted);font-size:11px;font-weight:900;text-transform:uppercase}
    .responsive-table td:first-child{display:block}
    .responsive-table td:first-child::before{display:none}
    .responsive-table td[data-actions]{display:block}
    .responsive-table td[data-actions]::before{display:block;margin-bottom:7px}
    .row-actions{display:grid;grid-template-columns:1fr 1fr}
    .row-actions .ui-btn,.row-actions form,.row-actions form .ui-btn{width:100%}
    .compact-row{grid-template-columns:1fr}
    .compact-row > :first-child,.compact-row > :last-child{grid-column:auto}
}

/* Navigasi dalaman berbentuk tab */
body.is-authenticated .wrapper{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    max-width:1380px;
    padding:16px 24px 24px;
}

body.is-authenticated .sidebar{
    position:static!important;
    z-index:auto;
    display:block!important;
    width:100%;
    height:auto;
    padding:0;
    background:transparent;
    transform:none!important;
    overflow:visible;
    box-shadow:none;
}

body.is-authenticated .menu-card{
    display:flex;
    align-items:center;
    gap:4px;
    width:100%;
    padding:6px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    border:1px solid var(--admin-border);
    border-radius:12px;
    background:var(--admin-surface);
}

body.is-authenticated .menu-item{
    flex:0 0 auto;
    min-height:42px;
    margin:0;
    padding:11px 16px;
    border-radius:8px;
    font-size:14px;
    white-space:nowrap;
}

body.is-authenticated .main{
    width:100%;
    padding:24px;
    overflow:visible;
    border:1px solid var(--admin-border);
    border-radius:18px;
    background:var(--admin-surface);
}

body.is-authenticated .sidebar-overlay,
body.is-authenticated .mobile-menu-btn{
    display:none!important;
}

body.is-authenticated .footer{
    background:var(--admin-soft);
    color:var(--admin-muted);
    border-color:var(--admin-border);
}

html[data-theme="dark"] body.is-authenticated .main,
html[data-theme="dark"] body.is-authenticated .menu-card{
    background:var(--admin-surface)!important;
}

@media(max-width:768px){
    body.is-authenticated .topbar-inner{
        display:flex;
    }

    body.is-authenticated .wrapper{
        padding:10px;
        gap:8px;
    }

    body.is-authenticated .menu-card{
        border-radius:10px;
    }

    body.is-authenticated .menu-item{
        min-height:40px;
        padding:10px 13px;
        font-size:13px;
    }

    body.is-authenticated .main{
        padding:14px;
        border-radius:14px;
    }
}

@media print{
    .screen-only{display:none!important}
}