* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:#f5f8fc;
    color:#172033
}
a {
    color:inherit
}
svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round
}
.brand svg {
    width:20px;
    height:20px
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:268px;
    background:linear-gradient(180deg,#082747 0%,#0d3154 55%,#08213d 100%);
    color:#fff;
    padding:20px 14px;
    display:flex;
    flex-direction:column;
    z-index:20;
    box-shadow:8px 0 28px rgba(15,35,60,.08)
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    padding:3px 10px 24px
}
.logo {
    width:44px;
    height:44px;
    border-radius:13px;
    background:linear-gradient(135deg,#19b98a,#1a83e8);
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:21px;
    box-shadow:0 8px 20px rgba(25,185,138,.2)
}
.brand b {
    display:block;
    font-size:16px;
    letter-spacing:.1px
}
.brand small {
    display:block;
    margin-top:2px;
    color:#a9c0d6;
    font-size:10px;
    font-weight:600;
    letter-spacing:.4px
}
nav {
    display:grid;
    gap:5px
}
nav a {
    display:flex;
    align-items:center;
    gap:11px;
    color:#dce9f5;
    text-decoration:none;
    padding:11px 12px;
    border-radius:11px;
    font-size:13px;
    font-weight:650;
    transition:.2s
}
nav a:hover,nav a.active {
    background:linear-gradient(90deg,rgba(34,131,232,.34),rgba(26,185,138,.12));
    color:#fff;
    transform:translateX(1px)
}
.sidebottom {
    margin-top:auto;
    padding:15px 10px 4px;
    border-top:1px solid rgba(255,255,255,.11);
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:12px
}
.sidebottom a {
    color:#fff;
    text-decoration:none;
    font-weight:700
}
.sidebottom span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#e5edf5
}
main {
    margin-left:268px;
    min-height:100vh
}
.content {
    padding:27px 28px 38px;
    max-width:1600px;
    margin:auto
}
.mobilehead {
    display:none
}
.dash-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin:2px 0 22px
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.1px;
    color:#7790a8;
    font-weight:800;
    margin-bottom:7px
}
.dash-head h1 {
    font-size:31px;
    line-height:1.1;
    margin:0;
    color:#12253d;
    letter-spacing:-.6px
}
.dash-head h1 span {
    font-size:24px
}
.dash-head p {
    margin:8px 0 0;
    color:#6f8298;
    font-size:14px
}
.dash-head-actions {
    display:flex;
    align-items:center;
    gap:10px
}
.date-pill {
    height:42px;
    padding:0 14px;
    border:1px solid #e0e8f1;
    background:#fff;
    border-radius:11px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#40536b;
    font-size:12px;
    font-weight:700;
    box-shadow:0 4px 15px rgba(22,49,78,.04)
}
.date-pill svg {
    width:16px
}
.btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    border:0;
    border-radius:11px;
    padding:11px 15px;
    font-weight:800;
    cursor:pointer;
    font-size:13px
}
.btn.primary {
    background:linear-gradient(135deg,#18a879,#16a3c5);
    color:#fff;
    box-shadow:0 9px 18px rgba(24,168,121,.18)
}
.btn.secondary {
    background:#e8eef5;
    color:#243b53
}
.kpi-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:16px
}
.kpi {
    position:relative;
    overflow:hidden;
    min-height:174px;
    background:#fff;
    border:1px solid #e3eaf2;
    border-radius:15px;
    text-decoration:none;
    box-shadow:0 7px 22px rgba(24,47,73,.05);
    padding:17px 18px 0;
    transition:.2s
}
.kpi:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(24,47,73,.08)
}
.kpi:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:var(--accent)
}
.kpi-blue {
    --accent:#2d7ff0
}
.kpi-green {
    --accent:#19ad78
}
.kpi-orange {
    --accent:#f2a43b
}
.kpi-purple {
    --accent:#8b55e9
}
.kpi-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#62758d;
    font-size:10px;
    font-weight:900;
    letter-spacing:.4px
}
.kpi-icon {
    width:43px;
    height:43px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--soft);
    color:var(--accent)
}
.kpi-icon svg {
    width:21px;
    height:21px
}
.kpi-blue .kpi-icon {
    --soft:#eaf3ff
}
.kpi-green .kpi-icon {
    --soft:#e8faf3
}
.kpi-orange .kpi-icon {
    --soft:#fff4df
}
.kpi-purple .kpi-icon {
    --soft:#f3edff
}
.kpi strong {
    display:block;
    font-size:31px;
    line-height:1;
    margin:13px 0 8px;
    letter-spacing:-.7px;
    color:#15283e
}
.kpi-green strong {
    color:#12a36f
}
.kpi-orange strong {
    color:#e14b2e
}
.kpi small {
    display:block;
    color:#788ba0;
    font-size:12px
}
.kpi-link {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:11px;
    font-weight:800;
    color:var(--accent);
    background:var(--linkbg)
}
.kpi-blue {
    --linkbg:#f3f8ff
}
.kpi-green {
    --linkbg:#f1fbf7
}
.kpi-orange {
    --linkbg:#fff9ee
}
.kpi-purple {
    --linkbg:#f8f4ff
}
.kpi-link svg {
    width:15px
}
.dashboard-grid {
    display:grid;
    gap:15px
}
.main-grid {
    grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) 245px
}
.panel {
    background:#fff;
    border:1px solid #e3eaf2;
    border-radius:15px;
    padding:18px;
    box-shadow:0 7px 22px rgba(24,47,73,.045)
}
.panel-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:15px
}
.panel-head h3 {
    margin:0;
    color:#1a2c43;
    font-size:16px
}
.panel-head p {
    margin:5px 0 0;
    color:#7a8da3;
    font-size:11px
}
.panel-head.compact {
    align-items:center;
    margin-bottom:12px
}
.panel-head.compact h3 {
    display:flex;
    align-items:center;
    gap:7px
}
.panel-head.compact h3 svg {
    width:16px
}
.mini-select,.soft-badge {
    font-size:10px;
    font-weight:800;
    color:#536981;
    background:#f6f8fb;
    border:1px solid #e3eaf2;
    padding:7px 10px;
    border-radius:9px;
    white-space:nowrap
}
.distribution {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:36px;
    min-height:205px
}
.donut {
    width:174px;
    height:174px;
    border-radius:50%;
    background:conic-gradient(#2d7ff0 0 var(--p10),#19ad78 var(--p10) calc(var(--p10) + var(--p11)),#f07c43 calc(var(--p10) + var(--p11)) 100%);
    position:relative;
    display:grid;
    place-items:center
}
.donut:after {
    content:"";
    position:absolute;
    width:105px;
    height:105px;
    background:#fff;
    border-radius:50%;
    box-shadow:inset 0 0 0 1px #f0f3f7
}
.donut>div {
    position:relative;
    z-index:1;
    text-align:center
}
.donut strong {
    display:block;
    font-size:24px;
    color:#15283e
}
.donut span {
    font-size:10px;
    color:#8191a5;
    font-weight:700
}
.legend {
    display:grid;
    gap:17px
}
.legend-item {
    display:flex;
    gap:10px;
    align-items:flex-start
}
.legend-dot {
    width:9px;
    height:9px;
    border-radius:50%;
    margin-top:4px
}
.legend-dot.blue {
    background:#2d7ff0
}
.legend-dot.green {
    background:#19ad78
}
.legend-dot.orange {
    background:#f07c43
}
.legend-item b {
    display:block;
    font-size:12px;
    color:#31465e
}
.legend-item small {
    display:block;
    margin-top:3px;
    font-size:10px;
    color:#7b8da1
}
.mutation-panel {
    min-height:260px
}
.mutation-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.mutation-card {
    border:1px solid #e7edf4;
    border-radius:12px;
    padding:15px;
    text-decoration:none;
    display:block;
    transition:.2s
}
.mutation-card:hover {
    transform:translateY(-2px)
}
.mutation-card.in {
    background:#f3fbf7
}
.mutation-card.out {
    background:#fff6f6
}
.mutation-icon {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:10px;
    margin-bottom:10px
}
.mutation-card.in .mutation-icon {
    background:#dff7eb;
    color:#15a36e
}
.mutation-card.out .mutation-icon {
    background:#ffe5e5;
    color:#e34c3c
}
.mutation-card strong {
    display:block;
    font-size:25px;
    color:#182c43
}
.mutation-card small {
    color:#7a8da3;
    font-size:10px;
    font-weight:700
}
.info-strip {
    margin-top:13px;
    padding:10px 11px;
    border-radius:10px;
    background:#f1f6ff;
    color:#3c6dc1;
    display:flex;
    gap:8px;
    align-items:flex-start;
    font-size:10px;
    line-height:1.45
}
.info-strip svg {
    width:15px;
    flex:none
}
.quick-panel {
    position:static;
    inset:auto;
    width:auto;
    min-height:0;
    z-index:auto;
    color:var(--ink);
    display:block;
    background:#fff;
    border:1px solid #e3eaf2;
    border-radius:15px;
    padding:17px;
    box-shadow:0 7px 22px rgba(24,47,73,.045)
}
.quick-panel h3 {
    font-size:14px;
    margin:0 0 12px;
    display:flex;
    gap:7px;
    align-items:center
}
.quick-panel h3 svg {
    color:#f0a126;
    width:17px
}
.quick {
    display:grid;
    grid-template-columns:36px 1fr 15px;
    align-items:center;
    gap:9px;
    padding:10px;
    border-radius:11px;
    text-decoration:none;
    margin-bottom:8px;
    border:1px solid transparent
}
.quick:last-child {
    margin-bottom:0
}
.quick:hover {
    filter:brightness(.985);
    transform:translateX(1px)
}
.quick-icon {
    width:34px;
    height:34px;
    border-radius:9px;
    display:grid;
    place-items:center
}
.quick>svg {
    width:14px
}
.quick b {
    display:block;
    font-size:11px
}
.quick small {
    display:block;
    margin-top:2px;
    font-size:9px;
    color:#7b8da1
}
.quick.green {
    background:#f0fbf6;
    border-color:#d8f2e6;
    color:#12956a
}
.quick.green .quick-icon {
    background:#dcf7e9
}
.quick.blue {
    background:#f1f7ff;
    border-color:#dceafe;
    color:#2773dc
}
.quick.blue .quick-icon {
    background:#e2efff
}
.quick.purple {
    background:#f7f1ff;
    border-color:#eadfff;
    color:#7544c7
}
.quick.purple .quick-icon {
    background:#ecddff
}
.quick.orange {
    background:#fff8ed;
    border-color:#fce7c8;
    color:#df7a18
}
.quick.orange .quick-icon {
    background:#ffebcf
}
.activity-panel {
    grid-column:1 / span 2
}
.activity-table table {
    min-width:760px
}
.table-wrap {
    overflow:auto
}
table {
    width:100%;
    border-collapse:collapse;
    font-size:11px
}
th,td {
    padding:11px 9px;
    border-bottom:1px solid #edf1f5;
    text-align:left;
    vertical-align:middle
}
th {
    color:#6c7f95;
    background:#f8fafc;
    font-size:10px;
    font-weight:800
}
td {
    color:#40536b
}
td small {
    display:block;
    color:#8796a8;
    margin-top:3px;
    font-size:9px
}
.activity-badge {
    display:inline-flex;
    padding:5px 8px;
    border-radius:20px;
    font-size:9px;
    font-weight:900;
    letter-spacing:.2px
}
.activity-badge.in {
    background:#dff7eb;
    color:#16865f
}
.activity-badge.out {
    background:#ffe5e5;
    color:#ba3e34
}
.activity-badge.move {
    background:#e5efff;
    color:#2a60b8
}
.text-link {
    font-size:10px;
    font-weight:800;
    color:#2d73d2;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:5px
}
.text-link svg {
    width:13px
}
.side-stack {
    grid-column:3;
    display:grid;
    gap:15px;
    align-content:start
}
.status-panel p,.tip-panel p {
    font-size:10px;
    line-height:1.65;
    color:#71849a;
    margin:0 0 12px
}
.status-line,.system-row {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:9px 0;
    border-top:1px solid #eef2f6;
    font-size:10px
}
.status-line span,.system-row span {
    color:#7b8da1
}
.status-line b,.system-row b {
    color:#31465e
}
.ok {
    color:#13a06d!important
}
.warn {
    color:#d78a1b!important
}
.tip-panel {
    background:linear-gradient(145deg,#f5f9ff,#fff)
}
.tip-title {
    font-size:12px;
    font-weight:900;
    color:#29445f;
    margin-bottom:8px
}
.empty {
    text-align:center;
    color:#8796a8;
    padding:22px
}
.alert {
    padding:12px;
    border-radius:9px;
    margin-bottom:15px;
    background:#dcfce7;
    color:#166534
}
.alert-danger {
    background:#fee2e2;
    color:#991b1b
}
.toolbar {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:16px
}
.search {
    padding:10px 12px;
    border:1px solid #d9e2ec;
    border-radius:9px;
    min-width:260px
}
.formgrid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px
}
.field label {
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:6px
}
.field input,.field select,.field textarea {
    width:100%;
    padding:10px 11px;
    border:1px solid #d9e2ec;
    border-radius:9px;
    font:inherit
}
.field textarea {
    min-height:90px
}
.full {
    grid-column:1/-1
}
.actions {
    display:flex;
    gap:8px;
    margin-top:18px
}
.pagination {
    display:flex;
    gap:6px;
    margin-top:15px
}
.pagination a {
    padding:7px 10px;
    border:1px solid #d9e2ec;
    border-radius:7px;
    text-decoration:none;
    color:#243b53
}
.row-new {
    background:#f0fdf4
}
.row-update {
    background:#eff6ff
}
.row-conflict {
    background:#fff1f2
}
.import-stats .card b {
    font-size:28px
}
.panel ul {
    margin-top:0
}
@media(max-width:1200px) {
    .main-grid {
        grid-template-columns:1fr 1fr
    }
    .quick-panel {
        grid-column:1/-1;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:8px
    }
    .quick-panel h3 {
        grid-column:1/-1
    }
    .quick {
        margin:0
    }
    .activity-panel {
        grid-column:1/-1
    }
    .side-stack {
        grid-column:1/-1;
        grid-template-columns:repeat(3,1fr)
    }
}
@media(max-width:900px) {
    aside {
        width:210px
    }
    main {
        margin-left:210px
    }
    .content {
        padding:20px
    }
    .kpi-grid {
        grid-template-columns:1fr 1fr
    }
    .dash-head {
        align-items:flex-start;
        flex-direction:column
    }
    .dash-head-actions {
        width:100%;
        justify-content:space-between
    }
    .main-grid {
        grid-template-columns:1fr
    }
    .quick-panel,.activity-panel,.side-stack {
        grid-column:auto
    }
    .quick-panel {
        display:block
    }
    .quick {
        margin-bottom:8px
    }
    .side-stack {
        grid-template-columns:1fr
    }
    .distribution {
        gap:20px
    }
}
@media(max-width:650px) {
    aside {
        position:static;
        width:auto;
        min-height:auto
    }
    .sidebottom {
        display:none
    }
    main {
        margin-left:0
    }
    .content {
        padding:15px
    }
    .kpi-grid {
        grid-template-columns:1fr 1fr
    }
    .dash-head-actions {
        flex-wrap:wrap
    }
    .date-pill {
        flex:1
    }
    .dash-head h1 {
        font-size:26px
    }
    .kpi {
        min-height:155px
    }
    .kpi strong {
        font-size:26px
    }
    .distribution {
        flex-direction:column;
        padding:8px
    }
    .donut {
        width:155px;
        height:155px
    }
    .mutation-cards {
        grid-template-columns:1fr
    }
    .quick-panel {
        display:block
    }
    .side-stack {
        grid-template-columns:1fr
    }
    .formgrid {
        grid-template-columns:1fr
    }
    .topbar {
        align-items:flex-start;
        flex-direction:column
    }
    .mobilehead {
        display:none
    }
}
/* =========================================================
   SIMAS v1.5 — POLISHED ENTERPRISE UI
   ========================================================= */
:root {
    --navy:#0a2744;
    --navy-2:#0d3558;
    --blue:#2879ee;
    --green:#16a778;
    --orange:#f29a31;
    --purple:#8754e8;
    --ink:#14283f;
    --muted:#71849a;
    --line:#e4ebf2;
    --canvas:#f4f7fb
}
body {
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:var(--canvas);
    color:var(--ink)
}
.sidebar {
    width:270px;
    background:linear-gradient(180deg,#092845 0%,#0a3153 48%,#071f38 100%);
    padding:18px 13px 12px;
    box-shadow:12px 0 35px rgba(5,28,50,.10)
}
.brand {
    padding:4px 9px 20px;
    border-bottom:1px solid rgba(255,255,255,.09);
    margin-bottom:10px
}
.logo {
    width:46px;
    height:46px;
    border-radius:14px;
    font-size:22px;
    background:linear-gradient(135deg,#20bd91,#227fee);
    box-shadow:0 9px 24px rgba(20,173,135,.20)
}
.brand-text b {
    font-size:15px;
    letter-spacing:.15px
}
.brand-text small {
    font-size:9px;
    color:#a8c2d8;
    letter-spacing:.55px;
    margin-top:4px
}
.sidebar-scroll {
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.18) transparent
}
.nav-section {
    margin:14px 0 5px
}
.nav-section>span {
    display:block;
    padding:0 11px 6px;
    color:#6f91ad;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.1px
}
.nav-section a {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 11px;
    margin:2px 0;
    border-radius:10px;
    color:#dceaf5;
    text-decoration:none;
    font-size:12px;
    font-weight:650;
    transition:all .18s ease
}
.nav-section a:hover {
    background:rgba(255,255,255,.07);
    color:#fff;
    transform:translateX(2px)
}
.nav-section a.active {
    background:linear-gradient(90deg,rgba(44,127,239,.38),rgba(25,177,133,.14));
    box-shadow:inset 3px 0 0 #39b98d;
    color:#fff
}
.nav-section a em {
    margin-left:auto;
    font-style:normal;
    color:#7fa1bb;
    font-size:17px
}
.nav-ico {
    width:28px;
    height:28px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.07);
    font-size:15px;
    color:#dceaf5
}
.nav-section a.active .nav-ico {
    background:rgba(54,174,235,.18);
    color:#fff
}
.nav-ico.in {
    color:#55d7a6
}
.nav-ico.out {
    color:#ff8e83
}
.nav-ico.move {
    color:#c4a5ff
}
.nav-ico.grad {
    color:#72baff
}
.nav-ico.import {
    color:#5ed8b2
}
.nav-ico.history {
    color:#8fc7ff
}
.sidebar-footer {
    margin-top:auto;
    border-top:1px solid rgba(255,255,255,.10);
    padding:13px 8px 3px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px
}
.user-mini {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0
}
.user-mini b,.user-mini small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.user-mini b {
    font-size:10px;
    color:#fff
}
.user-mini small {
    font-size:8px;
    color:#86a5bd;
    margin-top:2px
}
.avatar {
    width:31px;
    height:31px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#1d83ef,#15ad87);
    color:#fff;
    font-size:11px;
    font-weight:800;
    flex:none
}
.logout {
    font-size:10px;
    color:#cfe0ed;
    text-decoration:none;
    font-weight:700
}
.logout:hover {
    color:#fff
}
main {
    margin-left:270px;
    min-height:100vh
}
.topbar {
    height:66px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid #e5ebf2;
    display:flex;
    align-items:center;
    padding:0 28px;
    gap:18px;
    position:sticky;
    top:0;
    z-index:10
}
.menu-toggle {
    display:none;
    border:0;
    background:#f0f5fa;
    color:#173653;
    border-radius:9px;
    width:35px;
    height:35px
}
.top-title {
    display:flex;
    align-items:baseline;
    gap:9px;
    min-width:210px
}
.top-title b {
    font-size:13px
}
.top-title span {
    font-size:10px;
    color:#8a9aae
}
.top-actions {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:12px
}
.top-search {
    width:260px;
    height:38px;
    border:1px solid #e1e8ef;
    background:#f9fbfd;
    border-radius:10px;
    display:flex;
    align-items:center;
    padding:0 9px;
    gap:7px;
    color:#8293a7
}
.top-search input {
    border:0;
    outline:0;
    background:transparent;
    width:100%;
    font:inherit;
    font-size:11px;
    color:#31465e
}
.top-search kbd {
    font-size:8px;
    color:#93a0ae;
    border:1px solid #e1e7ee;
    border-radius:5px;
    padding:3px 5px;
    background:#fff;
    white-space:nowrap
}
.icon-btn {
    position:relative;
    border:0;
    background:#f6f9fc;
    color:#526b83;
    width:36px;
    height:36px;
    border-radius:9px;
    font-size:17px;
    cursor:pointer
}
.notify-dot {
    position:absolute;
    right:-3px;
    top:-4px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#ef4b45;
    color:#fff;
    font-size:8px;
    display:grid;
    place-items:center;
    font-weight:800;
    border:2px solid #fff
}
.profile {
    display:flex;
    align-items:center;
    gap:8px;
    padding-left:10px;
    border-left:1px solid #e6ebf1
}
.profile b,.profile small {
    display:block
}
.profile b {
    font-size:10px
}
.profile small {
    font-size:8px;
    color:#8495a8;
    margin-top:2px
}
.profile>span {
    font-size:14px;
    color:#7c8da0;
    margin-left:2px
}
.content {
    padding:28px 30px 42px;
    max-width:1680px
}
.dash-head {
    margin:2px 0 20px
}
.dash-head h1 {
    font-size:30px;
    letter-spacing:-.8px
}
.dash-head p {
    font-size:13px
}
.eyebrow {
    color:#6d88a2;
    font-size:9px;
    letter-spacing:1.3px
}
.date-pill {
    height:40px
}
.btn.primary {
    height:42px;
    padding:0 16px
}
.kpi-grid {
    gap:16px;
    margin-bottom:16px
}
.kpi {
    min-height:170px;
    border-radius:14px;
    padding:17px 18px 0;
    box-shadow:0 8px 25px rgba(19,48,76,.055)
}
.kpi:hover {
    transform:translateY(-3px)
}
.kpi strong {
    font-size:32px
}
.kpi-link {
    height:42px
}
.main-grid {
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.95fr) 285px;
    align-items:stretch
}
.panel,.quick-panel {
    border-radius:14px;
    box-shadow:0 8px 24px rgba(18,46,73,.045)
}
.chart-card,.mutation-card-panel,.quick-card-panel {
    min-height:270px
}
.distribution {
    min-height:210px
}
.donut {
    width:170px;
    height:170px
}
.mutation-panel {
    min-height:270px
}
.quick-card-panel {
    padding:16px
}
.quick {
    padding:11px 10px
}
.activity-card-panel {
    grid-column:1 / span 2
}
.side-card-stack {
    grid-column:3
}
.activity-table table {
    min-width:700px
}
th {
    background:#f7f9fc
}
.activity-table tbody tr:hover {
    background:#fafcff
}
.activity-badge {
    font-size:8px;
    padding:5px 8px
}
.side-card-stack .panel {
    min-height:0
}
.system-row {
    padding:8px 0
}
@media(max-width:1280px) {
    .main-grid {
        grid-template-columns:1fr 1fr
    }
    .quick-card-panel {
        grid-column:1/-1;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:8px
    }
    .quick-card-panel h3 {
        grid-column:1/-1
    }
    .quick {
        margin:0
    }
    .activity-card-panel {
        grid-column:1/-1
    }
    .side-card-stack {
        grid-column:1/-1;
        grid-template-columns:repeat(3,1fr);
        display:grid
    }
    .side-card-stack .panel {
        height:100%
    }
    .top-search {
        width:210px
    }
}
@media(max-width:900px) {
    .sidebar {
        width:230px;
        transform:translateX(-102%);
        transition:transform .22s ease
    }
    .sidebar-open .sidebar {
        transform:translateX(0)
    }
    main {
        margin-left:0
    }
    .menu-toggle {
        display:block
    }
    .top-title span {
        display:none
    }
    .content {
        padding:22px 18px 35px
    }
    .topbar {
        padding:0 18px
    }
    .top-search {
        display:none
    }
    .profile {
        padding-left:0;
        border-left:0
    }
    .kpi-grid {
        grid-template-columns:1fr 1fr
    }
    .main-grid {
        grid-template-columns:1fr
    }
    .quick-card-panel,.activity-card-panel,.side-card-stack {
        grid-column:auto
    }
    .quick-card-panel {
        display:block
    }
    .quick {
        margin-bottom:8px
    }
    .side-card-stack {
        display:grid;
        grid-template-columns:1fr
    }
    .dash-head-actions {
        align-items:center
    }
}
@media(max-width:600px) {
    .content {
        padding:18px 13px 30px
    }
    .topbar {
        height:58px;
        padding:0 13px
    }
    .top-title b {
        font-size:12px
    }
    .profile>div:not(.avatar),.profile>span {
        display:none
    }
    .dash-head h1 {
        font-size:25px
    }
    .dash-head-actions {
        width:100%;
        flex-wrap:wrap
    }
    .date-pill {
        flex:1;
        justify-content:center
    }
    .btn.primary {
        flex:1;
        justify-content:center
    }
    .kpi-grid {
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .kpi {
        min-height:148px;
        padding:14px 14px 0
    }
    .kpi strong {
        font-size:27px;
        margin-top:11px
    }
    .kpi-top {
        font-size:9px
    }
    .kpi-icon {
        width:36px;
        height:36px
    }
    .kpi-link {
        height:39px;
        font-size:10px
    }
    .panel,.quick-panel {
        padding:14px
    }
    .panel-head {
        flex-direction:column
    }
    .mini-select,.soft-badge {
        align-self:flex-start
    }
    .distribution {
        gap:16px
    }
    .donut {
        width:145px;
        height:145px
    }
    .donut:after {
        width:89px;
        height:89px
    }
    .legend {
        gap:12px
    }
    .mutation-cards {
        grid-template-columns:1fr 1fr
    }
    .side-card-stack {
        grid-template-columns:1fr
    }
    .quick-panel {
        display:block
    }
    .quick {
        margin-bottom:8px
    }
}
/* =========================================================
   v1.7 FINAL POLISH — VISUAL REFINEMENT ONLY
   No structural dashboard changes.
   ========================================================= */
:root {
    --canvas:#f3f6fa;
    --surface:#ffffff;
    --surface-soft:#f8fafc;
    --line:#e2e9f1;
    --ink:#132840;
    --muted:#71839a;
}
html {
    background:var(--canvas)
}
body {
    background:linear-gradient(180deg,#f6f8fb 0%,#f2f6fa 100%);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility
}
.sidebar {
    width:270px;
    background:linear-gradient(180deg,#082743 0%,#0a3152 48%,#071f38 100%);
    border-right:1px solid rgba(255,255,255,.06)
}
.sidebar-scroll {
    padding-right:2px
}
.sidebar-scroll::-webkit-scrollbar {
    width:5px
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.15);
    border-radius:10px
}
.sidebar-scroll::-webkit-scrollbar-track {
    background:transparent
}
.nav-section {
    margin-top:15px
}
.nav-section>span {
    opacity:.92
}
.nav-section a {
    min-height:42px
}
.nav-section a.active {
    box-shadow:inset 3px 0 0 #35c394,0 5px 14px rgba(0,0,0,.08)
}
.nav-section a:focus-visible,.logout:focus-visible {
    outline:2px solid #5bd4ad;
    outline-offset:2px
}
.sidebar-footer {
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.025));
    margin-left:2px;
    margin-right:2px
}
main {
    background:transparent
}
.topbar {
    height:68px;
    background:rgba(255,255,255,.94);
    box-shadow:0 1px 0 rgba(19,40,64,.02),0 8px 22px rgba(24,47,73,.035)
}
.menu-toggle {
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px
}
.menu-toggle span {
    display:block;
    width:14px;
    height:1.5px;
    background:#31506d;
    border-radius:3px
}
.top-title b {
    color:#19314b
}
.top-title span {
    color:#8a9bad
}
.top-search {
    transition:.18s ease
}
.top-search:focus-within {
    border-color:#b8d3ef;
    background:#fff;
    box-shadow:0 0 0 3px rgba(45,127,240,.07)
}
.icon-btn svg {
    width:17px;
    height:17px;
    vertical-align:middle
}
.icon-btn {
    display:grid;
    place-items:center;
    transition:.18s ease
}
.icon-btn:hover {
    background:#eef5fb;
    color:#246bbd
}
.profile {
    transition:.18s ease
}
.profile:hover {
    background:#f7f9fc;
    border-radius:10px;
    padding-right:7px
}
.content {
    padding-top:30px
}
.dash-head {
    margin-bottom:21px
}
.dash-head h1 {
    font-weight:800
}
.dash-head p {
    color:#71849a
}
.eyebrow {
    color:#6f89a4
}
.date-pill {
    box-shadow:0 6px 18px rgba(24,47,73,.045)
}
.btn.primary {
    box-shadow:0 10px 22px rgba(24,168,121,.16);
    transition:.18s ease
}
.btn.primary:hover {
    transform:translateY(-1px);
    filter:saturate(1.04)
}
.kpi {
    border-color:#e1e8f0;
    box-shadow:0 8px 24px rgba(24,47,73,.045);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.kpi:hover {
    border-color:#d4e1ed;
    box-shadow:0 14px 30px rgba(24,47,73,.075)
}
.kpi strong {
    font-variant-numeric:tabular-nums
}
.kpi-link {
    border-top:1px solid rgba(222,231,240,.45)
}
.panel,.quick-panel {
    border-color:#e1e8f0;
    box-shadow:0 8px 24px rgba(24,47,73,.042)
}
.panel:hover,.quick-panel:hover {
    box-shadow:0 10px 27px rgba(24,47,73,.055)
}
.panel-head h3,.quick-panel h3 {
    letter-spacing:-.15px
}
.panel-head p {
    color:#7b8da1
}
.mini-select,.soft-badge {
    background:#f7f9fc;
    color:#5d728a
}
.donut {
    box-shadow:0 10px 26px rgba(42,93,145,.08)
}
.donut:after {
    box-shadow:inset 0 0 0 1px #eef2f6,0 2px 8px rgba(24,47,73,.04)
}
.legend-item {
    transition:.15s ease
}
.legend-item:hover {
    transform:translateX(2px)
}
.mutation-card {
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.mutation-card:hover {
    box-shadow:0 7px 17px rgba(24,47,73,.06);
    border-color:#d9e4ed
}
.info-strip {
    border:1px solid #e2ebf7
}
.quick {
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease
}
.quick:hover {
    box-shadow:0 6px 15px rgba(24,47,73,.055);
    filter:none
}
.activity-table {
    border-radius:10px
}
.activity-table table {
    border:1px solid #edf1f5;
    border-radius:10px;
    overflow:hidden
}
.activity-table tbody tr:last-child td {
    border-bottom:0
}
.activity-table tbody tr {
    transition:background .15s ease
}
th {
    white-space:nowrap
}
.text-link {
    transition:.15s ease
}
.text-link:hover {
    color:#175db5;
    transform:translateX(1px)
}
.status-panel,.system-panel,.tip-panel {
    overflow:hidden
}
.status-line b,.system-row b {
    font-variant-numeric:tabular-nums
}
.tip-panel {
    border-color:#e1eaf4;
    background:linear-gradient(145deg,#f7faff 0%,#fff 100%)
}
.empty {
    background:#fafcfe
}
@media(max-width:900px) {
    .menu-toggle {
        display:flex
    }
    .sidebar {
        box-shadow:14px 0 35px rgba(5,28,50,.18)
    }
    .sidebar-open:after {
        content:"";
        position:fixed;
        inset:0;
        background:rgba(5,20,35,.35);
        z-index:19
    }
    .sidebar {
        z-index:30
    }
    .topbar {
        z-index:25
    }
}
@media(max-width:600px) {
    .topbar {
        height:60px
    }
    .content {
        padding-top:19px
    }
    .date-pill,.btn.primary {
        min-height:40px
    }
    .kpi {
        box-shadow:0 6px 18px rgba(24,47,73,.04)
    }
}
/* =========================================================
   v1.8 BRANDING — SIMAS OFFICIAL IDENTITY
   ========================================================= */
.brand-text b {
    display:block;
    font-size:16px;
    line-height:1.05;
    letter-spacing:-.25px
}
.brand-text small {
    display:block;
    line-height:1.25;
    margin-top:3px
}
.brand-text small:first-of-type {
    font-size:8.5px;
    color:#b8c9d8;
    font-weight:600;
    letter-spacing:.15px
}
.brand-text small:last-of-type {
    font-size:8px;
    color:#7fa1bb;
    font-weight:700;
    letter-spacing:.35px;
    text-transform:uppercase
}
.login-brand {
    text-align:center;
    margin-bottom:22px
}
.login-brand h1 {
    margin:14px 0 7px;
    font-size:34px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.8px;
    color:#102a43
}
.login-subtitle {
    margin:0;
    color:#173653;
    font-size:16px;
    font-weight:500;
    line-height:1.4
}
.login-school {
    margin:4px 0 0;
    color:#6d8297;
    font-size:13px;
    font-weight:600
}
.dashboard-brand-subtitle {
    margin-top:-4px;
    margin-bottom:2px;
    color:#647a91;
    font-size:11px;
    font-weight:600;
    letter-spacing:.05px
}
@media(max-width:600px) {
    .brand-text small:first-of-type {
        font-size:8px
    }
    .brand-text small:last-of-type {
        font-size:7.5px
    }
    .login-brand h1 {
        font-size:30px
    }
    .login-subtitle {
        font-size:14px
    }
    .login-school {
        font-size:12px
    }
    .dashboard-brand-subtitle {
        font-size:10px
    }
}
/* =========================================================
   SIMAS v1.8.2 — ACCOUNT SETTINGS
   ========================================================= */
.nav-ico.settings {
    color:#b9a7ff;
    font-size:16px
}
.profile {
    text-decoration:none;
    color:inherit
}
.profile:hover {
    text-decoration:none
}
.settings-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin:2px 0 22px
}
.settings-head h1 {
    margin:3px 0 5px;
    font-size:29px;
    letter-spacing:-.7px;
    font-weight:800
}
.settings-head p {
    margin:0;
    color:#71849a;
    font-size:12px
}
.settings-grid {
    display:grid;
    grid-template-columns:minmax(300px,.75fr) minmax(460px,1.25fr);
    gap:18px;
    align-items:start
}
.settings-profile,.password-panel {
    padding:22px
}
.settings-profile-top {
    display:flex;
    align-items:center;
    gap:13px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line)
}
.settings-avatar {
    width:54px;
    height:54px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#2879ee,#16a778);
    color:#fff;
    font-size:20px;
    font-weight:800;
    box-shadow:0 10px 22px rgba(40,121,238,.16)
}
.settings-profile-top h2 {
    margin:0;
    font-size:17px;
    letter-spacing:-.2px
}
.settings-profile-top p {
    margin:4px 0 0;
    color:#7b8da0;
    font-size:11px
}
.role-badge {
    margin-left:auto;
    padding:6px 9px;
    border-radius:8px;
    background:#edf7f3;
    color:#11815f;
    font-size:8px;
    font-weight:800;
    letter-spacing:.6px
}
.settings-info-list {
    padding-top:5px
}
.settings-info-list>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 0;
    border-bottom:1px solid #edf1f5
}
.settings-info-list>div:last-child {
    border-bottom:0
}
.settings-info-list span {
    display:flex;
    align-items:center;
    gap:7px;
    color:#7b8da0;
    font-size:10px
}
.settings-info-list span svg {
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8
}
.settings-info-list b {
    font-size:10px;
    color:#243c55;
    text-align:right
}
.settings-section-head {
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-bottom:19px
}
.settings-section-icon {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#eef6ff;
    color:#2879ee;
    flex:none
}
.settings-section-icon svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8
}
.settings-section-head h2 {
    margin:1px 0 4px;
    font-size:17px;
    letter-spacing:-.2px
}
.settings-section-head p {
    margin:0;
    color:#7b8da0;
    font-size:10.5px;
    line-height:1.5
}
.password-form {
    max-width:680px
}
.password-form .field {
    margin-bottom:15px
}
.password-form label {
    display:block;
    margin-bottom:7px;
    font-size:10px;
    font-weight:750;
    color:#304963
}
.password-input {
    height:42px;
    display:flex;
    align-items:center;
    border:1px solid #dfe7ef;
    background:#fbfcfe;
    border-radius:10px;
    overflow:hidden;
    transition:.18s
}
.password-input:focus-within {
    border-color:#9fc4e9;
    background:#fff;
    box-shadow:0 0 0 3px rgba(40,121,238,.07)
}
.password-input input {
    height:100%;
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    padding:0 12px;
    font:inherit;
    font-size:11px;
    color:#243c55
}
.password-input button {
    width:42px;
    height:100%;
    border:0;
    background:transparent;
    color:#7d90a3;
    cursor:pointer;
    display:grid;
    place-items:center
}
.password-input button:hover {
    color:#2879ee
}
.password-input svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8
}
.field-hint {
    display:block;
    margin-top:6px;
    font-size:9px;
    color:#8a9aac;
    line-height:1.45
}
.match-ok {
    color:#15946c!important
}
.match-bad {
    color:#db5b52!important
}
.password-meter {
    height:3px;
    margin-top:7px;
    background:#edf1f5;
    border-radius:4px;
    overflow:hidden
}
.password-meter span {
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(90deg,#ef6a5b,#f3a42d,#16a778);
    border-radius:4px;
    transition:width .2s
}
.password-note {
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:18px;
    padding:12px 13px;
    border:1px solid #e2ebf5;
    background:#f7faff;
    border-radius:10px;
    color:#5f748b
}
.password-note svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:#2879ee;
    stroke-width:1.8;
    flex:none
}
.password-note b,.password-note span {
    display:block
}
.password-note b {
    font-size:9px;
    color:#36516d;
    margin-bottom:2px
}
.password-note span {
    font-size:9px;
    line-height:1.45
}
.settings-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:18px
}
.btn.secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 15px;
    border:1px solid #dfe7ef;
    background:#fff;
    color:#526a82;
    border-radius:9px;
    text-decoration:none;
    font-size:10px;
    font-weight:700
}
.btn.secondary:hover {
    background:#f7f9fb
}
.alert {
    margin-bottom:14px
}
.password-panel .alert {
    font-size:10px;
    padding:10px 12px
}
@media(max-width:1000px) {
    .settings-grid {
        grid-template-columns:1fr
    }
    .settings-profile {
        max-width:none
    }
}
@media(max-width:600px) {
    .settings-head h1 {
        font-size:25px
    }
    .settings-profile,.password-panel {
        padding:16px
    }
    .settings-profile-top {
        align-items:flex-start;
        flex-wrap:wrap
    }
    .role-badge {
        margin-left:0
    }
    .settings-info-list>div {
        align-items:flex-start
    }
    .settings-actions {
        flex-direction:column
    }
    .settings-actions .btn {
        width:100%
    }
}
/* =========================================================
   SIMAS KESISWAAN DASHBOARD v1.9 — NAVY ENTERPRISE
   Scoped only to dashboard-page so other modules remain intact.
========================================================= */
.dashboard-page {
    background:#061b38;
    color:#eaf3ff;
}
.dashboard-page main {
    margin-left:298px;
    background:#061b38;
    min-height:100vh
}
.dashboard-page .sidebar {
    width:298px;
    padding:0 14px;
    background:linear-gradient(180deg,#041a36 0%,#062348 55%,#04162f 100%);
    border-right:1px solid rgba(126,181,255,.12);
    box-shadow:10px 0 30px rgba(0,0,0,.18);
}
.dashboard-page .brand-kesiswaan {
    min-height:116px;
    padding:18px 10px 15px;
    gap:12px;
    border-bottom:1px solid rgba(145,193,255,.13);
    align-items:center;
}
.dashboard-page .brand-logo-wrap {
    width:58px;
    height:70px;
    display:grid;
    place-items:center;
    flex:none;
}
.dashboard-page .school-logo {
    width:57px;
    height:57px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 7px 12px rgba(0,0,0,.22));
}
.dashboard-page .brand-text b {
    color:#fff;
    font-size:21px;
    line-height:1;
    letter-spacing:.25px;
    font-weight:800;
}
.dashboard-page .brand-text small {
    color:#a9c3df!important;
    font-size:9px!important;
    letter-spacing:.25px!important;
    margin-top:5px!important;
    text-transform:uppercase;
}
.dashboard-page .sidebar-scroll {
    padding:10px 0 8px;
    scrollbar-color:rgba(117,171,231,.3) transparent
}
.dashboard-page .nav-section {
    margin-top:13px
}
.dashboard-page .nav-section>span {
    display:block;
    padding:0 13px 7px;
    color:#6888ad;
    opacity:1;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.15px;
}
.dashboard-page .nav-section a {
    min-height:43px;
    padding:10px 12px;
    border-radius:10px;
    gap:12px;
    color:#c7d8eb;
    font-size:12px;
    font-weight:650;
    position:relative;
    border:1px solid transparent;
    transform:none!important;
}
.dashboard-page .nav-section a:hover {
    color:#fff;
    background:rgba(43,117,217,.12);
    border-color:rgba(90,159,235,.12);
}
.dashboard-page .nav-section a.active {
    color:#fff;
    background:linear-gradient(90deg,#1673e7,#1554ae);
    border-color:rgba(107,184,255,.2);
    box-shadow:0 8px 20px rgba(7,70,153,.28),inset 3px 0 0 #63c5ff;
}
.dashboard-page .nav-section a.nav-disabled {
    opacity:.62;
    cursor:default
}
.dashboard-page .nav-section a.nav-disabled:hover {
    background:transparent;
    border-color:transparent
}
.dashboard-page .nav-section a em {
    margin-left:auto;
    font-size:7px;
    font-style:normal;
    text-transform:uppercase;
    color:#6f96be;
    border:1px solid rgba(122,165,209,.22);
    padding:3px 5px;
    border-radius:5px;
}
.dashboard-page .nav-ico {
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    color:#8cb9e9;
    flex:none;
}
.dashboard-page .nav-ico svg {
    width:18px;
    height:18px
}
.dashboard-page .nav-section a.active .nav-ico {
    color:#fff
}
.dashboard-page .sidebar-footer {
    padding:12px 8px 15px;
    border-top:1px solid rgba(145,193,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.025));
}
.dashboard-page .user-mini {
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 5px 10px
}
.dashboard-page .user-mini .avatar,.dashboard-page .profile .avatar {
    background:linear-gradient(145deg,#eaf5ff,#7ea8d7);
    color:#07305d;
    border:2px solid rgba(255,255,255,.18);
    box-shadow:0 6px 15px rgba(0,0,0,.18);
}
.dashboard-page .user-mini b {
    font-size:10px;
    color:#fff
}
.dashboard-page .user-mini small {
    font-size:8px;
    color:#7395b9;
    display:block;
    margin-top:2px
}
.dashboard-page .logout {
    display:block;
    text-align:center;
    text-decoration:none;
    color:#87a9cb;
    font-size:9px;
    font-weight:800;
    padding:8px;
    border:1px solid rgba(129,171,216,.15);
    border-radius:8px;
}
.dashboard-page .logout:hover {
    background:rgba(255,255,255,.04);
    color:#fff
}
.dashboard-page .topbar {
    height:80px;
    background:rgba(5,27,56,.96);
    color:#eaf3ff;
    border-bottom:1px solid rgba(119,173,235,.12);
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    padding:0 27px;
    position:sticky;
    top:0;
    z-index:18;
}
.dashboard-page .top-title b {
    color:#f5f9ff;
    font-size:13px
}
.dashboard-page .top-title span {
    color:#7392b4;
    font-size:9px
}
.dashboard-page .top-search {
    background:#0b284c;
    border-color:#1c4169;
    color:#8aa9c8;
}
.dashboard-page .top-search input {
    color:#eaf3ff;
    background:transparent
}
.dashboard-page .top-search input::placeholder {
    color:#6888aa
}
.dashboard-page .top-search kbd {
    background:#13375f;
    border-color:#28517a;
    color:#7fa3c7
}
.dashboard-page .top-search:focus-within {
    border-color:#277edc;
    background:#0c2d55;
    box-shadow:0 0 0 3px rgba(45,127,240,.12)
}
.dashboard-page .icon-btn {
    color:#c2d8ed;
    background:transparent;
    position:relative
}
.dashboard-page .icon-btn:hover {
    background:#0d3158;
    color:#fff
}
.dashboard-page .notify-dot {
    background:#ef4d4d;
    border:2px solid #061b38;
    color:#fff
}
.dashboard-page .profile {
    color:#e7f1fb
}
.dashboard-page .profile:hover {
    background:#0b2a4d;
    border-radius:10px
}
.dashboard-page .profile b {
    font-size:10px;
    color:#fff
}
.dashboard-page .profile small {
    font-size:8px;
    color:#7899bb
}
.dashboard-page .content {
    max-width:none;
    padding:30px 29px 20px
}
.dashboard-page .dash-head {
    margin:0 0 20px;
    align-items:flex-end
}
.dashboard-page .eyebrow {
    color:#5f9bd9;
    font-size:9px;
    letter-spacing:1.25px;
    margin-bottom:7px
}
.dashboard-page .dash-head h1 {
    color:#f4f8ff;
    font-size:27px;
    letter-spacing:-.7px;
    font-weight:800
}
.dashboard-page .dash-head p {
    color:#7898b9;
    font-size:11px;
    margin-top:7px
}
.dashboard-page .date-pill {
    height:44px;
    background:#0b284c;
    border-color:#23466e;
    color:#d7e7f8;
    box-shadow:none
}
.dashboard-page .date-pill svg {
    color:#79aee0
}
.dashboard-page .kesiswaan-kpis {
    gap:14px;
    margin-bottom:15px
}
.dashboard-page .kpi {
    min-height:151px;
    background:linear-gradient(145deg,#102f55,#0d2749);
    border:1px solid rgba(104,158,216,.17);
    border-radius:13px;
    box-shadow:0 9px 24px rgba(0,0,0,.13);
    padding:16px 17px 0;
    color:#fff;
}
.dashboard-page .kpi:hover {
    transform:translateY(-2px);
    border-color:rgba(106,176,243,.28);
    box-shadow:0 15px 28px rgba(0,0,0,.18)
}
.dashboard-page .kpi-top {
    color:#7fa1c3;
    font-size:8px;
    letter-spacing:.8px
}
.dashboard-page .kpi-icon {
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(39,125,235,.2);
    color:#7db9ff
}
.dashboard-page .kpi-icon svg {
    width:21px;
    height:21px
}
.dashboard-page .kpi strong {
    font-size:29px;
    color:#fff;
    margin:12px 0 6px
}
.dashboard-page .kpi small {
    color:#7d9cbb;
    font-size:9px
}
.dashboard-page .kpi-link {
    height:38px;
    background:rgba(3,18,39,.18);
    color:#54a7ff;
    border-top:1px solid rgba(109,164,220,.09);
    font-size:9px
}
.dashboard-page .kpi-green {
    --accent:#31c67e;
    --linkbg:rgba(3,18,39,.18)
}
.dashboard-page .kpi-blue {
    --accent:#2d86ff;
    --linkbg:rgba(3,18,39,.18)
}
.dashboard-page .kpi-gold {
    --accent:#f3b51d;
    --linkbg:rgba(3,18,39,.18)
}
.dashboard-page .kpi-red {
    --accent:#f15b5b;
    --linkbg:rgba(3,18,39,.18)
}
.dashboard-page .kpi-green .kpi-icon {
    background:rgba(48,198,126,.17);
    color:#54db98
}
.dashboard-page .kpi-gold .kpi-icon {
    background:rgba(243,181,29,.16);
    color:#ffd05b
}
.dashboard-page .kpi-red .kpi-icon {
    background:rgba(241,91,91,.16);
    color:#ff7979
}
.dashboard-page .kpi-green strong {
    color:#52db94
}
.dashboard-page .kpi-gold strong {
    color:#ffd15a
}
.dashboard-page .kpi-red strong {
    color:#ff7777
}
.dashboard-page .kpi:after {
    height:2px
}
.dashboard-page .kesiswaan-dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr) 270px;
    gap:15px;
    align-items:start;
}
.dashboard-page .panel,
.dashboard-page .quick-panel {
    background:linear-gradient(145deg,#102f55 0%,#0d2748 100%);
    border:1px solid rgba(104,158,216,.16);
    border-radius:13px;
    box-shadow:0 9px 24px rgba(0,0,0,.13);
    color:#eaf3ff;
}
.dashboard-page .panel:hover {
    box-shadow:0 12px 27px rgba(0,0,0,.16)
}
.dashboard-page .panel-head h3,.dashboard-page .quick-panel h3 {
    color:#eef6ff;
    font-size:14px
}
.dashboard-page .panel-head p {
    color:#7898b8;
    font-size:9px
}
.dashboard-page .mini-select,.dashboard-page .soft-badge {
    background:#0b2749;
    border-color:#244a73;
    color:#8faecb;
    font-size:8px;
    padding:6px 9px
}
.dashboard-page .kesiswaan-chart-card {
    min-height:310px
}
.dashboard-page .line-chart-wrap {
    padding:2px 5px 0
}
.dashboard-page .attendance-chart {
    width:100%;
    height:220px;
    display:block;
    overflow:visible
}
.dashboard-page .chart-grid-line {
    stroke:#23476d;
    stroke-width:1;
    stroke-dasharray:3 4;
    opacity:.55
}
.dashboard-page .chart-area-line {
    fill:none;
    stroke:#2d88ff;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 5px 7px rgba(45,136,255,.2))
}
.dashboard-page .chart-point {
    fill:#2d88ff;
    stroke:#bfe0ff;
    stroke-width:1.5
}
.dashboard-page .chart-xlabels {
    display:flex;
    justify-content:space-between;
    color:#5f80a4;
    font-size:8px;
    margin:1px 7px 0
}
.dashboard-page .chart-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid rgba(111,164,218,.1);
    margin-top:7px;
    padding:10px 6px 0;
    color:#7697b8;
    font-size:8px
}
.dashboard-page .chart-footer b {
    color:#c9def2;
    font-size:9px
}
.dashboard-page .legend-line {
    width:15px;
    height:3px;
    border-radius:4px;
    background:#2d88ff;
    display:inline-block;
    vertical-align:middle;
    margin-right:5px
}
.dashboard-page .distribution {
    min-height:225px;
    gap:28px
}
.dashboard-page .donut {
    width:170px;
    height:170px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    background:conic-gradient(#2d86ff 0 var(--p10),#31c67e var(--p10) calc(var(--p10) + var(--p11)),#f4ae22 calc(var(--p10) + var(--p11)) 100%)
}
.dashboard-page .donut:after {
    width:104px;
    height:104px;
    background:#102d51;
    box-shadow:inset 0 0 0 1px rgba(118,174,229,.12)
}
.dashboard-page .donut strong {
    color:#f5f9ff;
    font-size:22px
}
.dashboard-page .donut span {
    color:#7898b8
}
.dashboard-page .legend {
    gap:16px
}
.dashboard-page .legend-item b {
    color:#dbeafa;
    font-size:10px
}
.dashboard-page .legend-item small {
    color:#6f91b4;
    font-size:8px
}
.dashboard-page .legend-dot.blue {
    background:#2d86ff
}
.dashboard-page .legend-dot.green {
    background:#31c67e
}
.dashboard-page .legend-dot.orange {
    background:#f4ae22
}
.dashboard-page .quick-actions-card {
    padding:16px
}
.dashboard-page .quick-actions-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px
}
.dashboard-page .quick-tile {
    min-height:96px;
    border-radius:10px;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(115,170,226,.13);
    transition:.18s
}
.dashboard-page .quick-tile:hover {
    transform:translateY(-2px);
    border-color:rgba(120,184,245,.3);
    background:rgba(255,255,255,.045)
}
.dashboard-page .quick-tile span {
    width:35px;
    height:35px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:rgba(45,134,255,.16);
    color:#58a7ff
}
.dashboard-page .quick-tile span svg {
    width:17px;
    height:17px
}
.dashboard-page .quick-tile b {
    font-size:8px;
    color:#dbeafa;
    text-align:center
}
.dashboard-page .quick-tile.green span {
    background:rgba(49,198,126,.15);
    color:#58dc98
}
.dashboard-page .quick-tile.gold span {
    background:rgba(244,174,34,.16);
    color:#ffd45d
}
.dashboard-page .quick-tile.red span {
    background:rgba(241,91,91,.16);
    color:#ff7b7b
}
.dashboard-page .recent-card {
    min-height:290px
}
.dashboard-page .announcements-card {
    min-height:290px
}
.dashboard-page .short-stat-card {
    min-height:290px
}
.dashboard-page .recent-card {
    grid-column:1
}
.dashboard-page .announcements-card {
    grid-column:2
}
.dashboard-page .short-stat-card {
    grid-column:3
}
.dashboard-page .recent-list,.dashboard-page .announcement-list {
    display:grid;
    gap:0
}
.dashboard-page .recent-item,.dashboard-page .announcement-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid rgba(113,166,219,.10)
}
.dashboard-page .recent-item:last-child,.dashboard-page .announcement-item:last-child {
    border-bottom:0
}
.dashboard-page .recent-icon,.dashboard-page .announcement-icon {
    width:34px;
    height:34px;
    border-radius:9px;
    display:grid;
    place-items:center;
    flex:none
}
.dashboard-page .recent-icon svg,.dashboard-page .announcement-icon svg {
    width:16px;
    height:16px
}
.dashboard-page .recent-icon.in {
    background:rgba(49,198,126,.14);
    color:#5be19a
}
.dashboard-page .recent-icon.out {
    background:rgba(241,91,91,.14);
    color:#ff7b7b
}
.dashboard-page .recent-icon.move {
    background:rgba(45,134,255,.14);
    color:#66aeff
}
.dashboard-page .recent-main {
    min-width:0;
    flex:1
}
.dashboard-page .recent-main b {
    display:block;
    color:#e6f1fb;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.dashboard-page .recent-main small {
    display:block;
    color:#6f91b3;
    font-size:8px;
    margin-top:3px
}
.dashboard-page .recent-meta {
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px
}
.dashboard-page .recent-meta small {
    font-size:7px;
    color:#6485a7
}
.dashboard-page .activity-badge {
    font-size:7px;
    padding:4px 6px
}
.dashboard-page .activity-badge.in {
    background:rgba(49,198,126,.14);
    color:#5be19a
}
.dashboard-page .activity-badge.out {
    background:rgba(241,91,91,.14);
    color:#ff7b7b
}
.dashboard-page .activity-badge.move {
    background:rgba(45,134,255,.14);
    color:#66aeff
}
.dashboard-page .announcement-icon.blue {
    background:rgba(45,134,255,.14);
    color:#67b0ff
}
.dashboard-page .announcement-icon.green {
    background:rgba(49,198,126,.14);
    color:#59db98
}
.dashboard-page .announcement-icon.orange {
    background:rgba(244,174,34,.14);
    color:#ffd45b
}
.dashboard-page .announcement-item b {
    display:block;
    color:#e7f1fb;
    font-size:10px
}
.dashboard-page .announcement-item small {
    display:block;
    color:#6f91b3;
    font-size:8px;
    line-height:1.4;
    margin-top:3px
}
.dashboard-page .short-stat-row {
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 0;
    border-bottom:1px solid rgba(113,166,219,.1)
}
.dashboard-page .short-stat-row:last-of-type {
    border-bottom:0
}
.dashboard-page .ss-icon {
    width:30px;
    height:30px;
    border-radius:8px;
    display:grid;
    place-items:center
}
.dashboard-page .ss-icon svg {
    width:15px;
    height:15px
}
.dashboard-page .ss-icon.blue {
    background:rgba(45,134,255,.15);
    color:#66b0ff
}
.dashboard-page .ss-icon.green {
    background:rgba(49,198,126,.15);
    color:#5bde99
}
.dashboard-page .ss-icon.orange {
    background:rgba(244,174,34,.15);
    color:#ffd35b
}
.dashboard-page .ss-icon.purple {
    background:rgba(147,91,255,.15);
    color:#b58cff
}
.dashboard-page .short-stat-row div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:1;
    gap:8px
}
.dashboard-page .short-stat-row small {
    color:#7898b8;
    font-size:8px
}
.dashboard-page .short-stat-row b {
    color:#edf5ff;
    font-size:10px
}
.dashboard-page .school-badge {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:11px;
    padding-top:11px;
    border-top:1px solid rgba(113,166,219,.1)
}
.dashboard-page .school-badge img {
    width:38px;
    height:38px;
    object-fit:contain
}
.dashboard-page .school-badge b {
    display:block;
    color:#eaf3ff;
    font-size:7px;
    line-height:1.3
}
.dashboard-page .school-badge small {
    display:block;
    color:#6e91b4;
    font-size:7px;
    margin-top:2px
}
.dashboard-page .text-link {
    color:#4da2ff;
    font-size:8px
}
.dashboard-page .text-link svg {
    width:12px
}
.dashboard-page .empty {
    background:transparent;
    color:#6f91b3;
    padding:25px 0;
    font-size:9px
}
.dashboard-page .dashboard-bottom-note {
    padding:13px 4px 2px;
    color:#547697;
    font-size:8px
}
.dashboard-page .dashboard-bottom-note span {
    color:#8fb4d9;
    font-weight:800;
    letter-spacing:.5px
}
.dashboard-page .menu-toggle {
    color:#9fc3e4
}
.dashboard-page .menu-toggle span {
    background:#b8d2ea
}
@media(max-width:1250px) {
    .dashboard-page .kesiswaan-dashboard-grid {
        grid-template-columns:minmax(0,1.3fr) minmax(280px,.85fr)
    }
    .dashboard-page .quick-actions-card {
        grid-column:1 / -1
    }
    .dashboard-page .quick-actions-grid {
        grid-template-columns:repeat(4,1fr)
    }
    .dashboard-page .recent-card {
        grid-column:1
    }
    .dashboard-page .announcements-card {
        grid-column:2
    }
    .dashboard-page .short-stat-card {
        grid-column:1 / -1
    }
    .dashboard-page .short-stat-card {
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:10px;
        align-items:center
    }
    .dashboard-page .short-stat-card .panel-head {
        grid-column:1/-1;
        margin-bottom:0
    }
    .dashboard-page .school-badge {
        margin-top:0;
        padding-top:0;
        border-top:0
    }
}
@media(max-width:900px) {
    .dashboard-page main {
        margin-left:0
    }
    .dashboard-page .sidebar {
        transform:translateX(-100%);
        transition:transform .2s ease
    }
    .dashboard-page.sidebar-open .sidebar {
        transform:translateX(0)
    }
    .dashboard-page .topbar {
        height:64px;
        padding:0 16px
    }
    .dashboard-page .top-search {
        display:none
    }
    .dashboard-page .content {
        padding:20px 16px
    }
    .dashboard-page .kesiswaan-dashboard-grid {
        grid-template-columns:1fr
    }
    .dashboard-page .kesiswaan-chart-card,.dashboard-page .distribution-card,.dashboard-page .quick-actions-card,.dashboard-page .recent-card,.dashboard-page .announcements-card,.dashboard-page .short-stat-card {
        grid-column:1
    }
    .dashboard-page .short-stat-card {
        display:block
    }
    .dashboard-page .school-badge {
        margin-top:11px;
        padding-top:11px;
        border-top:1px solid rgba(113,166,219,.1)
    }
}
@media(max-width:650px) {
    .dashboard-page .dash-head {
        align-items:flex-start;
        flex-direction:column
    }
    .dashboard-page .dash-head h1 {
        font-size:22px
    }
    .dashboard-page .dash-head-actions {
        width:100%
    }
    .dashboard-page .date-pill {
        width:100%;
        justify-content:center
    }
    .dashboard-page .kesiswaan-kpis {
        grid-template-columns:1fr 1fr
    }
    .dashboard-page .kpi {
        min-height:145px
    }
    .dashboard-page .kpi strong {
        font-size:24px
    }
    .dashboard-page .kpi small {
        font-size:8px
    }
    .dashboard-page .quick-actions-grid {
        grid-template-columns:1fr 1fr
    }
    .dashboard-page .quick-tile {
        min-height:85px
    }
    .dashboard-page .recent-meta {
        display:none
    }
    .dashboard-page .distribution {
        gap:16px
    }
    .dashboard-page .donut {
        width:145px;
        height:145px
    }
    .dashboard-page .donut:after {
        width:88px;
        height:88px
    }
}
/* =========================================================
   SIMAS SUB-PAGES — KESISWAAN ENTERPRISE REFRESH
   Dashboard awal sengaja tidak disentuh.
   ========================================================= */
