:root {
    --bg: #f7f6f4;
    --surface: #ffffff;
    --surface-soft: #f1f0ee;
    --ink: #111111;
    --muted: #6f6d69;
    --border: #ddd9d3;
    --green: #18b982;
    --green-soft: #e6f8f1;
    --red: #ef4444;
    --red-soft: #fff1f1;
    --black: #050505;
    --radius: 16px;
    --shadow: 0 20px 60px rgba(17, 17, 17, .08);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

.brand {
    display: inline-block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.brand-light { color: #fff; }

.eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    color: rgba(255,255,255,.62);
}

.eyebrow-dark { color: #73706b; }

/* LOGIN */
.auth-page {
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(circle at 85% 15%, rgba(24,185,130,.08), transparent 30%),
        var(--bg);
}

.auth-shell {
    width: min(1180px, 100%);
    min-height: calc(100vh - 48px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.auth-brand-panel {
    position: relative;
    min-height: 650px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        #050505;
    background-size: 44px 44px;
}

.auth-brand-panel::after {
    content: "";
    position: absolute;
    right: 48px;
    top: 52px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(24,185,130,.12);
}

.brand-copy {
    max-width: 560px;
    margin-top: 130px;
}

.brand-copy h1 {
    margin: 14px 0 18px;
    max-width: 530px;
    font-size: clamp(40px, 5vw, 64px);
    line-height: .98;
    letter-spacing: -3.5px;
}

.brand-copy p {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.68);
}

.brand-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.brand-metrics div {
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.18);
}

.brand-metrics span {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    color: var(--green);
    font-weight: 800;
}

.brand-metrics small { color: rgba(255,255,255,.66); }

.auth-form-panel {
    display: grid;
    place-items: center;
    padding: 48px;
}

.auth-form-wrap { width: min(430px, 100%); }

.mobile-brand { display: none; }

.auth-header { margin-bottom: 32px; }

.auth-header h2 {
    margin: 10px 0 10px;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.auth-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.auth-form { display: grid; gap: 18px; }

.field { display: grid; gap: 8px; }

.field > span {
    font-size: 13px;
    font-weight: 700;
}

.field input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    color: var(--ink);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.field input:focus {
    border-color: #99958e;
    box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}

.password-field { position: relative; }

.password-field input { padding-right: 88px; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-soft);
    color: #4c4a47;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn {
    height: 54px;
    border: 0;
    border-radius: 12px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 800;
}

.btn-primary {
    color: #fff;
    background: var(--black);
}

.btn-primary:hover { background: #222; }

.alert {
    margin-bottom: 18px;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.alert-error {
    color: #a82a2a;
    background: var(--red-soft);
    border: 1px solid #ffd1d1;
}

.alert-success {
    color: #087b55;
    background: var(--green-soft);
    border: 1px solid #bdebd9;
}

.auth-footnote {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--green);
}

/* APP SHELL / TEST DASHBOARD */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: #f5f5f4;
}

.sidebar-brand {
    padding: 0 8px 24px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px;
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 8px 18px;
    border-top: 1px solid #e6e3df;
}

.profile-mark,
.topbar-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 800;
}

.profile-mark {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: #fff;
}

.sidebar-profile strong {
    display: block;
    font-size: 13px;
}

.sidebar-profile small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.sidebar-primary-action {
    margin: 10px 0 14px;
    padding: 13px 14px;
    border-radius: 9px;
    color: #fff;
    background: #050505;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.sidebar-nav {
    display: grid;
    gap: 4px;
    overflow: auto;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #55524d;
    font-size: 13px;
}

.sidebar-nav a.active {
    color: #111;
    background: #e5e4e2;
    font-weight: 700;
}

.nav-dot {
    width: 7px;
    height: 7px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

.sidebar-logout {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.sidebar-logout button {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: #55524d;
}

.app-main { min-width: 0; }

.topbar {
    height: 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(10px);
}

.period-pill {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    background: #fff;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-placeholder {
    width: 270px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f1f0ee;
    color: #77736f;
    font-size: 12px;
}

.topbar-avatar {
    width: 32px;
    height: 32px;
    color: #fff;
    background: #111;
    font-size: 12px;
}

.page-content {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 34px 0 70px;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.page-heading h1 {
    margin: 8px 0 7px;
    font-size: 32px;
    letter-spacing: -1.5px;
}

.page-heading p {
    margin: 0;
    color: var(--muted);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card,
.content-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.kpi-card { padding: 18px; }

.kpi-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.kpi-card strong {
    display: block;
    margin: 12px 0 8px;
    font-size: 28px;
}

.kpi-card .role-value { font-size: 17px; }

.kpi-card small { color: #8b8884; }

.success-text { color: var(--green); }

.content-card {
    margin-top: 16px;
    padding: 22px;
}

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

.content-card h2 {
    margin: 8px 0;
    font-size: 21px;
}

.content-card p {
    color: var(--muted);
    line-height: 1.7;
}

.status-badge {
    padding: 7px 10px;
    border-radius: 999px;
    color: #0d8e65;
    background: var(--green-soft);
    font-size: 11px;
    font-weight: 800;
}

code {
    padding: 2px 5px;
    border-radius: 5px;
    background: #f1f0ee;
    color: #333;
}

@media (max-width: 900px) {
    .auth-page { padding: 0; }

    .auth-shell {
        min-height: 100vh;
        grid-template-columns: 1fr;
        border: 0;
        border-radius: 0;
    }

    .auth-brand-panel { display: none; }

    .auth-form-panel { padding: 28px 22px; }

    .mobile-brand {
        display: block;
        margin-bottom: 80px;
    }

    .app-shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    .auth-header h2 { font-size: 30px; }
    .mobile-brand { margin-bottom: 58px; }
    .topbar { padding: 0 16px; }
    .search-placeholder { display: none; }
    .page-content { width: calc(100% - 28px); padding-top: 24px; }
    .kpi-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PHASE 2 — MASTER DATA / RESPONSIVE APPLICATION SHELL
   ========================================================= */
.sidebar-topline,
.topbar-left,
.page-actions,
.table-toolbar,
.table-search,
.form-actions,
.row-actions,
.checkbox-line {
    display: flex;
    align-items: center;
}

.sidebar-topline { justify-content: space-between; }
.sidebar-brand { display: block; padding: 0 8px; }
.sidebar-close,
.mobile-menu-button {
    display: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ink);
}

.sidebar-nav-label {
    padding: 16px 12px 6px;
    color: #96918b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.nav-icon {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    color: #5c5955;
    font-size: 14px;
}

.sidebar-nav a.active .nav-icon { color: #111; }
.sidebar-backdrop { display: none; }
.topbar-left { gap: 10px; }

.page-heading-actions { align-items: flex-start; }
.page-actions { gap: 9px; flex-wrap: wrap; justify-content: flex-end; }

.btn-inline {
    width: auto;
    min-height: 42px;
    height: 42px;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    white-space: nowrap;
}

.btn-secondary {
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
}

.btn-secondary:hover { background: var(--surface-soft); }
.btn-link { color: #595651; font-size: 12px; text-decoration: underline; }

.table-card { padding: 0; overflow: hidden; }
.table-card .content-card-head { padding: 20px 22px 0; }
.table-toolbar {
    min-height: 64px;
    padding: 12px 16px;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}

.table-search { gap: 8px; min-width: 0; }
.table-search input {
    width: min(420px, 55vw);
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: #f7f6f4;
}
.table-search input:focus { border-color: #aaa59d; background: #fff; }
.table-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.table-responsive { width: 100%; overflow-x: auto; }

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 12px;
}
.data-table th,
.data-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #e8e5e1;
    text-align: left;
    vertical-align: middle;
}
.data-table th {
    color: #615e59;
    background: #f6f4f2;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfaf9; }
.compact-table { min-width: 580px; }
.actions-col { width: 130px; text-align: right !important; }
.row-actions { justify-content: flex-end; gap: 8px; }
.row-actions form { margin: 0; }
.icon-action {
    border: 0;
    background: transparent;
    color: #333;
    cursor: pointer;
    padding: 5px;
    font-size: 12px;
    font-weight: 700;
}
.icon-action.danger { color: #c43b3b; }
.empty-cell { padding: 36px !important; text-align: center !important; color: var(--muted); }
.muted { color: #a09c96; }

.status-good { color: #0d8e65; background: var(--green-soft); }
.status-bad { color: #b73939; background: var(--red-soft); }
.status-muted { color: #706d69; background: #efeeec; }

.form-card { max-width: 980px; }
.master-form { display: grid; gap: 22px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.field-wide { grid-column: 1 / -1; }
.field textarea,
.field select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: var(--ink);
    font: inherit;
}
.field textarea { padding: 13px 15px; resize: vertical; line-height: 1.55; }
.field select { height: 52px; padding: 0 13px; }
.field select:focus,
.field textarea:focus { border-color: #99958e; box-shadow: 0 0 0 4px rgba(17,17,17,.05); }
.checkbox-field { align-self: end; min-height: 52px; justify-content: center; }
.checkbox-line {
    min-height: 52px;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #faf9f8;
}
.checkbox-line input { width: 17px; height: 17px; accent-color: #111; }
.form-actions { justify-content: flex-end; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }

.two-column-layout,
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    gap: 16px;
    align-items: start;
    margin-top: 50px;
}
.two-column-layout > .content-card,
.dashboard-grid > .content-card { margin-top: 0; }

.upload-zone {
    min-height: 165px;
    padding: 24px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed #bdb8b0;
    border-radius: 14px;
    background: #faf9f8;
    cursor: pointer;
    text-align: center;
}
.upload-zone:hover { border-color: #77716a; background: #f7f5f2; }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone strong { font-size: 16px; }
.upload-zone span { color: var(--muted); font-size: 12px; }
.import-notes { padding-top: 8px; border-top: 1px solid var(--border); }
.import-notes h3 { margin: 8px 0 4px; font-size: 14px; }
.import-notes p { margin: 8px 0; font-size: 12px; }

.kpi-divider { display: inline !important; color: #aaa59f !important; font-weight: 400; }
.phase-card { padding-bottom: 14px; }
.phase-list { display: grid; gap: 0; margin-top: 12px; }
.phase-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid #ebe8e4;
}
.phase-item > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: #8e8a84;
    font-size: 10px;
    font-weight: 800;
}
.phase-item strong { display: block; font-size: 12px; }
.phase-item small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.4; }
.phase-item.done > span { color: #0d8e65; border-color: #94ddc2; background: var(--green-soft); }
.phase-item.active > span { color: #fff; border-color: #111; background: #111; }

.alert ul { margin: 8px 0 0 18px; padding: 0; }

@media (max-width: 1050px) {
    .two-column-layout,
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar {
        display: flex;
        position: fixed;
        z-index: 80;
        left: 0;
        top: 0;
        width: min(310px, 86vw);
        transform: translateX(-102%);
        transition: transform .22s ease;
        box-shadow: 18px 0 50px rgba(0,0,0,.13);
    }
    .sidebar-visible .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed;
        z-index: 70;
        inset: 0;
        background: rgba(0,0,0,.25);
    }
    .sidebar-visible .sidebar-backdrop { display: block; }
    .sidebar-close { display: inline-grid; place-items: center; width: 34px; height: 34px; font-size: 24px; }
    .mobile-menu-button { display: inline-grid; place-items: center; width: 34px; height: 34px; font-size: 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .field-wide { grid-column: auto; }
}

@media (max-width: 650px) {
    .page-heading-actions { flex-direction: column; }
    .page-actions { width: 100%; justify-content: stretch; }
    .page-actions .btn { flex: 1; }
    .table-toolbar { align-items: stretch; flex-direction: column; }
    .table-search { width: 100%; }
    .table-search input { width: 100%; min-width: 0; }
    .table-count { align-self: flex-end; }
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .btn { width: 100%; }
    .period-pill { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Phase 3 · Data Semester & Readiness */
.period-filter-bar {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 16px;
}
.period-filter-bar label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
}
.period-filter-bar select,
.academic-filter select {
    min-height: 40px;
    padding: 0 32px 0 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f7f6f4;
    color: var(--ink);
}
.period-filter-bar select { min-height: 32px; border: 0; background: transparent; font-weight: 700; }
.academic-filter { display: flex; flex-wrap: wrap; align-items: center; }
.academic-filter select { max-width: 220px; }
.warning-text { color: #b36c00 !important; }
.status-warning { color: #a76000; background: #fff3d8; }
.quick-links { display: grid; gap: 9px; margin-top: 14px; }
.quick-links a {
    display: block;
    padding: 13px 14px;
    border: 1px solid #ebe8e4;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: .15s ease;
}
.quick-links a:hover { border-color: #bbb5ad; transform: translateY(-1px); }
.quick-links strong, .quick-links span { display: block; }
.quick-links strong { font-size: 12px; }
.quick-links span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.lecturer-picker { display: grid; gap: 8px; }
.lecturer-option {
    display: grid;
    grid-template-columns: 20px minmax(0,1fr) 22px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}
.lecturer-option:hover { background: #faf9f8; }
.lecturer-option input { width: 17px; height: 17px; accent-color: #111; }
.lecturer-option strong, .lecturer-option small { display: block; }
.lecturer-option small { margin-top: 3px; color: var(--muted); }
.readiness-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.readiness-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
}
.readiness-card.ready { border-bottom: 3px solid #22b887; }
.readiness-card.warning { border-bottom: 3px solid #e3a52a; }
.readiness-card.not_ready { border-bottom: 3px solid #e35d5d; }
.readiness-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.readiness-card-head strong, .readiness-card-head span { display: block; }
.readiness-card-head strong { font-size: 14px; }
.readiness-card-head > div > span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.readiness-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 16px 0; }
.readiness-metrics span { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f8f7f5; color: var(--muted); font-size: 10px; }
.readiness-metrics b { color: var(--ink); font-size: 18px; }
.issue-list { display: grid; gap: 5px; border-top: 1px solid #ece9e5; padding-top: 10px; }
.issue-item { display: grid; grid-template-columns: 9px 1fr; gap: 9px; padding: 7px 4px; color: inherit; text-decoration: none; }
.issue-item:hover { background: #faf9f8; border-radius: 8px; }
.issue-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #999; }
.issue-dot.critical { background: #e24d4d; }
.issue-dot.warning { background: #e1a128; }
.issue-item strong, .issue-item small { display: block; }
.issue-item strong { font-size: 10px; letter-spacing: .04em; }
.issue-item small { margin-top: 2px; color: var(--muted); line-height: 1.45; }
.readiness-empty { padding: 14px; border-radius: 10px; background: var(--green-soft); color: #0d7e5b; font-size: 11px; }
.inline-form { margin: 0; }

@media (max-width: 900px) {
    .readiness-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .period-filter-bar { justify-content: stretch; }
    .period-filter-bar label { width: 100%; justify-content: space-between; }
    .academic-filter select { width: 100%; max-width: none; }
    .readiness-metrics { grid-template-columns: repeat(2,1fr); }
}

/* Phase 4 · Constraint, Prediction, Student Conflict */
.phase4-filter { gap: 8px; flex-wrap: wrap; }
.phase4-filter label { min-width: 220px; }
.phase4-grid { margin-bottom: 16px; }
.card-note { color: var(--muted); font-size: 11px; line-height: 1.55; }
.stack-form { display: grid; gap: 10px; }
.weight-row { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #ece9e5; }
.weight-row:first-of-type { border-top: 0; }
.weight-row strong,.weight-row small { display:block; }
.weight-row strong { font-size: 12px; }
.weight-row small { margin-top:3px; color:var(--muted); font-size:10px; }
.weight-row input,.travel-table input,.override-form input { min-height: 38px; border:1px solid var(--border); border-radius:9px; background:#faf9f8; padding:0 10px; }
.rule-list { display:grid; gap:0; }
.rule-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 0; border-top:1px solid #ece9e5; }
.rule-row:first-child { border-top:0; }
.rule-row strong,.rule-row small { display:block; }
.rule-row strong { font-size:12px; }
.rule-row small { margin-top:3px; color:var(--muted); font-size:10px; }
.status-muted { color:#706d68; background:#efedeb; }
.travel-table th,.travel-table td { text-align:center; }
.travel-table td input { width:95px; text-align:center; }
.content-card-foot { display:flex; justify-content:flex-end; padding:14px 0 0; }
.kpi-code { font-size:15px !important; letter-spacing:-.3px !important; word-break:break-word; }
.prediction-table td { vertical-align:top; }
.basis-detail summary { cursor:pointer; font-size:11px; font-weight:700; }
.basis-detail small { display:block; min-width:150px; margin-top:7px; color:var(--muted); line-height:1.6; }
.override-form { min-width:190px; display:grid; grid-template-columns:72px minmax(110px,1fr); gap:5px; }
.override-form .table-action { grid-column:1/-1; justify-self:end; }
.heatmap-wrap { overflow:auto; padding-bottom:4px; }
.conflict-heatmap { border-collapse:separate; border-spacing:4px; min-width:520px; width:100%; }
.conflict-heatmap th { max-width:74px; padding:5px; color:var(--muted); font-size:9px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conflict-heatmap td { min-width:46px; height:40px; border-radius:7px; text-align:center; font-size:10px; font-weight:800; background:#f3f1ef; }
.conflict-heatmap .heat-1 { background:#edf9f5; color:#147658; }
.conflict-heatmap .heat-2 { background:#d4f1e6; color:#0d7354; }
.conflict-heatmap .heat-3 { background:#ffe9bd; color:#9a6200; }
.conflict-heatmap .heat-4 { background:#ffd4a5; color:#9b4f00; }
.conflict-heatmap .heat-5 { background:#ffd0d0; color:#a82929; }
.prediction-run-form { white-space:nowrap; }
@media (max-width:650px){
  .phase4-filter label{width:100%;min-width:0}.weight-row{grid-template-columns:1fr 90px}.rule-row{align-items:flex-start;flex-direction:column}.override-form{min-width:230px}.travel-table td input{width:78px}
}

/* Phase 5 · Genetic Algorithm Optimization Engine */
.status-error, .status-failed, .status-cancelled { color:#b73939; background:var(--red-soft); }
.status-review, .status-locked { color:#0d8e65; background:var(--green-soft); }
.status-running, .status-queued { color:#9a6200; background:#fff3d8; }
.btn:disabled { opacity:.42; cursor:not-allowed; }
.btn-danger { color:#fff; background:#ef4444; }
.btn-danger:hover { background:#d93636; }
.table-wrap { width:100%; overflow:auto; }
.data-table td strong,.data-table td small { display:block; }
.data-table td small { margin-top:3px; color:var(--muted); }
.optional { color:#9b9791; font-weight:400; }
.field-group { display:grid; gap:7px; }
.field-group label { font-size:12px; font-weight:800; }
.field-group input,.field-group select,.ga-profile-form input {
    width:100%; min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--ink); outline:none;
}
.field-group input:focus,.field-group select:focus,.ga-profile-form input:focus { border-color:#a5a099; box-shadow:0 0 0 3px rgba(17,17,17,.04); }
.field-group small { color:var(--muted); font-size:10px; line-height:1.5; }
.phase5-kpis { margin-bottom:16px; }
.phase5-grid { align-items:start; }
.ga-run-form { margin-top:18px; }
.preflight-box { padding:14px 15px; border-radius:12px; border:1px solid var(--border); }
.preflight-box strong,.preflight-box span { display:block; }
.preflight-box strong { font-size:12px; }
.preflight-box span { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.5; }
.preflight-ready { border-color:#b9e8d6; background:#f4fcf9; }
.preflight-blocked { border-color:#ffd1d1; background:#fff7f7; }
.empty-state { padding:22px; border:1px dashed var(--border); border-radius:12px; background:#faf9f8; }
.empty-state strong { display:block; }
.empty-state p { margin-bottom:0; }
.metric-list { margin:0; }
.metric-list div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid #ece9e5; }
.metric-list div:first-child { border-top:0; }
.metric-list dt { color:var(--muted); font-size:11px; }
.metric-list dd { margin:0; font-size:14px; font-weight:800; }
.ga-profile-form { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:12px; align-items:end; }
.ga-profile-form label { display:grid; gap:6px; color:var(--muted); font-size:10px; font-weight:700; }
.ga-profile-form .profile-default { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--ink); }
.ga-profile-form .profile-default input { width:16px; min-height:16px; }
.ga-profile-form .btn { height:44px; justify-content:center; }
.optimization-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:16px; align-items:start; }
.optimization-main-card,.metric-panel,.console-panel { border:1px solid var(--border); border-radius:14px; background:#fff; }
.optimization-main-card { min-height:510px; padding:38px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.run-status-line { width:100%; display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; color:var(--muted); font-size:11px; }
.progress-ring {
    --progress:0;
    width:176px; height:176px; display:grid; place-items:center; border-radius:50%;
    background:conic-gradient(#111 calc(var(--progress) * 1%), #eceae7 0);
    position:relative; margin:4px 0 24px;
}
.progress-ring::before { content:""; position:absolute; inset:12px; border-radius:50%; background:#fff; }
.progress-ring > div { position:relative; z-index:1; display:grid; gap:3px; }
.progress-ring strong { font-size:42px; letter-spacing:-2px; }
.progress-ring span { color:var(--muted); font-size:10px; }
.optimization-main-card h2 { margin:0 0 10px; font-size:22px; }
.optimization-description { max-width:590px; margin:0 auto 24px; color:var(--muted); line-height:1.6; font-size:12px; }
.result-metrics { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.result-metrics article { padding:16px; border:1px solid var(--border); border-radius:12px; background:#faf9f8; }
.result-metrics span,.result-metrics strong { display:block; }
.result-metrics span { color:var(--muted); font-size:10px; }
.result-metrics strong { margin-top:8px; font-size:23px; }
.run-cancel-form { margin-top:18px; }
.run-cancel-form .btn { min-width:180px; height:44px; justify-content:center; }
.optimization-side { display:grid; gap:14px; }
.metric-panel { padding:20px; }
.metric-panel .eyebrow { color:#77736e; }
.metric-panel dl { margin:10px 0 0; }
.metric-panel dl div { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid #ece9e5; }
.metric-panel dt { color:var(--muted); font-size:11px; }
.metric-panel dd { margin:0; font-weight:800; }
.console-panel { overflow:hidden; color:#eee; background:#2f2f2f; border-color:#444; }
.console-head { padding:16px 18px 10px; color:#ddd; font-size:10px; letter-spacing:.08em; }
.console-lines { max-height:340px; overflow:auto; padding:6px 18px 18px; display:grid; gap:11px; }
.console-lines div { display:flex; justify-content:space-between; gap:12px; font-size:10px; line-height:1.45; }
.console-lines span { color:#e1e1e1; }
.console-lines b { color:#31c995; font-size:9px; white-space:nowrap; }
@media (max-width:1050px){ .ga-profile-form{grid-template-columns:repeat(3,1fr)} .optimization-layout{grid-template-columns:1fr} .optimization-side{grid-template-columns:1fr 1fr} }
@media (max-width:650px){ .ga-profile-form{grid-template-columns:1fr} .optimization-main-card{padding:24px 16px;min-height:460px}.result-metrics{grid-template-columns:1fr}.optimization-side{grid-template-columns:1fr}.progress-ring{width:150px;height:150px}.progress-ring strong{font-size:36px} }

/* Phase 6 · Wizard Penjadwalan & Review Jadwal */
.wizard-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 16px}.wizard-step{display:flex;gap:10px;align-items:center;min-width:0;padding:12px 13px;border:1px solid var(--border);border-radius:13px;background:#fff}.wizard-step>span{width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border-radius:50%;background:#eeeae6;color:#716c66;font-size:11px;font-weight:900}.wizard-step strong,.wizard-step small{display:block}.wizard-step strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wizard-step small{margin-top:2px;color:var(--muted);font-size:9px}.wizard-step.active{border-color:#242424;box-shadow:0 5px 20px rgba(0,0,0,.05)}.wizard-step.active>span{background:#111;color:#fff}.wizard-step.done>span{background:#22b887;color:#fff}.phase6-wizard-grid{grid-template-columns:minmax(0,1fr) 280px;align-items:start}.wizard-main-card{padding:0}.wizard-main-card>.content-card-head,.wizard-section{padding:20px}.wizard-section{border-top:1px solid #ece9e5}.wizard-side-card{position:sticky;top:86px}.wizard-scope-form,.wizard-run-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 20px}.wizard-scope-form label,.wizard-run-form label,.adjust-form label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800}.wizard-scope-form select,.wizard-run-form select,.wizard-run-form input,.adjust-form select,.adjust-form textarea,.finalization-form input,.review-filter-bar select{width:100%;min-height:42px;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink)}.adjust-form textarea{padding:10px;resize:vertical}.wizard-check-grid,.wizard-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.wizard-check-grid article,.wizard-result-grid article,.constraint-review-cards article{padding:14px;border:1px solid var(--border);border-radius:11px;background:#faf9f8}.wizard-check-grid span,.wizard-result-grid span,.constraint-review-cards span{display:block;color:var(--muted);font-size:9px}.wizard-check-grid strong,.wizard-result-grid strong,.constraint-review-cards strong{display:block;margin-top:7px;font-size:22px}.wizard-check-grid small,.constraint-review-cards small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.45}.wizard-blocker{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:11px 12px;border-radius:10px;background:#fff4f4;border:1px solid #ffd4d4;font-size:10px}.wizard-blocker span{color:var(--muted)}.wizard-blocker a{margin-left:auto;color:#b52e2e;font-weight:800}.constraint-review-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.wizard-run-form{padding:0;grid-template-columns:1fr 1fr;align-items:end}.wizard-run-form .engine-readiness,.wizard-run-form .btn{grid-column:1/-1}.engine-readiness{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px}.engine-readiness strong,.engine-readiness small{display:block}.engine-readiness small{margin-top:3px;color:var(--muted);font-size:9px}.engine-dot{width:9px;height:9px;border-radius:50%;background:#e04f4f}.engine-readiness.online .engine-dot{background:#22b887}.wizard-run-progress{display:flex;align-items:center;gap:20px;padding:8px 0}.progress-ring.compact{width:112px;height:112px;margin:0;flex:0 0 112px}.progress-ring.compact::before{inset:9px}.progress-ring.compact strong{font-size:27px}.wizard-run-progress p{margin:7px 0;color:var(--muted);font-size:11px}.wizard-run-progress small{color:var(--muted);font-size:9px}.wizard-final-actions{display:flex;gap:8px;margin-top:12px}.wizard-gate-list{display:grid;gap:9px;margin:15px 0}.wizard-gate-list>div{display:grid;grid-template-columns:25px 1fr;gap:9px;align-items:center;padding:9px;border-radius:9px;background:#faf9f8}.wizard-gate-list b{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#e7e4e0}.wizard-gate-list span{font-size:10px}.wizard-gate-list .pass b{background:#dff6ed;color:#0b805b}.wizard-gate-list .fail b{background:#ffe0e0;color:#b33232}.wizard-gate-list .pending b{background:#f4ead2;color:#9a6500}
.review-summary-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px;padding:12px 14px;border:1px solid var(--border);border-radius:13px;background:#fff}.review-summary-bar>div{display:grid;gap:2px}.review-summary-bar small{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.05em}.review-summary-bar b{font-size:13px}.candidate-pill{margin-left:auto;padding:7px 10px;border-radius:999px;background:#fff3d8;color:#8a5b00;font-size:9px;font-weight:900}.text-success{color:#0b8b64}.text-danger{color:#bf3434}.review-filter-bar{position:sticky;top:64px;z-index:12;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}.review-filter-bar label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px;font-weight:800}.review-filter-bar select{min-height:34px;width:auto;max-width:260px}.schedule-week-grid{display:grid;grid-template-columns:84px repeat(6,minmax(150px,1fr));min-width:1000px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:16px}.schedule-time-head,.schedule-day-head{padding:11px;border-right:1px solid #ece9e5;border-bottom:1px solid #ece9e5;background:#f7f6f4;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.schedule-day-head{text-align:center}.schedule-time-cell{min-height:90px;padding:10px;border-right:1px solid #ece9e5;border-bottom:1px solid #ece9e5;background:#faf9f8}.schedule-time-cell strong,.schedule-time-cell small{display:block}.schedule-time-cell strong{font-size:11px}.schedule-time-cell small{margin-top:2px;color:var(--muted);font-size:8px}.schedule-slot-cell{min-height:90px;padding:6px;border-right:1px solid #f0eeeb;border-bottom:1px solid #f0eeeb;background:#fff}.schedule-class-card{display:block;width:100%;margin-bottom:5px;padding:9px 9px 8px;border:1px solid #dcd8d3;border-radius:9px;background:#f8f7f5;text-align:left;color:var(--ink);cursor:pointer;transition:.12s}.schedule-class-card:hover{transform:translateY(-1px);box-shadow:0 5px 13px rgba(0,0,0,.06)}.schedule-class-card strong,.schedule-class-card span,.schedule-class-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.schedule-class-card strong{font-size:9px}.schedule-class-card span{margin-top:3px;color:#5f5b56;font-size:8px}.schedule-class-card small{margin-top:3px;color:var(--muted);font-size:8px}.schedule-class-card i{display:inline-block;margin-top:6px;padding:3px 5px;border-radius:999px;background:#fff1cb;color:#8a5a00;font-size:7px;font-style:normal;font-weight:900}.schedule-class-card.has-hard{border-color:#f0a9a9;background:#fff7f7}.schedule-class-card.has-hard i{background:#ffe0e0;color:#ad2e2e}.schedule-class-card.manual{border-left:3px solid #111}.compact-table td{vertical-align:top}.schedule-chip-list{display:flex;gap:6px;flex-wrap:wrap}.schedule-chip{padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:#faf9f8;color:var(--ink);font-size:9px;cursor:pointer}.schedule-chip b{margin-right:5px}.phase6-bottom-grid{grid-template-columns:1fr 1fr;align-items:start}.issue-scroll{max-height:330px;overflow:auto}.review-issue{display:grid;grid-template-columns:50px 1fr;gap:10px;padding:10px 0;border-top:1px solid #ece9e5}.review-issue:first-child{border-top:0}.review-issue>span{align-self:start;padding:4px 5px;border-radius:6px;background:#f1efec;font-size:8px;font-weight:900;text-align:center}.review-issue.hard>span{background:#ffe0e0;color:#ad2e2e}.review-issue.soft>span{background:#fff0ce;color:#9a6200}.review-issue strong,.review-issue small{display:block}.review-issue strong{font-size:10px}.review-issue small{margin-top:3px;color:var(--muted);font-size:9px}.change-history-item{padding:10px 0;border-top:1px solid #ece9e5}.change-history-item:first-child{border-top:0}.change-history-item strong,.change-history-item span,.change-history-item small{display:block}.change-history-item strong{font-size:10px}.change-history-item span{margin-top:4px;font-size:9px}.change-history-item small{margin-top:4px;color:var(--muted);font-size:8px;line-height:1.4}.finalization-card{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:16px}.finalization-card h2{margin-bottom:5px}.finalization-card p{margin:0;color:var(--muted);font-size:10px}.finalization-form{display:flex;gap:8px;min-width:45%}.finalization-form input{flex:1}.schedule-drawer{position:fixed;z-index:80;top:0;right:0;width:min(440px,94vw);height:100vh;transform:translateX(105%);transition:.2s ease;background:#fff;box-shadow:-18px 0 40px rgba(0,0,0,.12);display:flex;flex-direction:column}.schedule-drawer.open{transform:translateX(0)}.drawer-backdrop{display:none;position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.28)}.drawer-backdrop.open{display:block}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px;border-bottom:1px solid var(--border)}.drawer-head h2{margin:3px 0 0}.drawer-head button{width:34px;height:34px;border:0;border-radius:50%;background:#f2f0ed;font-size:22px;cursor:pointer}.drawer-body{padding:18px 20px;overflow:auto}.drawer-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}.drawer-summary>div{padding:10px;border-radius:9px;background:#f8f7f5}.drawer-summary span,.drawer-summary b{display:block}.drawer-summary span{color:var(--muted);font-size:8px}.drawer-summary b{margin-top:4px;font-size:10px}.drawer-issues{display:grid;gap:6px;margin:12px 0}.drawer-issue{display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px;background:#faf0d9}.drawer-issue.hard{background:#fff0f0}.drawer-issue b{font-size:8px}.drawer-issue span{font-size:9px}.drawer-clean{padding:10px;border-radius:8px;background:#edf9f5;color:#0b7d5a;font-size:9px}.adjust-form{display:grid;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.adjust-form h3{margin:0 0 2px}.impact-result{display:grid;gap:6px;padding:10px;border:1px dashed var(--border);border-radius:9px;background:#faf9f8;font-size:9px}.impact-result.safe{border-style:solid;border-color:#b8e5d5;background:#f1fbf7}.impact-result.blocked{border-style:solid;border-color:#ffc6c6;background:#fff5f5}.impact-result strong,.impact-result small{display:block}.impact-result small{color:var(--muted)}.impact-issue{display:grid;grid-template-columns:40px 1fr;gap:7px;padding-top:5px;border-top:1px solid rgba(0,0,0,.06)}.impact-issue b{font-size:8px}.impact-issue span{font-size:8px;line-height:1.4}.compare-kpis{display:grid;grid-template-columns:1fr 1fr 180px;gap:10px;margin-bottom:14px}.compare-kpis article{padding:15px;border:1px solid var(--border);border-radius:12px;background:#fff}.compare-kpis span,.compare-kpis strong,.compare-kpis small{display:block}.compare-kpis span{color:var(--muted);font-size:8px}.compare-kpis strong{margin-top:6px;font-size:13px}.compare-kpis small{margin-top:5px;color:var(--muted);font-size:9px}
@media(max-width:1100px){.wizard-steps{grid-template-columns:repeat(3,1fr)}.phase6-wizard-grid{grid-template-columns:1fr}.wizard-side-card{position:static}.phase6-bottom-grid{grid-template-columns:1fr}.schedule-week-grid{overflow:auto}.finalization-card{align-items:stretch;flex-direction:column}.finalization-form{min-width:0}}
@media(max-width:700px){.wizard-steps{grid-template-columns:1fr 1fr}.wizard-scope-form,.wizard-run-form{grid-template-columns:1fr}.wizard-check-grid,.wizard-result-grid{grid-template-columns:1fr 1fr}.constraint-review-cards{grid-template-columns:1fr}.review-summary-bar{gap:10px}.candidate-pill{margin-left:0}.review-filter-bar{position:static;display:grid}.review-filter-bar label{justify-content:space-between}.review-filter-bar select{width:60%;max-width:none}.finalization-form{flex-direction:column}.drawer-summary{grid-template-columns:1fr}.compare-kpis{grid-template-columns:1fr}.wizard-final-actions{flex-direction:column}}
.compare-run-bar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:-2px 0 12px;color:var(--muted);font-size:9px}.compare-run-bar select{min-height:32px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
@media(max-width:700px){.compare-run-bar{justify-content:stretch;flex-wrap:wrap}.compare-run-bar select{flex:1}}
/* Phase 7: Re-Optimization, Export, Reports & Security */
.phase7-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:16px;align-items:start;margin-bottom:16px}.phase7-grid>.card{margin:0}.phase7-reopt-form{display:grid;gap:14px;margin-top:14px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.form-grid .span-2{grid-column:1/-1}.muted-note{color:var(--muted);font-size:9px;line-height:1.5}.reopt-candidate-table{max-height:360px;overflow:auto}.reopt-candidate-table tr.row-danger{background:#fff6f6}.reopt-candidate-table input[type=checkbox]{width:16px;height:16px}.status-badge.danger{background:#ffe0e0;color:#a92f2f}.safety-list{display:grid;gap:9px}.safety-list>div{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px;border-radius:10px;background:#faf9f8}.safety-list b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e9e6e2}.safety-list strong,.safety-list span{display:block}.safety-list strong{font-size:10px;margin-bottom:3px}.safety-list span{font-size:9px;color:var(--muted);line-height:1.4}.inline-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.inline-filter select{width:auto;min-width:170px}.phase7-mapping{margin-top:16px}.phase7-mapping .card-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.phase7-mapping .card-head p{max-width:560px;color:var(--muted);font-size:9px;line-height:1.5}.phase7-mapping input,.phase7-mapping select{min-width:120px}.export-action{display:flex;justify-content:flex-end;margin-top:12px}.empty-state{padding:18px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:10px;text-align:center}.phase7-kpis{grid-template-columns:repeat(5,1fr)}.phase7-kpis article{min-height:90px}.login-form small{color:var(--muted);font-size:9px;line-height:1.45}.topbar-avatar{text-decoration:none}.card code{font-size:8px;word-break:break-all}.table-wrap td small{display:block;margin-top:3px;color:var(--muted);font-size:8px}
@media(max-width:1100px){.phase7-grid{grid-template-columns:1fr}.phase7-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.inline-filter{display:grid}.inline-filter select{width:100%}.phase7-kpis{grid-template-columns:1fr 1fr}.phase7-mapping .card-head{display:block}.phase7-mapping .card-head p{max-width:none}}


/* =========================================================
   STAGE 16 — UI / CSS HARDENING
   Document tabs, academic preview, shared form controls,
   sidebar scroll, and missing shared layout primitives.
   ========================================================= */

button,
input,
select,
textarea {
    font: inherit;
}

.app-page {
    min-width: 0;
}

/* Sidebar: the navigation is the scrollable region, while profile/logout stay put. */
.sidebar {
    overflow: hidden;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #8d8984 transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 7px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #9a9690;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: #74706a; }
.sidebar-nav-label:first-child { padding-top: 8px; }
.sidebar-nav a { min-width: 0; }
.sidebar-nav a span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shared primitives that several Phase 6/13/14 views already use. */
.content-grid {
    display: grid;
    gap: 16px;
}

.toolbar-row,
.sync-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-row { margin-top: 14px; }
.toolbar-row form,
.sync-action-group form { margin: 0; }

.academic-kpis {
    margin: 0 0 16px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.status-ready { color: #0d8e65; background: var(--green-soft); }
.status-warning { color: #9a6200; background: #fff3d8; }
.status-error { color: #b73939; background: var(--red-soft); }

/* Forms: Stage 13 views use direct labels inside .master-form instead of .field. */
.master-form.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.master-form.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.master-form > label,
.master-form > div > label {
    display: grid;
    gap: 7px;
    color: #4e4b47;
    font-size: 12px;
    font-weight: 750;
}

.master-form input[type="text"],
.master-form input[type="number"],
.master-form input[type="time"],
.master-form input[type="date"],
.master-form input[type="email"],
.master-form input[type="search"],
.master-form select,
.master-form textarea,
.inline-form input[type="text"],
.inline-form input[type="number"],
.inline-form select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.master-form textarea { min-height: 112px; padding: 11px 12px; resize: vertical; }
.master-form input:focus,
.master-form select:focus,
.master-form textarea:focus,
.inline-form input:focus,
.inline-form select:focus {
    border-color: #98938c;
    box-shadow: 0 0 0 4px rgba(17,17,17,.05);
}

.master-form input:disabled,
.master-form select:disabled,
.master-form textarea:disabled {
    color: #77736e;
    background: #f3f1ef;
    cursor: not-allowed;
}

.master-form label:has(> input[type="checkbox"]),
.master-form > div > label:has(> input[type="checkbox"]) {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #faf9f8;
    color: var(--ink);
}

.master-form input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-height: 0;
    padding: 0;
    accent-color: #111;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inline-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.inline-form select { width: auto; min-width: 280px; }

/* Document-style tabs: connected visually to the active content document. */
.document-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin: 18px 0 0;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
    scrollbar-width: thin;
}

.document-tab {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -1px;
    border: 1px solid var(--border);
    border-bottom-color: var(--border);
    border-radius: 11px 11px 0 0;
    background: #eceae7;
    color: #5d5954;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.document-tab:hover {
    background: #f6f4f2;
    color: #111;
}

.document-tab.active,
.document-tab[aria-current="page"] {
    z-index: 3;
    border-color: var(--border);
    border-bottom-color: #fff;
    background: #fff;
    color: #111;
    box-shadow: 0 -4px 12px rgba(17,17,17,.035);
}

.document-tab.active::before,
.document-tab[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12px;
    right: 12px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #111;
}

.document-tab-panel {
    margin-top: 0;
    border-top-left-radius: 0;
    box-shadow: 0 10px 28px rgba(17,17,17,.035);
}

.optimization-tabs + form > .document-tab-panel,
form > .document-tab-panel:first-of-type {
    margin-top: 0;
}

.optimization-save-actions { margin-top: 16px; }
.optimization-clone-card { margin-top: 16px; }
.optimization-default-form { margin-top: 16px; }

/* Shared action / table helpers missing from earlier phases. */
.table-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.table-action {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #33302d;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.table-action:hover { background: #f4f2ef; }

.btn-compact {
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 10px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}
.filter-grid > label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}
.filter-grid select,
.filter-grid input[type="text"],
.filter-grid input[type="number"] {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}

.scope-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.scope-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #faf9f8;
    cursor: pointer;
}
.scope-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: #111; }
.scope-check span { min-width: 0; }
.scope-check b,
.scope-check small { display: block; }
.scope-check small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }

/* Academic preview / assignment pages. */
.academic-kpis .kpi-card { min-height: 105px; }
.academic-kpis .kpi-card strong { word-break: break-word; }
.master-form + .table-responsive { margin-top: 12px; }
.mt-16 { margin-top: 16px !important; }

/* Keep semantic Phase 5 helpers stable even when no dedicated selector existed. */
.ga-profile-summary { min-width: 0; }
.compact-metrics div { padding: 10px 0; }
.phase5-profile-editor { margin-top: 16px; }

@media (max-width: 900px) {
    .master-form.three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scope-check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .master-form.two-columns,
    .master-form.three-columns,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .inline-form,
    .inline-form label {
        align-items: stretch;
        flex-direction: column;
    }

    .inline-form select { width: 100%; min-width: 0; }
    .document-tabs { padding-left: 0; padding-right: 0; }
    .document-tab { min-height: 42px; padding: 0 13px; font-size: 11px; }
    .document-tab-panel { border-top-left-radius: 14px; }
    .sync-action-group { align-items: stretch; }
    .sync-action-group .btn { width: 100%; }
}

/* =========================================================
   STAGE 17 · UI PASS 2 — OPTIMIZATION + ACADEMIC ASSIGNMENT
   ========================================================= */

/* Page-heading actions should stay in one row on desktop. */
.page-heading-actions > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}
.page-heading-actions > .page-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

/* Catch text inputs without an explicit type attribute. */
.master-form input:not([type]),
.inline-form input:not([type]) {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: var(--ink);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.master-form input:not([type]):focus,
.inline-form input:not([type]):focus {
    border-color: #98938c;
    box-shadow: 0 0 0 4px rgba(17,17,17,.05);
}

/* File inputs are first-class controls too. */
.master-form input[type="file"] {
    width: 100%;
    min-height: 44px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font: inherit;
}
.master-form input[type="file"]::file-selector-button {
    min-height: 30px;
    margin-right: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: #111;
    color: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

/* Shared section divider instead of browser-default HR. */
.section-divider,
.content-card > hr {
    height: 0;
    margin: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* Optimization config: keep the document-tab shell and content spacing consistent. */
.optimization-tabs {
    position: relative;
    z-index: 2;
}
.optimization-config-form .document-tab-panel:not(.table-card),
.optimization-form-panel {
    padding: 24px;
}
.optimization-config-form .document-tab-panel > .content-card-head + .master-form {
    margin-top: 14px;
}
.optimization-config-form .document-tab-panel > .content-card-head + .table-responsive,
.optimization-config-form .master-form + .table-responsive {
    margin-top: 14px;
}
.optimization-save-actions,
.optimization-preset-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.optimization-preset-actions {
    margin-top: 0;
    border-top: 0;
}
.optimization-clone-card {
    margin-top: 16px;
}
.optimization-clone-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.optimization-clone-actions {
    align-self: end;
    justify-content: flex-end;
    min-width: 160px;
    padding-top: 0;
    border-top: 0;
}
.optimization-clone-actions .btn {
    width: 100%;
}
.optimization-default-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Academic lecturer-assignment pages. */
.lecturer-assignment-page {
    min-width: 0;
}
.lecturer-page-actions {
    align-items: stretch;
}
.lecturer-page-actions .btn {
    justify-content: center;
}
.assignment-filter-bar {
    gap: 10px;
    flex-wrap: wrap;
}
.lecturer-assignment-form {
    margin-top: 14px;
    align-items: start;
}
.assignment-options {
    display: grid;
    gap: 8px;
    align-content: start;
}
.form-group-label {
    display: block;
    margin-bottom: 1px;
    color: #4e4b47;
    font-size: 12px;
    font-weight: 750;
}
.assignment-options > label {
    min-height: 44px;
}
.assignment-form-actions,
.assignment-import-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.assignment-form-actions .btn,
.assignment-import-actions .btn {
    width: auto;
    min-width: 190px;
}
.assignment-import-form {
    margin-top: 14px;
    align-items: end;
}

/* Keep generic form-actions from looking like a column-local divider. */
.master-form.three-columns > .form-actions:not(.optimization-clone-actions),
.master-form.two-columns > .form-actions {
    grid-column: 1 / -1;
}

@media (max-width: 980px) {
    .page-heading-actions > .page-actions {
        flex-wrap: wrap;
    }
    .optimization-clone-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .optimization-clone-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .optimization-clone-actions .btn {
        width: auto;
        min-width: 180px;
    }
}

@media (max-width: 700px) {
    .page-heading-actions > .page-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .optimization-clone-form {
        grid-template-columns: 1fr;
    }
    .optimization-clone-actions,
    .assignment-form-actions,
    .assignment-import-actions {
        grid-column: auto;
        align-items: stretch;
        flex-direction: column;
    }
    .optimization-clone-actions .btn,
    .assignment-form-actions .btn,
    .assignment-import-actions .btn,
    .optimization-default-form .btn {
        width: 100%;
        min-width: 0;
    }
    .optimization-default-form {
        display: block;
    }
}

/* STAGE 17 · DASHBOARD CONSOLIDATED */
/* ============================================================
   Design tokens (falls back gracefully if layout already defines
   --muted / --border / --brand etc. via layouts/app)
   ============================================================ */
.role-dashboard {
    --rd-radius: 16px;
    --rd-radius-sm: 12px;
    --rd-gap: 20px;
    --rd-gap-sm: 12px;
    --rd-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .10);
    --rd-shadow-hover: 0 2px 6px rgba(20, 20, 20, .06), 0 14px 32px -14px rgba(20, 20, 20, .16);
    --rd-good-bg: #ecfaf3; --rd-good-fg: #099a68; --rd-good-border: #b6ecd3;
    --rd-warn-bg: #fff7e6; --rd-warn-fg: #b26c00; --rd-warn-border: #ffe3ad;
    --rd-bad-bg: #fdedec;  --rd-bad-fg: #c43b3b;  --rd-bad-border: #f8c9c6;
    --rd-neutral-bg: #f4f4f2; --rd-neutral-fg: #59564f; --rd-neutral-border: var(--border, #e6e4df);

    width: 100%;
    color: #232220;
}

/* ---------------- Heading ---------------- */
.role-dashboard .dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border, #e6e4df);
}
.role-dashboard .dashboard-heading h1 {
    margin: 6px 0 8px;
    font-size: 24px;
    letter-spacing: -.02em;
}
.role-dashboard .dashboard-heading p {
    max-width: 820px;
    margin: 0;
    color: var(--muted, #8a877e);
    line-height: 1.6;
    font-size: 13px;
}
.role-dashboard .dashboard-action { flex: 0 0 auto; }
.role-dashboard .btn-inline {
    box-shadow: var(--rd-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.role-dashboard .btn-inline:hover {
    transform: translateY(-1px);
    box-shadow: var(--rd-shadow-hover);
}

.role-dashboard .role-context {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.role-dashboard .context-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border, #e6e4df);
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    color: #57544d;
}

/* ---------------- KPI cards ---------------- */
.role-dashboard .dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rd-gap-sm);
    margin-bottom: var(--rd-gap);
}
.role-dashboard .dash-kpi {
    position: relative;
    padding: 20px 20px 20px 22px;
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--rd-radius-sm);
    background: #fff;
    border: 1px solid var(--border, #e6e4df);
    box-shadow: var(--rd-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
    overflow: hidden;
}
.role-dashboard .dash-kpi::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--rd-neutral-fg);
}
.role-dashboard .dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--rd-shadow-hover);
}
.role-dashboard .dash-kpi > span {
    color: var(--muted, #8a877e);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.role-dashboard .dash-kpi > strong {
    display: block;
    margin: 10px 0 4px;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.03em;
}
.role-dashboard .dash-kpi > small {
    color: var(--muted, #8a877e);
    font-size: 11px;
    line-height: 1.45;
}
.role-dashboard .dash-kpi.tone-good::before { background: var(--rd-good-fg); }
.role-dashboard .dash-kpi.tone-good strong { color: var(--rd-good-fg); }
.role-dashboard .dash-kpi.tone-warn::before { background: var(--rd-warn-fg); }
.role-dashboard .dash-kpi.tone-warn strong { color: var(--rd-warn-fg); }
.role-dashboard .dash-kpi.tone-bad::before { background: var(--rd-bad-fg); }
.role-dashboard .dash-kpi.tone-bad strong { color: var(--rd-bad-fg); }

/* ---------------- Generic content cards ---------------- */
.role-dashboard .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .75fr);
    gap: var(--rd-gap);
    align-items: start;
    margin-bottom: var(--rd-gap);
}
.role-dashboard .dashboard-stack { display: grid; gap: var(--rd-gap); }

.role-dashboard .content-card {
    margin-top: 0;
    background: #fff;
    border: 1px solid var(--border, #e6e4df);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    overflow: hidden;
}
.role-dashboard .content-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border, #e6e4df);
}
.role-dashboard .content-card-head h2 {
    margin: 4px 0 0;
    font-size: 15px;
    letter-spacing: -.01em;
}
.role-dashboard .content-card-head p {
    max-width: 620px;
    margin: 6px 0 0;
    color: var(--muted, #8a877e);
    font-size: 11px;
    line-height: 1.5;
}
.role-dashboard .eyebrow-dark {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--muted, #8a877e);
}

/* ---------------- Readiness list ---------------- */
.role-dashboard .readiness-list { display: grid; gap: 4px; padding: 8px 12px 16px; }
.role-dashboard .readiness-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, .65fr);
    gap: 12px;
    align-items: center;
    padding: 14px 8px;
    border-radius: 10px;
    transition: background .12s ease;
}
.role-dashboard .readiness-row:hover { background: #faf9f7; }
.role-dashboard .readiness-row + .readiness-row { border-top: 1px solid var(--border, #efeee9); }
.role-dashboard .readiness-row strong,
.role-dashboard .readiness-row small { display: block; }
.role-dashboard .readiness-row small { margin-top: 3px; color: var(--muted, #8a877e); font-size: 10px; }
.role-dashboard .readiness-numbers { text-align: right; font-size: 11px; line-height: 1.55; }

/* ---------------- Issue / activity lists ---------------- */
.role-dashboard .issue-list,
.role-dashboard .activity-list { display: grid; padding: 4px 0 8px; }
.role-dashboard .issue-item,
.role-dashboard .activity-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 13px 20px;
    transition: background .12s ease;
}
.role-dashboard .issue-item:hover,
.role-dashboard .activity-item:hover { background: #faf9f7; }
.role-dashboard .issue-item + .issue-item,
.role-dashboard .activity-item + .activity-item { border-top: 1px solid var(--border, #efeee9); }
.role-dashboard .issue-item strong,
.role-dashboard .activity-item strong { display: block; font-size: 12px; }
.role-dashboard .issue-item small,
.role-dashboard .activity-item small { display: block; margin-top: 3px; color: var(--muted, #8a877e); font-size: 10px; line-height: 1.5; }
.role-dashboard .issue-dot {
    width: 9px; height: 9px; margin-top: 5px; border-radius: 50%;
    background: var(--rd-bad-fg);
    box-shadow: 0 0 0 3px var(--rd-bad-bg);
}
.role-dashboard .issue-dot.warning {
    background: var(--rd-warn-fg);
    box-shadow: 0 0 0 3px var(--rd-warn-bg);
}

/* ---------------- Mini stat grid ---------------- */
.role-dashboard .mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 20px 20px;
}
.role-dashboard .mini-stat {
    padding: 16px;
    border: 1px solid var(--border, #e6e4df);
    border-radius: var(--rd-radius-sm);
    background: #faf9f7;
    transition: border-color .12s ease, background .12s ease;
}
.role-dashboard .mini-stat:hover {
    background: #fff;
    border-color: #d8d5cd;
}
.role-dashboard .mini-stat span,
.role-dashboard .mini-stat strong,
.role-dashboard .mini-stat small { display: block; }
.role-dashboard .mini-stat span {
    color: var(--muted, #8a877e);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.role-dashboard .mini-stat strong { margin: 6px 0 3px; font-size: 21px; letter-spacing: -.02em; }
.role-dashboard .mini-stat small { color: var(--muted, #8a877e); font-size: 10px; }

/* ---------------- Tables ---------------- */
.role-dashboard .table-responsive { padding: 4px 0 4px; }
.role-dashboard .dash-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.role-dashboard .dash-table thead th {
    padding: 10px 20px;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #8a877e);
    text-align: left;
    background: #faf9f7;
    border-bottom: 1px solid var(--border, #e6e4df);
}
.role-dashboard .dash-table tbody td { padding: 14px 20px; font-size: 12px; }
.role-dashboard .dash-table tbody tr { border-top: 1px solid var(--border, #efeee9); transition: background .12s ease; }
.role-dashboard .dash-table tbody tr:hover { background: #faf9f7; }
.role-dashboard .dash-table td strong,
.role-dashboard .dash-table td small { display: block; }
.role-dashboard .dash-table td small { margin-top: 3px; color: var(--muted, #8a877e); font-size: 10px; }
.role-dashboard .schedule-table { min-width: 980px; }
.role-dashboard .empty-cell { text-align: center; color: var(--muted, #8a877e); padding: 28px 20px !important; }

/* ---------------- Run summary ---------------- */
.role-dashboard .run-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 20px 20px;
}
.role-dashboard .run-summary .mini-stat { min-height: 88px; }

/* ---------------- Empty state ---------------- */
.role-dashboard .empty-dashboard {
    padding: 40px 20px;
    color: var(--muted, #8a877e);
    text-align: center;
    font-size: 12px;
}
.role-dashboard .empty-dashboard::before {
    content: "—";
    display: block;
    font-size: 20px;
    margin-bottom: 6px;
    opacity: .5;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1180px) {
    .role-dashboard .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-dashboard .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .role-dashboard .dashboard-heading { display: block; }
    .role-dashboard .dashboard-action { margin-top: 16px; }
    .role-dashboard .dashboard-kpis { grid-template-columns: 1fr; }
    .role-dashboard .readiness-row { grid-template-columns: 1fr; }
    .role-dashboard .readiness-numbers { text-align: left; }
    .role-dashboard .mini-grid,
    .role-dashboard .run-summary { grid-template-columns: 1fr; }
    .role-dashboard .content-card-head { flex-direction: column; }
}

/* STAGE 17 · CONSTRAINTS CONSOLIDATED */
.constraints-page .status-badge { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1; }
.constraints-page .constraint-table { min-width:900px; table-layout:auto; }
.constraints-page .constraint-table th:nth-child(1), .constraints-page .constraint-table td:nth-child(1){width:72px;}
.constraints-page .constraint-table th:nth-child(3), .constraints-page .constraint-table td:nth-child(3){width:100px; white-space:nowrap;}
.constraints-page .constraint-table th:nth-child(4), .constraints-page .constraint-table td:nth-child(4){width:125px; white-space:nowrap;}
.constraints-page .constraint-table th:nth-child(5), .constraints-page .constraint-table td:nth-child(5){width:105px; white-space:nowrap;}
.constraints-page .constraint-table th:nth-child(6), .constraints-page .constraint-table td:nth-child(6){width:128px; white-space:nowrap;}
.constraints-page .constraint-name strong { display:block; }
.constraints-page .constraint-name span { display:block; margin-top:5px; max-width:520px; line-height:1.45; }
.constraints-page .toggle-form { margin:0; }
.constraints-page .btn-compact { min-height:34px; height:34px; padding:0 12px; border-radius:9px; font-size:10px; white-space:nowrap; }
.constraints-page .toggle-off { color:#a63232; border-color:#efcaca; background:#fffafa; }
.constraints-page .toggle-off:hover { background:#fff1f1; }
.constraints-page .phase4-filter { justify-content:flex-end; margin-bottom:16px; }
.constraints-page .phase4-filter label { min-width:260px; }
.constraints-page .phase4-filter select { min-width:0; max-width:100%; }
.constraints-page .content-card { min-width:0; }
.constraints-page .weight-row input { width:100%; }
.constraints-page .rule-row .status-badge { flex:0 0 auto; }
.constraints-page .domain-status { max-width:260px; white-space:normal; line-height:1.3; text-align:left; }
@media(max-width:760px){
    .constraints-page .phase4-filter{justify-content:stretch;}
    .constraints-page .phase4-filter label{min-width:0; width:100%;}
}

/* STAGE 17 · REOPTIMIZATION CONSOLIDATED */
.reopt-page .content-card { margin-top:0; }
.reopt-page .reopt-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr); gap:16px; align-items:start; margin-bottom:16px; }
.reopt-page .engine-readiness { min-width:230px; background:#fff; }
.reopt-page .base-filter { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(260px,1.2fr) auto; gap:10px; align-items:end; margin:14px 0 0; }
.reopt-page .base-filter label,
.reopt-page .phase7-reopt-form label { display:grid; gap:6px; color:var(--muted); font-size:10px; font-weight:800; }
.reopt-page select,
.reopt-page input[type="number"],
.reopt-page input[type="text"] { width:100%; min-height:42px; padding:0 11px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.reopt-page select:focus,
.reopt-page input:focus { outline:none; border-color:#aaa59d; box-shadow:0 0 0 4px rgba(17,17,17,.04); }
.reopt-page .phase7-reopt-form { padding-top:16px; border-top:1px solid var(--border); }
.reopt-page .reopt-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.reopt-page .reopt-form-grid .span-2 { grid-column:1/-1; }
.reopt-page .candidate-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:4px; }
.reopt-page .candidate-head h3 { margin:0; font-size:14px; }
.reopt-page .candidate-head small { color:var(--muted); font-size:9px; }
.reopt-page .candidate-table { min-width:760px; }
.reopt-page .candidate-table input[type="checkbox"] { width:17px; height:17px; accent-color:#111; }
.reopt-page .candidate-table tr.row-danger { background:#fff7f7; }
.reopt-page .candidate-table td strong,
.reopt-page .candidate-table td small { display:block; }
.reopt-page .candidate-table td small { margin-top:3px; color:var(--muted); font-size:9px; }
.reopt-page .status-badge { display:inline-flex; align-items:center; white-space:nowrap; }
.reopt-page .safety-list > div { border:1px solid #eeeae6; }
.reopt-page .safety-list span { color:inherit; }
.reopt-page .safety-list strong { display:block; }
.reopt-page .safety-list small { display:block; margin-top:3px; color:var(--muted); font-size:9px; line-height:1.45; }
.reopt-page .history-card { margin-top:0; padding:0; overflow:hidden; }
.reopt-page .history-card .content-card-head { padding:20px 22px 0; }
.reopt-page .history-table { min-width:900px; }
.reopt-page .btn-compact { min-height:34px; height:34px; padding:0 12px; font-size:10px; border-radius:9px; }
.reopt-page .readonly-notice { margin:14px 0 0; }
@media(max-width:1050px){ .reopt-page .reopt-grid{grid-template-columns:1fr;} }
@media(max-width:760px){
    .reopt-page .base-filter,
    .reopt-page .reopt-form-grid{grid-template-columns:1fr;}
    .reopt-page .reopt-form-grid .span-2{grid-column:auto;}
    .reopt-page .page-heading{display:block;}
    .reopt-page .engine-readiness{margin-top:14px; min-width:0;}
}

/* STAGE 17 · EXPORT SIAKAD CONSOLIDATED */
.export-page .content-card {
    margin-top: 0;
}

/*
 * Layout sekarang vertikal:
 * 1. Preview Export (full width)
 * 2. Mapping Kolom (full width, jika user memiliki izin)
 * 3. Riwayat Export (full width)
 */
.export-page .preview-card,
.export-page .mapping-card,
.export-page .history-card {
    width: 100%;
}

.export-page .mapping-card,
.export-page .history-card {
    margin-top: 16px;
}

.export-page .export-toolbar {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}

.export-page .export-toolbar label {
    display: grid;
    gap: 6px;
    min-width: 190px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.export-page select,
.export-page input[type="text"] {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.export-page input[readonly] {
    background: #f7f6f4;
    color: #69655e;
}

.export-page .preview-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.export-page .status-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.export-page .checksum {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/*
 * Preview menggunakan seluruh lebar card.
 * Jika 10 kolom masih lebih lebar daripada viewport,
 * scroll horizontal hanya terjadi di tabel, bukan seluruh halaman.
 */
.export-page .preview-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.export-page .preview-table {
    width: 100%;
    min-width: 1450px;
}

.export-page .preview-table th,
.export-page .preview-table td {
    vertical-align: top;
}

.export-page .history-table {
    width: 100%;
    min-width: 900px;
}

.export-page .mapping-card {
    padding: 0;
    overflow: hidden;
}

.export-page .mapping-card .content-card-head {
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--border);
}

.export-page .mapping-note {
    max-width: 580px;
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}

.export-page .mapping-table {
    width: 100%;
    min-width: 900px;
}

.export-page .mapping-table input[type="text"],
.export-page .mapping-table select {
    min-height: 38px;
    border-radius: 8px;
}

.export-page .mapping-table input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #111;
}

.export-page .mapping-actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--border);
}

.export-page .export-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.export-page .btn-compact {
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    font-size: 10px;
    border-radius: 9px;
}

.export-page .official-info {
    margin: 0 0 14px;
    padding: 11px 12px;
    border: 1px solid #dedbd6;
    border-radius: 10px;
    background: #faf9f7;
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .export-page .export-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .export-page .export-toolbar label {
        min-width: 0;
    }

    .export-page .mapping-card .content-card-head {
        display: block;
    }

    .export-page .mapping-note {
        text-align: left;
        margin-top: 8px;
        max-width: none;
    }

    .export-page .preview-table {
        min-width: 1250px;
    }

    .export-page .history-table {
        min-width: 760px;
    }
}

/* STAGE 17 · OPTIMIZATION EXPORT CONSOLIDATED */
.optimization-export-page .content-card { margin-top: 0; }
.optimization-export-page .export-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); gap:16px; align-items:start; }
.optimization-export-page .export-toolbar { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:14px 0 18px; }
.optimization-export-page .export-toolbar label { display:grid; gap:6px; min-width:190px; color:var(--muted); font-size:10px; font-weight:800; }
.optimization-export-page select,
.optimization-export-page input[type="text"] { width:100%; min-height:42px; padding:0 11px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.optimization-export-page select:focus,
.optimization-export-page input[type="text"]:focus { outline:none; border-color:#aaa59d; box-shadow:0 0 0 4px rgba(17,17,17,.04); }
.optimization-export-page .preview-meta { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.optimization-export-page .status-badge { display:inline-flex; align-items:center; white-space:nowrap; }
.optimization-export-page .checksum { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; }
.optimization-export-page .history-table { min-width:680px; }
.optimization-export-page .mapping-card { margin-top:16px; padding:0; overflow:hidden; }
.optimization-export-page .mapping-card .content-card-head { padding:20px 22px 14px; border-bottom:1px solid var(--border); }
.optimization-export-page .mapping-note { max-width:540px; margin:0; font-size:10px; line-height:1.5; text-align:right; }
.optimization-export-page .mapping-table { min-width:760px; }
.optimization-export-page .mapping-table input[type="text"],
.optimization-export-page .mapping-table select { min-height:38px; border-radius:8px; }
.optimization-export-page .mapping-table input[type="checkbox"] { width:17px; height:17px; accent-color:#111; }
.optimization-export-page .mapping-actions { display:flex; justify-content:flex-end; padding:16px 22px 20px; border-top:1px solid var(--border); }
.optimization-export-page .export-action { display:flex; justify-content:flex-end; margin-top:14px; }
.optimization-export-page .btn-compact { min-height:34px; height:34px; padding:0 12px; font-size:10px; border-radius:9px; }
@media(max-width:1050px){ .optimization-export-page .export-grid{grid-template-columns:1fr;} }
@media(max-width:700px){
    .optimization-export-page .export-toolbar{display:grid; grid-template-columns:1fr; align-items:stretch;}
    .optimization-export-page .export-toolbar label{min-width:0;}
    .optimization-export-page .mapping-card .content-card-head{display:block;}
    .optimization-export-page .mapping-note{text-align:left; margin-top:8px; max-width:none;}
}

/* STAGE 17 · STATIC INLINE STYLE CLEANUP */
.export-filter-strip { padding: 0 22px 18px; }
.map-col-general-header { width: 38%; }
.map-col-general-source { width: 30%; }
.map-col-general-static { width: 22%; }
.map-col-general-required { width: 10%; }
.map-col-opt-header { width: 24%; }
.map-col-opt-source { width: 34%; }
.map-col-opt-static { width: 28%; }
.map-col-opt-required { width: 14%; }
.filter-span-all { grid-column: 1 / -1; }
.mt-12 { margin-top: 12px !important; }
.padded-card-foot { padding: 14px 22px 20px; }
.select-col { width: 44px; }


/* ==========================================================================
   Stage 25: Data Induk live background sync monitor
   ========================================================================== */

.sync-runtime-card {
    overflow: hidden;
}

.sync-runtime-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sync-monitor-state {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #73706b);
}

.sync-monitor-state.is-error {
    color: #b42318;
}

.sync-runtime-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.sync-runtime-job {
    border: 1px solid #dcd8d2;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}

.sync-runtime-job.is-stalled {
    border-color: #f0b429;
    background: #fffaf0;
}

.sync-runtime-job-head,
.sync-runtime-entity-head,
.sync-runtime-failure-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sync-runtime-job-head > div,
.sync-runtime-failure-head > div {
    display: grid;
    gap: 4px;
}

.sync-runtime-job-code {
    color: var(--muted, #73706b);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.sync-runtime-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 12px 0 14px;
    color: var(--muted, #73706b);
    font-size: 12px;
}

.sync-runtime-meta b {
    color: #201f1d;
}

.sync-runtime-entity {
    border-top: 1px solid #ece9e4;
    padding-top: 14px;
    margin-top: 12px;
}

.sync-runtime-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.sync-runtime-metrics.compact {
    margin-top: 10px;
}

.sync-runtime-metrics > div {
    min-width: 0;
    border: 1px solid #ebe7e1;
    border-radius: 10px;
    padding: 9px 10px;
    background: #faf9f7;
    display: grid;
    gap: 3px;
}

.sync-runtime-metrics span {
    color: var(--muted, #73706b);
    font-size: 11px;
}

.sync-runtime-metrics strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.sync-runtime-error,
.sync-runtime-stalled-note {
    margin-top: 12px;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.sync-runtime-error {
    background: #fff1f0;
    border: 1px solid #f3b7b2;
    color: #8f1d14;
}

.sync-runtime-stalled-note {
    background: #fff4d6;
    border: 1px solid #f0c36a;
    color: #6f4b00;
}

.sync-runtime-empty,
.sync-runtime-waiting {
    border: 1px dashed #d8d3cc;
    border-radius: 12px;
    padding: 18px;
    display: grid;
    gap: 5px;
    color: var(--muted, #73706b);
    background: #faf9f7;
}

.sync-runtime-empty strong {
    color: #201f1d;
}

.sync-runtime-empty.is-error {
    border-color: #f3b7b2;
    background: #fff7f6;
}

.sync-runtime-failures {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e5e1da;
}

.sync-runtime-subhead {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
}

.sync-runtime-subhead > span {
    color: var(--muted, #73706b);
    font-size: 12px;
}

.sync-runtime-failure-item {
    border: 1px solid #e7e2db;
    border-radius: 12px;
    padding: 13px;
    margin-top: 10px;
    background: #fff;
}

.sync-runtime-failure-head span:not(.status-badge) {
    color: var(--muted, #73706b);
    font-size: 11px;
}

.status-running {
    background: #e7f4ff !important;
    color: #0067a3 !important;
    border-color: #add8f3 !important;
}

.status-stalled {
    background: #fff0c7 !important;
    color: #7a4e00 !important;
    border-color: #efc667 !important;
}

@media (max-width: 1100px) {
    .sync-runtime-metrics {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }
}

@media (max-width: 680px) {
    .sync-runtime-head-actions,
    .sync-runtime-job-head,
    .sync-runtime-entity-head,
    .sync-runtime-failure-head {
        align-items: stretch;
        flex-direction: column;
    }

    .sync-runtime-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sync-runtime-meta {
        display: grid;
        gap: 6px;
    }
}


/* =========================================================
   STAGE 38 · UI/UX HARDENING
   Master forms, room editor, list pages, mobile behavior
   ========================================================= */

:root {
    --ui-sage: #7c927f;
    --ui-sage-deep: #526b58;
    --ui-sage-soft: #edf2ed;
    --ui-cool: #69727d;
    --ui-cool-soft: #f2f4f5;
    --ui-line: #e3e5e2;
    --ui-focus: rgba(82,107,88,.14);
}

.page-content {
    width: min(1320px, calc(100% - 48px));
}

.ui-page-heading {
    margin-bottom: 20px;
    align-items: center;
}

.ui-page-heading h1 {
    margin-bottom: 8px;
}

.ui-page-heading p {
    max-width: 760px;
    line-height: 1.55;
}

.master-form-v2 {
    display: block;
    max-width: 1180px;
    margin: 0;
}

.form-section-stack {
    display: grid;
    gap: 16px;
}

.form-section-card {
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    border-color: var(--ui-line);
    box-shadow: 0 8px 30px rgba(17,17,17,.035);
}

.form-section-head {
    padding: 20px 22px 17px;
    border-bottom: 1px solid var(--ui-line);
    background:
        linear-gradient(180deg, #fff 0%, #fcfcfb 100%);
}

.form-section-head h2 {
    margin: 4px 0 5px;
    font-size: 18px;
    letter-spacing: -.35px;
}

.form-section-head p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid #dfe7e0;
    border-radius: 999px;
    background: var(--ui-sage-soft);
    color: var(--ui-sage-deep);
    font-size: 9px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .09em;
}

.form-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    padding: 22px;
}

.form-grid-v2 .form-field {
    min-width: 0;
    align-content: start;
}

.field-span-2 {
    grid-column: 1 / -1;
}

.form-label {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-height: 18px;
    color: #4f5650;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
}

.required-mark {
    color: #9c4f4f;
    font-style: normal;
}

.form-grid-v2 input:not([type="checkbox"]),
.form-grid-v2 select,
.form-grid-v2 textarea {
    width: 100%;
    border: 1px solid #d9ddd8;
    border-radius: 11px;
    background: #fff;
    color: #171a18;
    box-shadow: inset 0 1px 0 rgba(17,17,17,.01);
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.form-grid-v2 input:not([type="checkbox"]),
.form-grid-v2 select {
    height: 46px;
    min-height: 46px;
    padding: 0 13px;
}

.form-grid-v2 textarea {
    min-height: 92px;
    padding: 12px 13px;
    line-height: 1.55;
}

.form-grid-v2 input:hover,
.form-grid-v2 select:hover,
.form-grid-v2 textarea:hover {
    border-color: #c8cec8;
}

.form-grid-v2 input:focus,
.form-grid-v2 select:focus,
.form-grid-v2 textarea:focus {
    border-color: var(--ui-sage);
    box-shadow: 0 0 0 4px var(--ui-focus);
}

.field-help {
    display: block;
    margin-top: -1px;
    color: #8a918b;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.45;
}

.setting-toggle {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid #dde1dc;
    border-radius: 12px;
    background: #fafbfa;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.setting-toggle:hover {
    border-color: #cad2ca;
    background: #f7f9f7;
}

.setting-toggle:focus-within {
    border-color: var(--ui-sage);
    box-shadow: 0 0 0 4px var(--ui-focus);
}

.setting-toggle > input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.setting-toggle-control {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    border-radius: 999px;
    background: #d4d8d4;
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.05);
    transition: background .16s ease;
}

.setting-toggle-control::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(17,17,17,.2);
    transition: transform .16s ease;
}

.setting-toggle > input:checked + .setting-toggle-control {
    background: var(--ui-sage-deep);
}

.setting-toggle > input:checked + .setting-toggle-control::after {
    transform: translateX(16px);
}

.setting-toggle-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.setting-toggle-copy strong {
    color: #303531;
    font-size: 11px;
    line-height: 1.3;
}

.setting-toggle-copy small {
    color: #8a918b;
    font-size: 10px;
    line-height: 1.4;
}

.form-actions-sticky {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    min-height: 72px;
    margin-top: 18px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #dfe3df;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 40px rgba(17,17,17,.12);
    backdrop-filter: blur(12px);
}

.form-actions-note {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.form-actions-note strong {
    font-size: 11px;
}

.form-actions-note span {
    color: var(--muted);
    font-size: 10px;
}

.form-actions-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}

.form-actions-sticky .btn {
    min-width: 118px;
}

.generic-master-card {
    max-width: 1040px;
}

/* List pages */
.data-list-card {
    border-color: var(--ui-line);
    box-shadow: 0 8px 30px rgba(17,17,17,.025);
}

.table-toolbar-v2 {
    min-height: 68px;
    background: #fff;
}

.table-search-v2 {
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.table-search-v2 input[type="search"],
.table-search-v2 input[type="text"],
.table-search-v2 select {
    min-height: 42px;
    height: 42px;
    border: 1px solid #dde1dc;
    border-radius: 10px;
    background: #f9faf9;
}

.table-search-v2 select {
    width: auto;
    min-width: 170px;
    padding: 0 34px 0 11px;
}

.data-list-card .data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f4f6f4;
    color: #606861;
}

.data-list-card .data-table tbody tr {
    transition: background .12s ease;
}

.data-list-card .data-table tbody tr:hover {
    background: #f8faf8;
}

.data-list-card .data-table td {
    line-height: 1.45;
}

/* Buttons: clearer primary/secondary hierarchy */
.btn-primary {
    background: #202522;
}

.btn-primary:hover {
    background: var(--ui-sage-deep);
}

.btn-secondary {
    background: #fff;
    border-color: #d9ddd9;
}

.btn-secondary:hover {
    border-color: #c9cfc9;
    background: #f8f9f8;
}

/* KPI/readability */
.academic-kpis .kpi-card {
    min-width: 0;
}

.academic-kpis .kpi-card strong {
    overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 980px) {
    .page-content {
        width: calc(100% - 32px);
    }

    .form-grid-v2 {
        gap: 16px;
        padding: 18px;
    }

    .form-section-head {
        padding: 18px;
    }

    .table-toolbar-v2 {
        align-items: flex-start;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .page-content {
        width: calc(100% - 24px);
        padding-top: 20px;
        padding-bottom: 100px;
    }

    .ui-page-heading {
        display: grid;
        gap: 14px;
        align-items: start;
    }

    .ui-page-heading .page-actions {
        width: 100%;
        justify-content: stretch;
    }

    .ui-page-heading .page-actions .btn,
    .ui-page-heading > .btn {
        width: 100%;
    }

    .form-grid-v2 {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 15px;
    }

    .field-span-2 {
        grid-column: auto;
    }

    .form-section-head {
        padding: 16px;
    }

    .form-section-head h2 {
        font-size: 17px;
    }

    .setting-toggle {
        min-height: 68px;
    }

    .form-actions-sticky {
        bottom: 8px;
        display: grid;
        gap: 10px;
        padding: 10px;
    }

    .form-actions-note {
        padding: 2px 4px;
    }

    .form-actions-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .form-actions-buttons .btn {
        width: 100%;
        min-width: 0;
    }

    .table-toolbar-v2 {
        display: grid;
        gap: 10px;
    }

    .table-search-v2 {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .table-search-v2 input[type="search"],
    .table-search-v2 input[type="text"],
    .table-search-v2 select,
    .table-search-v2 .btn {
        width: 100%;
        min-width: 0;
    }

    .table-count {
        justify-self: start;
    }

    .data-table th,
    .data-table td {
        padding: 11px 12px;
    }
}

@media (max-width: 420px) {
    .form-actions-buttons {
        grid-template-columns: 1fr;
    }

    .form-label,
    .setting-toggle-copy strong {
        font-size: 11px;
    }
}


/* =========================================================
   STAGE 40 · LECTURER PROFILE + INTEGRATED POSITIONS
   ========================================================= */
.lecturer-profile-summary{display:grid;gap:16px;margin-bottom:16px}
.lecturer-identity-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 22px}
.lecturer-avatar{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:var(--ui-sage-soft);color:var(--ui-sage-deep);font-size:25px;font-weight:900;border:1px solid #dce5dd}
.lecturer-identity-copy{min-width:0}
.lecturer-identity-copy h2{margin:6px 0 3px;font-size:21px}
.lecturer-identity-copy>p{margin:0;color:var(--muted)}
.lecturer-meta-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.lecturer-meta-pills span{display:inline-flex;min-height:27px;align-items:center;padding:0 9px;border:1px solid #e0e4e0;border-radius:999px;background:#f9faf9;color:#59615b;font-size:10px;font-weight:700}
.lecturer-status-block{min-width:115px;text-align:right}
.lecturer-status-block strong{display:block;margin-top:9px;font-size:26px;line-height:1}
.lecturer-status-block small{color:var(--muted);font-size:10px}
.lecturer-base-form-card{margin-bottom:16px}
.lecturer-base-form{margin:0}
.lecturer-inline-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:2px}
.lecturer-position-manager{margin-top:0;overflow:hidden}
.lecturer-position-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lecturer-position-add{display:grid;grid-template-columns:minmax(220px,1.45fr) minmax(160px,.8fr) minmax(160px,.8fr) auto;gap:12px;align-items:end;padding:18px 20px;border-bottom:1px solid var(--ui-line);background:#fbfcfb}
.lecturer-position-add input,.lecturer-position-add select,.lecturer-position-edit-grid input,.lecturer-position-edit-grid select{width:100%;min-height:42px;border:1px solid #d9ddd8;border-radius:10px;background:#fff}
.lecturer-position-add-action{padding-bottom:1px}
.lecturer-position-list{display:grid}
.lecturer-position-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;padding:17px 20px;border-bottom:1px solid #eceeec}
.lecturer-position-row:last-child{border-bottom:0}
.lecturer-position-row:hover{background:#fbfcfb}
.lecturer-position-title>div{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.lecturer-position-title>div>strong{font-size:13px}
.lecturer-position-title small{display:block;margin-top:6px;color:var(--muted);line-height:1.45}
.lecturer-position-edit{width:min(660px,52vw)}
.lecturer-position-edit>summary{display:inline-flex;cursor:pointer;list-style:none;min-height:35px;align-items:center;justify-content:center;padding:0 13px;border:1px solid #dce0dc;border-radius:9px;background:#fff;font-size:10px;font-weight:800}
.lecturer-position-edit>summary::-webkit-details-marker{display:none}
.lecturer-position-edit[open]{grid-column:1/-1;width:100%;margin-top:8px}
.lecturer-position-edit[open]>summary{margin-left:auto}
.lecturer-position-edit-grid{display:grid;grid-template-columns:minmax(180px,1.25fr) repeat(2,minmax(145px,.8fr)) minmax(160px,.9fr);gap:12px;align-items:end;margin-top:12px;padding:15px;border:1px solid #e1e5e1;border-radius:12px;background:#f9faf9}
.lecturer-position-edit-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.lecturer-position-delete-form{display:flex;justify-content:flex-end;margin-top:8px}
.empty-state-soft{display:grid;justify-items:start;gap:4px;padding:26px 20px;color:var(--muted)}
.empty-state-soft strong{color:#394039}
.lecturer-related-card{margin-top:16px;padding:20px 22px}
.lecturer-related-card h2{margin:6px 0 14px}
.lecturer-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lecturer-related-grid>div{display:grid;gap:4px;padding:12px 13px;border:1px solid #e2e5e2;border-radius:10px;background:#fafbfa}
.lecturer-related-grid span{color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.lecturer-related-grid strong{font-size:12px}

@media(max-width:1000px){
 .lecturer-position-add{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lecturer-position-add-action{grid-column:1/-1}
 .lecturer-position-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lecturer-position-edit{width:min(520px,48vw)}
}
@media(max-width:700px){
 .lecturer-identity-card{grid-template-columns:52px minmax(0,1fr);padding:16px}
 .lecturer-avatar{width:52px;height:52px;border-radius:14px;font-size:21px}
 .lecturer-status-block{grid-column:1/-1;display:flex;align-items:center;gap:10px;text-align:left;padding-top:4px}
 .lecturer-status-block strong{margin:0 0 0 auto;font-size:20px}
 .lecturer-meta-pills{gap:5px}
 .lecturer-position-head{align-items:flex-start}
 .lecturer-position-add{grid-template-columns:1fr;padding:16px}
 .lecturer-position-add-action{grid-column:auto}
 .lecturer-position-add-action .btn{width:100%}
 .lecturer-position-row{grid-template-columns:1fr;padding:15px 16px}
 .lecturer-position-edit{width:100%}
 .lecturer-position-edit>summary{width:100%}
 .lecturer-position-edit-grid{grid-template-columns:1fr}
 .lecturer-position-edit-actions{grid-column:auto}
 .lecturer-position-edit-actions .btn,.lecturer-position-delete-form .btn{width:100%}
 .lecturer-related-grid{grid-template-columns:1fr}
 .lecturer-inline-actions{display:grid;grid-template-columns:1fr}
 .lecturer-inline-actions .btn{width:100%}
}

/* =========================================================
   STUDENT DIRECTORY / FINALIZATION DETAIL
   ========================================================= */
.student-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.student-directory-card {
    overflow: hidden;
}

.student-filter-toolbar,
.student-finalization-toolbar {
    gap: 12px;
}

.student-directory-filter,
.student-finalization-filter {
    gap: 8px;
}

.student-directory-filter input[type="search"] {
    min-width: 260px;
    flex: 1 1 280px;
}

.student-finalization-filter input[type="search"] {
    min-width: 260px;
    flex: 1 1 320px;
}

.student-directory-filter select,
.student-finalization-filter select {
    max-width: 210px;
}

.student-data-notice {
    margin: 0 22px 16px;
    padding: 11px 13px;
    border: 1px solid #eadfbd;
    border-radius: 10px;
    background: #fffaf0;
    color: #806426;
    font-size: 11px;
    line-height: 1.5;
}

.student-primary-cell strong,
.student-primary-cell span {
    display: block;
}

.student-primary-cell span {
    margin-top: 3px;
    min-width: 180px;
}

.student-period-meta {
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.student-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px 4px;
    color: var(--muted);
    font-size: 10px;
}

.student-pagination-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-detail-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.student-profile-card {
    overflow: hidden;
}

.student-profile-grid,
.student-period-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.student-profile-grid > div,
.student-period-summary > div {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #e5e8e5;
    border-radius: 11px;
    background: #fafbfa;
}

.student-profile-grid span,
.student-period-summary span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.student-profile-grid strong,
.student-period-summary strong {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.student-period-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 0 16px;
}

.student-period-summary strong {
    font-size: 18px;
}

@media (max-width: 1100px) {
    .student-summary-grid,
    .student-detail-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-period-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .student-summary-grid,
    .student-detail-kpis,
    .student-profile-grid,
    .student-period-summary {
        grid-template-columns: 1fr;
    }

    .student-directory-filter input[type="search"],
    .student-finalization-filter input[type="search"],
    .student-directory-filter select,
    .student-finalization-filter select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .student-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .student-pagination-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .student-pagination-actions .btn {
        width: 100%;
    }
}