/* ============================================================================
 * KAIROS ACADEMY TECH — Octahedron workspace design system
 *
 * The shared presentation layer for every Octahedron (school director /
 * school_admin) page. Extracted from the redesigned home so modules INHERIT
 * the design instead of copy-pasting ~200 lines of inline CSS each — with six
 * modules that would have meant six edits per change and guaranteed drift.
 *
 * Mirrors the Superadmin design language (flat page headers, accent-bar
 * section titles, glass tiles, provenance badges) but reads its colours from
 * the Octahedron tokens, so it stays teal without hardcoding an accent.
 *
 * LOAD ORDER — this file expects:
 *   octa-shell.css  →  superadmin-components.css  →  superadmin-workspace.css
 *   →  octa-workspace.css  →  octa-kairos-skin.css      (skin last = authority)
 *
 * Presentation only. No layout assumptions beyond .page-content.
 * ==========================================================================*/

:root{
  --ok:#4fd1c5; --orange:#f2b134; --red:#ff8d8d; --info:#a78bfa;
  --good:rgba(79,209,197,.12); --warn:rgba(242,177,52,.12); --danger:rgba(255,141,141,.12);

  /* Surfaces read as glass sitting ON the page rather than dissolving into it:
     a lighter translucent fill + real backdrop blur + a bright top highlight.
     The old rgba(22,17,48,.72) over a near-black page was ~1.1:1 contrast. */
  --glass:linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.045) 100%);
  --glass-bg:rgba(45,36,84,.55);
  --glass-blur:blur(16px) saturate(125%);
  --tile-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.30);

  /* superadmin-components.css defaults its "info" ink to violet. */
  --sa-info-fg:var(--primary,#4fd1c5);
}

/* ── Page canvas ───────────────────────────────────────────────────────────
 * DELIBERATELY EMPTY. The canvas is defined once, on html/body in
 * octa-kairos-skin.css, so every Octahedron page shares it. It used to be
 * declared here too, which meant converted pages got the lighter wash and
 * unconverted ones kept the old near-black — the portal changed background
 * as you navigated, and that read as a broken layout. Two copies of one
 * value is exactly how that drift happens, so this keeps the class as a
 * harmless hook for pages that already reference it, and nothing more. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Any glass surface. Applied via the component classes below. */
.octa-glass{
  background:var(--glass);
  background-color:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--line);
  box-shadow:var(--tile-shadow);
}

/* ── Slim action bar (NOT a hero — superadmin removed exactly that) ──────── */
.exec-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:18px;padding:10px 14px;border-radius:14px;
  background:var(--glass);background-color:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--line);box-shadow:var(--tile-shadow);
}
.exec-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted);}
.exec-status .sep{opacity:.5;}
.exec-status .status-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px rgba(79,209,197,.16);flex-shrink:0;}
.exec-status .status-dot.warn{background:var(--orange);box-shadow:0 0 0 4px rgba(242,177,52,.16);}
.exec-status .status-dot.off{background:var(--muted);box-shadow:0 0 0 4px rgba(255,255,255,.08);}
.exec-status code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;opacity:.75;}
.exec-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sa-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:12px;
  font-size:13px;font-weight:700;border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;font-family:inherit;}
.sa-btn:hover{border-color:var(--primary);}
.sa-btn:disabled{opacity:.5;cursor:not-allowed;}
.sa-btn.primary{background:linear-gradient(135deg,#2a9d92 0%,#4fd1c5 100%);color:#03211d;
  border-color:transparent;box-shadow:0 0 24px rgba(79,209,197,.28),inset 0 1px 0 rgba(255,255,255,.08);}
.sa-btn.primary:hover{background:linear-gradient(135deg,#33b3a6 0%,#7fe0d6 100%);}
.sa-btn.sm{height:32px;padding:0 12px;font-size:12px;}

/* ── Sections ────────────────────────────────────────────────────────────── */
.oc-section{margin-bottom:22px;}
.oc-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.oc-section-title{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);}
.oc-section-title::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--primary);
  display:inline-block;flex:0 0 auto;}
