/* ====== GAMEIT TEACHER DASHBOARD — DECISION-FIRST ======
   Educational intelligence platform · calm, professional, executive-grade
   80% calm neutral UI · 20% meaningful signals · NCA-ready
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* === Surfaces (calm neutral) === */
  --bg:#F6F8FC;
  --surface:#FFFFFF;
  --surface-2:#F2F5FA;
  --surface-3:#E9EDF5;
  --border:#E6EAF2;
  --border-strong:#D4DAE6;

  /* === Text === */
  --text:#1E293B;
  --text-2:#475569;
  --text-3:#64748B;
  --text-4:#94A3B8;

  /* === Brand (chrome only — Gameit orange retained as subtle accent) === */
  --brand:#F79939;
  --brand-soft:#FFF4E6;
  --brand-deep:#D97A14;

  /* === SEMANTIC RISK PALETTE (spec colors) === */
  --st-critical:#EF4444;   --st-critical-soft:#FEE2E2;   --st-critical-text:#991B1B;
  --st-high:#F59E0B;       --st-high-soft:#FEF3C7;       --st-high-text:#92400E;
  --st-medium:#FACC15;     --st-medium-soft:#FEF9C3;     --st-medium-text:#854D0E;
  --st-low:#22C55E;        --st-low-soft:#DCFCE7;        --st-low-text:#166534;
  --st-none:#CBD5E1;       --st-none-soft:#F1F5F9;       --st-none-text:#475569;

  /* === AI accent (use sparingly — only on AI insight cards) === */
  --ai-from:#0EA5E9;
  --ai-to:#14B8A6;
  --ai-soft:#E0F2FE;
  --ai-text:#075985;

  /* === Info / Blue === */
  --blue:#3B82F6;          --blue-soft:#DBEAFE;          --blue-text:#1D4ED8;

  /* === Legacy aliases === */
  --green:var(--st-low);   --green-soft:var(--st-low-soft);
  --amber:var(--st-high);  --amber-soft:var(--st-high-soft);
  --red:var(--st-critical);--red-soft:var(--st-critical-soft);

  --shadow-1:0 1px 2px rgba(15,23,42,.04);
  --shadow-2:0 2px 8px -2px rgba(15,23,42,.06),0 8px 24px -8px rgba(15,23,42,.08);
  --shadow-3:0 12px 36px -8px rgba(15,23,42,.18),0 4px 8px rgba(15,23,42,.06);
  --shadow-ai:0 4px 16px -4px rgba(14,165,233,.25),0 1px 2px rgba(20,184,166,.1);

  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;
  --sidebar-w:236px;
  --max-content:1280px;
}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* ───── APP SHELL ───── */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;min-width:1280px}

/* ───── SIDEBAR ───── */
.sidebar{
  background:var(--surface);
  border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  z-index:50;
}
.sb-brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 22px 16px;
  border-bottom:1px solid var(--border);
}
.sb-brand img{height:30px;width:auto}
.sb-brand-text{font-family:'Cairo',sans-serif;font-weight:800;font-size:14px;color:var(--text);line-height:1.1}
.sb-brand-text small{display:block;font-weight:600;font-size:10.5px;color:var(--text-3);letter-spacing:.5px;margin-top:2px}
.sb-section{padding:20px 14px 6px;font-size:10px;font-weight:700;color:var(--text-4);letter-spacing:1.2px;text-transform:uppercase}
.sb-nav{padding:0 10px;display:flex;flex-direction:column;gap:2px}
.sb-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--text-2);
  cursor:pointer;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.sb-item:hover{background:var(--surface-2);color:var(--text)}