.app-page .brand-kesiswaan {
    min-height:88px;
    padding:12px 9px 14px;
    gap:9px;
    align-items:center
}
.app-page .brand-logo-wrap {
    width:45px;
    height:52px;
    display:grid;
    place-items:center;
    flex:none
}
.app-page .school-logo {
    width:44px;
    height:44px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.16))
}
.app-page .brand-text b {
    font-size:15px;
    line-height:1.05;
    color:#fff;
    font-weight:800
}
.app-page .brand-text small {
    font-size:8px!important;
    letter-spacing:.45px!important;
    margin-top:3px!important;
    color:#a9c3d9!important
}
.app-page .content {
    padding:28px 30px 42px;
    max-width:1680px
}
.app-page .topbar {
    height:68px
}
.app-page .page-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin:4px 0 20px
}
.app-page .page-heading h1 {
    margin:0;
    color:#152b44;
    font-size:28px;
    line-height:1.1;
    letter-spacing:-.6px;
    font-weight:800
}
.app-page .page-heading p {
    margin:7px 0 0;
    color:#7a8da3;
    font-size:12px;
    line-height:1.55
}
.app-page .page-heading-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}
.app-page .eyebrow {
    margin-bottom:6px;
    color:#6e8ca8;
    font-size:8px;
    letter-spacing:1.3px;
    font-weight:900
}
.app-page .stat-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
    margin-bottom:16px
}
.app-page .stat-card {
    min-height:104px;
    background:#fff;
    border:1px solid #e3eaf2;
    border-radius:14px;
    box-shadow:0 7px 22px rgba(24,47,73,.045);
    padding:15px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    overflow:hidden
}
.app-page .stat-card:after {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:var(--stat-accent,#2879ee)
}
.app-page .stat-card.blue {
    --stat-accent:#2879ee
}
.app-page .stat-card.green {
    --stat-accent:#16a778
}
.app-page .stat-card.orange {
    --stat-accent:#ef9d31
}
.app-page .stat-card.purple {
    --stat-accent:#8754e8
}
.app-page .stat-card.red {
    --stat-accent:#e55252
}
.app-page .stat-icon {
    width:40px;
    height:40px;
    border-radius:11px;
    display:grid;
    place-items:center;
    flex:none;
    background:#edf5ff;
    color:#2879ee;
    font-size:16px;
    font-weight:900
}
.app-page .stat-card.green .stat-icon {
    background:#e8faf3;
    color:#16a778
}
.app-page .stat-card.orange .stat-icon {
    background:#fff5e3;
    color:#e29122
}
.app-page .stat-card.purple .stat-icon {
    background:#f3edff;
    color:#8754e8
}
.app-page .stat-card.red .stat-icon {
    background:#fff0f0;
    color:#dc4d4d
}
.app-page .stat-card small,.app-page .stat-card strong,.app-page .stat-card em {
    display:block
}
.app-page .stat-card small {
    font-size:9px;
    color:#7b8da2;
    font-weight:800
}
.app-page .stat-card strong {
    font-size:23px;
    color:#162c44;
    line-height:1.05;
    margin:4px 0;
    font-variant-numeric:tabular-nums
}
.app-page .stat-card em {
    font-size:8px;
    color:#94a2b1;
    font-style:normal
}
.app-page .data-panel {
    background:#fff;
    border:1px solid #e2e9f1;
    border-radius:15px;
    box-shadow:0 8px 24px rgba(18,46,73,.045);
    padding:18px;
    margin-bottom:16px
}
.app-page .data-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px
}
.app-page .data-panel-head h2 {
    margin:0;
    color:#1b3048;
    font-size:14px;
    font-weight:800
}
.app-page .data-panel-head p {
    margin:4px 0 0;
    color:#8a99a9;
    font-size:9px
}
.app-page .soft-badge {
    font-size:8px;
    padding:6px 9px
}
.app-page .filter-bar {
    display:grid;
    grid-template-columns:minmax(240px,1.5fr) minmax(145px,.7fr) minmax(145px,.7fr) auto auto;
    gap:8px;
    align-items:center;
    margin-bottom:14px
}
.app-page .filter-search {
    height:40px;
    border:1px solid #dfe7ef;
    background:#fbfcfe;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 11px;
    color:#8496a9
}
.app-page .filter-search input {
    border:0;
    outline:0;
    width:100%;
    background:transparent;
    font:inherit;
    font-size:10px;
    color:#31465e
}
.app-page .filter-bar select {
    height:40px;
    border:1px solid #dfe7ef;
    border-radius:10px;
    padding:0 10px;
    background:#fff;
    color:#40556c;
    font:inherit;
    font-size:10px
}
.app-page .filter-bar .btn {
    height:40px;
    padding:0 14px
}
.app-page .modern-table-wrap {
    border:1px solid #e8eef4;
    border-radius:11px
}
.app-page .modern-table {
    min-width:900px
}
.app-page .modern-table th {
    background:#f7f9fc;
    color:#74879b;
    text-transform:uppercase;
    letter-spacing:.45px;
    font-size:8px;
    padding:11px 10px;
    border-bottom:1px solid #e4ebf2
}
.app-page .modern-table td {
    padding:11px 10px;
    font-size:10px;
    border-bottom:1px solid #edf1f5;
    color:#42566c
}
.app-page .modern-table tbody tr:hover {
    background:#fbfdff
}
.app-page .modern-table tbody tr:last-child td {
    border-bottom:0
}
.app-page .row-no {
    color:#9aa8b7;
    width:40px
}
.app-page .student-cell {
    display:flex;
    align-items:center;
    gap:9px;
    min-width:210px
}
.app-page .student-avatar {
    width:32px;
    height:32px;
    border-radius:9px;
    background:linear-gradient(135deg,#e7f1ff,#d7f7ee);
    color:#2167a9;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:900
}
.app-page .student-cell b {
    display:block;
    color:#233a54;
    font-size:10px
}
.app-page .student-cell small,.app-page .modern-table td small {
    display:block;
    color:#95a2b0;
    font-size:8px;
    margin-top:2px
}
.app-page .gender-pill {
    display:inline-grid;
    place-items:center;
    min-width:25px;
    height:22px;
    border-radius:7px;
    font-size:8px;
    font-weight:900
}
.app-page .gender-pill.male {
    background:#edf5ff;
    color:#2879ee
}
.app-page .gender-pill.female {
    background:#fff0f5;
    color:#cf5684
}
.app-page .status-pill {
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:999px;
    font-size:7px;
    font-weight:900;
    letter-spacing:.3px
}
.app-page .status-pill.aktif {
    background:#e8faf3;
    color:#139267
}
.app-page .status-pill.keluar {
    background:#fff0ef;
    color:#d24c43
}
.app-page .status-pill.lulus {
    background:#f0ecff;
    color:#7044c5
}
.app-page .status-pill.nonaktif {
    background:#eef1f4;
    color:#68798b
}
.app-page .row-actions {
    display:flex;
    gap:5px;
    flex-wrap:wrap
}
.app-page .row-actions a {
    font-size:8px;
    font-weight:800;
    color:#2a72d2;
    text-decoration:none;
    padding:5px 7px;
    border:1px solid #dbe7f3;
    border-radius:7px;
    background:#fbfdff
}
.app-page .row-actions a:hover {
    background:#eff6ff
}
.app-page .action-col {
    min-width:170px
}
.app-page .empty-row {
    text-align:center!important;
    color:#9aa7b4!important;
    padding:28px!important
}
.app-page .two-column-layout {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);
    gap:16px;
    align-items:start
}
.app-page .inline-filter {
    display:flex;
    gap:7px;
    align-items:center
}
.app-page .inline-filter input,.app-page .date-control {
    height:38px;
    border:1px solid #dfe7ef;
    border-radius:9px;
    padding:0 10px;
    background:#fff;
    color:#40556c;
    font:inherit;
    font-size:10px
}
.app-page .legend-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px
}
.app-page .legend-grid>div {
    padding:12px 8px;
    border:1px solid #e8eef4;
    border-radius:10px;
    text-align:center;
    background:#fbfcfe
}
.app-page .legend-grid b {
    display:block;
    font-size:14px;
    color:#2879ee
}
.app-page .legend-grid span {
    display:block;
    margin-top:4px;
    font-size:8px;
    color:#8191a2
}
.app-page .info-box {
    margin-top:12px;
    padding:11px 12px;
    border-radius:9px;
    background:#f3f7fc;
    color:#6f8297;
    font-size:9px;
    line-height:1.55
}
.app-page .mini-status {
    display:inline-flex;
    min-width:24px;
    justify-content:center;
    padding:4px 6px;
    border-radius:7px;
    font-size:8px;
    font-weight:900
}
.app-page .mini-status.good {
    background:#e8faf3;
    color:#14936a
}
.app-page .mini-status.bad {
    background:#fff0ef;
    color:#d34e45
}
.app-page .attendance-badge {
    display:inline-flex;
    padding:5px 8px;
    border-radius:999px;
    font-size:8px;
    font-weight:900
}
.app-page .attendance-badge.status-h {
    background:#e8faf3;
    color:#15936a
}
.app-page .attendance-badge.status-s {
    background:#fff5e3;
    color:#d4861d
}
.app-page .attendance-badge.status-i {
    background:#f1edff;
    color:#7a50cc
}
.app-page .attendance-badge.status-a {
    background:#fff0ef;
    color:#d34d44
}
.app-page .attendance-badge.status-d {
    background:#edf5ff;
    color:#2879ee
}
.app-page .movement-tabs {
    display:flex;
    gap:7px;
    margin-bottom:14px
}
.app-page .movement-tabs a {
    display:inline-flex;
    align-items:center;
    gap:7px;
    text-decoration:none;
    padding:9px 13px;
    border-radius:9px;
    background:#fff;
    border:1px solid #e0e8f0;
    color:#65788d;
    font-size:10px;
    font-weight:800
}
.app-page .movement-tabs a.active {
    background:#edf6ff;
    color:#2879ee;
    border-color:#cfe2f7
}
.app-page .movement-tabs a.active.out {
    background:#fff1f0;
    color:#d54f46;
    border-color:#f1d3d0
}
.app-page .modern-form .field {
    margin-bottom:12px
}
.app-page .modern-form .field label {
    font-size:9px;
    color:#425970
}
.app-page .modern-form .field label b {
    color:#dc5a50
}
.app-page .modern-form input,.app-page .modern-form select,.app-page .modern-form textarea {
    height:40px;
    border-radius:9px;
    background:#fbfcfe
}
.app-page .compact-form {
    gap:10px
}
.app-page .dangerbtn {
    background:#df564d;
    color:#fff;
    box-shadow:0 8px 18px rgba(223,86,77,.15)
}
.app-page .timeline-list {
    display:grid;
    gap:0
}
.app-page .timeline-item {
    display:flex;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid #edf1f5
}
.app-page .timeline-item:last-child {
    border-bottom:0
}
.app-page .timeline-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:#2879ee;
    flex:none;
    margin-top:4px;
    box-shadow:0 0 0 4px #edf5ff
}
.app-page .timeline-dot.masuk {
    background:#16a778;
    box-shadow:0 0 0 4px #e8faf3
}
.app-page .timeline-dot.keluar {
    background:#df564d;
    box-shadow:0 0 0 4px #fff0ef
}
.app-page .timeline-main {
    flex:1;
    min-width:0
}
.app-page .timeline-main>div {
    display:flex;
    justify-content:space-between;
    gap:10px
}
.app-page .timeline-main b {
    font-size:10px;
    color:#243b53
}
.app-page .timeline-main span {
    font-size:8px;
    color:#8a9aab
}
.app-page .timeline-main p {
    margin:4px 0;
    font-size:9px;
    color:#62778c
}
.app-page .timeline-main small {
    font-size:8px;
    color:#99a6b3
}
.app-page .profile-hero {
    display:flex;
    align-items:center;
    gap:15px;
    background:linear-gradient(135deg,#0b2c4d,#103d68);
    border-radius:15px;
    padding:18px 20px;
    color:#fff;
    margin-bottom:16px;
    box-shadow:0 10px 25px rgba(7,32,56,.12)
}
.app-page .profile-avatar-large {
    width:58px;
    height:58px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#2c8ff0,#22b88b);
    font-size:22px;
    font-weight:900;
    box-shadow:0 8px 18px rgba(0,0,0,.15)
}
.app-page .profile-hero-main {
    min-width:0;
    flex:1
}
.app-page .profile-name-row {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap
}
.app-page .profile-name-row h2 {
    margin:0;
    font-size:19px
}
.app-page .profile-hero p {
    margin:5px 0 9px;
    color:#a7c1d9;
    font-size:9px
}
.app-page .profile-meta {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    color:#7f9db8;
    font-size:8px
}
.app-page .profile-meta b {
    color:#d9e9f7
}
.app-page .profile-grid {
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);
    gap:16px
}
.app-page .detail-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    border:1px solid #e8eef4;
    border-radius:10px;
    overflow:hidden
}
.app-page .detail-grid>div {
    padding:12px;
    border-right:1px solid #edf1f5;
    border-bottom:1px solid #edf1f5
}
.app-page .detail-grid>div:nth-child(2n) {
    border-right:0
}
.app-page .detail-grid>div.full {
    grid-column:1/-1;
    border-right:0
}
.app-page .detail-grid small {
    display:block;
    color:#8a9aaa;
    font-size:8px;
    margin-bottom:4px
}
.app-page .detail-grid b {
    display:block;
    color:#304760;
    font-size:10px;
    line-height:1.4
}
.app-page .mini-timeline>div {
    display:flex;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #edf1f5
}
.app-page .mini-timeline>div:last-child {
    border-bottom:0
}
.app-page .mini-timeline b {
    display:block;
    font-size:9px;
    color:#334a62
}
.app-page .mini-timeline small {
    display:block;
    margin-top:3px;
    color:#8c9bab;
    font-size:8px
}
.app-page .formgrid.compact-form {
    grid-template-columns:repeat(2,1fr)
}
@media(max-width:1100px) {
    .app-page .stat-grid {
        grid-template-columns:1fr 1fr
    }
    .app-page .two-column-layout,.app-page .profile-grid {
        grid-template-columns:1fr
    }
    .app-page .filter-bar {
        grid-template-columns:1fr 1fr
    }
    .app-page .filter-search {
        grid-column:1/-1
    }
    .app-page .filter-bar .btn {
        justify-content:center
    }
    .app-page .legend-grid {
        grid-template-columns:repeat(5,1fr)
    }
}
@media(max-width:900px) {
    .app-page .sidebar {
        width:230px
    }
    .app-page main {
        margin-left:230px
    }
    .app-page .content {
        padding:22px 18px 35px
    }
    .app-page .page-heading {
        align-items:flex-start;
        flex-direction:column
    }
    .app-page .page-heading-actions {
        width:100%
    }
    .app-page .page-heading-actions .btn {
        flex:1;
        justify-content:center
    }
    .app-page .topbar {
        padding:0 18px
    }
    .app-page .top-search {
        display:none
    }
    .app-page .filter-bar {
        grid-template-columns:1fr
    }
    .app-page .filter-search {
        grid-column:auto
    }
    .app-page .profile-grid {
        grid-template-columns:1fr
    }
}
@media(max-width:650px) {
    .app-page .content {
        padding:18px 13px 30px
    }
    .app-page .stat-grid {
        grid-template-columns:1fr 1fr;
        gap:9px
    }
    .app-page .stat-card {
        min-height:92px;
        padding:12px
    }
    .app-page .stat-icon {
        width:34px;
        height:34px
    }
    .app-page .stat-card strong {
        font-size:19px
    }
    .app-page .data-panel {
        padding:14px
    }
    .app-page .data-panel-head {
        align-items:flex-start
    }
    .app-page .page-heading h1 {
        font-size:23px
    }
    .app-page .page-heading-actions {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .app-page .legend-grid {
        grid-template-columns:repeat(5,1fr)
    }
    .app-page .profile-hero {
        padding:14px
    }
    .app-page .profile-avatar-large {
        width:48px;
        height:48px
    }
    .app-page .detail-grid {
        grid-template-columns:1fr
    }
    .app-page .detail-grid>div,.app-page .detail-grid>div:nth-child(2n) {
        border-right:0
    }
    .app-page .detail-grid>div.full {
        grid-column:auto
    }
    .app-page .formgrid.compact-form {
        grid-template-columns:1fr
    }
    .app-page .inline-filter {
        width:100%
    }
    .app-page .inline-filter input {
        flex:1
    }
    .app-page .data-panel-head .inline-filter {
        margin-top:8px
    }
}

/* =========================================================
   SIMAS 2.1 — LOGIN SENJA + DATA SISWA DARK ENTERPRISE
   Login and Data Siswa only. Dashboard layout remains intact.
   ========================================================= */
.login-page {
    min-height:100vh;
    width:100%;
    margin-left:0 !important;
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center;
    padding:28px;
    background:#061426 url('login-bg-senja.webp') center/cover no-repeat fixed;
    color:#fff;
}
.login-page::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(2,13,27,.84) 0%,rgba(3,18,37,.68) 45%,rgba(2,12,27,.42) 100%),
        linear-gradient(180deg,rgba(2,14,29,.18),rgba(2,10,24,.72));
}
.login-overlay {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 30%,rgba(31,142,255,.17),transparent 32%),
        radial-gradient(circle at 18% 82%,rgba(19,191,145,.10),transparent 25%);
    pointer-events:none;
}
.login-shell {
    position:relative;
    z-index:2;
    width:min(480px,94vw);
}
.login-card {
    position:relative;
    overflow:hidden;
    padding:34px 36px 24px;
    border:1px solid rgba(111,190,255,.28);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(5,24,49,.88),rgba(5,18,37,.76));
    box-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px) saturate(130%);
}
.login-card::before {
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,#37a9ff,transparent);
}
.login-card-glow {
    position:absolute;
    width:220px;
    height:220px;
    right:-110px;
    top:-120px;
    border-radius:50%;
    background:rgba(30,137,255,.22);
    filter:blur(55px);
    pointer-events:none;
}
.login-brand-pro {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    text-align:left;
}
.login-logo-ring {
    width:70px;
    height:70px;
    padding:5px;
    border-radius:20px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#25c8a0,#2589f5);
    box-shadow:0 12px 28px rgba(23,145,235,.28);
}
.login-logo-ring img {
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:16px;
    background:#fff;
}
.login-title-wrap {
    min-width:0;
}
.login-kicker {
    display:block;
    margin-bottom:2px;
    color:#6cbcff;
    font-size:8px;
    font-weight:900;
    letter-spacing:1.8px;
}
.login-title-wrap h1 {
    margin:0;
    font-size:36px;
    line-height:1;
    letter-spacing:-1.2px;
    color:#fff;
    font-weight:900;
}
.login-title-wrap p {
    margin:5px 0 2px;
    color:#d9e8f7;
    font-size:10px;
    font-weight:600;
}
.login-title-wrap strong {
    color:#52c5a3;
    font-size:10px;
    font-weight:800;
}
.login-divider {
    height:1px;
    margin:25px 0 20px;
    background:linear-gradient(90deg,transparent,rgba(101,169,224,.34),transparent);
}
.login-alert {
    margin-bottom:14px;
}
.login-form {
    display:grid;
    gap:15px;
}
.login-field label {
    display:block;
    margin-bottom:7px;
    color:#dce9f5;
    font-size:10px;
    font-weight:800;
}
.login-input-wrap {
    height:47px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 13px;
    border:1px solid rgba(117,159,197,.28);
    border-radius:12px;
    background:rgba(255,255,255,.055);
    transition:.2s ease;
}
.login-input-wrap:focus-within {
    border-color:rgba(48,157,255,.75);
    background:rgba(25,122,211,.09);
    box-shadow:0 0 0 3px rgba(43,143,237,.10);
}
.login-input-icon {
    width:22px;
    color:#6fb8f8;
    font-size:13px;
    text-align:center;
}
.login-input-wrap input {
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font:inherit;
    font-size:11px;
}
.login-input-wrap input::placeholder {
    color:#7e96ad;
}
.login-submit {
    width:100%;
    height:48px;
    margin-top:2px;
    border:1px solid rgba(111,207,255,.36);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#fff;
    background:linear-gradient(100deg,#1768e8,#159de8 55%,#16b792);
    box-shadow:0 12px 28px rgba(22,128,235,.24);
    font:inherit;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
    transition:.2s ease;
}
.login-submit:hover {
    transform:translateY(-1px);
    box-shadow:0 16px 34px rgba(22,128,235,.32);
}
.login-submit-arrow {
    font-size:16px;
}
.login-forgot {
    display:block;
    margin:16px 0 21px;
    text-align:center;
    color:#69b9ff;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
}
.login-forgot:hover {
    color:#fff;
}
.login-footer {
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    color:#7992a9;
    font-size:7.5px;
    font-weight:700;
}
.login-footer i {
    width:3px;
    height:3px;
    border-radius:50%;
    background:#496b86;
}
.login-status-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#26c695;
    box-shadow:0 0 10px rgba(38,198,149,.7);
}

