/* ============================================================
   MPS & Item Analysis System — Stylesheet
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
    /* Brand palette — Jacobo Z. Gonzales Memorial NHS */
    --maroon:       #6E1423;
    --maroon-dark:  #4A0E18;
    --gold:         #C79A3A;
    --gold-light:   #E6C767;
    --black:        #1A1A1A;
    --white:        #FFFFFF;
    --gray-bg:      #F5F3EF;
    --gold-tint:        rgba(199,154,58,.10);
    --gold-tint-strong: rgba(199,154,58,.20);
    --maroon-tint:      rgba(110,20,35,.06);

    /* UI chrome — mapped to brand palette */
    --c-primary:    var(--maroon);
    --c-primary-d:  var(--maroon-dark);
    --c-accent:     var(--gold);
    --c-success:    #2d6a4f;
    --c-warning:    #e07b00;
    --c-danger:     #c0392b;
    --c-bg:         var(--gray-bg);
    --c-surface:    var(--white);
    --c-border:     #e3ddd0;
    --c-text:       var(--black);
    --c-muted:      #6b6459;
    --c-green:      #2d9148;
    --c-yellow:     #c98700;
    --c-red:        #c0392b;
    --radius:       10px;
    --shadow:       0 2px 10px rgba(26,26,26,.08);
    --nav-h:        60px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.5;
}
a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--gold); text-decoration: underline; }
ul { padding-left: 1.2em; }

