/* ============================================================
   SOMO — Design system
   Part 2: view components
   ============================================================ */

/* ---------------- KPI ---------------- */
.kpi{
  display:flex;flex-direction:column;gap:10px;padding:16px 18px 15px;
  position:relative;overflow:hidden;
}
.kpi::after{
  content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,111,235,.07),transparent 70%);
}
.kpi .top{display:flex;align-items:center;gap:9px}
.kpi .ic{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue-600);
}
.kpi .ic svg{width:16px;height:16px}
.kpi .ic.gold{background:var(--gold-100);color:#B7791F}
.kpi .ic.green{background:var(--success-bg);color:#067647}
.kpi .ic.violet{background:#F1EDFF;color:#5B34D6}
.kpi .label{font-size:12px;color:var(--muted);font-weight:600}
.kpi .value{font-family:"Plus Jakarta Sans";font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1}
.kpi .value span{font-size:13px;color:var(--muted-2);font-weight:600;letter-spacing:0;margin-left:3px}
.kpi .bottom{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:11px}
.delta.up{color:#067647}
.delta.down{color:#B42318}
.delta svg{width:11px;height:11px}

/* ---------------- pipeline ---------------- */
.pipe{display:flex;align-items:center;flex:1;padding:6px 4px 2px}
.pipe .stage{
  flex:1;padding:14px 14px 12px;border-radius:12px;position:relative;
  border:1px solid transparent;transition:.15s;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
.pipe .stage:hover{background:#FAFCFF;border-color:var(--line-soft)}
.pipe .stage + .stage::before{
  content:"";position:absolute;left:-9px;top:50%;width:18px;height:1px;
  background:repeating-linear-gradient(90deg,#CDD7E5 0 4px,transparent 4px 7px);
}
.pipe .st-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pipe .num{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:#F2F5F9;color:var(--muted);
}
.pipe .stage.done .num{background:var(--success-bg);color:#067647}
.pipe .stage.live .num{background:var(--blue-50);color:var(--blue-700)}
.pipe .stage.todo .num{background:#F2F4F7;color:var(--muted-2)}
.pipe h4{font-size:13px;font-weight:700}
.pipe .big{font-family:"Plus Jakarta Sans";font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pipe .big span{font-size:11.5px;color:var(--muted-2);font-weight:600;margin-left:2px;letter-spacing:0}
.pipe .st-foot{font-size:11px;color:var(--muted);margin-top:3px}
.pipe .stage .pill{margin-top:9px}

/* ---------------- attention ---------------- */
.attn{display:flex;flex-direction:column}
.attn a{
  display:flex;align-items:center;gap:11px;padding:12px 18px;
  border-bottom:1px solid var(--line-soft);transition:.12s;
}
.attn a:last-child{border-bottom:0}
.attn a:hover{background:#FAFCFF}
.attn .ic{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px;
  background:var(--warn-bg);color:#B54708;
}
.attn .ic.red{background:var(--danger-bg);color:#B42318}
.attn .ic.blue{background:var(--blue-50);color:var(--blue-700)}
.attn .ic svg{width:15px;height:15px}
.attn .txt{min-width:0}
.attn .t{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.attn .s{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.attn .n{
  margin-left:auto;font-family:"Plus Jakarta Sans";font-weight:700;font-size:15px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.attn svg.chev{width:14px;height:14px;color:var(--muted-2);flex:0 0 14px}

/* ---------------- weights ---------------- */
.wbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#EDF1F7}
.wbar i{display:block;height:100%}
.wbar .a{background:linear-gradient(180deg,#3B82F6,#1F6FEB)}
.wbar .b{background:linear-gradient(180deg,#E9A23B,#D98E24)}
.wbar .c{background:linear-gradient(180deg,#0B2547,#081C33)}
.legend{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.legend .li{display:flex;align-items:center;gap:9px;font-size:12px}
.legend .sw{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.legend .li b{margin-left:auto;font-variant-numeric:tabular-nums}
.legend .li .muted{font-size:11px}

/* sparkline */
.spark{width:66px;height:22px;overflow:visible}

/* ---------------- assessment plan ---------------- */
.plan-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.weight-builder{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wcard{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#FCFDFF}
.wcard .h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-bottom:9px}
.wcard .dot{width:8px;height:8px;border-radius:3px}
.wcard .inp{display:flex;align-items:center;gap:2px}
.wcard input{
  width:48px;border:0;background:transparent;font-family:"Plus Jakarta Sans";
  font-size:22px;font-weight:700;color:var(--ink);outline:0;padding:0;
}
.wcard .pct{font-size:13px;font-weight:600;color:var(--muted-2)}
.wcard .sub{font-size:10.5px;color:var(--muted);margin-top:2px}
.total-bar{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.tbar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:#EDF1F7;margin:9px 0 6px}
.tbar i{height:100%}
.tbar .a{background:#1F6FEB}.tbar .b{background:#E9A23B}.tbar .c{background:#0B2547}

.typ{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;
}
.typ .cb{width:8px;height:8px;border-radius:2px}
.typ.aoi{color:#175CD3}.typ.aoi .cb{background:#1F6FEB}
.typ.cai{color:#946200}.typ.cai .cb{background:#E9A23B}
.typ.exam{color:#0B2547}.typ.exam .cb{background:#0B2547}
.typ.proj{color:#5B34D6}.typ.proj .cb{background:#7A5AF8}

/* ---------------- marks ---------------- */
.filterbar{
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line-soft);background:#FCFDFF;
}
.filterbar .field{min-width:150px}
.filterbar .field label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2)}
.filterbar .input,.filterbar .select{height:35px;font-size:12.5px}
.mk{
  width:74px;height:32px;border:1px solid var(--line);border-radius:7px;text-align:center;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;background:#fff;outline:0;
}
.mk:focus{border-color:#8FB6F5;box-shadow:0 0 0 3px rgba(31,111,235,.11)}
.mk.err{border-color:#F5B5AF;background:#FFFBFA;color:#B42318}
.mk.zero{border-color:#F3D08A;background:#FFFCF5}
.mk.blank{border-style:dashed;background:#FBFCFE}
.mk-hint{font-size:10.5px;margin-top:3px}
.mk-hint.bad{color:#B42318}
.mk-hint.warn{color:#B54708}
.mk-hint.mut{color:var(--muted-2)}
.rowflag td{background:#FFFBFA}
.rowflag:hover td{background:#FFF7F5}
.savebar{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line-soft);
  background:#fff;position:sticky;bottom:0;border-radius:0 0 var(--r-lg) var(--r-lg);
}
.savebar .left{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.savebar .right{margin-left:auto;display:flex;gap:8px}

/* ---------------- curriculum ---------------- */
.cur-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.topic{
  padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;gap:12px;align-items:flex-start;
  transition:.12s;
}
.topic:last-child{border-bottom:0}
.topic:hover{background:#FAFCFF}
.topic.sel{background:#F7FAFF;box-shadow:inset 3px 0 0 var(--blue-600)}
.topic .n{
  width:28px;height:28px;border-radius:8px;background:#F2F5F9;color:var(--muted);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 28px;margin-top:1px;
}
.topic.sel .n{background:var(--blue-600);color:#fff}
.topic h4{font-size:13px;font-weight:700;line-height:1.35}
.topic .comp{font-size:11.5px;color:var(--muted);margin-top:2px}
.topic .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.topic .meta{margin-left:auto;text-align:right;flex:0 0 auto}
.topic .meta .v{font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px}
.topic .meta .l{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}

.lo{display:flex;gap:9px;padding:10px 0;border-bottom:1px dashed var(--line-soft);font-size:12px;line-height:1.45}
.lo:last-child{border-bottom:0}
.lo .b{width:18px;height:18px;border-radius:5px;background:var(--blue-50);color:var(--blue-700);display:grid;place-items:center;font-size:9.5px;font-weight:700;flex:0 0 18px;margin-top:1px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;background:#F5F8FC;border:1px solid var(--line-soft);border-radius:6px;padding:3px 8px;color:var(--ink-2)}

/* ---------------- learners ---------------- */
.toolbar{display:flex;gap:9px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.toolbar .search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;height:36px;background:#F5F8FC;border-radius:9px;padding:0 11px}
.toolbar .search svg{width:15px;height:15px;color:var(--muted-2)}
.toolbar .search input{border:0;background:transparent;outline:0;width:100%;font-size:12.5px}
.pager{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.pager .pg{margin-left:auto;display:flex;gap:5px}
.pager .pg button{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600;color:var(--ink-2)}
.pager .pg button.on{background:var(--blue-600);border-color:var(--blue-600);color:#fff}

/* ---------------- reports ---------------- */
.report-card-tile{
  padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:.15s;
  display:flex;flex-direction:column;gap:10px;
}
.report-card-tile:hover{border-color:#C7D7F5;box-shadow:var(--shadow-2);transform:translateY(-1px)}
.report-card-tile .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-700)}
.report-card-tile .ic svg{width:18px;height:18px}
.report-card-tile h4{font-size:13.5px;font-weight:700}
.report-card-tile p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
.report-card-tile .go{margin-top:auto;font-size:11.5px;font-weight:600;color:var(--blue-600);display:flex;align-items:center;gap:4px}
.report-card-tile .go svg{width:12px;height:12px}

/* ---------------- grading ---------------- */
.gtabs{display:flex;gap:18px;border-bottom:1px solid var(--line);padding:0 18px}
.gtabs button{
  border:0;background:transparent;padding:13px 0;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.gtabs button.on{color:var(--blue-700);border-bottom-color:var(--blue-600)}
.gtable td,.gtable th{padding:9px 14px}
.gtable .input{height:32px;width:78px;font-size:12.5px;text-align:center}
.gtable .inp-sm{height:30px;width:64px}
.rule{
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#FCFDFF;
  display:flex;gap:11px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:var(--ink-2);
}
.rule .n{width:22px;height:22px;border-radius:6px;background:var(--navy-800);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 22px}
.paperkey{display:flex;gap:5px;flex-wrap:wrap}
.pk{
  font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 6px;background:#F2F5F9;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.pk.d{background:#E7F8F0;color:#067647}.pk.c{background:#EAF2FF;color:#175CD3}
.pk.p{background:#FFF6E5;color:#B54708}.pk.f{background:#FEECEC;color:#B42318}

/* ---------------- settings ---------------- */
.tier{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:8px;position:relative}
.tier.on{border-color:#9CC0FA;box-shadow:0 0 0 3px rgba(31,111,235,.09)}
.tier .badge{position:absolute;top:-9px;right:14px;background:var(--blue-600);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px}
.tier .nm{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.tier .pr{font-family:"Plus Jakarta Sans";font-size:21px;font-weight:700;letter-spacing:-.02em}
.tier .pr span{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:0}
.tier ul{margin:4px 0 10px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.tier li{font-size:11.5px;color:var(--ink-2);display:flex;gap:7px;align-items:flex-start}
.tier li svg{width:13px;height:13px;color:var(--success);flex:0 0 13px;margin-top:1px}

/* ---------------- report card (print) ---------------- */
.rc-page{
  width:210mm;min-height:297mm;background:#fff;margin:0 auto;
  box-shadow:0 4px 30px rgba(11,27,51,.13);color:#152238;
  font-family:"Inter",sans-serif;font-size:10pt;
}
.rc-band{
  background:linear-gradient(120deg,#0B2547 0%,#123A66 62%,#0B2547 100%);
  color:#fff;padding:9mm 12mm 7mm;position:relative;overflow:hidden;
}
.rc-band::after{
  content:"";position:absolute;inset:0;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='white' stroke-width='1'/></svg>");
  background-size:26px 26px;
}
.rc-head{display:flex;align-items:center;gap:6mm;position:relative;z-index:1}
.rc-crest{
  width:17mm;height:17mm;border-radius:3mm;background:#fff;color:#0B2547;display:grid;place-items:center;
  font-family:"Plus Jakarta Sans";font-weight:800;font-size:15pt;flex:0 0 17mm;
}
.rc-school h1{font-size:16pt;font-weight:800;letter-spacing:-.01em;margin:0}
.rc-school .ad{font-size:7.6pt;color:#B9CCE4;margin-top:1mm;letter-spacing:.02em}
.rc-title{
  display:flex;align-items:center;justify-content:space-between;margin-top:6mm;
  padding-top:4mm;border-top:1px solid rgba(255,255,255,.18);position:relative;z-index:1;
}
.rc-title h2{font-size:10.5pt;font-weight:700;letter-spacing:.02em}
.rc-title .term{font-size:7.6pt;color:#C6D6EA;letter-spacing:.08em;text-transform:uppercase}
.rc-body{padding:7mm 12mm 6mm}
.rc-id{display:flex;gap:5mm;align-items:center;margin-bottom:6mm}
.rc-photo{
  width:22mm;height:26mm;border-radius:2mm;background:#EDF2F9;border:1px solid #DCE5F1;
  display:grid;place-items:center;color:#9AAEC7;flex:0 0 22mm;font-size:7pt;text-align:center;
}
.rc-idgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm 5mm;flex:1}
.rc-idgrid .k{font-size:6.6pt;text-transform:uppercase;letter-spacing:.07em;color:#7C8DA5;font-weight:700}
.rc-idgrid .v{font-size:9pt;font-weight:700;margin-top:.6mm}
.rc-chart{
  border:1px solid #E4EAF3;border-radius:3mm;padding:4mm;margin-bottom:5mm;
  display:flex;gap:5mm;align-items:center;background:#FBFCFE;
}
.rc-chart .lbl{font-size:7pt;color:#7C8DA5;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rc-chart .big{font-family:"Plus Jakarta Sans";font-size:19pt;font-weight:800;letter-spacing:-.02em;line-height:1}
.rc-chart .cap{font-size:6.8pt;color:#7C8DA5;margin-top:1mm}
.rc-stats{display:flex;gap:3mm;margin-left:auto}
.rc-stat{border:1px solid #E4EAF3;border-radius:2mm;padding:2.4mm 4mm;background:#fff;min-width:24mm}
.rc-stat .k{font-size:6.2pt;text-transform:uppercase;letter-spacing:.06em;color:#7C8DA5;font-weight:700}
.rc-stat .v{font-family:"Plus Jakarta Sans";font-size:13pt;font-weight:800;line-height:1.2}
.rc-table{width:100%;border-collapse:collapse;font-size:7.8pt}
.rc-table th{
  background:#F3F6FB;color:#5D6F88;font-size:6.2pt;text-transform:uppercase;letter-spacing:.06em;
  padding:2mm 2mm;text-align:left;border-bottom:1px solid #DCE5F1;font-weight:700;
}
.rc-table td{padding:1.7mm 2mm;border-bottom:1px solid #EDF1F7;vertical-align:middle}
.rc-table .subj{font-weight:700;font-size:8.2pt}
.rc-table .paper{color:#7C8DA5;font-size:6.8pt}
.rc-table .grade{display:inline-grid;place-items:center;min-width:7mm;height:5.4mm;border-radius:1.2mm;font-weight:800;font-size:7.4pt}
.rc-table .desc{color:#5D6F88;font-size:7pt}
.rc-table .teacher{color:#7C8DA5;font-size:6.8pt}
.rc-note{display:flex;justify-content:space-between;gap:6mm;margin-top:5mm;font-size:7pt;color:#7C8DA5}
.rc-comments{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:5mm}
.rc-comment{border:1px solid #E4EAF3;border-radius:2.5mm;padding:3mm 3.5mm;min-height:22mm;background:#FCFDFF}
.rc-comment .k{font-size:6.4pt;text-transform:uppercase;letter-spacing:.06em;color:#7C8DA5;font-weight:700;margin-bottom:1.5mm}
.rc-comment .t{font-size:7.6pt;line-height:1.5;color:#33455C}
.rc-sign{display:flex;gap:8mm;margin-top:4mm;font-size:6.6pt;color:#7C8DA5}
.rc-sign .line{flex:1;border-top:1px solid #C9D5E5;padding-top:1.2mm}
.rc-foot{
  margin-top:5mm;border-top:1px solid #E4EAF3;padding-top:3mm;display:flex;align-items:center;gap:4mm;
  font-size:6.4pt;color:#7C8DA5;
}
.rc-qr{width:13mm;height:13mm;border:1px solid #DCE5F1;border-radius:1.5mm;display:grid;place-items:center;background:#fff}
.rc-motto{margin-left:auto;text-align:right;font-style:italic;color:#5D6F88}
/* ---------------- subject comments ---------------- */
.comment-table{min-width:900px}
.comment-table th.comment-learner,
.comment-table td.comment-learner{
  position:sticky;left:0;z-index:2;min-width:190px;max-width:220px;
  background:#fff;box-shadow:1px 0 0 var(--line-soft);
}
.comment-table th.comment-learner{background:#FAFBFD;z-index:3}
.comment-table th.comment-subject{min-width:180px;vertical-align:top}
.comment-table td.comment-cell{min-width:180px;vertical-align:top}
.comment-table textarea.input{
  height:auto;min-height:58px;padding:8px 10px;font-size:12px;line-height:1.45;
  resize:vertical;font-family:inherit;
}
.comment-table .v{font-weight:600;color:var(--ink);font-size:12.5px}

@page{size:A4;margin:0}
@media print{
  body{background:#fff}
  .rc-page{box-shadow:none;margin:0;width:210mm;min-height:297mm}
  .no-print{display:none!important}
}