/* =========================================================
   EduFlow · A HurkTech Product
   Base brand: deep navy, gradient blue, white, subtle accents
   ========================================================= */

:root{
    --navy-900:#0a1633;
    --navy-800:#0f1f4a;
    --navy-700:#132a63;
    --blue-600:#1a73e8;
    --blue-500:#2b8cff;
    --blue-400:#4ea8ff;
    --blue-100:#e8f1ff;
    --white:#ffffff;
    --gray-50:#f7f9fc;
    --gray-100:#eef2f7;
    --gray-200:#dfe6ee;
    --gray-300:#cbd5e1;
    --gray-400:#98a2b3;
    --gray-600:#475467;
    --gray-800:#1d2939;
    --green:#1a9f6c;
    --amber:#e08b00;
    --red:#d64545;
    --shadow-sm:0 1px 2px rgba(10,22,51,.06),0 1px 3px rgba(10,22,51,.08);
    --shadow-md:0 6px 24px rgba(10,22,51,.08);
    --radius:12px;
    --radius-sm:8px;
    --font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font);color:var(--gray-800);background:var(--gray-50)}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem;color:var(--navy-900)}
h2{font-size:1.05rem;font-weight:600}
h3{font-size:.98rem;font-weight:600}

/* =========================================================
   AUTH — Login
   ========================================================= */