.sb-item.active{background:var(--brand-soft);color:var(--brand-deep);border-color:rgba(247,153,57,.22)}
.sb-item.active .sb-icon{color:var(--brand)}
.sb-icon{width:18px;height:18px;flex-shrink:0;color:var(--text-3);display:inline-flex;align-items:center;justify-content:center}
.sb-item.active .sb-icon,.sb-item:hover .sb-icon{color:currentColor}
.sb-badge{margin-inline-start:auto;background:var(--st-critical);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.sb-badge.muted{background:var(--surface-3);color:var(--text-2)}
.sb-foot{margin-top:auto;padding:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#FFB366);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.sb-foot-info{flex:1;min-width:0}
.sb-foot-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-foot-role{font-size:11px;color:var(--text-3)}

/* ───── MAIN ───── */
.main{display:flex;flex-direction:column;min-width:0}

/* ───── TOPBAR ───── */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:0;padding:0;
}
.tb-row-1{
  display:flex;align-items:center;gap:10px;
  padding:7px 28px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.tb-row-2{display:flex;align-items:center;gap:14px;padding:12px 28px;}
.tb-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-title h1{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.tb-title p{font-size:12.5px;color:var(--text-3);font-weight:500}
.tb-spacer{flex:1}
.tb-group{display:flex;align-items:center;gap:8px}
.tb-search{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid transparent;
  padding:8px 12px;border-radius:10px;min-width:240px;
  transition:background .15s,border-color .15s;
}
.tb-search:focus-within{background:var(--surface);border-color:var(--blue)}
.tb-search input{background:transparent;border:0;outline:0;flex:1;font:inherit;color:var(--text);font-size:13px}
.tb-search input::placeholder{color:var(--text-3)}
.tb-search kbd{font-family:inherit;font-size:10px;color:var(--text-3);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1px 5px}

.tb-select{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:8px 30px 8px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--text);
  cursor:pointer;outline:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
  appearance:none;-webkit-appearance:none;
}
[dir="rtl"] .tb-select{padding:8px 12px 8px 30px;background-position:left 10px center}
.tb-select:hover{border-color:var(--border-strong)}

.tb-lang{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.tb-lang button{padding:6px 10px;font-size:12px;font-weight:700;color:var(--text-2);border-radius:7px;cursor:pointer;border:0;background:transparent;font-family:inherit;min-width:32px}
.tb-lang button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}

.tb-daterange{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px 8px}
.tb-dr-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.tb-dr-sep{color:var(--text-3);font-size:13px}
.tb-date{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--text);outline:0;padding:4px 0;width:120px;cursor:pointer}
.tb-date::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;filter:saturate(0)}
.tb-date::-webkit-calendar-picker-indicator:hover{opacity:1}
.tb-daterange .tb-btn{padding:6px 8px}

.tb-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;font:inherit;font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.tb-btn:hover{background:var(--surface-2);color:var(--text)}
.tb-btn.primary{background:var(--text);color:#fff;border-color:var(--text)}
.tb-btn.primary:hover{background:#000;color:#fff}

.tb-icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;transition:background .15s,color .15s;
}
.tb-icon-btn:hover{background:var(--surface-2);color:var(--text)}
.tb-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--st-critical);border:2px solid var(--surface)}

/* ───── CONTENT ───── */
.content{padding:24px 28px 28px;display:flex;flex-direction:column;gap:24px;max-width:var(--max-content);margin:0 auto;width:100%}
.row{display:grid;gap:20px}
.row-6{grid-template-columns:repeat(6,1fr)}
.row-4{grid-template-columns:repeat(4,1fr)}
.row-3{grid-template-columns:repeat(3,1fr)}
.row-2{grid-template-columns:1fr 1fr}
.row-2-3{grid-template-columns:2fr 1fr}
.row-3-2{grid-template-columns:3fr 2fr}

