/* SININBE EDU 4.0.39.19.23 — KPI board.
   Columns become stacked cards on phones and a grid on wider screens.
   Colours follow the surrounding admin palette in both themes. */

.se-kpi{
  --kpi-bg:#0b1a28;--kpi-surface:#10263a;--kpi-surface-2:#0d2033;--kpi-line:rgba(148,197,214,.20);
  --kpi-text:#eaf4ff;--kpi-muted:#93aec6;--kpi-accent:#21d4b4;--kpi-accent-soft:rgba(33,212,180,.12);
  --kpi-gold:#f5bf4f;--kpi-danger:#ff6d78;--kpi-good:#34d399;
  display:flex;flex-direction:column;gap:12px;min-width:0;width:100%;
  color:var(--kpi-text);font-family:"Tajawal","Space Grotesk",system-ui,sans-serif;
}
#app[data-theme="light"] .se-kpi{
  --kpi-bg:#f4f8fc;--kpi-surface:#ffffff;--kpi-surface-2:#f7fafd;--kpi-line:#dbe4ee;
  --kpi-text:#132234;--kpi-muted:#5f7387;--kpi-accent:#0e9d88;--kpi-accent-soft:#e6f8f4;
  --kpi-gold:#b7791f;--kpi-danger:#be123c;--kpi-good:#0f8a5f;
}
.se-kpi *{box-sizing:border-box;min-width:0}

.se-kpi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--kpi-line);border-radius:15px;background:var(--kpi-surface)}
.se-kpi-heading{display:flex;align-items:center;gap:10px;min-width:0}
.se-kpi-mark{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;
  background:var(--kpi-accent-soft);color:var(--kpi-accent)}
.se-kpi-head h2{margin:0;font-size:.98rem;color:var(--kpi-text)}
.se-kpi-head p{margin:3px 0 0;font-size:.65rem;color:var(--kpi-muted)}
.se-kpi-refresh{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;cursor:pointer;
  border:1px solid var(--kpi-line);border-radius:11px;background:var(--kpi-surface-2);color:var(--kpi-text);font-size:.72rem}
.se-kpi-refresh:hover{border-color:var(--kpi-accent);color:var(--kpi-accent)}
.se-kpi-refresh[disabled]{opacity:.55;cursor:progress}

.se-kpi-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px;
  padding:11px 13px;border:1px solid var(--kpi-line);border-radius:15px;background:var(--kpi-surface)}
.se-kpi-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.se-kpi-field>span{font-size:.62rem;color:var(--kpi-muted)}
.se-kpi-field select,.se-kpi-field input{width:100%;min-height:38px;padding:0 9px;border-radius:10px;
  border:1px solid var(--kpi-line);background:var(--kpi-surface-2);color:var(--kpi-text);font-size:.73rem}
.se-kpi-field select:focus,.se-kpi-field input:focus{outline:2px solid var(--kpi-accent);outline-offset:1px}

.se-kpi-status{padding:9px 12px;border-radius:11px;font-size:.68rem;
  border:1px solid var(--kpi-line);background:var(--kpi-surface-2);color:var(--kpi-muted)}
.se-kpi-status.is-error{color:var(--kpi-danger);border-color:var(--kpi-danger)}

.se-kpi-grid{display:grid;grid-template-columns:1fr;gap:11px}
@media(min-width:620px){.se-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.se-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1360px){
  .se-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .se-kpi-col-wide{grid-column:span 2}
}
@media(min-width:620px) and (max-width:1359px){.se-kpi-col-wide{grid-column:1/-1}}

.se-kpi-col{display:flex;flex-direction:column;gap:9px;padding:11px;min-width:0;
  border:1px solid var(--kpi-line);border-radius:15px;background:var(--kpi-surface)}
.se-kpi-col>header{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--kpi-line)}
.se-kpi-col>header span{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;
  background:var(--kpi-accent-soft);color:var(--kpi-accent);font-size:.76rem}
.se-kpi-col>header h3{margin:0;font-size:.79rem;color:var(--kpi-text)}

.se-kpi-rows{display:flex;flex-direction:column;gap:5px;min-width:0}
.se-kpi-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;
  padding:7px 9px;border-radius:10px;background:var(--kpi-surface-2);border:1px solid transparent;transition:border-color .16s}