.auth-body{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:
        radial-gradient(1200px 600px at 10% 0%, rgba(43,140,255,.35), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(26,115,232,.25), transparent 60%),
        linear-gradient(135deg,var(--navy-900),var(--navy-700));
    padding:2rem;
}
.auth-wrapper{width:100%;max-width:420px}
.auth-card{
    background:var(--white);border-radius:18px;padding:2.2rem 2rem;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.auth-brand{text-align:center;margin-bottom:1.6rem}
.auth-brand h1{font-size:1.4rem;margin:.6rem 0 .2rem}
.auth-brand p{color:var(--gray-600);margin:0;font-size:.9rem}
.brand-mark{
    width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
    color:var(--white);font-weight:800;letter-spacing:.5px;font-size:1rem;
}
.brand-mark.lg{width:56px;height:56px;font-size:1.25rem;margin:0 auto}
.auth-form{display:flex;flex-direction:column;gap:1rem;margin-top:.6rem}
.auth-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--gray-600)}
.auth-form input{
    padding:.7rem .85rem;border:1px solid var(--gray-200);border-radius:var(--radius-sm);
    font-size:.95rem;background:var(--white);transition:border .15s, box-shadow .15s;
}
.auth-form input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(43,140,255,.18)}
.btn-primary{
    background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
    color:var(--white);border:0;padding:.8rem 1rem;border-radius:var(--radius-sm);
    font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .05s, box-shadow .15s;
}
.btn-primary:hover{box-shadow:0 8px 20px rgba(26,115,232,.35)}
.btn-primary:active{transform:translateY(1px)}
.btn-danger{background:var(--red);color:#fff;border:0;padding:.7rem 1rem;border-radius:var(--radius-sm);font-weight:600;cursor:pointer}
.auth-note{text-align:center;color:var(--gray-400);font-size:.78rem;margin-top:1.4rem}
.auth-alt{text-align:center;font-size:.85rem;color:var(--gray-600);margin-top:1rem}
.auth-footer{text-align:center;color:rgba(255,255,255,.7);font-size:.8rem;margin-top:1rem}

/* =========================================================
   APP SHELL
   ========================================================= */
.app-body{background:var(--gray-50);min-height:100vh}
.app-shell{display:flex;min-height:100vh}

.sidebar{
    width:248px;
    background:linear-gradient(180deg,var(--navy-900),var(--navy-800));
    color:var(--white);
    padding:1.2rem 1rem;
    display:flex;flex-direction:column;gap:1rem;
    position:sticky;top:0;height:100vh;
    overflow-y:auto;
    scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}

.brand{
    display:flex;gap:12px;align-items:center;
    padding:18px 16px;
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
}
.brand-logo{
    display:block;
    width:34px;height:34px;
    min-width:34px;min-height:34px;
    object-fit:contain;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    padding:2px;
    flex-shrink:0;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{
    font-size:.95rem;color:#fff;font-weight:700;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand-text span{
    font-size:.7rem;color:rgba(255,255,255,.6);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.nav{display:flex;flex-direction:column;gap:.15rem;flex:1}
.nav-item{
    display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:var(--radius-sm);
    color:rgba(255,255,255,.78);font-size:.9rem;background:transparent;border:0;width:100%;
    text-align:left;cursor:pointer;font-family:inherit;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:var(--white);text-decoration:none}
.nav-item.active{background:linear-gradient(90deg,rgba(43,140,255,.35),rgba(43,140,255,.05));color:var(--white)}
.nav-logout{color:rgba(255,180,180,.85);margin-top:.5rem}
.logout-form{margin-top:auto}

.nav-group{display:flex;flex-direction:column;gap:1px;margin-top:.4rem;padding-top:.4rem;border-top:1px solid rgba(255,255,255,.06)}
.nav-group:first-of-type{margin-top:.2rem;padding-top:0;border-top:0}

.sidebar .nav-toggle{display:flex;align-items:center;gap:.65rem;width:100%;justify-content:flex-start}
.sidebar .nav-toggle .nav-chevron{margin-left:auto;flex:0 0 auto;transition:transform .22s ease;opacity:.55}
.sidebar .nav-toggle.open .nav-chevron{transform:rotate(90deg);opacity:1}
.sidebar .nav-toggle:hover{background:rgba(255,255,255,.05)}
.sidebar .nav-toggle.active{background:rgba(43,140,255,.14);border-radius:6px}
.sidebar .nav-toggle.active .nav-chevron{opacity:1}

.sidebar .nav-children{
    display:flex;flex-direction:column;gap:1px;overflow:hidden;
    max-height:0;transition:max-height .25s ease, opacity .2s ease;opacity:0;
    margin-left:1rem;padding-left:.55rem;border-left:1px solid rgba(255,255,255,.08);
}
.sidebar .nav-children.open{max-height:500px;opacity:1}

.sidebar .nav-child{
    padding:.42rem .55rem;font-size:.845rem;color:rgba(255,255,255,.68);border-radius:6px;
}
.sidebar .nav-child:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.sidebar .nav-child.active{
    color:#fff;
    background:linear-gradient(90deg, rgba(43,140,255,.32), rgba(43,140,255,.06));
}

.app-main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:1rem 1.6rem;background:var(--white);border-bottom:1px solid var(--gray-200);
    position:sticky;top:0;z-index:5;
}
.page-title{font-size:1.15rem;margin:0}
.topbar-user{display:flex;align-items:center;gap:.7rem}
.avatar{
    width:38px;height:38px;border-radius:50%;
    background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
    color:var(--white);display:grid;place-items:center;font-weight:700;
}
.user-meta{display:flex;flex-direction:column;line-height:1.2}
.user-meta strong{font-size:.88rem}
.user-meta span{font-size:.75rem;color:var(--gray-600);text-transform:capitalize}
.app-content{padding:1.6rem 1.6rem 1.6rem .5rem;display:flex;flex-direction:column;gap:1.4rem}

/* =========================================================
   PANELS / GRIDS / KPIs
   ========================================================= */
.panel{background:var(--white);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-sm)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.kpi-card{
    background:var(--white);border-radius:var(--radius);padding:1.1rem 1.2rem;
    box-shadow:var(--shadow-sm);border-left:4px solid var(--blue-500);
}
.kpi-card.tone-green{border-left-color:var(--green)}
.kpi-card.tone-amber{border-left-color:var(--amber)}
.kpi-card.tone-red{border-left-color:var(--red)}
.kpi-label{font-size:.78rem;color:var(--gray-600);text-transform:uppercase;letter-spacing:.04em}
.kpi-value{font-size:1.6rem;font-weight:700;color:var(--navy-900);margin-top:.3rem}

.empty{color:var(--gray-400);font-size:.9rem;margin:.6rem 0}
.muted{color:var(--gray-400)}

/* =========================================================
   TABLES
   ========================================================= */
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{padding:.6rem .5rem;text-align:left;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.data-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-600);font-weight:600;background:var(--gray-50)}
.data-table tr:last-child td{border-bottom:0}
.data-table tr:hover td{background:rgba(43,140,255,.03)}

.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600}
.badge-active{background:#e6f7f0;color:#0e7a52}
.badge-pending{background:#fff4e0;color:#9a5b00}
.badge-expired{background:#fde8e8;color:#9b2c2c}
.badge-suspended{background:#eee;color:#555}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-sm{
    display:inline-block;padding:.32rem .68rem;font-size:.8rem;
    background:var(--blue-500);color:#fff;border-radius:6px;border:0;cursor:pointer;font-family:inherit;
}
.btn-sm:hover{background:var(--blue-600);text-decoration:none;color:#fff}
.btn-sm-primary{background:var(--green) !important;}
.btn-sm-primary:hover{background:#158a5b !important;}

/* =========================================================
   ACTIVITY LIST / PLAIN LISTS
   ========================================================= */
.activity-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.activity-list li{display:flex;gap:.6rem;font-size:.85rem}
.activity-list .dot{width:8px;height:8px;border-radius:50%;background:var(--blue-500);margin-top:.5rem;flex-shrink:0}
.activity-list small{display:block;color:var(--gray-400);font-size:.72rem}

.plain-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.plain-list li{padding:.35rem .5rem;background:var(--gray-50);border-radius:6px}

/* =========================================================
   FLASH MESSAGES
   ========================================================= */
.flash{padding:.7rem .9rem;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:.6rem}
.flash-error{background:#fde8e8;color:#9b2c2c;border-left:3px solid var(--red)}
.flash-success{background:#e6f7f0;color:#0e7a52;border-left:3px solid var(--green)}
.flash-warn{background:#fff4e0;color:#9a5b00;border-left:3px solid var(--amber)}

/* =========================================================
   PUBLIC FORMS
   ========================================================= */
.public-wrap{width:100%;max-width:520px;margin:0 auto}
.public-wrap.wide{max-width:820px}
.public-header{text-align:center;color:#fff;margin-bottom:1.2rem}
.public-header h1{color:#fff;font-size:1.4rem;margin:.5rem 0 .1rem}
.public-header p{color:rgba(255,255,255,.75);margin:0;font-size:.9rem}

.public-form{
    background:#fff;border-radius:16px;padding:1.6rem;box-shadow:0 24px 60px rgba(0,0,0,.25);
    display:flex;flex-direction:column;gap:1rem;
}
.public-form fieldset{border:1px solid var(--gray-200);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.public-form legend{padding:0 .4rem;color:var(--navy-900);font-weight:600;font-size:.85rem}
.public-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--gray-600)}
.public-form input,
.public-form textarea,
.public-form select{
    padding:.65rem .8rem;border:1px solid var(--gray-200);border-radius:8px;font-size:.95rem;font-family:inherit;background:#fff;
}
.public-form input:focus,
.public-form textarea:focus,
.public-form select:focus{
    outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(43,140,255,.18);
}
.public-form textarea{resize:vertical;min-height:60px;font-family:var(--font);line-height:1.5}
.public-form optgroup{font-weight:700;color:var(--navy-900)}
.public-form .btn-danger{background:#d64545;color:#fff;border:0;padding:.7rem 1rem;border-radius:8px;font-weight:600;cursor:pointer}
.public-alt{text-align:center;font-size:.85rem;margin:.6rem 0 0}
.panel .public-form{box-shadow:none;padding:0;background:transparent}

/* =========================================================
   TABS
   ========================================================= */
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--gray-200);margin-bottom:1rem}
.tab{padding:.55rem .9rem;font-size:.88rem;color:var(--gray-600);border-bottom:2px solid transparent;text-decoration:none}
.tab.active{color:var(--blue-600);border-bottom-color:var(--blue-600);font-weight:600}

/* =========================================================
   FILTERS
   ========================================================= */
.filters{
    display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;
    margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--gray-100);
}
.filters label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--gray-600)}
.filters select,
.filters input[type="text"],
.filters input[type="search"]{
    padding:.45rem .6rem;border:1px solid var(--gray-200);border-radius:6px;font-size:.88rem;font-family:inherit;
}
.filters .btn-primary{padding:.5rem .9rem}
.filters .btn-sm{align-self:flex-end}

/* =========================================================
   CHECKBOX ROWS / QUICK LINKS / PAGINATION
   ========================================================= */
.checkbox-row{display:flex!important;flex-direction:row!important;align-items:center;gap:.5rem;font-size:.85rem}
.checkbox-row input[type="checkbox"]{width:auto;padding:0}

.quick-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.quick-links .btn-sm{padding:.5rem .9rem}

.pagination{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--gray-100)}
.page-link{
    padding:.35rem .7rem;font-size:.85rem;border:1px solid var(--gray-200);
    border-radius:6px;color:var(--gray-600);background:#fff;
}
.page-link:hover{background:var(--gray-50);text-decoration:none}
.page-link.active{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}

/* =========================================================
   INLINE TABLE EDIT FORMS
   ========================================================= */
table .public-form{padding:.6rem;background:var(--gray-50);border-radius:8px;box-shadow:none}
table .public-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--gray-600)}
table .public-form input,
table .public-form select{padding:.4rem .55rem;font-size:.85rem;border:1px solid var(--gray-200);border-radius:6px}

/* =========================================================
   MARKSHEET
   ========================================================= */
.marksheet-panel{page-break-inside:avoid;page-break-after:always;margin-bottom:1.2rem}
.marksheet-scroll{overflow-x:auto}

.mh-block{text-align:center;padding-bottom:.6rem;margin-bottom:.7rem;border-bottom:3px double var(--navy-900)}
.mh-logo-centered img{max-height:70px;max-width:200px;object-fit:contain;display:inline-block;margin-bottom:.35rem}
.mh-name{font-size:1.3rem;font-weight:800;color:var(--navy-900);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.mh-motto{font-size:.88rem;color:var(--gray-600);margin-top:.1rem}
.mh-meta{font-size:.78rem;color:var(--gray-600);margin-top:.15rem}
.mh-title-block{margin-top:.9rem}
.mh-doc-title{font-size:1.15rem;font-weight:800;color:var(--navy-900);text-transform:uppercase;letter-spacing:.12em}
.mh-doc-sub{font-size:.85rem;color:var(--gray-800);margin-top:.15rem;font-weight:600}
.mh-doc-sub2{font-size:.85rem;color:var(--gray-600);margin-top:.05rem}

table.marksheet{width:100%;border-collapse:collapse;border:2px solid #222;font-size:.9rem}
table.marksheet th,
table.marksheet td{border:1px solid #444;padding:.45rem .5rem;text-align:center;vertical-align:middle}
table.marksheet thead th{
    background:var(--navy-900);color:#fff;border:1px solid #0a1633;
    font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:.55rem .5rem;
}
table.marksheet tbody td{color:#111;font-variant-numeric:tabular-nums}
table.marksheet tbody tr:nth-child(even) td{background:#dbe6f5}
table.marksheet tbody tr:hover td{background:#c6dbf5}
table.marksheet .col-student{text-align:left;font-weight:600;white-space:nowrap;padding-left:.8rem;min-width:160px}
table.marksheet .col-mark{width:66px}
table.marksheet .col-total{width:78px;font-weight:700;background:#eaf2ff}
table.marksheet .col-agg{width:60px;font-weight:700;background:#e6f7f0}
table.marksheet .col-pos{width:60px;font-weight:700;background:#eaf2ff}
table.marksheet tfoot td{background:#f0f3f8;border-top:2px solid #222;font-weight:700;color:#111}

.empty-mark{color:#999;font-weight:400}
.marksheet-footer{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:.55rem;padding-top:.4rem;border-top:1px solid #cbd5e1;font-size:.76rem;color:var(--gray-600);
}

/* Marksheet wide variant */
table.marksheet.marksheet-wide { table-layout: auto; }
table.marksheet.marksheet-wide thead th,
table.marksheet.marksheet-wide thead th.subject-head,
table.marksheet.marksheet-wide thead th.sub-mark,
table.marksheet.marksheet-wide thead th.sub-pts,
table.marksheet.marksheet-wide thead th.col-student,
table.marksheet.marksheet-wide thead th.col-total,
table.marksheet.marksheet-wide thead th.col-agg,
table.marksheet.marksheet-wide thead th.col-pos {
    background: var(--navy-900);
    color: #fff;
    border: 1px solid #0a1633;
    text-align: center;
    vertical-align: middle;
}
table.marksheet.marksheet-wide thead th.subject-head {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .5rem .4rem;
}
table.marksheet.marksheet-wide thead th.col-student,
table.marksheet.marksheet-wide thead th.col-total,
table.marksheet.marksheet-wide thead th.col-agg,
table.marksheet.marksheet-wide thead th.col-pos {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .5rem .4rem;
}
table.marksheet.marksheet-wide thead th.sub-mark,
table.marksheet.marksheet-wide thead th.sub-pts {
    font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .3rem; width: 34px;
}
table.marksheet.marksheet-wide thead th.sub-pts { border-left: 1px dashed rgba(255,255,255,0.35); }
table.marksheet.marksheet-wide tbody td.sub-mark {
    width: 34px; text-align: center; padding: .42rem .3rem; font-weight: 700;
    font-variant-numeric: tabular-nums; border-left: 1px solid #cbd5e1;
}
table.marksheet.marksheet-wide tbody td.sub-pts {
    width: 34px; text-align: center; padding: .42rem .3rem; font-size: .82rem; color: #475467;
    font-variant-numeric: tabular-nums; background: #f3f6fb; border-left: 1px dashed #cbd5e1;
}
table.marksheet.marksheet-wide tbody tr:nth-child(even) td.sub-pts { background: #e6edf8; }
table.marksheet.marksheet-wide tbody tr:hover td.sub-mark,
table.marksheet.marksheet-wide tbody tr:hover td.sub-pts { background: #c6dbf5; }

/* =========================================================
   MARK ENTRY
   ========================================================= */
.mark-toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
    margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--gray-100);
}
.mark-toolbar input[type="search"]{
    padding:.45rem .6rem;border:1px solid var(--gray-200);border-radius:6px;font-size:.88rem;min-width:180px;
}
.mark-table{width:100%;border-collapse:collapse;font-size:.92rem}
.mark-table th,
.mark-table td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.mark-table th{
    font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-600);font-weight:600;background:var(--gray-50);
}
.mark-table tr:hover td{background:rgba(43,140,255,.03)}

.mark-input-wrap{display:flex;align-items:center;gap:.5rem}
.mark-input{
    width:90px;padding:.45rem .5rem;border:1px solid var(--gray-200);border-radius:6px;
    font-size:1rem;text-align:right;transition:border-color .15s, box-shadow .15s;
}
.mark-input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(43,140,255,.18)}
.mark-input.mark-error{border-color:var(--red);background:#fde8e8}
.mark-input.mark-saved{border-color:var(--green);background:#e6f7f0;transition:background .4s, border-color .4s}
.mark-grade{
    display:inline-block;min-width:32px;padding:.15rem .45rem;font-size:.78rem;font-weight:700;
    color:#fff;background:var(--navy-900);border-radius:4px;text-align:center;
}
.mark-grade:empty{display:none}
.row-error{display:block;color:var(--red);font-size:.72rem;min-height:1em;margin-top:2px}

@media (max-width:640px){
    .mark-input{width:74px}
    .mark-table th:nth-child(3),
    .mark-table td:nth-child(3){display:none}
}

/* =========================================================
   CONTINUOUS ASSESSMENT REPORT — .car
   ========================================================= */
.report-sheet{display:block}

.car{
    background:#fff;
    padding:10mm 12mm 8mm 12mm;
    margin:0 auto 10mm auto;
    max-width:820px;
    font-family:var(--font);
    color:#1d2939;
    border:1px solid #e5e7eb;
    border-radius:4px;
}
.car-header{display:flex;align-items:center;gap:.8rem;padding-bottom:.4rem}
.car-logo{flex:0 0 70px;min-height:50px}
.car-logo img{max-width:70px;max-height:60px;object-fit:contain;display:block}
.car-header-text{flex:1;text-align:center;padding-right:70px}
.car-school-name{
    font-size:1.35rem;font-weight:800;color:var(--navy-900);
    letter-spacing:.04em;text-transform:uppercase;line-height:1.15;
}
.car-school-motto{font-style:italic;font-size:.85rem;color:#475467;margin-top:.1rem}
.car-school-meta{font-size:.72rem;color:#475467;margin-top:.08rem}

.car-banner{
    background:var(--navy-900);color:#fff;text-align:center;
    padding:.55rem .8rem .65rem .8rem;border-radius:3px;margin-top:.3rem;
}
.car-banner-title{font-size:.95rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.car-banner-sub{font-size:.74rem;margin-top:.1rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9)}

.car-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 6px;margin:.7rem 0 .7rem 0}
.car-info-cell{
    border:1px solid #e5e7eb;border-radius:3px;padding:.38rem .55rem;
    font-size:.82rem;background:#fafbfd;
}
.car-info-label{font-weight:700;color:var(--navy-900);margin-right:.3rem}
.car-info-value{color:#1d2939}

.car-table{width:100%;border-collapse:collapse;border:1px solid #cbd5e1;font-size:.84rem}
.car-table thead th{
    background:var(--navy-900);color:#fff;padding:.45rem .55rem;
    font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
    text-align:center;border:1px solid var(--navy-900);
}
.car-table tbody td,
.car-table tfoot td{padding:.42rem .55rem;border:1px solid #d7dde5;font-variant-numeric:tabular-nums}
.car-table tbody tr:nth-child(odd) td{background:#f8fafc}
.car-table tbody tr:nth-child(even) td{background:#ffffff}
.car-col-subject{text-align:left;width:42%}
.car-col-mark{text-align:center;width:14%;font-weight:600}
.car-col-grade{text-align:center;width:14%;font-weight:600}
.car-col-remark{text-align:left}
.car-table tfoot td{background:#eff4fb;border-top:1px solid #cbd5e1;font-weight:700}
.car-agg{text-align:right;letter-spacing:.04em;font-size:.82rem}

.car-section{margin-top:.7rem}
.car-section-title{
    font-weight:700;color:var(--navy-900);font-size:.82rem;
    padding-left:.5rem;border-left:3px solid var(--navy-900);margin-bottom:.35rem;
}
.car-section-body{
    border:1px solid #d7dde5;border-radius:3px;padding:.55rem .7rem;
    min-height:55px;font-size:.82rem;line-height:1.45;background:#fafbfd;
}
.car-signatures{display:flex;justify-content:space-between;gap:1.2rem;margin-top:1rem}
.car-sig{flex:1;text-align:center}
.car-sig-line{border-bottom:1px solid #475467;height:1px;margin-bottom:.28rem}
.car-sig-label{font-size:.72rem;color:#475467}
.car-footer{
    margin-top:.6rem;padding-top:.4rem;border-top:1px solid #e5e7eb;
    text-align:center;font-size:.65rem;color:#98a2b3;letter-spacing:.02em;
}

/* =========================================================
   COMMENTS (marksheet-driven) + MODAL
   ========================================================= */
.comment-sheet{font-size:.85rem}
.comment-sheet th.col-student-name{min-width:180px}
.comment-sheet th.col-mark-mini,
.comment-sheet td.col-mark-mini{width:46px;text-align:center;font-variant-numeric:tabular-nums}
.comment-sheet th.col-total-mini,
.comment-sheet td.col-total-mini{width:60px;text-align:center;background:#eaf2ff}
.comment-sheet th.col-ct,
.comment-sheet td.col-ct,
.comment-sheet th.col-dos,
.comment-sheet td.col-dos{width:220px}

.comment-btn{
    display:block;width:100%;text-align:left;background:#f7f9fc;
    border:1px dashed #cbd5e1;border-radius:6px;padding:.35rem .5rem;
    font-size:.82rem;font-family:inherit;color:#475467;cursor:pointer;line-height:1.35;
}
.comment-btn:hover{background:#eef2f7;border-color:var(--blue-500);color:#1d2939}
.comment-preview{color:#1d2939;font-style:italic}

.modal-overlay{
    position:fixed;inset:0;background:rgba(10,22,51,.55);
    display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;
}
.modal-box{
    background:#fff;border-radius:12px;width:100%;max-width:620px;max-height:90vh;
    display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;
}
.modal-header{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:.9rem 1.1rem;border-bottom:1px solid #e5e7eb;background:var(--navy-900);color:#fff;
}
.modal-header small.muted{color:rgba(255,255,255,.7) !important;display:block;margin-top:.1rem}
.modal-close{background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1;padding:0 .3rem}
.modal-body{padding:1rem 1.1rem;overflow-y:auto}
.modal-marks{margin-bottom:.8rem;padding:.6rem;background:#f7f9fc;border:1px solid #e5e7eb;border-radius:8px}
.modal-marks-grid{display:flex;flex-wrap:wrap;gap:.4rem}
.mm-cell{
    display:flex;flex-direction:column;align-items:center;min-width:54px;
    padding:.25rem .4rem;background:#fff;border:1px solid #e5e7eb;border-radius:5px;
}
.mm-cell span{font-size:.68rem;text-transform:uppercase;color:#667085}
.mm-cell strong{font-size:.95rem;color:#1d2939;font-variant-numeric:tabular-nums}
.mm-total{background:#eaf2ff;border-color:#c7d8f0}
.modal-label{display:block;font-size:.82rem;color:#475467;margin-bottom:.7rem}
.modal-label select,
.modal-label textarea{
    display:block;width:100%;margin-top:.25rem;padding:.55rem .7rem;
    border:1px solid #d7dde5;border-radius:6px;font-family:inherit;font-size:.9rem;line-height:1.5;
}
.modal-label textarea{resize:vertical;min-height:120px}
.modal-status{font-size:.82rem;min-height:1.2em}
.modal-footer{
    display:flex;justify-content:flex-end;gap:.6rem;
    padding:.8rem 1.1rem;border-top:1px solid #e5e7eb;background:#fafbfd;
}

/* =========================================================
   RESULTS WORKFLOW
   ========================================================= */
.workflow-status{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.workflow-actions{
    display:flex;flex-wrap:wrap;gap:.6rem;
    margin-bottom:.8rem;padding-bottom:.8rem;border-bottom:1px solid var(--gray-100);
}
.workflow-actions form{display:inline}

.subject-chip{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.1rem .45rem;margin:.1rem .2rem .1rem 0;
    background:var(--gray-50);border:1px solid var(--gray-200);
    border-radius:999px;font-size:.78rem;
}
.subject-chip em{font-style:normal;color:#475467;font-size:.72rem}

/* =========================================================
   STUDENT PROGRESS REPORT — Template 1 (Classic Navy)
   ========================================================= */
.progress-sheet{display:block}

.pr-report{
    width:100%;max-width:850px;margin:0 auto 20px;
    background:#ffffff;border:1px solid #cbd5e1;
    box-shadow:0 10px 35px rgba(0,0,0,.10);
    overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#1e293b;padding:0;
}
.pr-report .top-line{height:7px;background:#003b70}

.pr-report .school-header{display:flex;align-items:center;padding:20px 24px 17px;border-bottom:1px solid #dbe2e8}
.pr-report .school-logo{width:82px;height:82px;object-fit:contain;flex-shrink:0;border-radius:6px}
.pr-report .school-logo-placeholder{
    display:flex;align-items:center;justify-content:center;
    color:#98a2b3;font-size:.75rem;background:#f1f5f9;
    border:1px dashed #cbd5e1;border-radius:6px;
}
.pr-report .school-details{flex:1;text-align:center;padding:0 15px}
.pr-report .school-details h1{
    font-size:29px;color:#003b70;font-weight:800;
    letter-spacing:.5px;margin:0 0 4px;
}
.pr-report .school-details .motto{font-size:14px;font-style:italic;color:#64748b;margin-bottom:5px}
.pr-report .school-details p{font-size:12.5px;color:#475569;line-height:1.5;margin:0}

.pr-report .report-heading{background:#003b70;color:#fff;text-align:center;padding:14px 15px}
.pr-report .report-heading h2{
    font-size:21px;letter-spacing:1px;margin:0 0 4px;font-weight:800;
    text-transform:uppercase;color:#fff !important;
}
.pr-report .report-heading p{
    font-size:12px;margin:0;opacity:.9;
    text-transform:uppercase;letter-spacing:.08em;color:#fff !important;
}
.pr-report .report-heading-note{
    font-style:italic;margin-top:4px !important;
    text-transform:none !important;letter-spacing:0 !important;opacity:.8 !important;
}

.pr-report .student-profile{
    display:flex;gap:18px;margin:18px 22px;padding:15px;
    background:#f7f9fc;border:1px solid #dce3ea;border-radius:6px;
}
.pr-report .student-photo{
    width:92px;height:112px;object-fit:cover;
    border:3px solid #fff;outline:1px solid #cbd5e1;background:#e5e7eb;flex-shrink:0;
}
.pr-report .student-photo-placeholder{
    display:flex;align-items:center;justify-content:center;
    text-align:center;font-size:.7rem;color:#98a2b3;line-height:1.2;
}
.pr-report .student-information{
    flex:1;display:grid;grid-template-columns:1fr 1fr;
    align-content:center;gap:10px 20px;
}
.pr-report .student-item{font-size:13px;border-bottom:1px solid #e2e8f0;padding-bottom:7px}
.pr-report .student-item strong{display:inline-block;color:#003b70;margin-right:5px}

.pr-report .section{margin:18px 22px 0}
.pr-report .section-header{
    display:flex;align-items:center;justify-content:space-between;
    background:#003b70;color:#fff;padding:9px 12px;border-radius:4px 4px 0 0;
}
.pr-report .section-header h3{
    font-size:13px;letter-spacing:.5px;margin:0;
    text-transform:uppercase;font-weight:700;color:#fff;
}
.pr-report .section-header span{font-size:11px;opacity:.9;font-style:italic}

.pr-report .results-table{width:100%;border-collapse:collapse;font-size:12px}
.pr-report .results-table th{
    background:#eef3f8;color:#334155;font-weight:700;
    padding:9px 8px;border:1px solid #d7dee6;
    text-transform:uppercase;font-size:10.5px;letter-spacing:.3px;text-align:center;
}
.pr-report .results-table td{padding:9px 8px;border:1px solid #d7dee6}
.pr-report .results-table td:first-child{text-align:left}
.pr-report .results-table td:not(:first-child){text-align:center}
.pr-report .results-table tbody tr:nth-child(even){background:#fafbfd}
.pr-report .results-table .total-row{
    background:#e8f1fa !important;color:#003b70;font-weight:800;
}
.pr-report .results-table .total-row td{padding:10px 8px}

.pr-report .remark{font-weight:600}
.pr-report .excellent{color:#047857}
.pr-report .good{color:#2563eb}
.pr-report .fair{color:#b45309}
.pr-report .work{color:#c2410c}

.pr-report .comments{
    margin:20px 22px 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.pr-report .comment-card{border:1px solid #d7dee6;border-radius:5px;overflow:hidden}
.pr-report .comment-title{
    background:#f1f5f9;color:#003b70;font-weight:700;font-size:12px;
    padding:9px 11px;border-bottom:1px solid #d7dee6;
    text-transform:uppercase;letter-spacing:.04em;
}
.pr-report .comment-content{min-height:85px;padding:11px;font-size:12px;line-height:1.6}

.pr-report .grading{margin:20px 22px 0}
.pr-report .grading-title{
    color:#003b70;font-weight:800;font-size:13px;margin-bottom:8px;
    text-transform:uppercase;letter-spacing:.05em;
}
.pr-report .grading-table{width:100%;border-collapse:collapse;font-size:10px}
.pr-report .grading-table th{
    background:#003b70;color:#fff;padding:7px 5px;border:1px solid #003b70;
    text-transform:uppercase;letter-spacing:.05em;font-size:9.5px;
}
.pr-report .grading-table td{text-align:center;padding:6px 4px;border:1px solid #d7dee6}
.pr-report .grading-table tr:nth-child(even){background:#f8fafc}
.pr-report .grade{font-weight:bold;color:#003b70}

.pr-report .signatures{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;margin:25px 22px 20px;
}
.pr-report .signature{text-align:center;font-size:11px;color:#334155}
.pr-report .signature-line{border-top:1px solid #334155;margin-top:38px;padding-top:7px}

.pr-report .report-footer{
    border-top:1px solid #dce3ea;background:#f8fafc;text-align:center;
    padding:10px;font-size:9.5px;color:#64748b;
}
.pr-report .report-footer strong{color:#003b70}

/* =========================================================
   TEMPLATE 2 — Modern Multi-colour
   ========================================================= */
.pr-report.t2{
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
    color:#243447;background:#fff;border-radius:14px;overflow:hidden;
    border:1px solid #dbe5ec;box-shadow:0 12px 35px rgba(0,0,0,.12);
}
.pr-report.t2 .color-stripe{
    height:9px;
    background:linear-gradient(90deg,
        #1769aa 0%, #1769aa 25%,
        #f4b400 25%, #f4b400 50%,
        #16a085 50%, #16a085 75%,
        #e74c3c 75%, #e74c3c 100%);
}
.pr-report.t2 .school-header{
    display:flex;align-items:center;padding:22px 25px 20px;background:#fff;
}
.pr-report.t2 .school-logo{width:88px;height:88px;object-fit:contain;flex-shrink:0}
.pr-report.t2 .school-logo-placeholder{
    display:flex;align-items:center;justify-content:center;
    color:#98a2b3;font-size:.78rem;background:#f1f5f9;
    border:1px dashed #cbd5e1;border-radius:8px;
}
.pr-report.t2 .school-details{flex:1;text-align:center;padding:0 15px}
.pr-report.t2 .school-details h1{
    font-size:31px;color:#1769aa;font-weight:800;letter-spacing:.6px;margin:0 0 5px;
}
.pr-report.t2 .school-details .motto{
    color:#16a085;font-size:15px;font-weight:600;font-style:italic;margin-bottom:6px;
}
.pr-report.t2 .school-details p{color:#607080;font-size:12.5px;line-height:1.5;margin:0}

.pr-report.t2 .report-heading{
    background:linear-gradient(135deg,#1769aa,#248bd0);
    color:#fff;text-align:center;padding:17px;position:relative;
}
.pr-report.t2 .report-heading::after{
    content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
    border-left:10px solid transparent;border-right:10px solid transparent;
    border-top:8px solid #248bd0;
}
.pr-report.t2 .report-heading h2{
    font-size:23px;letter-spacing:1px;margin:0 0 5px;
    color:#fff !important;font-weight:800;text-transform:uppercase;
}
.pr-report.t2 .report-heading p{
    font-size:12px;margin:0;opacity:.95;color:#fff !important;
    text-transform:uppercase;letter-spacing:.05em;
}
.pr-report.t2 .report-heading-note{
    font-style:italic;text-transform:none !important;
    letter-spacing:0 !important;opacity:.85 !important;margin-top:4px !important;
}

.pr-report.t2 .student-profile{
    margin:25px 22px 18px;display:flex;gap:18px;padding:16px;
    background:linear-gradient(135deg,#f2f9ff,#f8fffd);
    border:2px solid #d8ebf7;border-radius:12px;
}
.pr-report.t2 .student-photo{
    width:94px;height:115px;object-fit:cover;border-radius:9px;
    border:4px solid white;box-shadow:0 3px 10px rgba(0,0,0,.12);
    background:#e7edf2;flex-shrink:0;
}
.pr-report.t2 .student-photo-placeholder{
    display:flex;align-items:center;justify-content:center;
    text-align:center;font-size:.72rem;color:#98a2b3;line-height:1.2;
}
.pr-report.t2 .student-information{
    flex:1;display:grid;grid-template-columns:1fr 1fr;
    align-content:center;gap:10px 18px;
}
.pr-report.t2 .student-item{
    padding:9px 11px;background:white;border-radius:7px;
    border-left:4px solid #1769aa;font-size:12.5px;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.pr-report.t2 .student-item:nth-child(2){border-left-color:#f4b400}
.pr-report.t2 .student-item:nth-child(3){border-left-color:#16a085}
.pr-report.t2 .student-item:nth-child(4){border-left-color:#e74c3c}
.pr-report.t2 .student-item strong{color:#40566d;margin-right:5px}

.pr-report.t2 .section{margin:18px 22px 0}
.pr-report.t2 .section-header{
    display:flex;align-items:center;justify-content:space-between;
    color:#fff;padding:11px 14px;border-radius:9px 9px 0 0;
}
.pr-report.t2 .section-header.mid{background:linear-gradient(135deg,#f39c12,#f4b400)}
.pr-report.t2 .section-header.end{background:linear-gradient(135deg,#16a085,#20b486)}
.pr-report.t2 .section-header h3{
    font-size:13px;letter-spacing:.5px;margin:0;
    text-transform:uppercase;font-weight:700;color:#fff;
}
.pr-report.t2 .section-header span{
    font-size:10.5px;background:rgba(255,255,255,.2);
    padding:4px 8px;border-radius:20px;font-style:normal;
}

.pr-report.t2 .results-table{width:100%;border-collapse:collapse;font-size:12px}
.pr-report.t2 .results-table th{
    padding:9px 8px;color:#425466;background:#f4f7fa;
    border:1px solid #dce4eb;font-size:10px;text-transform:uppercase;
    letter-spacing:.3px;text-align:center;font-weight:700;
}
.pr-report.t2 .results-table td{padding:9px 8px;border:1px solid #e0e6eb}
.pr-report.t2 .results-table td:first-child{text-align:left}
.pr-report.t2 .results-table td:not(:first-child){text-align:center}
.pr-report.t2 .mid-table tbody tr:nth-child(odd){background:#fffaf0}
.pr-report.t2 .end-table tbody tr:nth-child(odd){background:#f1fcf8}
.pr-report.t2 .mid-total{background:#fff0cc !important;color:#9a6500;font-weight:800}
.pr-report.t2 .end-total{background:#dff7ef !important;color:#08785f;font-weight:800}

.pr-report.t2 .grade{
    display:inline-block;min-width:31px;padding:4px 7px;
    border-radius:20px;font-weight:800;font-size:10px;
}
.pr-report.t2 .grade-d1{background:#dff7ea;color:#087a4b}
.pr-report.t2 .grade-d2{background:#e3f0ff;color:#1769aa}
.pr-report.t2 .grade-c3{background:#e9e4ff;color:#6546a5}
.pr-report.t2 .grade-c4{background:#fff0d2;color:#a76500}
.pr-report.t2 .grade-c5{background:#ffe6d9;color:#b54c19}
.pr-report.t2 .grade-c6{background:#ffe1e1;color:#b83232}

.pr-report.t2 .remark{font-weight:700}
.pr-report.t2 .distinction{color:#07804f}
.pr-report.t2 .credit{color:#1769aa}
.pr-report.t2 .fair{color:#b45309}
.pr-report.t2 .work{color:#b54c19}

.pr-report.t2 .comments{
    margin:22px;display:grid;grid-template-columns:1fr 1fr;gap:15px;
}
.pr-report.t2 .comment-card{border-radius:10px;overflow:hidden;border:1px solid #dce4eb}
.pr-report.t2 .comment-card.teacher{background:#fffaf0}
.pr-report.t2 .comment-card.dos{background:#f0fbf8}
.pr-report.t2 .comment-title{
    color:#fff;padding:9px 11px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;
}
.pr-report.t2 .teacher .comment-title{background:#f4b400}
.pr-report.t2 .dos .comment-title{background:#16a085}
.pr-report.t2 .comment-content{
    min-height:78px;padding:12px;font-size:12px;line-height:1.6;color:#455568;
}

.pr-report.t2 .grading{margin:20px 22px 0}
.pr-report.t2 .grading-heading{
    display:flex;align-items:center;gap:8px;color:#1769aa;
    font-size:13px;font-weight:800;margin-bottom:8px;
    text-transform:uppercase;letter-spacing:.05em;
}
.pr-report.t2 .grading-heading span{
    width:9px;height:9px;border-radius:50%;background:#f4b400;
}
.pr-report.t2 .grading-table{width:100%;border-collapse:collapse;font-size:10px}
.pr-report.t2 .grading-table th{
    background:#1769aa;color:#fff;padding:7px 5px;border:1px solid #1769aa;
    text-transform:uppercase;letter-spacing:.05em;font-size:9.5px;text-align:center;
}
.pr-report.t2 .grading-table td{padding:6px 4px;text-align:center;border:1px solid #dbe3ea}
.pr-report.t2 .grading-table tbody tr:nth-child(1){background:#f0fff7}
.pr-report.t2 .grading-table tbody tr:nth-child(2){background:#fffaf0}
.pr-report.t2 .grading-table tbody tr:nth-child(3){background:#fff4f4}
.pr-report.t2 .grade-code{font-weight:800;color:#1769aa}

.pr-report.t2 .signatures{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;margin:25px 22px 20px;
}
.pr-report.t2 .signature{text-align:center;font-size:11px;color:#526273}
.pr-report.t2 .signature-line{margin-top:37px;border-top:1px solid #506070;padding-top:7px}

.pr-report.t2 .footer{
    padding:11px;text-align:center;background:#f5f9fc;
    border-top:1px solid #dbe4eb;color:#718096;font-size:9.5px;
}
.pr-report.t2 .footer strong{color:#1769aa}

/* =========================================================
   REPORT TEMPLATE PICKER
   ========================================================= */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.tpl-card{
    background:#fff;border:1px solid #dfe6ee;border-radius:12px;
    padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;
    box-shadow:var(--shadow-sm);transition:border-color .15s, box-shadow .15s;
}
.tpl-card:hover{border-color:var(--blue-500);box-shadow:0 6px 24px rgba(10,22,51,.10)}
.tpl-card-active{border-color:var(--green);box-shadow:0 0 0 2px rgba(26,159,108,.15)}
.tpl-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.tpl-card-name{font-weight:700;color:var(--navy-900)}
.tpl-card-style{font-size:.78rem;color:var(--gray-600);display:flex;gap:.35rem;align-items:center;margin-top:.15rem}
.tpl-style-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.tpl-style-dot.style-t1{background:#003b70}
.tpl-style-dot.style-t2{
    background:linear-gradient(90deg,#1769aa 0 25%,#f4b400 25% 50%,#16a085 50% 75%,#e74c3c 75% 100%);
}
.tpl-card-desc{font-size:.85rem;color:var(--gray-600);margin:0}
.tpl-card-config{
    list-style:none;padding:0;margin:.2rem 0;
    display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;color:var(--gray-600);
}
.tpl-card-actions{
    display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;
    padding-top:.5rem;border-top:1px solid var(--gray-100);
}

/* =========================================================
   REPORT QR
   ========================================================= */
.school-logo-wrap {
    flex: 0 0 82px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.school-qr-wrap {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.report-qr { text-align: center; line-height: 1; }
.report-qr svg { display: block; width: 96px; height: 96px; }
.report-qr-caption {
    font-size: 8px; color: #64748b; margin-top: 2px;
    letter-spacing: .04em; text-transform: uppercase;
}
.school-header .school-details { flex: 1; text-align: center; padding: 0 10px; }
.pr-report.t2 .school-logo-wrap { flex: 0 0 88px; }
.pr-report.t2 .school-qr-wrap   { flex: 0 0 100px; }
.pr-report.t2 .report-qr svg    { width: 92px; height: 92px; }

.report-footer-wrapper { display: none; }
.footer-wrapper { display: none; }

/* ---------- Analytics bars ---------- */
.an-bar-wrap {
    position: relative; height: 18px; background: #eef2f7;
    border-radius: 4px; overflow: hidden;
}
.an-bar {
    height: 100%; background: linear-gradient(90deg, #2b8cff, #1a73e8);
    border-radius: 4px; transition: width .3s ease;
}
.an-bar-blue  { background: linear-gradient(90deg, #2b8cff, #1a73e8); }
.an-bar-green { background: linear-gradient(90deg, #20b486, #16a085); }
.an-bar-amber { background: linear-gradient(90deg, #f4b400, #e08b00); }
.an-bar-red   { background: linear-gradient(90deg, #e66868, #d64545); }
.an-bar-label {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 10px; font-weight: 700;
    color: #1d2939; pointer-events: none;
}

/* =========================================================
   Notification bell + dropdown
   ========================================================= */
.topbar-user { position: relative; }
.notif-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: var(--gray-600);
    transition: background .15s;
}
.notif-bell:hover { background: var(--gray-100); color: var(--navy-900); text-decoration: none; }
.notif-badge {
    position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
    font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}
.notif-badge.hidden { display: none; }
.notif-dropdown {
    position: absolute; top: 62px; right: 20px; width: 320px; max-height: 420px;
    overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 12px 40px rgba(10,22,51,.16); z-index: 50; padding: 6px 0;
}
.notif-dropdown.hidden { display: none; }
.notif-item {
    display: block; padding: 10px 14px; color: var(--gray-800);
    text-decoration: none; border-left: 3px solid transparent;
}
.notif-item:hover { background: var(--gray-50); text-decoration: none; }
.notif-item.notif-success { border-left-color: var(--green); }
.notif-item.notif-warning { border-left-color: var(--amber); }
.notif-item.notif-error   { border-left-color: var(--red); }
.notif-item.notif-info    { border-left-color: var(--blue-500); }
.notif-item-title { font-weight: 600; font-size: .88rem; }
.notif-item-message { font-size: .8rem; color: var(--gray-600); margin-top: 2px; line-height: 1.35; }
.notif-item-time { font-size: .72rem; color: var(--gray-400); margin-top: 4px; }
.notif-empty { padding: 18px; text-align: center; color: var(--gray-400); font-size: .85rem; }
.notif-view-all {
    display: block; text-align: center; padding: 8px; font-size: .82rem;
    font-weight: 600; color: var(--blue-600); border-top: 1px solid var(--gray-100); margin-top: 4px;
}
.notif-view-all:hover { background: var(--gray-50); text-decoration: none; }

.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.notif-list-item {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .8rem .9rem; border-radius: 8px; background: var(--gray-50);
    border-left: 4px solid var(--blue-500);
}
.notif-list-item.notif-list-success { border-left-color: var(--green); background: #eefaf5; }
.notif-list-item.notif-list-warning { border-left-color: var(--amber); background: #fffaf0; }
.notif-list-item.notif-list-error   { border-left-color: var(--red);   background: #fff5f5; }
.notif-list-item.notif-list-read    { opacity: .65; }
.notif-list-body { flex: 1; min-width: 0; }
.notif-list-title { font-weight: 700; font-size: .92rem; color: var(--navy-900); }
.notif-list-message { font-size: .84rem; color: var(--gray-600); margin-top: 2px; }
.notif-list-time { font-size: .72rem; color: var(--gray-400); margin-top: 4px; }
.notif-list-actions { display: flex; gap: .35rem; flex-shrink: 0; }

/* ---------- Profile ---------- */
.topbar-profile-link { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.topbar-profile-link:hover { text-decoration: none; }
.login-help {
    margin-top: 1rem; padding: .8rem 1rem; background: var(--gray-50);
    border-left: 3px solid var(--blue-500); border-radius: 6px;
    font-size: .82rem; color: var(--gray-600);
}
.login-help-title { font-weight: 700; color: var(--navy-900); margin-bottom: .3rem; }
.login-help ul { margin: 0; padding-left: 1rem; }
.login-help li { line-height: 1.5; }
.password-reset-panel {
    margin-top: 1rem; padding: 1rem; background: var(--gray-50);
    border-radius: 8px; border: 1px solid var(--gray-200);
}
.password-reset-panel h3 { margin-top: 0; }
.password-reset-panel .checkbox-row { font-size: .88rem; margin-bottom: .4rem; }

/* =========================================================
   Auth brand block
   ========================================================= */
.auth-brand { text-align: center; margin-bottom: 1.8rem; }
.auth-brand-logo {
    width: 88px; height: 88px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(43, 140, 255, 0.08), rgba(26, 115, 232, 0.12));
    padding: 8px; box-shadow: 0 4px 16px rgba(26, 115, 232, 0.15);
}
.auth-brand-logo img {
    display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 14px;
}
.auth-brand h1 {
    font-size: 1.55rem; font-weight: 800; color: var(--navy-900);
    letter-spacing: -0.02em; margin: 0 0 0.35rem;
}
.auth-tagline { color: var(--gray-600); font-size: 0.9rem; margin: 0; font-weight: 500; }
@media (max-width: 480px) {
    .auth-brand-logo { width: 72px; height: 72px; border-radius: 16px; }
    .auth-brand h1 { font-size: 1.35rem; }
    .auth-tagline { font-size: 0.85rem; }
}

/* =========================================================
   Student form — two-column desktop, stacked mobile
   ========================================================= */
.student-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1rem;
    align-items: start;
}
.student-form-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

@media (max-width: 900px) {
    .student-form-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (min-width: 901px) {
    .student-form-page .panel { padding: 1.2rem 1.4rem; }
    .student-form-grid { gap: .9rem; margin-bottom: .8rem; }
    .student-form-col { gap: .9rem; }
    .student-form-grid fieldset { padding: .7rem .9rem; gap: .55rem; }
    .student-form-grid fieldset legend { font-size: .8rem; padding: 0 .35rem; }
    .student-form-grid label { font-size: .82rem; gap: .25rem; }
    .student-form-grid input,
    .student-form-grid select { padding: .5rem .7rem; font-size: .9rem; }
    .student-form-grid .muted { font-size: .78rem; margin: -.3rem 0 .4rem; }
    .student-form .btn-block { padding: .65rem 1rem; font-size: .92rem; margin-top: .4rem; }
}

/* =========================================================
   Mobile layout — app shell collapses
   ========================================================= */
@media (max-width:760px){
    .app-shell{flex-direction:column}
    .sidebar{
        width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto;
    }
    .brand{
        padding:10px 12px;
        border-bottom:0;
        border-right:1px solid rgba(255,255,255,.06);
    }
    .brand-logo{
        width:28px;height:28px;
        min-width:28px;min-height:28px;
    }
    .brand-text{display:none}
    .nav{flex-direction:row;flex:1}
    .logout-form{margin:0}
    .topbar{padding:.8rem 1rem}
    .app-content{padding:1rem}

    .sidebar .nav-children{padding-left:0;margin-left:0;border-left:0}
    .sidebar .nav-children.open{max-height:500px}
}

@media (max-width:650px){
    .pr-report .school-header{flex-direction:column;text-align:center}
    .pr-report .school-logo{margin-bottom:8px}
    .pr-report .student-profile{flex-direction:column;align-items:center}
    .pr-report .student-information{width:100%;grid-template-columns:1fr}
    .pr-report .comments{grid-template-columns:1fr}
    .pr-report .signatures{grid-template-columns:1fr;gap:15px}
    .pr-report .grading{overflow-x:auto}

    .pr-report.t2 .school-header{flex-direction:column;text-align:center}
    .pr-report.t2 .school-logo{margin-bottom:10px}
    .pr-report.t2 .student-profile{flex-direction:column;align-items:center}
    .pr-report.t2 .student-information{width:100%;grid-template-columns:1fr}
    .pr-report.t2 .comments{grid-template-columns:1fr}
    .pr-report.t2 .signatures{grid-template-columns:1fr;gap:10px}
    .pr-report.t2 .section-header{flex-direction:column;gap:5px;align-items:flex-start}
}

/* =========================================================
   EduFlow · Mobile Layout — chrome for < 900px
   ========================================================= */
.m-header,
.m-bottom-nav,
.m-fab,
.m-sheet-backdrop,
.m-sheet,
.m-kpi-grid,
.m-quick-actions,
.m-activity-list,
.m-section-title { display: none; }

.mobile-only { display: none; }

@media (max-width: 900px) {

    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    .m-header {
        display: block;
        background: linear-gradient(325deg, var(--navy-900) 0%, #0707bd 100%);
        color: #fff;
        padding: 20px 20px 24px;
        border-radius: 0 0 25px 25px;
        margin: -1.6rem -1.6rem 1.2rem;
        box-shadow: 0 8px 24px rgba(10, 22, 51, 0.18);
    }
    .m-header .m-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .m-header .m-brand { display: flex; align-items: center; gap: 10px; }
    .m-header .m-brand-icon {
        width: 45px; height: 45px; border-radius: 12px; background: #fff;
        display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
    }
    .m-header .m-brand-icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
    .m-header .m-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
    .m-header .m-brand-text .school {
        font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
        text-transform: uppercase; opacity: 0.85;
    }
    .m-header .m-brand-text .app { font-size: 17px; font-weight: 800; }
    .m-header .m-bell {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none;
    }
    .m-header .m-bell svg { width: 20px; height: 20px; }
    .m-header .m-bell .m-bell-badge {
        position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
        padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
        font-size: 10px; font-weight: 700; display: grid; place-items: center;
        line-height: 1; box-shadow: 0 0 0 2px var(--navy-900);
    }
    .m-header .m-bell .m-bell-badge.hidden { display: none; }
    .m-header .m-term-box {
        margin-top: 18px; background: rgba(255, 255, 255, 0.12);
        padding: 14px 16px; border-radius: 14px;
    }
    .m-header .m-term-box .term { font-size: 13px; opacity: 0.85; margin: 0; }
    .m-header .m-term-box .year { font-size: 22px; font-weight: 800; margin-top: 4px; line-height: 1.15; }
    .m-header .m-sub {
        margin-top: 10px; font-size: 12px; opacity: 0.85;
        display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .m-header .m-sub .badge { font-size: 10px; padding: 2px 8px; }

    .m-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 1.4rem; }
    .m-kpi {
        background: var(--white); border-radius: 18px; padding: 16px 18px;
        box-shadow: 0 8px 20px rgba(10, 22, 51, 0.05);
        border-left: 5px solid var(--blue-500);
    }
    .m-kpi.tone-green  { border-left-color: var(--green); }
    .m-kpi.tone-amber  { border-left-color: var(--amber); }
    .m-kpi.tone-red    { border-left-color: var(--red); }
    .m-kpi .m-kpi-label { color: var(--gray-600); font-size: 12px; font-weight: 500; margin: 0; }
    .m-kpi .m-kpi-value {
        font-size: 26px; font-weight: 800; color: var(--navy-900);
        margin-top: 6px; line-height: 1; font-variant-numeric: tabular-nums;
    }

    .m-section-title { font-size: 16px; font-weight: 700; color: var(--navy-900); margin: 0 0 0.8rem; }

    .m-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 1.6rem; }
    .m-action {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 8px; padding: 20px 12px; background: var(--white);
        border-radius: 18px; box-shadow: 0 8px 20px rgba(10, 22, 51, 0.05);
        text-decoration: none; color: var(--text);
        transition: transform 0.12s, box-shadow 0.12s;
        -webkit-tap-highlight-color: transparent;
    }
    .m-action:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(10, 22, 51, 0.08); }
    .m-action svg { width: 28px; height: 28px; color: var(--blue-600); flex-shrink: 0; }
    .m-action .m-action-label { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; }

    .m-activity-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.6rem; }
    .m-activity {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 14px 16px; background: var(--white); border-radius: 14px;
        box-shadow: 0 4px 12px rgba(10, 22, 51, 0.05);
    }
    .m-activity .m-act-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .m-activity .m-act-title { font-size: 14px; font-weight: 600; color: var(--navy-900); }
    .m-activity .m-act-sub { font-size: 12px; color: var(--gray-600); }
    .m-activity .m-act-time { font-size: 11px; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }

    .m-fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); right: 20px;
        width: 56px; height: 56px; border-radius: 50%; border: none;
        background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
        color: #fff; cursor: pointer; box-shadow: 0 10px 28px rgba(37, 99, 235, 0.42);
        z-index: 90; transition: transform 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .m-fab:active { transform: scale(0.94); }
    .m-fab svg { width: 24px; height: 24px; }

    .m-sheet-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(15, 23, 42, 0); opacity: 0; visibility: hidden;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s; z-index: 150;
    }
    .m-sheet-backdrop.open {
        opacity: 1; visibility: visible;
        transition: opacity 0.25s ease, visibility 0s linear 0s;
        background: rgba(15, 23, 42, 0.5);
    }
    .m-sheet {
        display: flex; flex-direction: column; position: fixed;
        left: 0; right: 0; bottom: 0; max-height: 70vh;
        background: var(--white); border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 32px rgba(15, 32, 68, 0.25);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 200;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        overflow: hidden;
    }
    .m-sheet.open { transform: translateY(0); }
    .m-sheet .m-sheet-handle {
        width: 40px; height: 4px; background: var(--gray-200);
        border-radius: 2px; margin: 10px auto 8px; flex-shrink: 0;
    }
    .m-sheet .m-sheet-title {
        padding: 4px 22px 12px; font-size: 12px; font-weight: 700; color: var(--gray-600);
        text-transform: uppercase; letter-spacing: 0.6px;
        border-bottom: 1px solid var(--gray-100); flex-shrink: 0;
    }
    .m-sheet .m-sheet-body { padding: 6px 0 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .m-sheet-item {
        display: flex; align-items: center; gap: 14px; padding: 14px 22px;
        color: var(--text); text-decoration: none; background: transparent; border: none;
        font-family: inherit; font-size: 15px; font-weight: 500;
        width: 100%; text-align: left; cursor: pointer; transition: background 0.1s;
        -webkit-tap-highlight-color: transparent;
    }
    .m-sheet-item:active { background: var(--gray-50); }
    .m-sheet-item svg { width: 22px; height: 22px; color: var(--blue-600); flex-shrink: 0; }

    .m-bottom-nav {
        display: flex; align-items: stretch; position: fixed;
        left: 0; right: 0; bottom: 0;
        height: calc(72px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(290deg, var(--navy-900) 0%, #0707bd 100%);
        box-shadow: 0 -2px 12px rgba(15, 32, 68, 0.18);
        z-index: 100; transform: translateZ(0);
    }
    .m-bn-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 8px 4px; color: rgba(255, 255, 255, 0.78);
        text-decoration: none; background: transparent; border: none;
        font-family: inherit; font-size: 10.5px; font-weight: 500;
        cursor: pointer; position: relative; border-radius: 10px; margin: 6px 4px;
        transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .m-bn-item:active { background: rgba(255, 255, 255, 0.12); }
    .m-bn-item svg { width: 22px; height: 22px; stroke: currentColor; color: inherit; flex-shrink: 0; }
    .m-bn-item span {
        line-height: 1; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; max-width: 100%; padding: 0 2px; color: inherit;
    }
    .m-bn-item.active { color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.18); }
    .m-bn-item.active svg { transform: scale(1.06); }
    .m-bn-badge {
        position: absolute; top: 4px; right: calc(50% - 16px);
        min-width: 16px; height: 16px; padding: 0 4px; background: #fff; color: var(--blue-600);
        border-radius: 8px; font-size: 10px; font-weight: 700;
        display: grid; place-items: center; line-height: 1;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    body .sidebar { display: none !important; }
    body .topbar  { display: none !important; }
    .app-shell { display: block; }
    .app-main  { display: block; }
    .app-content { padding: 1.2rem; }
    .panel { border-radius: 16px; padding: 1.1rem; }
    .no-mobile { display: none !important; }
    .mobile-only { display: block; }
}

@media (max-width: 380px) {
    .m-kpi .m-kpi-value { font-size: 22px; }
    .m-action { padding: 16px 8px; }
    .m-action .m-action-label { font-size: 12px; }
}

.m-sheet .m-sheet-group-title {
    padding: 14px 22px 6px; font-size: 10.5px; font-weight: 700;
    color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.8px;
}
.m-sheet-item-active { background: var(--blue-100) !important; color: var(--blue-600) !important; font-weight: 600; }
.m-sheet-item-active svg { color: var(--blue-600) !important; }
.m-sheet-item-danger { color: var(--red) !important; font-weight: 600; }
.m-sheet-item-danger svg { color: var(--red) !important; }
.m-sheet-item-danger:active { background: #fde8e8 !important; }

.btn-block { display: block; width: 100%; }

/* =========================================================
   Public / auth pages — mobile safety net
   ========================================================= */
@media (max-width: 760px) {
    .auth-body { padding: 1rem; align-items: flex-start; padding-top: 1.5rem; }
    .auth-wrapper,
    .public-wrap { width: 100%; max-width: 100%; padding: 0; }
    .public-form { padding: 1.1rem; border-radius: 12px; }
    .public-form fieldset { padding: .85rem; }
    .public-header h1 { font-size: 1.25rem; }
    .public-header p { font-size: .85rem; padding: 0 .25rem; }
    .public-form input,
    .public-form textarea,
    .public-form select { font-size: 16px; width: 100%; }
}

/* Kill horizontal overflow on any page */
html, body { overflow-x: hidden; max-width: 100%; }

/* =========================================================
   Desktop layout — fixed sidebar, scrollable content
   ONE block. No more fighting overrides.
   ========================================================= */
@media (min-width: 901px) {

    html, body {
        height: 100%;
        overflow: hidden;
    }

    .app-shell {
        height: 100vh;
        overflow: hidden;
    }

    .app-main {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .topbar { flex: 0 0 auto; }

    .app-content {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        padding: 1rem 1.25rem 1rem .5rem;  /* top right bottom LEFT */
    }

    /* Square the left corners of the top panel so it looks flush
       against the fixed sidebar */
    .app-content > .panel:first-child,
    .app-content > .sf-page:first-child > .panel {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-top: 0;
    }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
    html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

    .sidebar, .topbar, .filters, .flash, .no-print,
    nav, header.topbar, aside.sidebar, form.filters, .quick-links,
    button, .btn-sm, .btn-primary { display: none !important; }

    .m-header, .m-bottom-nav, .m-fab, .m-sheet, .m-sheet-backdrop,
    .m-kpi-grid, .m-quick-actions, .m-activity-list, .m-section-title { display: none !important; }

    .app-shell, .app-main, .app-content {
        display: block !important; padding: 0 !important; margin: 0 !important;
        width: 100% !important; max-width: 100% !important;
    }

    body { padding-bottom: 0 !important; }
    .print-wrapper { padding: 0 !important; }
    .print-toolbar { display: none !important; }

    /* Assessment Report (.car) — 2 per A4 landscape */
    .report-sheet { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 6mm; row-gap: 8mm; width: 100%; }
    .car {
        page-break-inside: avoid; break-inside: avoid;
        border: 1px solid #cbd5e1; border-radius: 3px;
        padding: 6mm 6mm 4mm 6mm; margin: 0; max-width: none; width: auto; font-size: 92%;
    }
    .car-banner, .car-table thead th, .car-table tfoot td,
    .car-info-cell, .car-section-body, .car-logo img {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .car-banner { background: #0a1633 !important; color: #fff !important; }
    .car-table thead th { background: #0a1633 !important; color: #fff !important; }
    .car-info-cell { background: #fff !important; }
    .car-table tbody tr:nth-child(odd) td { background: #f4f7fb !important; }

    /* Progress Report (.pr-report) — 1 per A4 portrait */
    .progress-sheet { display: block !important; }
    .pr-report {
        page-break-after: always; page-break-inside: avoid; break-inside: avoid;
        border: 1px solid #999; box-shadow: none; width: 100%; max-width: none;
        margin: 0; border-radius: 0; max-height: 275mm; overflow: hidden;
    }
    .pr-report:last-child { page-break-after: auto; }

    .pr-report .school-header { padding: 14px 20px 12px; }
    .pr-report .school-logo { width: 64px; height: 64px; }
    .pr-report .school-details h1 { font-size: 22px; margin: 0 0 2px; }
    .pr-report .school-details .motto { font-size: 11.5px; margin-bottom: 2px; }
    .pr-report .school-details p { font-size: 10.5px; line-height: 1.35; }
    .pr-report .report-heading { padding: 8px 12px; }
    .pr-report .report-heading h2 { font-size: 15px; letter-spacing: .6px; margin: 0 0 2px; }
    .pr-report .report-heading p { font-size: 9.5px; }
    .pr-report .student-profile { margin: 10px 18px; padding: 10px; gap: 12px; }
    .pr-report .student-photo { width: 68px; height: 84px; }
    .pr-report .student-item { font-size: 11px; padding-bottom: 4px; }
    .pr-report .student-item strong { font-size: 11px; }
    .pr-report .section { margin: 12px 18px 0; }
    .pr-report .section-header { padding: 6px 10px; }
    .pr-report .section-header h3 { font-size: 11px; }
    .pr-report .section-header span { font-size: 9.5px; }
    .pr-report .results-table { font-size: 10.5px; }
    .pr-report .results-table th { padding: 5px 6px; font-size: 9px; }
    .pr-report .results-table td { padding: 5px 6px; }
    .pr-report .results-table .total-row td { padding: 6px; }
    .pr-report .comments { margin: 12px 18px 0; gap: 10px; }
    .pr-report .comment-title { font-size: 10px; padding: 6px 9px; }
    .pr-report .comment-content { min-height: 60px; padding: 8px 9px; font-size: 10.5px; line-height: 1.4; }
    .pr-report .grading { margin: 12px 18px 0; }
    .pr-report .grading-title { font-size: 11px; margin-bottom: 5px; }
    .pr-report .grading-table { font-size: 8.5px; }
    .pr-report .grading-table th { padding: 4px 4px; }
    .pr-report .grading-table td { padding: 3px 4px; }
    .pr-report .signatures { margin: 14px 18px 10px; gap: 20px; }
    .pr-report .signature { font-size: 9.5px; }
    .pr-report .signature-line { margin-top: 22px; padding-top: 5px; }
    .pr-report .report-footer { padding: 6px 10px; font-size: 8.5px; }

    .pr-report .school-logo,
    .pr-report .student-photo,
    .pr-report .report-heading,
    .pr-report .section-header,
    .pr-report .results-table .total-row,
    .pr-report .grading-table th,
    .pr-report .comment-title,
    .pr-report .report-footer,
    .pr-report.t2 .color-stripe,
    .pr-report.t2 .grade,
    .pr-report.t2 .mid-total,
    .pr-report.t2 .end-total,
    .pr-report.t2 .grade-d1, .pr-report.t2 .grade-d2,
    .pr-report.t2 .grade-c3, .pr-report.t2 .grade-c4,
    .pr-report.t2 .grade-c5, .pr-report.t2 .grade-c6,
    .pr-report.t2 .footer,
    .report-qr svg {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pr-report:not(.t2) .report-heading,
    .pr-report:not(.t2) .section-header { background: #003b70 !important; color: #fff !important; }
    .pr-report:not(.t2) .results-table .total-row { background: #e8f1fa !important; color: #003b70 !important; }
    .pr-report:not(.t2) .grading-table th { background: #003b70 !important; color: #fff !important; }
    .pr-report:not(.t2) .report-footer { background: #f8fafc !important; }

    .pr-report.t2 .color-stripe {
        height: 6px;
        background: linear-gradient(90deg,
            #1769aa 0%, #1769aa 25%,
            #f4b400 25%, #f4b400 50%,
            #16a085 50%, #16a085 75%,
            #e74c3c 75%, #e74c3c 100%) !important;
    }
    .pr-report.t2 .report-heading { background: linear-gradient(135deg, #1769aa, #248bd0) !important; color: #fff !important; }
    .pr-report.t2 .section-header.mid { background: linear-gradient(135deg, #f39c12, #f4b400) !important; }
    .pr-report.t2 .section-header.end { background: linear-gradient(135deg, #16a085, #20b486) !important; }
    .pr-report.t2 .grading-table th { background: #1769aa !important; color: #fff !important; }
    .pr-report.t2 .mid-total { background: #fff0cc !important; color: #9a6500 !important; }
    .pr-report.t2 .end-total { background: #dff7ef !important; color: #08785f !important; }
    .pr-report.t2 .footer { background: #f5f9fc !important; }

    .pr-report.t2 .school-header { padding: 14px 20px 12px; }
    .pr-report.t2 .school-logo { width: 64px; height: 64px; }
    .pr-report.t2 .school-details h1 { font-size: 22px; margin: 0 0 2px; }
    .pr-report.t2 .school-details .motto { font-size: 11.5px; margin-bottom: 2px; }
    .pr-report.t2 .school-details p { font-size: 10.5px; line-height: 1.35; }
    .pr-report.t2 .report-heading { padding: 10px 12px; }
    .pr-report.t2 .report-heading h2 { font-size: 15px; margin: 0 0 2px; }
    .pr-report.t2 .report-heading p { font-size: 9.5px; }
    .pr-report.t2 .student-profile { margin: 12px 18px; padding: 10px; gap: 12px; }
    .pr-report.t2 .student-photo { width: 70px; height: 88px; border-width: 2px; }
    .pr-report.t2 .student-item { font-size: 11px; padding: 5px 8px; }
    .pr-report.t2 .section { margin: 12px 18px 0; }
    .pr-report.t2 .section-header { padding: 7px 10px; }
    .pr-report.t2 .section-header h3 { font-size: 11px; }
    .pr-report.t2 .section-header span { font-size: 9px; padding: 2px 6px; }
    .pr-report.t2 .results-table { font-size: 10.5px; }
    .pr-report.t2 .results-table th { padding: 5px 6px; font-size: 9px; }
    .pr-report.t2 .results-table td { padding: 5px 6px; }
    .pr-report.t2 .comments { margin: 14px 18px 0; gap: 10px; }
    .pr-report.t2 .comment-title { font-size: 9.5px; padding: 5px 9px; }
    .pr-report.t2 .comment-content { min-height: 50px; padding: 8px 9px; font-size: 10.5px; line-height: 1.35; }
    .pr-report.t2 .grading { margin: 12px 18px 0; }
    .pr-report.t2 .grading-heading { font-size: 11px; margin-bottom: 4px; }
    .pr-report.t2 .grading-table { font-size: 8.5px; }
    .pr-report.t2 .grading-table th { padding: 4px 4px; }
    .pr-report.t2 .grading-table td { padding: 3px 4px; }
    .pr-report.t2 .signatures { margin: 14px 18px 10px; gap: 20px; }
    .pr-report.t2 .signature { font-size: 9.5px; }
    .pr-report.t2 .signature-line { margin-top: 22px; padding-top: 5px; }
    .pr-report.t2 .footer { padding: 6px 10px; font-size: 8.5px; }
}

/* Auth pages — scroll when the form is taller than the viewport */
.auth-body {
    min-height: 100vh;
    padding: 2rem 1rem;
    overflow-y: auto;
}

@media (max-width: 760px) {
    .auth-body {
        align-items: flex-start;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}