/* ---- Topnav ---- */
.topnav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem;
    height: var(--nav-h);
    background: linear-gradient(90deg, var(--maroon) 0%, var(--maroon-dark) 100%);
    color: #fff;
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.topnav-brand { display: flex; align-items: center; gap: .75rem; }
.topnav-title { font-weight: 600; font-size: 1rem; color: #fff; }
.topnav-user { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }

/* ---- School logo (used in topnav + auth pages, sized by context) ---- */
.school-logo { height: 40px; width: auto; display: block; }
.topnav-brand .school-logo { height: 38px; }

/* ---- App Layout ---- */
.app-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: calc(100vh - var(--nav-h));
    overflow: hidden;
}
.sidebar {
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; background: var(--c-surface); z-index: 1;
}
.sidebar-header h3 { font-size: .95rem; color: var(--c-muted); }
.assessment-list { flex: 1; padding: .5rem; }
.assessment-item {
    padding: .75rem;
    border-radius: var(--radius);
    cursor: pointer;
    margin-bottom: .35rem;
    border: 1px solid transparent;
    transition: background .15s;
}
.assessment-item:hover { background: var(--c-bg); border-color: var(--c-border); }
.assessment-item.active { background: var(--gold-tint); border-color: var(--c-primary); }
.assessment-item.returned { border-left: 3px solid var(--c-warning); }
.ai-title { font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.ai-meta { font-size: .78rem; color: var(--c-muted); }
.ai-remarks { font-size: .75rem; color: var(--c-warning); margin-top: .3rem; }
.ai-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .45rem;
}
.ai-sec-count { font-size: .73rem; color: var(--c-muted); }
.btn-del-draft {
    background: transparent; border: 1px solid var(--c-danger);
    color: var(--c-danger); font-size: .72rem; font-weight: 600;
    padding: .15rem .5rem; border-radius: 4px; cursor: pointer;
    line-height: 1.4; transition: background .15s, color .15s;
}
.btn-del-draft:hover { background: var(--c-danger); color: #fff; }

.main-content {
    overflow-y: auto;
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
}

/* ---- Admin layout ---- */
.admin-tabs {
    display: flex;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 0 1.5rem;
}
.admin-tab {
    padding: .75rem 1.25rem;
    background: none; border: none;
    border-bottom: 3px solid transparent;
    font-size: .95rem; font-weight: 600;
    cursor: pointer; color: var(--c-muted);
    transition: all .15s;
}
.admin-tab:hover { color: var(--c-primary); }
.admin-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.admin-panel {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: 100%;
}

/* ---- Cards ---- */
.card {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.card-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; color: var(--maroon); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem 1rem;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    font-size: .875rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.btn-primary   { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-d); }
.btn-outline   { background: var(--white); color: var(--maroon); border-color: var(--gold); }
.btn-outline:hover { background: var(--gold-tint); }
.btn-warning   { background: var(--c-warning); color: #fff; border-color: var(--c-warning); }
.btn-danger    { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-success   { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.btn-sm        { padding: .3rem .7rem; font-size: .8rem; }
.btn-full      { width: 100%; justify-content: center; }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-import { background: var(--gold); color: var(--maroon-dark); border-color: var(--gold); font-weight: 700; }
.btn-import:hover:not(:disabled) { background: var(--gold-light); border-color: var(--gold-light); }
.btn-submit-final { background: var(--maroon-dark); color: #fff; border-color: var(--maroon-dark); }
.btn-submit-final:hover:not(:disabled) { background: var(--maroon); border-color: var(--maroon); }

/* Assessment action bar grouping */
.action-working-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.action-divider { width: 1px; height: 2rem; background: var(--c-border); margin: 0 .5rem; flex-shrink: 0; align-self: center; }
.submit-group { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.submit-hint { font-size: .69rem; color: var(--c-muted); padding-left: .15rem; }

/* Submit confirmation modal */
.submit-modal-title { color: var(--maroon-dark); margin-bottom: .75rem; }
.submit-empty-warning { background: rgba(224,123,0,.08); border: 1.5px solid var(--c-warning); border-radius: var(--radius); padding: .75rem 1rem; margin-top: .75rem; font-size: .875rem; color: #7a4500; }
.submit-empty-warning ul { margin: .3rem 0 .3rem 1.2rem; padding: 0; }
.submit-empty-warning p { margin: .5rem 0 0; font-weight: 600; }

/* ---- Forms ---- */
.form-group { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 140px; }
.form-group label { font-size: .82rem; font-weight: 600; color: var(--c-muted); }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="email"], select, textarea {
    padding: .45rem .75rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    font-size: .9rem; font-family: inherit;
    background: var(--c-surface);
    color: var(--c-text);
    width: 100%;
    transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-tint-strong);
}
.form-fieldset {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1rem;
}
.form-fieldset legend {
    padding: 0 .5rem; font-weight: 600;
    font-size: .85rem; color: var(--c-muted);
}
.form-actions { display: flex; gap: .75rem; margin-top: 1rem; }
.req { color: var(--c-danger); }

/* Checklist */
.checklist { display: flex; flex-wrap: wrap; gap: .5rem .75rem; padding-top: .3rem; }
.checklist--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .4rem; }
.check-item {
    display: flex; align-items: center; gap: .4rem;
    font-size: .9rem; cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 4px;
}
.check-item:hover { background: var(--c-bg); }
.check-item input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }

/* ---- Auth pages: split-screen login/register ---- */
.auth-page { min-height: 100vh; background: var(--gray-bg); }

.login-split { display: flex; min-height: 100vh; }

/* Left brand panel */
.login-brand {
    flex: 0 0 45%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%);
    color: #fff;
    padding: 3rem 2rem;
}
.login-brand .school-logo { height: 140px; margin-bottom: 1.5rem; filter: drop-shadow(0 4px 14px rgba(0,0,0,.3)); }
.login-brand-name {
    font-size: 1.35rem; font-weight: 700; line-height: 1.35;
    max-width: 380px; color: #fff;
}
.login-brand-division { font-size: .82rem; color: var(--gold-light); margin-top: .6rem; letter-spacing: .02em; }
.login-brand-divider { width: 56px; height: 3px; background: var(--gold); border-radius: 2px; margin: 1.5rem 0; border: none; }
.login-brand-tagline {
    font-size: .85rem; font-weight: 600; color: #fff; opacity: .9;
    letter-spacing: .06em; text-transform: uppercase;
}

/* Right form panel */
.login-form-panel {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.login-card {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid #ece5d8;
    box-shadow: 0 8px 32px rgba(26,26,26,.14);
    padding: 2.5rem;
    width: 100%; max-width: 420px;
}
.login-card--wide { max-width: 780px; }
.login-card-title { font-size: 1.5rem; color: var(--maroon); margin-bottom: .3rem; }
.login-card-subtitle { font-size: .9rem; color: var(--c-muted); margin-bottom: 1.75rem; }

/* Username / password field icons */
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--c-muted); display: flex; pointer-events: none;
}
.input-icon-wrap:focus-within .input-icon { color: var(--maroon); }
.input-icon-wrap input { padding-left: 2.6rem; }
.login-card input[type="text"], .login-card input[type="password"] {
    padding-top: .7rem; padding-bottom: .7rem;
}

.auth-footer { text-align: center; font-size: .85rem; margin-top: 1.25rem; color: var(--c-muted); }
.auth-footer a { font-weight: 600; }

@media (max-width: 860px) {
    .login-split { flex-direction: column; }
    .login-brand {
        flex: 0 0 auto;
        padding: 1.75rem 1.25rem;
    }
    .login-brand .school-logo { height: 64px; margin-bottom: .6rem; }
    .login-brand-name { font-size: 1.05rem; max-width: 340px; }
    .login-brand-division { font-size: .74rem; }
    .login-brand-divider, .login-brand-tagline { display: none; }
    .login-form-panel { padding: 1.5rem 1rem 2.5rem; }
    .login-card, .login-card--wide { max-width: 100%; padding: 1.75rem 1.25rem; }
}
@media (max-width: 420px) {
    .login-card { padding: 1.5rem 1rem; border-radius: 12px; }
}

/* ---- Alerts ---- */
.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
    border-left: 4px solid;
}
.alert-error   { background: #fef2f2; border-color: var(--c-danger);  color: #7f1d1d; }
.alert-success { background: #f0fdf4; border-color: var(--c-success); color: #14532d; }
.alert-warning { background: #fffbeb; border-color: var(--c-warning); color: #78350f; }
.error-list    { margin: 0; padding-left: 1.2em; }

/* ---- Status Chips ---- */
.status-chip {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.status-draft     { background: #e0e7ef; color: #374151; }
.status-submitted { background: #dbeafe; color: #1e40af; }
.status-approved  { background: #dcfce7; color: #166534; }
.status-returned  { background: #fef3c7; color: #92400e; }
.user-chip  { padding: .2rem .65rem; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.teacher-chip { background: #dbeafe; color: #1e40af; }
.admin-chip   { background: #fef3c7; color: #92400e; }

/* ---- KPI Grid ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.kpi-card {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
}
.kpi-card--alert { border-left: 4px solid var(--c-danger); }
.kpi-label { font-size: .78rem; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi-value { font-size: 2rem; font-weight: 800; color: var(--c-primary); line-height: 1.1; margin: .3rem 0; }
.kpi-sub   { font-size: .78rem; color: var(--c-muted); }
.kpi-bar   { margin-top: .5rem; height: 6px; background: var(--c-bg); border-radius: 3px; position: relative; }
.kpi-bar-fill   { height: 100%; background: var(--c-primary); border-radius: 3px; transition: width .4s; }
.kpi-bar-target { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--c-warning); left: 75%; }

/* ---- Chart Grid ---- */
.chart-grid   { display: grid; gap: 1rem; }
.chart-grid-2 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.chart-card   { min-height: 320px; display: flex; flex-direction: column; }
.chart-card canvas { flex: 1; }

/* ---- Filter Bar ---- */
.filter-bar {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .75rem 1rem;
}
.filter-bar select { max-width: 160px; flex: 1; min-width: 120px; }

/* ---- Tables ---- */
.table-scroll { overflow-x: auto; }
.data-table {
    width: 100%; border-collapse: collapse;
    font-size: .83rem;
}
.data-table th, .data-table td {
    padding: .45rem .6rem;
    border: 1px solid var(--c-border);
    text-align: center;
    white-space: nowrap;
}
.data-table th {
    background: var(--gold-tint); font-weight: 700; color: var(--maroon-dark);
    position: sticky; top: 0; z-index: 1;
}
.data-table tr:nth-child(even) { background: var(--gray-bg); }
.data-table tr:hover td { background: var(--gold-tint); }
.data-table .row-label { text-align: left; font-weight: 600; background: var(--gray-bg); }
.data-table .total-col { background: var(--gold-tint); font-weight: 700; }
.data-table .summary-row td { background: var(--gold-tint-strong); font-weight: 700; }
.data-table .band-row td { background: var(--gray-bg); }
.data-table input[type="number"] {
    width: 60px; padding: .25rem;
    border: 1px solid var(--c-border);
    border-radius: 4px; text-align: center;
    font-size: .82rem;
}
.data-table input[type="number"]:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px var(--gold-tint-strong); }
.data-table input:read-only { background: var(--gray-bg); color: var(--c-muted); }

/* Item Analysis color coding */
.pct-red    { background: #fecaca !important; color: #7f1d1d; font-weight: 700; }
.pct-yellow { background: #fef08a !important; color: #713f12; font-weight: 700; }
.pct-green  { background: #bbf7d0 !important; color: #14532d; font-weight: 700; }

/* Heatmap */
.heatmap-table th { font-size: .72rem; }
.heatmap-table td { font-size: .78rem; padding: .3rem .4rem; }

/* ---- Tabs (teacher) ---- */
.tab-bar {
    display: flex; gap: .5rem;
    border-bottom: 2px solid var(--c-border);
    margin-bottom: -1px;
}
.tab-btn {
    padding: .6rem 1.25rem;
    background: none; border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600; font-size: .9rem;
    cursor: pointer; color: var(--c-muted);
    margin-bottom: -2px;
    transition: all .15s;
}
.tab-btn:hover { color: var(--c-primary); }
.tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* ---- Assessment header ---- */
.assessment-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.assessment-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mini-chart-card { padding: 1rem; }

/* ---- Empty state ---- */
.empty-state {
    text-align: center; color: var(--c-muted);
    padding: 4rem 2rem;
}
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-msg  { color: var(--c-muted); font-size: .88rem; text-align: center; padding: 1rem; }

/* ---- Modal ---- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-box {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 2rem;
    min-width: 420px; max-width: 600px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    /* Safety net: no modal ever escapes the viewport */
    max-height: 92vh;
    overflow-y: auto;
}
.modal-box h3 { margin-bottom: 1rem; }
.modal-box--wide { min-width: 520px; max-width: 740px; }

/* Tall modals (many fields + mapping grid): sticky header + scrollable body + pinned footer */
.modal-box--tall {
    padding: 0;
    overflow: hidden;          /* body handles its own scroll */
    display: flex;
    flex-direction: column;
}
.modal-box--tall > .modal-tall-header {
    flex-shrink: 0;
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid var(--c-border);
}
.modal-box--tall > .modal-tall-header h3 { margin: 0; }
.modal-tall-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;             /* required for flex overflow to work */
    padding: 1.25rem 2rem;
}
.modal-box--tall > .modal-tall-footer {
    flex-shrink: 0;
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    display: flex;
    align-items: center;
    gap: .75rem;
}
/* Shrink mapping grid inside tall modal so form fields stay visible */
.modal-tall-body #editCompMappingGrid { max-height: 36vh; }

/* ---- ZipGrade Import Preview ---- */
.import-stats {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-bottom: .85rem;
}
.import-stat {
    display: flex; flex-direction: column; align-items: center;
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: .45rem .9rem;
    min-width: 88px;
}
.import-stat .stat-val { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.import-stat .stat-lbl { font-size: .72rem; color: var(--c-muted); margin-top: .1rem; }
.import-stat.stat-green { border-color: var(--c-green); }
.import-stat.stat-green .stat-val { color: var(--c-green); }
.import-stat.stat-yellow { border-color: var(--c-warning); }
.import-stat.stat-yellow .stat-val { color: var(--c-warning); }
.import-stat.stat-red { border-color: var(--c-red); }
.import-stat.stat-red .stat-val { color: var(--c-red); }

.import-flagged {
    background: #fffbea; border: 1px solid #ead96e;
    border-radius: var(--radius); padding: .6rem .75rem;
    margin-bottom: .75rem; font-size: .84rem;
}
.import-confirm-hint {
    font-size: .84rem; color: var(--c-muted); margin-top: .75rem;
}

/* ---- Text utilities ---- */
.text-muted  { color: var(--c-muted); }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .app-layout { grid-template-columns: 1fr; }
    .sidebar { height: 200px; }
    .chart-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .assessment-header { flex-direction: column; }
    .filter-bar { flex-direction: column; align-items: stretch; }
}

/* ---- Admin tab bar "Create Assessment" button integration ---- */
.admin-tabs { display: flex; flex-wrap: wrap; align-items: stretch; }

/* ---- Badge for admin-created assessments in sidebar ---- */
.badge-shared {
    display: inline-block;
    background: var(--gold-tint-strong);
    color: var(--maroon-dark);
    border: 1px solid var(--gold);
    border-radius: 3px;
    font-size: .65rem;
    font-weight: 700;
    padding: 0 .3rem;
    vertical-align: middle;
    margin-left: .25rem;
}

/* ---- Competency item table column ---- */
.comp-col { font-size: .75rem; color: var(--c-muted); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Competency management panel ---- */

/* Filter row: title + selects + CSV button in one responsive row */
.comp-filter-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.comp-filter-row > h3 { flex-shrink: 0; }
.comp-filter-selects {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}
.comp-filter-selects select { flex: 1; min-width: 130px; max-width: 280px; }
.comp-filter-selects .btn   { flex-shrink: 0; white-space: nowrap; }

/* Competency table: Code narrow, Description fills, Actions right-aligned */
#compTable th:last-child,
#compTable td:last-child { text-align: right; }

/* Hint shown when subject selected but no term chosen */
.comp-add-hint {
    color: var(--c-muted);
    font-size: .85rem;
    font-style: italic;
    padding: .6rem .25rem .25rem;
    border-top: 1px solid var(--c-border);
    margin-top: .75rem;
}

/* Add form: capped width so it doesn't stretch on wide screens */
.comp-add-form-row { max-width: 860px; }

.comp-add-row { border-top: 1px solid var(--c-border); padding-top: .75rem; margin-top: .75rem; }

/* ---- Create Assessment Modal — Step Indicator ---- */
.step-indicator {
    display: flex; align-items: center; gap: 0;
    margin-bottom: .35rem;
}
.step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-border);
    color: var(--c-muted);
    font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}
.step-dot.active  { background: var(--maroon); color: #fff; }
.step-dot.done    { background: var(--c-success); color: #fff; }
.step-line { flex: 1; height: 2px; background: var(--c-border); }
.step-label-row {
    display: flex; justify-content: space-between;
    font-size: .7rem; color: var(--c-muted);
    margin-bottom: 1.25rem;
}

/* ---- Type selection cards ---- */
.type-card-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.type-card {
    flex: 1; min-width: 140px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.type-card:hover { border-color: var(--gold); background: var(--gold-tint); }
.type-card.selected { border-color: var(--maroon); background: var(--maroon-tint); }
.type-card-icon { font-size: 2rem; margin-bottom: .4rem; }
.type-card-name { font-weight: 700; color: var(--maroon); }
.type-card-meta { font-size: .78rem; color: var(--c-muted); margin-top: .2rem; }

/* ---- Competency mapping grid ---- */
.comp-map-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.comp-map-table th { background: var(--maroon-tint); color: var(--maroon); padding: .35rem .5rem; text-align: left; border-bottom: 2px solid var(--c-border); position: sticky; top: 0; }
.comp-map-table td { padding: .3rem .5rem; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.comp-map-table td:first-child { width: 60px; font-weight: 700; color: var(--c-muted); text-align: center; }
.comp-map-table select { padding: .25rem .4rem; font-size: .82rem; }

/* ---- Bulk assign bar ---- */
.bulk-assign-bar {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: var(--gold-tint); border: 1px solid var(--gold);
    border-radius: var(--radius); padding: .5rem .75rem;
    font-size: .84rem;
}

/* ---- Competency live summary ---- */
.comp-summary { font-size: .82rem; }
.comp-summary-row { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .2rem; }
.comp-summary-badge { background: var(--maroon-tint); color: var(--maroon); border-radius: 3px; padding: .05rem .35rem; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.comp-unassigned-warn { color: var(--c-warning); font-weight: 600; font-size: .8rem; margin-top: .4rem; }

/* ---- Select assessment list ---- */
.select-asmt-list { display: flex; flex-direction: column; gap: .5rem; max-height: 380px; overflow-y: auto; }
.select-asmt-card {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    padding: .6rem .85rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.select-asmt-card:hover { border-color: var(--gold); background: var(--gold-tint); }
.select-asmt-card.active  { border-color: var(--maroon); background: var(--maroon-tint); }
.select-asmt-card-title   { font-weight: 700; color: var(--maroon); }
.select-asmt-card-meta    { font-size: .8rem; color: var(--c-muted); margin-top: .1rem; }
.select-asmt-card-badge   { font-size: .72rem; color: var(--c-success); font-weight: 600; }

/* ---- Competency drill-down table in dashboard ---- */

/* #compDrillTable already has class="table-scroll" so overflow-x:auto is inherited */
.comp-drill-table {
    table-layout: fixed;
    width: 100%;
    min-width: 620px;    /* lets it scroll horizontally on narrow screens */
    font-size: .82rem;
}

/* Column widths — respected because table-layout:fixed */
.comp-drill-table col.col-code { width: 130px; }
.comp-drill-table col.col-pct  { width: 110px; }
.comp-drill-table col.col-sec  { width:  88px; }
.comp-drill-table col.col-num  { width:  92px; }
/* col-desc gets the remaining space automatically */

/* Cells: allow wrapping, top-align, consistent padding */
.comp-drill-table th,
.comp-drill-table td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
    padding: .5rem .75rem;
}

/* Numeric columns: right-align headers and cells */
.comp-drill-table th:nth-child(n+3),
.comp-drill-table td:nth-child(n+3) { text-align: right; }

/* % Correct cell: keep background color-coding on the cell only;
   reset text color so global .pct-* values are used */
.comp-drill-table .pct-red,
.comp-drill-table .pct-yellow,
.comp-drill-table .pct-green { color: inherit; font-weight: 700; }

/* ---- Wrapping for other admin text-heavy tables ---- */
/* Submissions: Assessment title + remarks can overflow */
/* Teacher accounts: Subjects list can overflow */
/* Competency management: Description column */
#complianceTable th,  #complianceTable td,
#compTable th,        #compTable td,
#panel-teachers .data-table th,
#panel-teachers .data-table td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
}

/* ============================================================
   ADMIN: ASSESSMENTS TAB
   ============================================================ */

/* Fixed-layout table so column widths are enforced */
#asmtListTable {
    table-layout: fixed;
    width: 100%;
    min-width: 860px;
}

/* Column widths */
#asmtListTable col.asmtcol-title    { width: auto; }          /* fills remaining space */
#asmtListTable col.asmtcol-type     { width: 100px; }
#asmtListTable col.asmtcol-subject  { width: 160px; }
#asmtListTable col.asmtcol-term     { width:  80px; }
#asmtListTable col.asmtcol-items    { width:  68px; }
#asmtListTable col.asmtcol-date     { width: 100px; }
#asmtListTable col.asmtcol-secs     { width: 100px; }
#asmtListTable col.asmtcol-teachers { width:  84px; }
#asmtListTable col.asmtcol-status   { width:  90px; }
#asmtListTable col.asmtcol-actions  { width: 110px; }

/* Cells wrap; top-align so multi-line titles don't look off */
#asmtListTable th,
#asmtListTable td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
}

/* Actions column: keep buttons on one line */
#asmtListTable td.asmt-actions-cell { white-space: nowrap; }

/* Destructive-field lock notice inside edit modal */
.edit-lock-notice {
    background: rgba(224,123,0,.08);
    border: 1.5px solid var(--c-warning);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    font-size: .85rem;
    color: #6b3a00;
    margin-top: .25rem;
}

/* Blast radius warning inside delete modal */
.blast-radius-box {
    background: rgba(220,38,38,.07);
    border: 1.5px solid var(--c-danger);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-top: .75rem;
    font-size: .88rem;
    color: #7f1d1d;
    line-height: 1.55;
}