.oc-section-sub{font-size:12px;color:var(--muted);font-weight:600;}
.oc-section-link{font-size:12px;font-weight:700;color:var(--primary);text-decoration:none;white-space:nowrap;}
.oc-section-link:hover{text-decoration:underline;}

/* ── Provenance vocabulary — every number declares whether it is real ────── */
.oc-badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:2px 8px;white-space:nowrap;}
.oc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9;}
.oc-badge.live{color:var(--ok);background:var(--good);border:1px solid rgba(79,209,197,.35);}
.oc-badge.derived{color:var(--info);background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.35);}
.oc-badge.unavailable{color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);}
.oc-badge.unavailable::before{border-radius:2px;}   /* square dot: never colour-only */
.val-na{color:var(--muted)!important;}
.oc-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.45;}

/* ── KPI tiles ───────────────────────────────────────────────────────────── */
.kpi-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.kpi-strip.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.kpi-card{background:var(--glass);background-color:var(--glass-bg);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-radius:18px;padding:16px 18px;box-shadow:var(--tile-shadow);text-decoration:none;color:inherit;
  display:block;transition:transform .12s ease,border-color .12s ease;}
a.kpi-card:hover{transform:translateY(-1px);border-color:rgba(79,209,197,.45);}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.kpi-label{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.kpi-val{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:4px;
  font-variant-numeric:tabular-nums;}
.kpi-trend{font-size:11px;font-weight:700;color:var(--muted);margin-top:6px;line-height:1.4;}
.kpi-trend.up{color:var(--ok);}
.kpi-trend.warn{color:var(--orange);}

/* ── Attention rows: the number, what it means, and the action ──────────── */
.action-list{display:flex;flex-direction:column;gap:10px;}
.action-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;
  border:1px solid var(--line);border-radius:16px;
  background:var(--glass);background-color:rgba(45,36,84,.48);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--tile-shadow);border-left:3px solid var(--muted);}
.action-row.danger{border-left-color:var(--red);}
.action-row.warn{border-left-color:var(--orange);}
.action-row.info{border-left-color:var(--info);}
.action-row.good{border-left-color:var(--ok);}
.action-lead{display:flex;align-items:center;gap:14px;min-width:0;}
.action-count{font-size:26px;font-weight:800;min-width:46px;text-align:center;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;}
.action-count.danger{color:var(--red);}
.action-count.warn{color:var(--orange);}
.action-count.info{color:var(--info);}
.action-count.good{color:var(--ok);}
.action-meta{min-width:0;}
.action-meta h4{margin:0;font-size:15px;font-weight:700;}
.action-meta p{margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.4;}

/* ── Ops panels: label ⟷ number rows, link pinned to the bottom ─────────── */
.oc-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.oc-grid-2{display:grid;grid-template-columns:1.25fr .85fr;gap:14px;}
.ops-panel{background:var(--glass);background-color:var(--glass-bg);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-radius:18px;padding:16px 18px;box-shadow:var(--tile-shadow);display:flex;flex-direction:column;}
.ops-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;
  font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.ops-stat-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:13px;}
.ops-stat-row:last-of-type{border-bottom:none;}
.ops-stat-row .num{font-weight:800;font-variant-numeric:tabular-nums;}
.ops-link{display:inline-block;margin-top:auto;padding-top:12px;font-size:12px;font-weight:700;
  color:var(--primary);text-decoration:none;}
.ops-link:hover{text-decoration:underline;}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.octa-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);
  padding-bottom:0;}
.octa-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:9px 14px;cursor:pointer;
  border-radius:10px 10px 0 0;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
.octa-tab:hover{color:var(--text);background:rgba(255,255,255,.04);}
.octa-tab[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--primary);
  background:rgba(79,209,197,.08);}
.octa-tab .tab-count{font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--muted);font-variant-numeric:tabular-nums;}
.octa-tab[aria-selected="true"] .tab-count{background:rgba(79,209,197,.18);color:var(--primary);}

/* ── Toolbar (search + filters) ─────────────────────────────────────────── */
.octa-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.octa-search{flex:1 1 260px;min-width:0;position:relative;display:flex;align-items:center;}
.octa-search input{width:100%;height:36px;padding:0 12px 0 34px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);
  font:inherit;font-size:13px;}