/* ───── SECTION HEADER ───── */
.section-head{display:flex;align-items:center;gap:12px;padding:0 4px}
.section-head h2{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.1px}
.section-head .sub{font-size:12.5px;color:var(--text-3);font-weight:500}
.section-head .spacer{flex:1}
.section-head .tag-tier{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.tag-tier.primary{background:var(--st-critical-soft);color:var(--st-critical-text)}
.tag-tier.secondary{background:var(--surface-3);color:var(--text-3)}
.tag-tier.tertiary{background:var(--surface-2);color:var(--text-3)}

/* ───── CARD ───── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.card-pad{padding:20px 22px}
.card-head{
  padding:18px 22px 12px;display:flex;align-items:center;gap:12px;
}
.card-head h3{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.1px}
.card-head .ch-sub{font-size:12px;color:var(--text-3);font-weight:500}
.card-head .spacer{flex:1}
.card-body{padding:8px 22px 20px}
.card-body-tight{padding:8px 8px 4px}
.card-foot{padding:12px 22px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-3)}

/* ───── KPI ───── */
.kpi{position:relative;padding:18px 20px;display:flex;flex-direction:column;gap:8px;cursor:default;transition:transform .15s,box-shadow .15s,border-color .15s}
.kpi:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.kpi.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-label{font-size:11.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:6px}
.kpi-info{width:14px;height:14px;border-radius:50%;background:var(--surface-2);color:var(--text-4);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;cursor:help}
.kpi-icon{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi-icon.brand{background:var(--brand-soft);color:var(--brand)}
.kpi-icon.green{background:var(--st-low-soft);color:var(--st-low-text)}
.kpi-icon.amber{background:var(--st-high-soft);color:var(--st-high-text)}
.kpi-icon.red{background:var(--st-critical-soft);color:var(--st-critical-text)}
.kpi-icon.blue{background:var(--blue-soft);color:var(--blue-text)}
.kpi-icon.muted{background:var(--surface-2);color:var(--text-3)}
.kpi-value{font-size:32px;font-weight:800;color:var(--text);letter-spacing:-1px;line-height:1}
.kpi-foot{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3);min-height:16px}
.kpi-trend{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:11.5px;padding:2px 7px;border-radius:6px}
.kpi-trend.up{background:var(--st-low-soft);color:var(--st-low-text)}
.kpi-trend.down{background:var(--st-critical-soft);color:var(--st-critical-text)}
.kpi-trend.flat{background:var(--surface-2);color:var(--text-3)}
.kpi[title]{cursor:help}

/* ───── ACTION CENTER ───── */
.action-center{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ac-col{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;
}
.ac-col.intervene{border-top:3px solid var(--st-critical)}
.ac-col.weekly{border-top:3px solid var(--st-medium)}
.ac-col.ontrack{border-top:3px solid var(--st-low)}
.ac-head{padding:16px 20px 12px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--border)}
.ac-head .ac-icon{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ac-col.intervene .ac-icon{background:var(--st-critical-soft);color:var(--st-critical)}
.ac-col.weekly    .ac-icon{background:var(--st-medium-soft);color:var(--st-high-text)}
.ac-col.ontrack   .ac-icon{background:var(--st-low-soft);color:var(--st-low-text)}
.ac-head .ac-title{flex:1;min-width:0}
.ac-head .ac-title h3{font-size:13px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.4px}
.ac-head .ac-title p{font-size:12px;color:var(--text-3);font-weight:500;margin-top:2px}
.ac-head .ac-count{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1}
.ac-list{padding:8px 8px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.ac-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  cursor:pointer;transition:background .12s;
}
.ac-item:hover{background:var(--surface-2)}
.ac-item .ac-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ac-item .ac-name .n{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .ac-name .a{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .ac-go{color:var(--text-4);flex-shrink:0;transition:color .12s,transform .12s}
.ac-item:hover .ac-go{color:var(--brand);transform:translateX(2px)}
[dir="rtl"] .ac-item:hover .ac-go{transform:translateX(-2px)}
.ac-foot{padding:10px 16px;border-top:1px solid var(--border);text-align:center}
.ac-foot button{background:none;border:0;font:inherit;font-size:12px;font-weight:700;color:var(--brand);cursor:pointer;padding:4px 8px;border-radius:6px}
.ac-foot button:hover{background:var(--brand-soft)}

/* ───── BADGES ───── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:.2px;border:1px solid transparent;white-space:nowrap;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.critical{background:var(--st-critical-soft);color:var(--st-critical-text)}
.badge.high{background:var(--st-high-soft);color:var(--st-high-text)}
.badge.medium{background:var(--st-medium-soft);color:var(--st-medium-text)}
.badge.low{background:var(--st-low-soft);color:var(--st-low-text)}
.badge.none,.badge.normal,.badge.insufficient{background:var(--st-none-soft);color:var(--st-none-text)}
.badge.immediate{background:var(--st-critical-soft);color:var(--st-critical-text)}
.badge.this_week{background:var(--st-high-soft);color:var(--st-high-text)}
.badge.monitor{background:var(--st-low-soft);color:var(--st-low-text)}
.badge.ai{background:linear-gradient(135deg,var(--ai-from),var(--ai-to));color:#fff;border:0}
.badge.ai::before{background:#fff}

/* ───── CONFIDENCE / WARNING ───── */
.conf{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600}
.conf.high{color:var(--st-low-text)}
.conf.medium{color:var(--st-high-text)}
.conf.low{color:var(--text-3)}
.conf-dots{display:inline-flex;gap:2px}
.conf-dot{width:5px;height:5px;border-radius:50%;background:var(--surface-3)}
.conf-dot.on{background:currentColor}
.warn-icon{display:inline-flex;align-items:center;color:var(--st-high);cursor:help}

/* ───── TABLE (PRIMARY at-risk) ───── */
.tbl-primary{min-height:440px}
.tbl-wrap{overflow:auto;border-radius:0 0 var(--r-lg) var(--r-lg);max-height:560px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
thead th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-2);
  font-size:10.5px;font-weight:700;color:var(--text-3);letter-spacing:.6px;text-transform:uppercase;
  padding:11px 14px;text-align:start;border-bottom:1px solid var(--border);
  white-space:nowrap;cursor:pointer;user-select:none;
}
thead th:hover{color:var(--text)}
thead th .sort{margin-inline-start:4px;opacity:.4}
thead th.sort-active .sort{opacity:1;color:var(--brand)}
tbody td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle}
tbody tr{transition:background .12s;cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr.selected{background:var(--brand-soft)}
tbody tr.no-data{background:var(--surface-2);opacity:.65}
tbody tr.no-data:hover{opacity:.85;background:var(--surface-3)}
tbody tr.no-data td{color:var(--text-3)}
.mono{font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace;font-size:12px;color:var(--text)}
.cell-num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.cell-student{display:flex;align-items:center;gap:10px;min-width:160px}
.stu-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#94A3B8,#64748B);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;letter-spacing:.5px}
.stu-avatar.c{background:linear-gradient(135deg,#EF4444,#DC2626)}
.stu-avatar.h{background:linear-gradient(135deg,#F59E0B,#D97706)}
.stu-avatar.m{background:linear-gradient(135deg,#FACC15,#EAB308)}
.stu-avatar.l{background:linear-gradient(135deg,#22C55E,#16A34A)}
.stu-avatar.n{background:linear-gradient(135deg,#94A3B8,#64748B)}
.stu-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.stu-id{font-size:10.5px;color:var(--text-3);font-family:'JetBrains Mono',monospace}
.cell-action{font-size:12.5px;color:var(--text-2);max-width:220px;font-weight:500}
.btn-row-action{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:8px;font-size:11.5px;font-weight:700;
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);cursor:pointer;
  transition:background .12s,color .12s;
}
.btn-row-action:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ───── BAR (mini) ───── */
.minibar{display:flex;align-items:center;gap:8px;min-width:120px}
.minibar-bg{flex:1;height:6px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.minibar-fill{height:100%;border-radius:6px;background:var(--brand)}
.minibar-val{font-size:11.5px;font-weight:700;color:var(--text);min-width:40px;text-align:end;font-variant-numeric:tabular-nums}

/* ───── CHIPS ───── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:20px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.chip:hover{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.chip.active{background:var(--text);color:#fff;border-color:var(--text)}
.chip.active.critical{background:var(--st-critical);border-color:var(--st-critical)}
.chip.active.high{background:var(--st-high);border-color:var(--st-high)}
.chip.active.medium{background:var(--st-medium);border-color:var(--st-medium);color:#854D0E}
.chip.active.low{background:var(--st-low);border-color:var(--st-low)}
.chip-count{font-size:10.5px;font-weight:800;background:rgba(0,0,0,.06);padding:2px 6px;border-radius:10px}
.chip.active .chip-count{background:rgba(255,255,255,.22)}
.chip.active.medium .chip-count{background:rgba(0,0,0,.12)}

/* ───── AI INSIGHT BANNER ───── */
.ai-banner{
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(20,184,166,.06));
  border:1px solid rgba(14,165,233,.2);
  border-radius:var(--r-lg);
  position:relative;overflow:hidden;
}
.ai-banner::before{
  content:'';position:absolute;top:-30%;right:-5%;width:160px;height:160px;
  background:radial-gradient(circle,rgba(14,165,233,.18),transparent 70%);
  pointer-events:none;
}
[dir="rtl"] .ai-banner::before{right:auto;left:-5%}
.ai-banner-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--ai-from),var(--ai-to));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-ai);
}
.ai-banner-text{flex:1;font-size:13.5px;color:var(--text);line-height:1.55}
.ai-banner-text strong{font-weight:800}
.ai-banner-text .ai-label{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ai-text);margin-bottom:4px}
.ai-banner-cta{font-size:12.5px;font-weight:700;color:#fff;cursor:pointer;padding:9px 16px;border-radius:10px;border:0;background:linear-gradient(135deg,var(--ai-from),var(--ai-to));transition:filter .15s;box-shadow:var(--shadow-ai)}
.ai-banner-cta:hover{filter:brightness(1.05)}

/* ───── AI INSIGHT CARD (small inline) ───── */
.ai-insight{
  margin-top:10px;padding:10px 14px;
  background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(20,184,166,.04));
  border:1px solid rgba(14,165,233,.18);
  border-radius:10px;font-size:12.5px;color:var(--text-2);
  display:flex;align-items:flex-start;gap:8px;line-height:1.5;
}
.ai-insight .ai-spark{flex-shrink:0;color:var(--ai-from);margin-top:1px}

/* ───── SKILL ROW ───── */
.skill-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:10px;cursor:pointer;transition:background .12s}
.skill-row:hover{background:var(--surface-2)}
.skill-row.active{background:var(--brand-soft)}
.skill-code{width:36px;height:36px;border-radius:10px;background:var(--surface-2);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.skill-row .name{flex:1;font-size:13px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skill-row .struggling{font-size:11.5px;color:var(--text-3);font-weight:500;display:flex;align-items:center;gap:6px}
.skill-row .recommend{font-size:11.5px;color:var(--text-3);margin-top:2px;font-weight:500}

/* ───── INTERPRETATION LEGEND ───── */
.interp{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  padding:14px 16px;background:var(--surface-2);border-radius:12px;margin-top:12px;
}
.interp-item{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-2)}
.interp-item .interp-tag{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;min-width:84px;text-align:center}
.interp-tag.impulsive{background:var(--st-critical-soft);color:var(--st-critical-text)}
.interp-tag.confusion{background:var(--st-high-soft);color:var(--st-high-text)}
.interp-tag.misunderstanding{background:var(--st-medium-soft);color:var(--st-medium-text)}
.interp-tag.mastery{background:var(--st-low-soft);color:var(--st-low-text)}

/* ───── DRAWER ───── */
.drawer-back{
  position:fixed;inset:0;background:rgba(15,23,42,.36);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:90;
  backdrop-filter:blur(2px);
}
.drawer-back.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;bottom:0;width:540px;max-width:92vw;
  background:var(--surface);box-shadow:var(--shadow-3);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  z-index:91;display:flex;flex-direction:column;
}
[dir="rtl"] .drawer{left:0;right:auto;transform:translateX(-100%)}
[dir="ltr"] .drawer{right:0;left:auto;transform:translateX(100%)}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.drawer-head h3{font-size:16px;font-weight:800;color:var(--text);flex:1}
.drawer-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}
.drawer-close:hover{background:var(--surface-2);color:var(--text)}
.drawer-body{padding:20px 22px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:18px}
.drawer-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.drawer-stat{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.drawer-stat .l{font-size:10.5px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.drawer-stat .v{font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;margin-top:2px}
.drawer-section h4{font-size:11px;font-weight:800;color:var(--text-3);letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.drawer-list{display:flex;flex-direction:column;gap:8px}
.drawer-li{display:flex;gap:10px;padding:10px 12px;background:var(--surface-2);border-radius:10px;font-size:13px;color:var(--text-2)}
.drawer-li .num{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* ───── COMMAND PALETTE ───── */
.cmd-back{position:fixed;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding-top:12vh}
.cmd-back.open{display:flex}
.cmd{width:560px;max-width:92vw;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-3);overflow:hidden;border:1px solid var(--border)}
.cmd-input{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.cmd-input input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--text);background:transparent}
.cmd-list{max-height:50vh;overflow:auto;padding:8px}
.cmd-item{padding:10px 12px;border-radius:8px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--text-2)}
.cmd-item.active,.cmd-item:hover{background:var(--surface-2);color:var(--text)}
.cmd-item .mono{margin-inline-start:auto;color:var(--text-3);font-size:11px}
.cmd-empty{padding:24px;text-align:center;color:var(--text-3);font-size:13px}
.cmd-section{font-size:10.5px;color:var(--text-3);font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:10px 12px 4px}

/* ───── SKELETON ───── */
.skel{background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:skel 1.4s linear infinite;border-radius:8px}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ───── HEAT CELL ───── */
.heat-cell{padding:7px 10px;border-radius:6px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;color:var(--text)}
.heat-cell.no-data{background:var(--surface-3);color:var(--text-4)}

/* ───── FOOTER DISCLAIMER ───── */
.footer-disclaimer{
  margin-top:32px;padding:18px 22px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);
  font-size:12px;color:var(--text-3);line-height:1.6;
  display:flex;align-items:flex-start;gap:10px;
}
.footer-disclaimer svg{flex-shrink:0;color:var(--text-4);margin-top:1px}
.footer-disclaimer strong{color:var(--text-2);font-weight:700}

/* ───── MISC ───── */
.empty{padding:30px;text-align:center;color:var(--text-3);font-size:13px}
.divider{height:1px;background:var(--border);margin:2px 0}
.muted{color:var(--text-3)}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--text-2)}
.tag.brand{background:var(--brand-soft);color:var(--brand-deep)}
.tag.warn{background:var(--st-high-soft);color:var(--st-high-text)}

/* ───── SECTION SIZE / TIER VISUAL ───── */
.section-bullying .card-body{padding-bottom:14px}
.section-heatmap{margin-top:8px}
.heatmap-grid{display:grid;gap:4px;overflow:auto;padding:4px}

/* RTL minor flips */
[dir="rtl"] .sb-foot,[dir="rtl"] .sb-item{flex-direction:row}
@media (max-width:1100px){
  :root{--sidebar-w:72px}
  .sb-brand-text,.sb-foot-info,.sb-section,.sb-item span.label,.sb-badge{display:none}
  .sb-item{justify-content:center}
}

/* ═════════ NEW SECTIONS (added on top of existing dashboard) ═════════ */

/* 3-col row: trend / donut / ai-panel */
.row-trend{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}
.row-3-mix{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:20px}
@media (max-width:1400px){.row-trend,.row-3-mix{grid-template-columns:1fr 1fr;}.row-trend>:last-child,.row-3-mix>:last-child{grid-column:1/-1}}

/* Donut center label overlay */
.donut-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.donut-center .dc-num{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums}
.donut-center .dc-lbl{font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin-top:4px}

/* Engagement Distribution legend */
.eng-legend{display:flex;flex-wrap:wrap;gap:6px 12px;padding:8px 4px 0;margin-top:6px;border-top:1px solid var(--border)}
.eng-leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-3);font-weight:500}
.eng-leg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}