.se-kpi-row:hover{border-color:var(--kpi-line)}
.se-kpi-row-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.se-kpi-row-label strong{font-size:.72rem;font-weight:600;color:var(--kpi-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-kpi-row-label small{font-size:.57rem;color:var(--kpi-muted)}
.se-kpi-badge{flex:0 0 auto;min-width:44px;padding:4px 9px;border-radius:9px;text-align:center;
  background:var(--kpi-accent-soft);color:var(--kpi-accent);font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums}
.se-kpi-row.is-total .se-kpi-badge{background:var(--kpi-accent);color:#04121a}
#app[data-theme="light"] .se-kpi-row.is-total .se-kpi-badge{color:#fff}
.se-kpi-row.is-muted .se-kpi-badge{background:transparent;border:1px dashed var(--kpi-line);color:var(--kpi-muted)}
.se-kpi-row.is-good .se-kpi-badge{background:rgba(52,211,153,.14);color:var(--kpi-good)}
.se-kpi-row.is-warn .se-kpi-badge{background:rgba(245,191,79,.15);color:var(--kpi-gold)}
.se-kpi-row.is-bad .se-kpi-badge{background:rgba(255,109,120,.14);color:var(--kpi-danger)}

.se-kpi-switch{display:flex;gap:5px}
.se-kpi-switch button{flex:1;min-height:32px;border-radius:9px;cursor:pointer;font-size:.66rem;
  border:1px solid var(--kpi-line);background:var(--kpi-surface-2);color:var(--kpi-muted)}
.se-kpi-switch button.is-active{background:var(--kpi-accent-soft);color:var(--kpi-accent);border-color:var(--kpi-accent)}

.se-kpi-more{align-self:flex-start;min-height:32px;padding:0 11px;border-radius:9px;cursor:pointer;font-size:.65rem;
  border:1px dashed var(--kpi-line);background:transparent;color:var(--kpi-accent)}
.se-kpi-more:hover{border-style:solid}

.se-kpi-note{font-size:.58rem;line-height:1.65;color:var(--kpi-muted)}
.se-kpi-empty{padding:13px 10px;border-radius:10px;text-align:center;font-size:.66rem;
  background:var(--kpi-surface-2);color:var(--kpi-muted);border:1px dashed var(--kpi-line)}

.se-kpi-card{display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:12px;
  background:var(--kpi-surface-2);border:1px solid var(--kpi-line)}
.se-kpi-card h4{margin:0;font-size:.71rem;color:var(--kpi-accent)}
.se-kpi-card .se-kpi-row{background:var(--kpi-surface)}

.se-kpi-adform{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px;align-items:end}
.se-kpi-adform label{display:flex;flex-direction:column;gap:4px;min-width:0}
.se-kpi-adform label>span{font-size:.58rem;color:var(--kpi-muted)}
.se-kpi-adform input,.se-kpi-adform select{width:100%;min-height:36px;padding:0 8px;border-radius:9px;font-size:.7rem;
  border:1px solid var(--kpi-line);background:var(--kpi-surface);color:var(--kpi-text)}
.se-kpi-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 13px;
  cursor:pointer;border:0;border-radius:9px;background:var(--kpi-accent);color:#04121a;font-size:.7rem;font-weight:700}
#app[data-theme="light"] .se-kpi-primary{color:#fff}
.se-kpi-primary[disabled]{opacity:.55;cursor:progress}

.se-kpi-foot{margin:0;font-size:.57rem;color:var(--kpi-muted);text-align:center}
.se-kpi.is-busy{opacity:.72;pointer-events:none}

.se-kpi[dir="ltr"] .se-kpi-row-label strong,.se-kpi[dir="ltr"] .se-kpi-head h2{text-align:left}

@media(max-width:520px){
  .se-kpi-head{padding:9px 10px}
  .se-kpi-head h2{font-size:.88rem}
  .se-kpi-refresh span{display:none}
  .se-kpi-refresh{width:38px;padding:0;flex:0 0 38px;justify-content:center}
  .se-kpi-filters{grid-template-columns:1fr;padding:9px 10px}
  .se-kpi-col{padding:10px}
  .se-kpi-adform{grid-template-columns:1fr}
  .se-kpi-primary{width:100%}
}

/* Missing-value summary shown under the board instead of an "unspecified" row. */
.se-kpi-completeness{margin:0;padding:8px 11px;border-radius:10px;text-align:center;
  background:var(--kpi-surface-2);border:1px dashed var(--kpi-line)}