.octa-search input::placeholder{color:var(--muted);}
.octa-search input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent;}
.octa-search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--muted);pointer-events:none;}

/* ── Data table ──────────────────────────────────────────────────────────── */
.octa-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;
  background:var(--glass);background-color:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--tile-shadow);}
.octa-table{width:100%;border-collapse:collapse;font-size:13px;}
.octa-table th,.octa-table td{padding:11px 14px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);}
.octa-table thead th{background:rgba(255,255,255,.05);color:var(--muted);font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;position:sticky;top:0;z-index:1;}
.octa-table tbody tr:last-child td{border-bottom:0;}
.octa-table tbody tr:hover{background:rgba(255,255,255,.035);}
.cell-strong{font-weight:700;color:var(--text);}
.cell-sub{font-size:11.5px;color:var(--muted);}
.cell-num{font-variant-numeric:tabular-nums;font-weight:700;}
.person{display:flex;align-items:center;gap:10px;min-width:0;}
.person-avatar{width:30px;height:30px;border-radius:999px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:800;
  background:rgba(79,209,197,.14);color:var(--primary);border:1px solid rgba(79,209,197,.28);}
.person-meta{min-width:0;display:flex;flex-direction:column;gap:1px;}
/* These are spans, so they must be told to stack — inline they render as one
   run-on string ("Alejandrosoliloquio.col@gmail.com"). */
.person-name{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.person-sub{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Status chips ────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:800;border:1px solid transparent;white-space:nowrap;}
.chip.ok{background:var(--good);color:var(--ok);border-color:rgba(79,209,197,.32);}
.chip.warn{background:var(--warn);color:var(--orange);border-color:rgba(242,177,52,.32);}
.chip.danger{background:var(--danger);color:var(--red);border-color:rgba(255,141,141,.32);}
.chip.info{background:rgba(167,139,250,.14);color:var(--info);border-color:rgba(167,139,250,.32);}
.chip.neutral{background:rgba(255,255,255,.07);color:var(--muted);border-color:var(--line);}

/* ── Empty / error states ────────────────────────────────────────────────── */
.empty-note{padding:22px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.55;
  border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.02);}
.empty-note strong{display:block;color:var(--text);margin-bottom:4px;font-size:13px;}

/* ── Quick actions strip ─────────────────────────────────────────────────── */
.quick-actions-strip{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--glass);background-color:var(--glass-bg);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-radius:16px;box-shadow:var(--tile-shadow);padding:12px 16px;}
.strip-label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin-right:4px;}

/* ── Module availability grid ───────────────────────────────────────────── */
.mod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;}
.mod-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px;}
.mod-row span:first-child{color:var(--text);}

/* ── Banners ─────────────────────────────────────────────────────────────── */
.banner{padding:14px 16px;border-radius:14px;margin-bottom:16px;font-size:13px;line-height:1.55;}
.banner.warn{background:var(--warn);border:1px solid rgba(242,177,52,.3);color:#f7d68a;}
.banner.danger{background:var(--danger);border:1px solid rgba(255,141,141,.3);color:#ffb3b3;}
.banner strong{display:block;margin-bottom:2px;}
.banner button{margin-top:8px;background:rgba(255,255,255,.12);border:1px solid var(--line);
  color:inherit;font:inherit;font-weight:700;font-size:12px;padding:6px 13px;border-radius:9px;cursor:pointer;}
.banner button:hover{background:rgba(255,255,255,.18);}

/* ── Loading skeleton ────────────────────────────────────────────────────── */
.sk{display:inline-block;min-width:2.2em;height:.72em;border-radius:5px;vertical-align:middle;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.18),rgba(255,255,255,.08));
  background-size:200% 100%;animation:octa-sh 1.25s ease-in-out infinite;}
@keyframes octa-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .kpi-strip,.kpi-strip.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .oc-grid-3,.oc-grid-2{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .mod-grid{grid-template-columns:1fr;}
  .action-row{flex-wrap:wrap;}
}
@media (max-width:420px){
  .kpi-strip,.kpi-strip.cols-3{grid-template-columns:1fr;}
}