/*
 * ──────────────────────────────────────────────────────────────────────────
 *  SHASWAT SCHOOLOS — Shared Page Layout CSS
 *  Injected inline via SchoolPanelProvider HEAD_END renderHook so these
 *  classes are available on every school panel page regardless of whether
 *  Tailwind utility classes are compiled into the panel theme bundle.
 * ──────────────────────────────────────────────────────────────────────────
 */

/* ── Academic Overview (ao-*) ── */
.school-academic-overview{display:flex;flex-direction:column;gap:1rem}
.ao-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(min-width:1280px){.ao-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ao-kpi-card{background:var(--schoolos-card,#0f2a1a);border:1px solid var(--schoolos-line,rgba(255,255,255,.1));border-radius:12px;padding:1rem;color:var(--schoolos-ink,#e7fcee)}
.ao-kpi-alert{border-color:rgba(255,93,93,.4)!important;background:var(--schoolos-card,#0f2a1a)!important}
.ao-kpi-label{margin:0;color:var(--schoolos-muted,#a9dab9);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ao-kpi-value{margin:.35rem 0 0;font-size:2rem;font-weight:800;color:var(--schoolos-ink,#e7fcee);line-height:1.1}
.ao-kpi-meta{margin:.3rem 0 0;font-size:.75rem;color:var(--schoolos-muted,#a9dab9)}
.ao-panel-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1280px){.ao-panel-grid{grid-template-columns:1fr 1fr}}
.ao-panel{background:var(--schoolos-card,#0f2a1a);border:1px solid var(--schoolos-line,rgba(255,255,255,.1));border-radius:12px;padding:1.1rem}
.ao-panel-title{margin:0 0 .7rem;font-size:.9rem;font-weight:700;color:var(--schoolos-ink,#e7fcee)}
.ao-empty{margin:0;padding:1.5rem 0;text-align:center;font-size:.85rem;color:var(--schoolos-muted,#a9dab9)}
.ao-list{display:flex;flex-direction:column;gap:.4rem}
.ao-list-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--schoolos-line,rgba(255,255,255,.1));background:var(--schoolos-surface,#0f2018);font-size:.82rem;color:var(--schoolos-ink,#e7fcee)}
.ao-progress-list{display:flex;flex-direction:column;gap:.55rem;max-height:22rem;overflow-y:auto}
.ao-progress-head{display:flex;justify-content:space-between;font-size:.75rem;color:var(--schoolos-muted,#a9dab9);margin-bottom:.2rem}
.ao-progress-track{height:8px;border-radius:999px;background:rgba(11,191,85,.14);overflow:hidden}
.ao-progress-fill{height:8px;border-radius:999px}
.ao-progress-fill.ao-good{background:#35d07f}
.ao-progress-fill.ao-warn{background:#ffb020}
.ao-progress-fill.ao-bad{background:#ff5d5d}
/* Light mode overrides for Academic Overview */
html:not(.dark) .fi-body .ao-kpi-card,
html:not(.dark) .ao-kpi-card{background:var(--schoolos-card,#e8f6ee);border-color:var(--schoolos-line,rgba(0,0,0,.1));color:var(--schoolos-ink,#0f1a12)}
html:not(.dark) .fi-body .ao-kpi-label,
html:not(.dark) .ao-kpi-label{color:var(--schoolos-muted,#2d5a3a)}
html:not(.dark) .fi-body .ao-kpi-value,
html:not(.dark) .ao-kpi-value{color:var(--schoolos-ink,#0f1a12)}
html:not(.dark) .fi-body .ao-kpi-meta,
html:not(.dark) .ao-kpi-meta{color:var(--schoolos-muted,#2d5a3a)}
html:not(.dark) .fi-body .ao-kpi-alert,
html:not(.dark) .ao-kpi-alert{background:var(--schoolos-card,#e8f6ee)!important;border-color:rgba(220,38,38,.3)!important}
html:not(.dark) .fi-body .ao-panel,
html:not(.dark) .ao-panel{background:var(--schoolos-card,#e8f6ee);border-color:var(--schoolos-line,rgba(0,0,0,.1))}
html:not(.dark) .fi-body .ao-panel-title,
html:not(.dark) .ao-panel-title{color:var(--schoolos-ink,#0f1a12)}
html:not(.dark) .fi-body .ao-empty,
html:not(.dark) .ao-empty{color:var(--schoolos-muted,#2d5a3a)}
html:not(.dark) .fi-body .ao-list-item,
html:not(.dark) .ao-list-item{background:var(--schoolos-surface,#ffffff);border-color:var(--schoolos-line,rgba(0,0,0,.15));color:var(--schoolos-ink,#0f1a12)}
html:not(.dark) .fi-body .ao-progress-head,
html:not(.dark) .ao-progress-head{color:var(--schoolos-muted,#2d5a3a)}

/* ── Shared overview page primitives (so-*) ── */
.so-page{display:flex;flex-direction:column;gap:1rem}

/* Leadership header */
.so-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;flex-wrap:wrap}
.so-head-title{margin:0;font-size:1.35rem;line-height:1.2;font-weight:800;color:var(--schoolos-ink,#e7fcee)}
.so-head-sub{margin:.3rem 0 0;font-size:.78rem;color:var(--schoolos-muted,#a9dab9)}
.so-head-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.so-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:10px;border:1px solid rgba(11,191,85,.35);background:rgba(11,191,85,.13);color:#0BBF55;font-size:.72rem;font-weight:700;text-decoration:none}
.so-btn:hover{filter:brightness(1.07)}
.so-btn.ok{border-color:rgba(53,208,127,.35);background:rgba(53,208,127,.13);color:#35d07f}
.so-btn.warn{border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.13);color:#ffb020}
.so-btn-pill{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:999px;background:rgba(0,0,0,.28);color:#fff;font-size:.67rem;font-weight:800}

/* KPI strip */
.so-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
@media(min-width:768px){.so-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.so-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.so-kpi-grid-7{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media(min-width:768px){.so-kpi-grid-7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1280px){.so-kpi-grid-7{grid-template-columns:repeat(7,minmax(0,1fr))}}
.so-kpi-grid-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media(min-width:960px){.so-kpi-grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.so-kpi-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.so-kpi-card{background:var(--schoolos-card,#0f2a1a);border:1px solid var(--schoolos-line,rgba(255,255,255,.1));border-radius:12px;padding:.9rem}
.so-kpi-card.so-alert{border-color:rgba(255,93,93,.4)!important;background:var(--schoolos-card,#0f2a1a)!important}
.so-kpi-label{margin:0;color:var(--schoolos-muted,#a9dab9);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.so-kpi-value{margin:.3rem 0 0;font-size:1.8rem;font-weight:800;color:var(--schoolos-ink,#e7fcee);line-height:1.1}
.so-kpi-meta{margin:.25rem 0 0;font-size:.72rem;color:var(--schoolos-muted,#a9dab9)}

/* Two-column panel row */
.so-panel-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1024px){.so-panel-row{grid-template-columns:1fr 1fr}}

/* Content panel */
.so-panel{background:var(--schoolos-card,#0f2a1a);border:1px solid var(--schoolos-line,rgba(255,255,255,.1));border-radius:12px;padding:1.1rem}
.so-panel-title{margin:0 0 .75rem;font-size:.88rem;font-weight:700;color:var(--schoolos-ink,#e7fcee);display:flex;align-items:center;gap:.35rem}
.so-panel-title .so-icon{font-size:1rem}
.so-empty{margin:0;padding:1.4rem 0;text-align:center;font-size:.85rem;color:var(--schoolos-muted,#a9dab9)}

/* List rows */
.so-list{display:flex;flex-direction:column;gap:.35rem}
.so-list-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--schoolos-line,rgba(255,255,255,.1));background:var(--schoolos-surface,#0f2018);font-size:.8rem;color:var(--schoolos-ink,#e7fcee)}
.so-list-row .so-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-list-row .so-sub{font-size:.72rem;color:var(--schoolos-muted,#a9dab9);white-space:nowrap}
.so-list-row .so-time{flex-shrink:0;font-size:.72rem;color:var(--schoolos-muted,#a9dab9)}

/* Device status card (campus command) */
.so-device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(min-width:768px){.so-device-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.so-device-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.so-device-card{border-radius:10px;border:1px solid var(--schoolos-line,rgba(255,255,255,.1));padding:.7rem .8rem;background:var(--schoolos-surface,#0f2018)}
.so-device-card.so-online{border-color:rgba(53,208,127,.3);background:rgba(53,208,127,.06)}
.so-device-card.so-offline{border-color:rgba(255,93,93,.3);background:rgba(255,93,93,.06)}
.so-device-name{font-size:.78rem;font-weight:700;color:var(--schoolos-ink,#e7fcee);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-device-type{font-size:.7rem;color:var(--schoolos-muted,#a9dab9);margin:.15rem 0}
.so-device-loc{font-size:.7rem;color:var(--schoolos-muted,#a9dab9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-device-status{font-size:.72rem;margin-top:.3rem;display:flex;align-items:center;gap:.3rem}
.so-device-status.so-online{color:#35d07f}
.so-device-status.so-offline{color:#ff5d5d}
.so-device-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.so-device-dot.so-online{background:#35d07f}
.so-device-dot.so-offline{background:#ff5d5d}

/* Progress bars */
.so-progress-wrap{margin-bottom:.55rem}
.so-progress-wrap:last-child{margin-bottom:0}
.so-progress-head{display:flex;justify-content:space-between;font-size:.72rem;color:var(--schoolos-muted,#a9dab9);margin-bottom:.18rem}
.so-progress-track{height:8px;border-radius:999px;background:var(--schoolos-line,rgba(255,255,255,.1));overflow:hidden}
.so-progress-fill{height:8px;border-radius:999px}
.so-progress-fill.so-green{background:#35d07f}
.so-progress-fill.so-yellow{background:#ffb020}
.so-progress-fill.so-red{background:#ff5d5d}
.so-progress-fill.so-blue{background:#0BBF55}
.so-progress-fill.so-indigo{background:#818cf8}

/* Tab-bar mini chart */
.so-bar-chart{display:flex;align-items:flex-end;gap:2px;height:56px}
.so-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.so-bar{width:100%;border-radius:3px 3px 0 0;min-height:3px}
.so-bar.so-green{background:rgba(53,208,127,.7)}
.so-bar.so-yellow{background:rgba(255,176,32,.7)}
.so-bar.so-red{background:rgba(255,93,93,.7)}
.so-bar-label{font-size:8px;color:var(--schoolos-muted,#a9dab9)}

/* Table */
.so-table-wrap{overflow-x:auto}
.so-table{width:100%;border-collapse:collapse;font-size:.8rem;color:var(--schoolos-ink,#e7fcee)}
.so-table th{padding:.4rem .7rem;text-align:left;font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--schoolos-muted,#a9dab9);border-bottom:1px solid var(--schoolos-line,rgba(255,255,255,.1))}
.so-table th.ta-r,.so-table td.ta-r{text-align:right}
.so-table td{padding:.5rem .7rem;border-bottom:1px solid var(--schoolos-line,rgba(255,255,255,.08))}
.so-table tr:last-child td{border-bottom:none}
.so-table tr:hover td{background:var(--schoolos-surface,#0f2018)}

/* Badges */
.so-badge{display:inline-flex;align-items:center;padding:.15em .5em;border-radius:999px;font-size:.68rem;font-weight:700;white-space:nowrap}
.so-badge.ok{background:rgba(53,208,127,.15);color:#35d07f;border:1px solid rgba(53,208,127,.3)}
.so-badge.warn{background:rgba(255,176,32,.15);color:#ffb020;border:1px solid rgba(255,176,32,.3)}
.so-badge.bad{background:rgba(255,93,93,.15);color:#ff5d5d;border:1px solid rgba(255,93,93,.3)}
.so-badge.info{background:rgba(11,191,85,.15);color:#0BBF55;border:1px solid rgba(11,191,85,.3)}
.so-badge.grey{background:rgba(169,218,185,.1);color:#a9dab9;border:1px solid rgba(169,218,185,.2)}
.so-badge.running{background:rgba(129,140,248,.15);color:#818cf8;border:1px solid rgba(129,140,248,.3)}
.so-badge.stale{background:rgba(255,176,32,.15);color:#ffb020;border:1px solid rgba(255,176,32,.3)}
.so-badge.never{background:rgba(169,218,185,.1);color:#a9dab9;border:1px solid rgba(169,218,185,.2)}

/* Divider */
.so-divider{border:none;border-top:1px solid var(--schoolos-line,rgba(255,255,255,.1));margin:0}

/* AI Co-Pilot helpers */
.so-main-2col{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1200px){.so-main-2col{grid-template-columns:2fr 1fr}}
.so-form-group{margin-bottom:.85rem}
.so-label{display:block;margin:0 0 .42rem;font-size:.78rem;font-weight:700;color:var(--schoolos-ink,#e7fcee)}
.so-hint{display:inline-block;margin-left:.35rem;font-size:.7rem;font-weight:500;color:var(--schoolos-muted,#a9dab9)}
.so-chip-grid{display:grid;grid-template-columns:1fr;gap:.45rem}
@media(min-width:720px){.so-chip-grid{grid-template-columns:1fr 1fr 1fr}}
.so-chip{width:100%;text-align:left;padding:.48rem .58rem;border-radius:8px;border:1px solid var(--schoolos-line,rgba(255,255,255,.15));background:var(--schoolos-surface,#0f2018);color:var(--schoolos-ink,#e7fcee);font-size:.76rem;font-weight:600;cursor:pointer}
.so-chip:hover{border-color:rgba(11,191,85,.35);background:rgba(11,191,85,.08)}
.so-chip.active{border-color:rgba(11,191,85,.45);background:rgba(11,191,85,.15);color:#0BBF55}
.so-textarea{width:100%;resize:vertical;min-height:7.2rem;padding:.62rem .72rem;border-radius:10px;border:1px solid var(--schoolos-line,rgba(255,255,255,.16));background:var(--schoolos-surface,#0f2018);color:var(--schoolos-ink,#e7fcee);font-size:.84rem;line-height:1.45;outline:none}
.so-textarea:focus{border-color:rgba(11,191,85,.45);box-shadow:0 0 0 1px rgba(11,191,85,.25)}
.so-response{margin-top:.65rem;padding:.8rem .85rem;border-radius:10px;border:1px solid var(--schoolos-line,rgba(255,255,255,.12));background:var(--schoolos-surface,#0f2018);color:var(--schoolos-ink,#e7fcee);font-size:.82rem;line-height:1.45;white-space:pre-wrap;max-height:26rem;overflow:auto}

/* ── Light mode normalization for shared primitives ── */
html:not(.dark) .fi-body .so-kpi-card,
html:not(.dark) .so-kpi-card,
html:not(.dark) .fi-body .so-panel,
html:not(.dark) .so-panel{background:var(--schoolos-card,#e8f6ee);border-color:var(--schoolos-line,rgba(0,0,0,.1))}

html:not(.dark) .fi-body .so-list-row,
html:not(.dark) .so-list-row,
html:not(.dark) .fi-body .so-device-card,
html:not(.dark) .so-device-card,
html:not(.dark) .fi-body .so-chip,
html:not(.dark) .so-chip,
html:not(.dark) .fi-body .so-textarea,
html:not(.dark) .so-textarea,
html:not(.dark) .fi-body .so-response,
html:not(.dark) .so-response{background:var(--schoolos-surface,#ffffff);border-color:var(--schoolos-line,rgba(0,0,0,.1));color:var(--schoolos-ink,#0f1a12)}

html:not(.dark) .fi-body .so-table tr:hover td,
html:not(.dark) .so-table tr:hover td{background:var(--schoolos-surface,#ffffff)}

html:not(.dark) .fi-body .so-head-title,
html:not(.dark) .so-head-title,
html:not(.dark) .fi-body .so-panel-title,
html:not(.dark) .so-panel-title,
html:not(.dark) .fi-body .so-kpi-value,
html:not(.dark) .so-kpi-value,
html:not(.dark) .fi-body .so-list-row,
html:not(.dark) .so-list-row,
html:not(.dark) .fi-body .so-list-row .so-name,
html:not(.dark) .so-list-row .so-name,
html:not(.dark) .fi-body .so-table,
html:not(.dark) .so-table,
html:not(.dark) .fi-body .so-device-name,
html:not(.dark) .so-device-name,
html:not(.dark) .fi-body .so-label,
html:not(.dark) .so-label{color:var(--schoolos-ink,#0f1a12)!important}

html:not(.dark) .fi-body .so-head-sub,
html:not(.dark) .so-head-sub,
html:not(.dark) .fi-body .so-kpi-label,
html:not(.dark) .so-kpi-label,
html:not(.dark) .fi-body .so-kpi-meta,
html:not(.dark) .so-kpi-meta,
html:not(.dark) .fi-body .so-list-row .so-sub,
html:not(.dark) .so-list-row .so-sub,
html:not(.dark) .fi-body .so-list-row .so-time,
html:not(.dark) .so-list-row .so-time,
html:not(.dark) .fi-body .so-table th,
html:not(.dark) .so-table th,
html:not(.dark) .fi-body .so-progress-head,
html:not(.dark) .so-progress-head,
html:not(.dark) .fi-body .so-bar-label,
html:not(.dark) .so-bar-label,
html:not(.dark) .fi-body .so-empty,
html:not(.dark) .so-empty,
html:not(.dark) .fi-body .so-hint,
html:not(.dark) .so-hint{color:var(--schoolos-muted,#2d5a3a)!important}

html:not(.dark) .so-panel,
html:not(.dark) .so-kpi-card,
html:not(.dark) .so-list-row,
html:not(.dark) .so-device-card,
html:not(.dark) .so-chip,
html:not(.dark) .so-textarea,
html:not(.dark) .so-response{background:var(--schoolos-surface,#ffffff)!important;border-color:var(--schoolos-line,rgba(0,0,0,.12))!important}

html:not(.dark) .so-head-title,
html:not(.dark) .so-panel-title,
html:not(.dark) .so-kpi-value,
html:not(.dark) .so-list-row,
html:not(.dark) .so-list-row .so-name,
html:not(.dark) .so-table,
html:not(.dark) .so-device-name,
html:not(.dark) .so-label{color:var(--schoolos-ink,#0f1a12)!important}

html:not(.dark) .so-head-sub,
html:not(.dark) .so-kpi-label,
html:not(.dark) .so-kpi-meta,
html:not(.dark) .so-list-row .so-sub,
html:not(.dark) .so-list-row .so-time,
html:not(.dark) .so-table th,
html:not(.dark) .so-progress-head,
html:not(.dark) .so-bar-label,
html:not(.dark) .so-empty,
html:not(.dark) .so-hint{color:var(--schoolos-muted,#2d5a3a)!important}

.so-note{border-color:rgba(255,176,32,.35)!important;background:rgba(255,176,32,.08)!important}