/* Data Siswa: replace the white canvas with the same dark Enterprise language as Dashboard. */
.students-page {
    background:#061a32;
    color:#dbe9f5;
}
.students-page main {
    background:
        radial-gradient(circle at 80% 0%,rgba(31,117,214,.08),transparent 28%),
        linear-gradient(180deg,#071d37 0%,#061a31 100%);
}
.students-page .topbar {
    background:rgba(5,23,44,.88);
    border-bottom:1px solid rgba(109,158,201,.13);
}
.students-page .top-title b {
    color:#f2f8fd;
}
.students-page .top-title span {
    color:#6f8ca7;
}
.students-page .top-search {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
}
.students-page .top-search input {
    color:#dbe9f5;
}
.students-page .top-search kbd {
    background:rgba(255,255,255,.06);
    border-color:rgba(108,155,194,.16);
    color:#7793ad;
}
.students-page .icon-btn {
    background:rgba(255,255,255,.045);
    color:#9bb5cc;
}
.students-page .profile {
    border-left-color:rgba(109,158,201,.13);
}
.students-page .profile b {
    color:#f2f8fd;
}
.students-page .profile small {
    color:#7893ac;
}
.students-page .profile>span {
    color:#7590aa;
}
.students-page .content {
    background:transparent;
}
.students-page .page-heading h1 {
    color:#f4f9fd;
}
.students-page .page-heading p {
    color:#7f9bb4;
}
.students-page .eyebrow {
    color:#55aaf2;
}
.students-page .page-heading-actions .btn.secondary {
    color:#bdd2e4;
    background:rgba(255,255,255,.045);
    border-color:rgba(112,158,194,.18);
}
.students-page .stat-card {
    background:linear-gradient(145deg,#102f51,#0b2644);
    border-color:rgba(101,153,197,.17);
    box-shadow:0 14px 35px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035);
}
.students-page .stat-card small {
    color:#7f9bb4;
}
.students-page .stat-card strong {
    color:#f2f8fd;
}
.students-page .stat-card em {
    color:#66849f;
}
.students-page .stat-icon {
    background:rgba(40,121,238,.14);
    color:#58a9ff;
}
.students-page .stat-card.green .stat-icon {
    background:rgba(22,167,120,.14);
    color:#43d1a3;
}
.students-page .stat-card.orange .stat-icon {
    background:rgba(242,154,49,.14);
    color:#ffba59;
}
.students-page .stat-card.purple .stat-icon {
    background:rgba(135,84,232,.15);
    color:#b99aff;
}
.students-page .data-panel {
    background:linear-gradient(145deg,#0d2a4a,#091f38);
    border-color:rgba(101,153,197,.17);
    box-shadow:0 16px 40px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);
}
.students-page .data-panel-head h2 {
    color:#f0f7fc;
}
.students-page .data-panel-head p {
    color:#6f8ca6;
}
.students-page .soft-badge {
    color:#8fc7f5;
    background:rgba(43,127,231,.10);
    border:1px solid rgba(69,153,235,.16);
}
.students-page .filter-search {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#7895ae;
}
.students-page .filter-search input {
    color:#dce9f5;
}
.students-page .filter-search input::placeholder {
    color:#647f98;
}
.students-page .filter-bar select {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#bcd0e1;
}
.students-page .filter-bar select option {
    background:#0b2745;
    color:#dce9f5;
}
.students-page .filter-bar .btn.secondary {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#aec5d9;
}
.students-page .modern-table-wrap {
    border-color:rgba(101,153,197,.16);
    background:rgba(4,18,34,.32);
}
.students-page .modern-table th {
    background:rgba(255,255,255,.035);
    color:#7390aa;
    border-bottom-color:rgba(101,153,197,.16);
}
.students-page .modern-table td {
    color:#b8cad9;
    border-bottom-color:rgba(101,153,197,.11);
}
.students-page .modern-table tbody tr:hover {
    background:rgba(43,127,231,.075);
}
.students-page .row-no {
    color:#66839d;
}
.students-page .student-avatar {
    background:linear-gradient(135deg,rgba(45,127,239,.22),rgba(22,183,139,.18));
    color:#8bc7ff;
    border:1px solid rgba(93,168,239,.12);
}
.students-page .student-cell b {
    color:#edf5fa;
}
.students-page .student-cell small,
.students-page .modern-table td small {
    color:#66849e;
}
.students-page .gender-pill.male {
    background:rgba(40,121,238,.14);
    color:#63b0ff;
}
.students-page .gender-pill.female {
    background:rgba(207,86,132,.14);
    color:#f28eaf;
}
.students-page .status-pill.aktif {
    background:rgba(22,167,120,.14);
    color:#45d3a4;
}
.students-page .status-pill.keluar {
    background:rgba(229,82,82,.14);
    color:#ff8d87;
}
.students-page .status-pill.lulus {
    background:rgba(135,84,232,.15);
    color:#b69cff;
}
.students-page .status-pill.nonaktif {
    background:rgba(129,148,167,.14);
    color:#a4b5c4;
}
.students-page .row-actions a {
    color:#74b9ff;
    border-color:rgba(82,151,220,.18);
    background:rgba(255,255,255,.035);
}
.students-page .row-actions a:hover {
    background:rgba(43,127,231,.12);
}
.students-page .empty-row {
    color:#708aa2!important;
}
.students-page .nav-section a em {
    margin-left:auto;
    padding:3px 6px;
    border:1px solid rgba(107,145,175,.16);
    border-radius:999px;
    color:#66859f;
    background:rgba(255,255,255,.025);
    font-size:7px;
    letter-spacing:.2px;
}

@media (max-width:700px) {
    .login-page {
        padding:16px;
        background-position:center;
    }
    .login-card {
        padding:28px 22px 20px;
        border-radius:20px;
    }
    .login-brand-pro {
        gap:11px;
    }
    .login-logo-ring {
        width:58px;
        height:58px;
        border-radius:16px;
    }
    .login-title-wrap h1 {
        font-size:30px;
    }
    .login-title-wrap p,
    .login-title-wrap strong {
        font-size:8px;
    }
}

/* =========================================================
   SIMAS ENTERPRISE DARK SYSTEM v2.2
   Semua halaman aplikasi selain Dashboard & Data Siswa.
   Hanya visual/CSS — tidak mengubah PHP, database, atau fungsi.
   ========================================================= */
.app-page:not(.students-page) {
    background:#061a32;
    color:#dbe9f5;
}
.app-page:not(.students-page) main {
    background:
        radial-gradient(circle at 84% -8%,rgba(32,126,238,.10),transparent 28%),
        radial-gradient(circle at 12% 92%,rgba(21,177,139,.045),transparent 25%),
        linear-gradient(180deg,#071d37 0%,#061a31 100%);
}
.app-page:not(.students-page) .topbar {
    background:rgba(5,23,44,.90);
    border-bottom:1px solid rgba(109,158,201,.13);
    box-shadow:0 8px 25px rgba(0,0,0,.10);
}
.app-page:not(.students-page) .top-title b { color:#f2f8fd; }
.app-page:not(.students-page) .top-title span { color:#6f8ca7; }
.app-page:not(.students-page) .top-search {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
}
.app-page:not(.students-page) .top-search input { color:#dbe9f5; }
.app-page:not(.students-page) .top-search input::placeholder { color:#637f99; }
.app-page:not(.students-page) .top-search kbd {
    background:rgba(255,255,255,.055);
    border-color:rgba(108,155,194,.16);
    color:#7894ad;
}
.app-page:not(.students-page) .icon-btn {
    background:rgba(255,255,255,.045);
    color:#9bb5cc;
    border:1px solid rgba(108,155,194,.12);
}
.app-page:not(.students-page) .icon-btn:hover { background:rgba(43,127,231,.12); color:#6cbcff; }
.app-page:not(.students-page) .profile { border-left-color:rgba(109,158,201,.13); }
.app-page:not(.students-page) .profile b { color:#f2f8fd; }
.app-page:not(.students-page) .profile small { color:#7893ac; }
.app-page:not(.students-page) .profile>span { color:#7590aa; }
.app-page:not(.students-page) .page-heading h1 { color:#f4f9fd; }
.app-page:not(.students-page) .page-heading p { color:#7f9bb4; }
.app-page:not(.students-page) .eyebrow { color:#58aef6; }
.app-page:not(.students-page) .page-heading-actions .btn.secondary,
.app-page:not(.students-page) .btn.secondary {
    background:rgba(255,255,255,.045);
    border:1px solid rgba(108,155,194,.18);
    color:#bcd2e5;
}
.app-page:not(.students-page) .btn.secondary:hover {
    background:rgba(43,127,231,.11);
    border-color:rgba(82,151,220,.28);
}

/* Stat cards */
.app-page:not(.students-page) .stat-card {
    background:linear-gradient(145deg,#102f51,#0b2644);
    border-color:rgba(101,153,197,.17);
    box-shadow:0 14px 35px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035);
}
.app-page:not(.students-page) .stat-card small { color:#7f9bb4; }
.app-page:not(.students-page) .stat-card strong { color:#f2f8fd; }
.app-page:not(.students-page) .stat-card em { color:#66849f; }
.app-page:not(.students-page) .stat-icon { background:rgba(40,121,238,.14); color:#58a9ff; }
.app-page:not(.students-page) .stat-card.green .stat-icon { background:rgba(22,167,120,.14); color:#43d1a3; }
.app-page:not(.students-page) .stat-card.orange .stat-icon { background:rgba(242,154,49,.14); color:#ffba59; }
.app-page:not(.students-page) .stat-card.purple .stat-icon { background:rgba(135,84,232,.15); color:#b99aff; }
.app-page:not(.students-page) .stat-card.red .stat-icon { background:rgba(229,82,82,.14); color:#ff8d87; }

/* Universal dark panels */
.app-page:not(.students-page) .panel,
.app-page:not(.students-page) .data-panel,
.app-page:not(.students-page) .quick-panel {
    background:linear-gradient(145deg,#0d2a4a,#091f38);
    border-color:rgba(101,153,197,.17);
    box-shadow:0 16px 40px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);
    color:#dbe9f5;
}
.app-page:not(.students-page) .panel-head h3,
.app-page:not(.students-page) .data-panel-head h2,
.app-page:not(.students-page) .quick-panel h3 { color:#f0f7fc; }
.app-page:not(.students-page) .panel-head p,
.app-page:not(.students-page) .data-panel-head p { color:#6f8ca6; }
.app-page:not(.students-page) .mini-select,
.app-page:not(.students-page) .soft-badge {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#8fc7f5;
}
.app-page:not(.students-page) .empty { color:#708aa2; }

/* Search, filters and forms */
.app-page:not(.students-page) .filter-search,
.app-page:not(.students-page) .search {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#7895ae;
}
.app-page:not(.students-page) .filter-search input,
.app-page:not(.students-page) .search,
.app-page:not(.students-page) .search::placeholder { color:#dce9f5; }
.app-page:not(.students-page) .filter-search input::placeholder { color:#647f98; }
.app-page:not(.students-page) .filter-bar select,
.app-page:not(.students-page) .field input,
.app-page:not(.students-page) .field select,
.app-page:not(.students-page) .field textarea,
.app-page:not(.students-page) .modern-form input,
.app-page:not(.students-page) .modern-form select,
.app-page:not(.students-page) .modern-form textarea,
.app-page:not(.students-page) .inline-filter input,
.app-page:not(.students-page) .date-control {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#dce9f5;
}
.app-page:not(.students-page) .filter-bar select option { background:#0b2745; color:#dce9f5; }
.app-page:not(.students-page) .field label,
.app-page:not(.students-page) .modern-form .field label { color:#bdd1e2; }
.app-page:not(.students-page) .field input::placeholder,
.app-page:not(.students-page) .field textarea::placeholder { color:#637f99; }
.app-page:not(.students-page) .field input:focus,
.app-page:not(.students-page) .field select:focus,
.app-page:not(.students-page) .field textarea:focus,
.app-page:not(.students-page) .search:focus {
    outline:none;
    border-color:rgba(65,159,247,.60);
    box-shadow:0 0 0 3px rgba(43,143,237,.09);
}

/* Tables */
.app-page:not(.students-page) .modern-table-wrap,
.app-page:not(.students-page) .table-wrap {
    border-color:rgba(101,153,197,.16);
    background:rgba(4,18,34,.32);
}
.app-page:not(.students-page) table { color:#dbe9f5; }
.app-page:not(.students-page) th {
    background:rgba(255,255,255,.035);
    color:#7390aa;
    border-bottom-color:rgba(101,153,197,.16);
}
.app-page:not(.students-page) td {
    color:#b8cad9;
    border-bottom-color:rgba(101,153,197,.11);
}
.app-page:not(.students-page) tbody tr:hover { background:rgba(43,127,231,.075); }
.app-page:not(.students-page) td small { color:#66849e; }
.app-page:not(.students-page) .row-new { background:rgba(22,167,120,.08); }
.app-page:not(.students-page) .row-update { background:rgba(43,127,231,.08); }
.app-page:not(.students-page) .row-conflict { background:rgba(229,82,82,.08); }

/* Tabs, legend and informational blocks */
.app-page:not(.students-page) .movement-tabs a {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#9bb5cc;
}
.app-page:not(.students-page) .movement-tabs a.active {
    background:rgba(43,127,231,.14);
    border-color:rgba(69,153,235,.24);
    color:#63b0ff;
}
.app-page:not(.students-page) .movement-tabs a.active.out {
    background:rgba(229,82,82,.10);
    border-color:rgba(229,82,82,.20);
    color:#ff8d87;
}
.app-page:not(.students-page) .legend-grid>div {
    background:rgba(255,255,255,.035);
    border-color:rgba(101,153,197,.16);
}
.app-page:not(.students-page) .legend-grid b { color:#58a9ff; }
.app-page:not(.students-page) .legend-grid span { color:#718ca5; }
.app-page:not(.students-page) .info-box,
.app-page:not(.students-page) .info-strip {
    background:rgba(43,127,231,.08);
    border-color:rgba(69,153,235,.14);
    color:#7fa8c8;
}

/* Activity / timeline / detail pages */
.app-page:not(.students-page) .activity-table tbody tr:hover { background:rgba(43,127,231,.075); }
.app-page:not(.students-page) .status-line,
.app-page:not(.students-page) .system-row,
.app-page:not(.students-page) .timeline-item,
.app-page:not(.students-page) .mini-timeline>div,
.app-page:not(.students-page) .detail-grid>div { border-color:rgba(101,153,197,.12); }
.app-page:not(.students-page) .status-line span,
.app-page:not(.students-page) .system-row span { color:#6f8ca6; }
.app-page:not(.students-page) .status-line b,
.app-page:not(.students-page) .system-row b { color:#c9dbe9; }
.app-page:not(.students-page) .timeline-main b,
.app-page:not(.students-page) .detail-grid b { color:#dce9f5; }
.app-page:not(.students-page) .timeline-main span,
.app-page:not(.students-page) .timeline-main p,
.app-page:not(.students-page) .timeline-main small,
.app-page:not(.students-page) .detail-grid small,
.app-page:not(.students-page) .mini-timeline b,
.app-page:not(.students-page) .mini-timeline small { color:#7692aa; }
.app-page:not(.students-page) .detail-grid { border-color:rgba(101,153,197,.16); }
.app-page:not(.students-page) .profile-hero {
    background:linear-gradient(135deg,#0b2c4d,#103d68);
    box-shadow:0 14px 35px rgba(0,0,0,.18);
}

/* Quick action tiles */
.app-page:not(.students-page) .quick {
    border-color:rgba(108,155,194,.10);
}
.app-page:not(.students-page) .quick.green { background:rgba(22,167,120,.09); border-color:rgba(22,167,120,.13); color:#55d7ad; }
.app-page:not(.students-page) .quick.blue { background:rgba(43,127,231,.09); border-color:rgba(43,127,231,.13); color:#69b5ff; }
.app-page:not(.students-page) .quick.purple { background:rgba(135,84,232,.09); border-color:rgba(135,84,232,.13); color:#b99aff; }
.app-page:not(.students-page) .quick.orange { background:rgba(242,154,49,.09); border-color:rgba(242,154,49,.13); color:#ffbd62; }
.app-page:not(.students-page) .quick small { color:#6f8ca6; }

/* Flash messages remain readable in dark mode */
.app-page:not(.students-page) .alert {
    background:rgba(22,167,120,.12);
    border:1px solid rgba(22,167,120,.18);
    color:#65d9b0;
}
.app-page:not(.students-page) .alert-danger {
    background:rgba(229,82,82,.11);
    border-color:rgba(229,82,82,.18);
    color:#ff9992;
}

/* Pagination */
.app-page:not(.students-page) .pagination a {
    background:rgba(255,255,255,.045);
    border-color:rgba(108,155,194,.18);
    color:#b9cede;
}
.app-page:not(.students-page) .pagination a:hover { background:rgba(43,127,231,.12); }

/* Utility cards */
.app-page:not(.students-page) .tip-panel {
    background:linear-gradient(145deg,#102f51,#0b2644);
}
.app-page:not(.students-page) .tip-title { color:#cfe2f0; }
.app-page:not(.students-page) .status-panel p,
.app-page:not(.students-page) .tip-panel p { color:#7894ad; }

/* Keep dashboard and Data Siswa untouched by this layer. */

/* =========================================================
   SIMAS 2.3 — LOGIN ABSOLUTE CENTER
   Override global main margin used by application pages.
   ========================================================= */
.login-page .login-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px !important;
    box-sizing: border-box;
    display: grid !important;
    place-items: center !important;
}

.login-page .login-card {
    margin: 0 !important;
}

@media (max-width: 700px) {
    .login-page .login-shell {
        padding: 16px !important;
    }
}

/* SIMAS Enterprise modules */
.app-page .module-form{align-self:start}.app-page .module-form form{margin-top:2px}.app-page .module-form .field{margin-bottom:10px}.app-page .module-form .field label{display:block;margin-bottom:5px;font-size:9px;font-weight:800;color:#88a0b6}.app-page .module-form input,.app-page .module-form select,.app-page .module-form textarea{width:100%;border:1px solid rgba(108,155,194,.18);border-radius:9px;padding:9px 10px;background:rgba(255,255,255,.045);color:#dce9f5;font:inherit;font-size:10px;outline:none}.app-page .module-form select option{background:#0b2745;color:#dce9f5}.app-page .module-form textarea{resize:vertical}.app-page .module-form input:focus,.app-page .module-form select:focus,.app-page .module-form textarea:focus{border-color:rgba(65,159,247,.60);box-shadow:0 0 0 3px rgba(43,143,237,.09)}.app-page .module-form .actions{display:flex;gap:8px;margin-top:8px}.app-page .link-button{border:0;background:none;color:#ff8d87;font:inherit;font-size:9px;font-weight:800;cursor:pointer;padding:0}.app-page .row-actions{display:flex;gap:8px;align-items:center}.app-page .row-actions a{font-size:9px;font-weight:800;color:#63b0ff;text-decoration:none}.app-page .status-pill.open{background:rgba(229,82,82,.14);color:#ff8d87}.app-page .status-pill.selesai{background:rgba(22,167,120,.14);color:#45d3a4}.app-page .status-pill.aktif{background:rgba(22,167,120,.14);color:#45d3a4}.app-page .status-pill.nonaktif{background:rgba(229,82,82,.14);color:#ff8d87}