:root{
    --navy:#10213d;
    --navy-2:#18345f;
    --blue:#0866c6;
    --blue-dark:#07529e;
    --yellow:#f4c400;
    --ink:#172033;
    --muted:#667085;
    --line:#dfe6ef;
    --surface:#ffffff;
    --surface-soft:#f6f8fb;
    --success:#16835d;
    --success-soft:#eaf8f2;
    --warning:#a96300;
    --warning-soft:#fff7e6;
    --danger:#c43d45;
    --danger-soft:#fff0f1;
    --shadow:0 18px 45px rgba(16,33,61,.10);
}

*{box-sizing:border-box}

html{color-scheme:light}

body{
    margin:0;
    min-height:100vh;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(8,102,198,.09), transparent 28rem),
        linear-gradient(180deg,#f7f9fc 0%,#edf2f7 100%);
}

a{color:inherit}

.page-shell{
    width:min(1460px,calc(100% - 32px));
    margin:26px auto;
}

.page-shell.narrow{width:min(1040px,calc(100% - 32px))}

.panel{
    overflow:hidden;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(214,223,234,.9);
    border-radius:22px;
    box-shadow:var(--shadow);
}

.app-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:28px 30px 24px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(135deg,#fff 0%,#f5f9ff 100%);
}

.brand{display:flex;align-items:flex-start;gap:15px}

.brand-mark{
    display:grid;
    place-items:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(145deg,var(--blue),var(--navy));
    box-shadow:0 10px 22px rgba(8,102,198,.25);
    font-size:24px;
}

