:root{--bg:#f4f7fb;--card:#fff;--ink:#172033;--muted:#6b7280;--primary:#123c69;--accent:#d4af37;--danger:#c0392b;--ok:#1e8449;--line:#edf0f5}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Tahoma,Arial,sans-serif;color:var(--ink)}.hidden{display:none!important}.login-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#123c69,#0b2239)}.card{background:var(--card);border-radius:18px;box-shadow:0 12px 35px #0002;padding:22px;margin:16px}.login-card{width:min(420px,92vw);text-align:center}.login-card input,.card input,.card select{width:100%;padding:12px;border:1px solid #d9e0ea;border-radius:12px;margin:8px 0;background:#fff}button{border:0;border-radius:12px;background:var(--primary);color:white;padding:11px 18px;cursor:pointer;font-weight:700;margin:4px;white-space:nowrap}button:hover{filter:brightness(1.08)}button.danger{background:var(--danger)}button.secondary{background:#637083}header{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:16px 24px;border-bottom:4px solid var(--accent)}h1,h2,h3{margin:0 0 10px}nav{padding:10px 20px;background:#e9eef6;position:sticky;top:0;z-index:5}main{padding:12px}.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.kpi{background:#fff;border-radius:18px;padding:18px;border-right:6px solid var(--primary);box-shadow:0 8px 22px #0001}.kpi b{font-size:30px;display:block}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.grid.compact{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.filters{background:#f8fafc;border:1px solid var(--line);padding:12px;border-radius:16px;margin:12px 0}.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}.chartbox{background:#fff;border-radius:18px;padding:15px;min-height:330px;box-shadow:0 8px 22px #0001}.table-wrap{width:100%;overflow:auto;max-height:65vh;border-radius:14px;border:1px solid var(--line);background:#fff}.small-table{max-height:320px;margin-top:10px}table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;min-width:900px}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:center;font-size:13px;vertical-align:middle}th{background:var(--primary);color:#fff;position:sticky;top:0;z-index:2}tr:last-child td{border-bottom:0}.risk{background:#ffe5e5}.warn{background:#fff4cc}.good{background:#e8f6ef}.muted{color:var(--muted)}.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tag{display:inline-block;border-radius:999px;padding:4px 10px;background:#eef2f7}.small{font-size:12px}.notice{background:#fff8df;border-right:5px solid var(--accent);border-radius:12px;padding:10px;margin:8px 0;color:#5d4b06}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px}.inline-form{display:flex;gap:8px;align-items:center}.inline-form input{flex:1}.result-box{margin-top:14px}hr{border:0;border-top:1px solid var(--line);margin:18px 0}@media(max-width:700px){header{display:block}nav button{width:100%;margin:4px 0}.card{margin:10px;padding:14px}.settings-grid{grid-template-columns:1fr}table{min-width:760px}}


/* v5 layout fixes: prevent table headers from floating over other tables */
.section-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin:18px 0 24px;box-shadow:0 4px 14px #0000000a;clear:both}
.section-panel h3{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.table-wrap{position:relative;margin:14px 0 24px;clear:both;overflow-x:auto;overflow-y:auto}
.table-wrap table{border-collapse:collapse;border-spacing:0}
.table-wrap th{position:static!important;top:auto!important;z-index:auto!important}
.table-wrap td,.table-wrap th{height:auto;line-height:1.6}
.small-table{max-height:none;overflow-y:visible}
.settings-grid{grid-template-columns:1fr;gap:20px}
.inline-form{align-items:stretch;flex-wrap:wrap}
.inline-form input{min-width:260px}
.grid.compact{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end;margin-bottom:8px}
.result-box h3{margin:18px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
@media(min-width:1200px){.settings-grid.two-cols{grid-template-columns:1fr 1fr}}

/* v7 course page fixes */
.compact-kpis{grid-template-columns:repeat(auto-fit,minmax(180px,260px));margin:12px 0 16px}
#courses .table-wrap tbody tr{background:#fff!important}
#courses .table-wrap tbody tr td{background:#fff!important}

/* v12 modern dashboard redesign */
#dashboard{padding:0;background:#f4f7fb}
.dash-shell{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:calc(100vh - 135px);direction:rtl;border-radius:20px;overflow:hidden;box-shadow:0 10px 35px #0f172a12;background:#fff}
.dash-side{background:linear-gradient(180deg,#062848,#0b3a62 55%,#06233d);color:#fff;padding:18px 14px;display:flex;flex-direction:column;gap:10px}
.dash-user{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid #ffffff22;margin-bottom:8px}.dash-user .avatar{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#ffffff22;border:2px solid #ffffff55;font-weight:800;font-size:22px}.dash-user b{display:block}.dash-user span{font-size:12px;color:#d8e7f8}.dash-menu-title{font-size:12px;color:#b8cde2;margin:8px 10px}.dash-side button{width:100%;text-align:right;background:transparent;border-radius:12px;padding:12px 14px;margin:0;color:#e8f1fb}.dash-side button:hover,.dash-side button.active{background:#0d65be;color:#fff}.dash-filter-panel{margin-top:auto;background:#ffffff0f;border:1px solid #ffffff18;border-radius:16px;padding:14px}.dash-filter-panel h4{margin:0 0 10px}.dash-filter-panel label{display:block;font-size:12px;color:#d8e7f8;margin-top:9px}.dash-filter-panel select{width:100%;border:1px solid #315f86;background:#0a3155;color:#fff;border-radius:10px;padding:10px;margin-top:5px}
.dash-main{padding:22px;background:#f6f8fc;min-width:0}.dash-topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e7edf5;border-radius:18px;padding:18px 22px;margin-bottom:18px;box-shadow:0 8px 20px #0f172a08}.dash-topbar h2{margin:0;text-align:center}.brand{text-align:left;color:#0f172a}.brand b{display:block}.brand span{font-size:12px;color:#64748b}.dash-empty{background:#fff;border:1px dashed #cbd5e1;border-radius:18px;padding:40px;text-align:center;color:#64748b}
.dash-metrics-row{display:grid;grid-template-columns:repeat(5,minmax(160px,1fr));gap:14px;margin-bottom:16px}.dash-metric{background:#fff;border:1px solid #e7edf5;border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 8px 20px #0f172a08;min-height:118px}.dash-metric span{display:block;color:#24506e;font-weight:700;font-size:14px}.dash-metric b{display:block;font-size:28px;margin-top:8px;color:#0f172a}.dash-metric small{display:block;color:#64748b;margin-top:5px}.dash-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:#eef6ff}.dash-metric.green .dash-icon{background:#e6f7ef}.dash-metric.green b{color:#07825f}.dash-metric.blue .dash-icon{background:#eaf2ff}.dash-metric.blue b{color:#1665d8}.dash-metric.purple .dash-icon{background:#f3e8ff}.dash-metric.purple b{color:#7c3aed}.dash-metric.orange .dash-icon{background:#fff1df}.dash-metric.orange b{color:#ea7200}.dash-metric.red .dash-icon{background:#ffe8e8}.dash-metric.red b{color:#dc2626}
.dash-grid-main{display:grid;grid-template-columns:1.1fr 0.95fr 0.85fr;gap:16px;margin-bottom:16px}.dash-card{background:#fff;border:1px solid #e7edf5;border-radius:18px;padding:18px;box-shadow:0 8px 20px #0f172a08;min-width:0}.dash-card h3{margin:0 0 14px;color:#172033}.dash-card.big{height:360px}.dash-card.big canvas{height:290px!important}.dash-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dash-info-grid .dash-metric{min-height:165px;display:flex;flex-direction:column;text-align:center;justify-content:center}.dash-info-grid .dash-icon{order:-1}.dash-info-grid .dash-metric b{font-size:25px}.dash-grid-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}.donut-wrap{position:relative;height:260px}.donut-total{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}.donut-total b{font-size:32px;color:#123c69}.donut-total span{font-size:12px;color:#64748b}.progress-list{display:flex;flex-direction:column;gap:14px}.progress-list>div{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.progress-list span{font-weight:700;color:#334155}.progress-list b{font-size:14px;color:#0f172a}.progress-list small{color:#64748b}.progress-list i{grid-column:1/3;height:9px;background:#edf2f7;border-radius:999px;overflow:hidden}.progress-list em{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa);border-radius:999px}.teachers-bars div:nth-child(2) em{background:linear-gradient(90deg,#10b981,#6ee7b7)}.teachers-bars div:nth-child(3) em{background:linear-gradient(90deg,#f97316,#fdba74)}.teachers-bars div:nth-child(4) em{background:linear-gradient(90deg,#8b5cf6,#c4b5fd)}.teachers-bars div:nth-child(5) em{background:linear-gradient(90deg,#14b8a6,#67e8f9)}.quick-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}.quick-stats h3{grid-column:1/-1;text-align:center;color:#2563eb}.quick-stats div{text-align:center;border-left:1px solid #e7edf5;padding:8px}.quick-stats span{display:block;color:#64748b;font-size:12px}.quick-stats b{display:block;margin-top:7px;color:#123c69}
@media(max-width:1200px){.dash-shell{grid-template-columns:1fr}.dash-side{display:block}.dash-filter-panel{margin-top:14px}.dash-metrics-row,.dash-grid-main,.dash-grid-bottom,.quick-stats{grid-template-columns:1fr 1fr}.dash-info-grid{grid-template-columns:1fr 1fr}.brand{display:none}}
@media(max-width:760px){.dash-main{padding:12px}.dash-metrics-row,.dash-grid-main,.dash-grid-bottom,.dash-info-grid,.quick-stats{grid-template-columns:1fr}.dash-topbar{display:block}.dash-card.big{height:330px}.dash-shell{border-radius:0}}
.small-note{font-size:12px;margin-top:-4px;margin-bottom:10px;color:#64748b}

/* v14 dashboard refinements */
body.dashboard-active #app > header,
body.dashboard-active #app > nav{display:none!important}
body.dashboard-active main{padding:0;background:#f4f7fb}
body.dashboard-active .dash-shell{min-height:100vh;border-radius:0}
.chart-with-legend{display:grid;grid-template-columns:minmax(220px,1fr) 190px;align-items:center;gap:10px;height:300px}.chart-with-legend canvas{height:285px!important}.chart-legend-list{display:flex;flex-direction:column;gap:10px;font-size:13px}.chart-legend-list div{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;background:#f8fafc;border:1px solid #e7edf5;border-radius:12px;padding:8px}.chart-legend-list i{width:12px;height:12px;border-radius:4px;display:block}.chart-legend-list span{font-weight:700;color:#334155}.chart-legend-list b{color:#0f172a}.chart-legend-list.horizontal{display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px}.donut-title span{font-size:13px!important;color:#123c69!important;font-weight:800;line-height:1.4}.donut-title b{font-size:30px!important}.donut-title small{font-size:11px;color:#64748b}.quick-stats{grid-template-columns:repeat(7,1fr)}
@media(max-width:1200px){.chart-with-legend{grid-template-columns:1fr;height:auto}.chart-with-legend canvas{height:250px!important}.chart-legend-list.horizontal{grid-template-columns:1fr}.quick-stats{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.chart-legend-list.horizontal,.quick-stats{grid-template-columns:1fr}.chart-with-legend{grid-template-columns:1fr}}

/* v15 persistent right sidebar and dashboard refinements */
body.app-side-active #app > header,
body.app-side-active #app > nav{display:none!important}
body.app-side-active main{padding:0 260px 0 0;background:#f4f7fb;min-height:100vh}
.global-side{position:fixed;right:0;top:0;bottom:0;width:260px;z-index:50;overflow:auto}
.global-side .dash-filter-panel{margin-top:12px}
#dashboard{padding:0;background:#f4f7fb}
#dashboard .dash-main{padding:22px;background:#f6f8fc;min-height:100vh}
body.dashboard-active main{padding-right:260px!important}
.dash-shell{display:block;min-height:auto;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
@media(max-width:1200px){body.app-side-active main{padding-right:0}.global-side{position:relative;width:auto}.dash-side.global-side{display:block}.global-side .dash-filter-panel{margin-top:14px}}

/* v16 analysis settings and critical-course info */
.metric-info{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;padding:0;margin:0 6px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:12px;line-height:1;vertical-align:middle;cursor:help}
.metric-info:hover{filter:none;background:#dbeafe;color:#1e40af}
.quick-stats{grid-template-columns:repeat(6,1fr)}
@media(max-width:1200px){.quick-stats{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.quick-stats{grid-template-columns:1fr}}

/* v18 dashboard requested layout */
.dash-metrics-row-secondary{grid-template-columns:repeat(5,minmax(150px,1fr));margin-top:-2px;margin-bottom:16px}
.dash-grid-main{grid-template-columns:1.1fr 0.95fr 0.9fr}
.sections-donut{height:260px}
#dashSections{height:250px!important}
@media(max-width:1200px){.dash-metrics-row-secondary{grid-template-columns:1fr 1fr}.dash-grid-main{grid-template-columns:1fr 1fr}.dash-grid-main .dash-card:nth-child(3){grid-column:1/-1}}
@media(max-width:760px){.dash-metrics-row-secondary,.dash-grid-main{grid-template-columns:1fr}.dash-grid-main .dash-card:nth-child(3){grid-column:auto}}

/* v19 dashboard chart layout refinements */
.dash-donut-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(260px,1fr));
  gap:16px;
  margin-bottom:16px;
  align-items:stretch;
}
.dash-non-donut-row{
  display:grid;
  grid-template-columns:1.35fr 0.9fr 0.9fr 0.9fr;
  gap:16px;
  margin-bottom:16px;
  align-items:stretch;
}
.chart-card{
  height:390px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chart-card h3{
  flex:0 0 auto;
  line-height:1.4;
}
.donut-card .donut-wrap{
  height:235px;
  flex:0 0 235px;
}
.donut-card canvas{
  height:235px!important;
  max-height:235px!important;
}
.donut-card .chart-legend-list.horizontal{
  flex:1;
  min-height:0;
  overflow:auto;
  align-content:start;
}
.grades-card canvas{
  flex:1;
  min-height:0;
  height:315px!important;
  max-height:315px!important;
}
.section-extremes{
  gap:12px;
}
.extreme-box{
  flex:1;
  border:1px solid #e7edf5;
  border-radius:18px;
  padding:16px;
  background:linear-gradient(135deg,#f8fafc,#fff);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
}
.extreme-box span{
  color:#24506e;
  font-weight:800;
  font-size:14px;
}
.extreme-box b{
  font-size:34px;
  color:#123c69;
  margin:8px 0 6px;
}
.extreme-box small{
  color:#64748b;
  line-height:1.6;
  display:block;
}
.extreme-box.high{border-right:6px solid #2563eb}
.extreme-box.low{border-right:6px solid #f97316}
.dash-donut-row .chart-legend-list.horizontal div,
.dash-non-donut-row .chart-legend-list.horizontal div{
  min-width:0;
  overflow:hidden;
}
.dash-donut-row .chart-legend-list.horizontal span,
.dash-non-donut-row .chart-legend-list.horizontal span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:1400px){
  .dash-donut-row{grid-template-columns:1fr 1fr 1fr}
  .dash-non-donut-row{grid-template-columns:1fr 1fr}
  .grades-card{grid-column:1/-1}
}
@media(max-width:900px){
  .dash-donut-row,.dash-non-donut-row{grid-template-columns:1fr}
  .grades-card{grid-column:auto}
  .chart-card{height:auto;min-height:360px}
  .donut-card .donut-wrap{height:230px;flex-basis:230px}
}

/* v20 footer and chart legend refinements */
.system-footer{
  width:100%;
  text-align:center;
  color:#64748b;
  font-size:12.5px;
  line-height:1.8;
  padding:12px 16px;
  border-top:1px solid #e7edf5;
  background:#ffffff;
}
.login-screen{position:relative;padding-bottom:56px;}
.login-footer{
  position:absolute;
  right:0;
  left:0;
  bottom:0;
  background:transparent;
  border-top:0;
  color:#d8e7f8;
}
body.app-side-active #app>.app-footer{
  margin-right:260px;
  width:calc(100% - 260px);
}
body.app-side-active main{padding-bottom:16px;}
#statusLegend.chart-legend-list.horizontal{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px 10px;
  overflow:visible!important;
}
#statusLegend.chart-legend-list.horizontal div{
  min-width:0;
  overflow:visible!important;
  padding:8px 10px;
}
#statusLegend.chart-legend-list.horizontal span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.35;
  font-size:12.5px;
}
#statusLegend.chart-legend-list.horizontal b{
  white-space:nowrap;
}
@media(max-width:1200px){
  body.app-side-active #app>.app-footer{margin-right:0;width:100%;}
}
@media(max-width:520px){
  #statusLegend.chart-legend-list.horizontal{grid-template-columns:1fr!important;}
  .system-footer{font-size:11.5px;padding:10px 8px;}
}
.chart-title-number{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:8px;padding:3px 9px;border-radius:999px;background:#eef6ff;color:#0f3f7a;font-size:13px;font-weight:800;vertical-align:middle}