/* AI side panel */
.ai-panel .card-head{padding-bottom:8px}
.ai-pill{
  font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;
  background:linear-gradient(135deg,var(--ai-from),var(--ai-to));color:#fff;
  letter-spacing:.4px;text-transform:uppercase;
}
.ai-list{display:flex;flex-direction:column;gap:0;padding:6px 0 0}
.ai-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 18px;border-top:1px solid var(--border);
  cursor:pointer;transition:background .12s;
}
.ai-row:first-child{border-top:0}
.ai-row:hover{background:var(--surface-2)}
.ai-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px}
.ai-dot.critical{background:var(--st-critical)}
.ai-dot.medium{background:var(--st-medium)}
.ai-dot.low{background:var(--st-low)}
.ai-row-text{flex:1;font-size:12.5px;color:var(--text);line-height:1.45}
.ai-row-text .sub{color:var(--text-3);font-weight:500;font-size:11.5px;margin-top:2px}
.ai-row-text strong{font-weight:700}
.ai-row-arrow{color:var(--text-4);flex-shrink:0;margin-top:4px;transition:color .12s,transform .12s}
.ai-row:hover .ai-row-arrow{color:var(--brand);transform:translateX(2px)}
[dir="rtl"] .ai-row:hover .ai-row-arrow{transform:translateX(-2px)}
.ai-foot{padding:10px 18px 14px;border-top:1px solid var(--border)}
.ai-view-all{font-size:12px;font-weight:700;color:var(--brand);cursor:pointer;text-decoration:none}
.ai-view-all:hover{text-decoration:underline}