.eyebrow{
    margin:0 0 4px;
    color:var(--blue);
    font-size:12px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.page-title{
    margin:0;
    color:var(--navy);
    font-size:clamp(27px,3vw,40px);
    line-height:1.08;
    letter-spacing:-.035em;
}

.page-subtitle{
    margin:8px 0 0;
    max-width:730px;
    color:var(--muted);
    font-size:15px;
    line-height:1.5;
}

.nav-actions,.button-row,.row-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.btn{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:10px 15px;
    border:1px solid transparent;
    border-radius:11px;
    font:inherit;
    font-size:14px;
    font-weight:750;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid rgba(8,102,198,.22);outline-offset:2px}
.btn-primary{color:#fff;background:var(--blue);box-shadow:0 7px 16px rgba(8,102,198,.18)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-dark{color:#fff;background:var(--navy)}
.btn-dark:hover{background:var(--navy-2)}
.btn-light{color:var(--navy);background:#fff;border-color:var(--line)}
.btn-light:hover{background:#f4f7fb}
.btn-warning{color:#533f00;background:var(--yellow)}
.btn-danger{color:#fff;background:var(--danger)}
.btn-small{min-height:34px;padding:7px 10px;border-radius:9px;font-size:12px}

.content{padding:26px 30px 32px}

.alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:20px;
    padding:13px 15px;
    border:1px solid;
    border-radius:12px;
    font-size:14px;
    line-height:1.45;
}

.alert-success{color:#0d6849;background:var(--success-soft);border-color:#bcebd9}
.alert-warning{color:#744900;background:var(--warning-soft);border-color:#f2d39b}
.alert-danger{color:#92262d;background:var(--danger-soft);border-color:#f3c5c8}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
}

.stat-card{
    padding:17px 18px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface-soft);
}

.stat-label{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.stat-value{margin-top:5px;color:var(--navy);font-size:28px;font-weight:850;line-height:1}
.stat-card.pending{background:var(--warning-soft);border-color:#f1d69f}
.stat-card.reviewed{background:var(--success-soft);border-color:#bfe7d8}

.toolbar{
    display:grid;
    grid-template-columns:200px minmax(220px,1fr) 180px auto;
    gap:11px;
    align-items:end;
    margin-bottom:20px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface-soft);
}

.toolbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

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

.field{min-width:0}
.field-full{grid-column:1/-1}

label,.field-label{
    display:block;
    margin:0 0 7px;
    color:var(--navy);
    font-size:13px;
    font-weight:800;
}

input,select,textarea{
    width:100%;
    min-height:46px;
    padding:11px 13px;
    border:1px solid #cbd6e3;
    border-radius:11px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:15px;
    outline:none;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

input:focus,select:focus,textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(8,102,198,.11);
}

input[readonly]{color:#475467;background:#f5f7fa}
textarea{min-height:125px;resize:vertical;line-height:1.5}

.search-wrap{position:relative}
.search-wrap::before{
    content:"⌕";
    position:absolute;
    z-index:1;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--blue);
    font-size:22px;
    font-weight:900;
}
.search-wrap input{padding-left:43px}

.schedule-select{
    min-height:255px;
    padding:7px;
    background:linear-gradient(180deg,#fff,#fbfcfe);
}

.schedule-select option{padding:10px 11px;border-radius:7px;line-height:1.4}
.schedule-select option:checked{color:#fff;background:linear-gradient(90deg,var(--blue),var(--blue))}

.helper{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.45}

.selection-card{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:center;
    min-height:72px;
    padding:14px 16px;
    border:1px solid #b9d6f4;
    border-radius:14px;
    background:#f1f7fe;
}

.selection-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:12px;
    color:#fff;
    background:var(--blue);
    font-weight:900;
}

.selection-name{color:var(--navy);font-size:15px;font-weight:850}
.selection-meta{margin-top:3px;color:var(--muted);font-size:13px}

.section-title{margin:0 0 15px;color:var(--navy);font-size:19px}
.section-box{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.section-box + .section-box{margin-top:18px}

.table-shell{overflow:auto;border:1px solid var(--line);border-radius:15px;background:#fff}
.data-table{width:100%;min-width:1100px;border-collapse:separate;border-spacing:0}
.data-table th{
    position:sticky;
    top:0;
    z-index:1;
    padding:12px 11px;
    border-bottom:1px solid var(--line);
    color:#344054;
    background:#f4f7fb;
    font-size:11px;
    font-weight:850;
    letter-spacing:.035em;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}
.data-table td{
    padding:13px 11px;
    border-bottom:1px solid #edf1f5;
    font-size:13px;
    line-height:1.42;
    vertical-align:top;
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#f8fbff}
.data-table tbody tr.is-reviewed{background:#f0faf6}
.data-table tbody tr.is-reviewed:hover{background:#e8f7f1}

.teacher-name{min-width:175px;color:var(--navy);font-weight:800}
.observations{min-width:220px;max-width:330px;color:#475467}
.nowrap{white-space:nowrap}

.badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}
.badge-blue{color:#07529e;background:#e9f3fe}
.badge-success{color:#0c6d4c;background:#dff5ec}
.badge-warning{color:#7c4a00;background:#fff0ce}
.badge-gray{color:#4b5565;background:#edf0f4}

.review-form{display:flex;align-items:center;justify-content:center}
.review-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.review-toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.review-box{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border:2px solid #aab7c7;
    border-radius:9px;
    background:#fff;
    color:transparent;
    font-size:18px;
    font-weight:900;
    transition:.15s ease;
}
.review-toggle input:checked + .review-box{color:#fff;border-color:var(--success);background:var(--success)}
.review-toggle input:focus-visible + .review-box{outline:3px solid rgba(8,102,198,.2);outline-offset:2px}

.actions-heading,
.actions-cell{
    width:196px;
    min-width:196px;
    text-align:center!important;
}

.action-bar{
    display:inline-flex;
    align-items:stretch;
    overflow:hidden;
    white-space:nowrap;
    border:1px solid #d4dde8;
    border-radius:10px;
    background:#fff;
    box-shadow:0 3px 10px rgba(16,33,61,.07);
}

.action-form{
    display:flex;
    margin:0;
}

.action-btn{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    min-height:35px;
    padding:8px 10px;
    border:0;
    border-right:1px solid #e1e7ef;
    border-radius:0;
    background:#fff;
    font:inherit;
    font-size:11px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}

.action-view{color:var(--navy)}
.action-view:hover{color:#fff;background:var(--navy)}
.action-edit{color:var(--blue)}
.action-edit:hover{color:#fff;background:var(--blue)}
.action-delete{color:var(--danger);border-right:0}
.action-delete:hover{color:#fff;background:var(--danger)}
.action-btn:focus-visible{position:relative;z-index:1;outline:3px solid rgba(8,102,198,.24);outline-offset:-3px}

.empty-state{
    padding:34px 20px;
    border:1px dashed #b9c6d5;
    border-radius:15px;
    color:var(--muted);
    background:#f8fafc;
    text-align:center;
}

.pagination-note{margin:11px 2px 0;color:var(--muted);font-size:12px}
.stack{display:grid;gap:18px}
.checkbox-line{display:flex;align-items:center;gap:9px;min-height:46px}
.checkbox-line input{width:18px;min-height:18px;height:18px}
.checkbox-line label{margin:0}

@media (max-width:1050px){
    .toolbar{grid-template-columns:1fr 1fr}
    .app-header{align-items:stretch;flex-direction:column}
}

@media (max-width:720px){
    .page-shell,.page-shell.narrow{width:min(100% - 16px,100%);margin:8px auto}
    .panel{border-radius:16px}
    .app-header{padding:20px 18px}
    .content{padding:20px 18px 24px}
    .brand-mark{width:42px;height:42px;flex-basis:42px;border-radius:12px}
    .form-grid,.toolbar,.stats-grid{grid-template-columns:1fr}
    .nav-actions,.button-row{width:100%}
    .nav-actions .btn,.button-row .btn{flex:1 1 150px}
    .schedule-select{min-height:225px}
    .table-shell{margin-inline:-18px;border-left:0;border-right:0;border-radius:0}
}

@media print{
    body{background:#fff}
    .page-shell,.page-shell.narrow{width:100%;margin:0}
    .panel{border:0;border-radius:0;box-shadow:none}
    .app-header{padding:0 0 16px;border-bottom:1px solid #bbb;background:#fff}
    .content{padding:16px 0 0}
    .no-print,.row-actions,.review-form{display:none!important}
    .table-shell{overflow:visible;border:0}
    .data-table{min-width:0}
    .data-table th{position:static;background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}