/* Top Skill Weaknesses list */
.weak-list{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.weak-row{
  display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;
  padding:10px 16px;cursor:pointer;border-radius:8px;transition:background .12s;
}
.weak-row:hover{background:var(--surface-2)}
.weak-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weak-bar{height:8px;background:var(--surface-3);border-radius:6px;overflow:hidden}
.weak-fill{height:100%;border-radius:6px}
.weak-val{font-size:12px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:32px;text-align:end}

/* Top At-Risk mini list */
.topr-list{display:flex;flex-direction:column;padding:4px 0}
.topr-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;border-radius:8px;cursor:pointer;transition:background .12s;
}
.topr-row:hover{background:var(--surface-2)}
.topr-info{flex:1;min-width:0}
.topr-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topr-issue{font-size:11.5px;color:var(--text-3);margin-top:2px}
.topr-spark{flex-shrink:0;opacity:.85}

/* Recommended Action horizontal cards */
.rec-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:18px 20px;display:flex;align-items:center;gap:16px;
  transition:box-shadow .15s,transform .15s,border-color .15s;
}
.rec-card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px);border-color:var(--border-strong)}
.rec-icon{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.rec-group .rec-icon{background:var(--blue-soft);color:var(--blue-text)}
.rec-skill .rec-icon{background:var(--brand-soft);color:var(--brand-deep)}
.rec-family .rec-icon{background:var(--st-low-soft);color:var(--st-low-text)}
.rec-body{flex:1;min-width:0}
.rec-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.rec-sub{font-size:12.5px;color:var(--text-3);line-height:1.5}
.rec-cta{
  background:none;border:0;font:inherit;cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--brand);
  padding:8px 12px;border-radius:8px;flex-shrink:0;
}
.rec-cta:hover{background:var(--brand-soft)}

/* Heatmap KPI strip — 6 mini KPIs above the heatmap */
.hm-strip{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
@media (max-width:1280px){.hm-strip{grid-template-columns:repeat(3,1fr)}}
.hm-kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  position:relative;overflow:hidden;
}
.hm-kpi .hm-icon{
  width:32px;height:32px;border-radius:8px;background:var(--brand-soft);
  color:var(--brand-deep);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:2px;
}
.hm-kpi[data-hm="acc"] .hm-icon{background:var(--st-low-soft);color:var(--st-low-text)}
.hm-kpi[data-hm="lacc"] .hm-icon{background:var(--st-high-soft);color:var(--st-high-text)}
.hm-kpi[data-hm="lqua"] .hm-icon{background:var(--st-medium-soft);color:var(--st-medium-text)}
.hm-kpi[data-hm="agg"] .hm-icon{background:var(--st-critical-soft);color:var(--st-critical-text)}
.hm-kpi[data-hm="low"] .hm-icon{background:var(--surface-3);color:var(--text-3)}
.hm-value{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums}
.hm-label{font-size:11.5px;color:var(--text-3);font-weight:500;line-height:1.35}