/* Reuse the school app shell, navigation, appbar, typography and buttons. */
.platform-main { width:100%; max-width:1600px; }
.platform-nav .nav__parent { width:100%; text-align:start; }
.platform-nav .nav__text { white-space:normal; }
.platform-product { font-size:11px; line-height:1.6; color:var(--fg-subtle); padding:12px; }
.platform-head { display:flex; justify-content:flex-end; gap:12px; margin-bottom:20px; }
.platform-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-bottom:24px; }
.platform-summary { display:flex; flex-direction:column; justify-content:space-between; gap:20px; padding:22px; min-height:130px; border-radius:18px; background:#8ecae6; color:#25272a; }
.platform-summary--1 { background:#8ecae6; }
.platform-summary--2 { background:#ffb703; }
.platform-summary--3 { background:#e1e6ec; }
.platform-summary span { font-size:13px; font-weight:500; }
.platform-summary strong { font-size:30px; line-height:1; }
.platform-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); gap:24px; margin-top:20px; }
.platform-card { padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:0 10px 28px rgba(65,73,97,.04); }
.platform-card h2 { font-family:inherit; font-size:18px; margin:16px 0 8px; }
.platform-card p { font-size:13px; color:var(--fg-muted); overflow-wrap:anywhere; }
.platform-card .badge { display:inline-flex; align-items:center; padding:5px 11px; min-height:28px; background:#e6f4fa; color:#023047; border:0; border-radius:8px; font-size:11px; }
.platform-card .badge.paused { background:#fde2ee; color:#a3124e; }
.platform-stat { font-size:25px; font-weight:650; margin:20px 0; }
.platform-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
.platform-actions .btn { width:100%; height:38px; padding:8px 12px; }
.platform-grid .platform-actions { border-top:1px solid var(--border); padding-top:18px; }
.platform-card > p:last-child { margin:18px 0 0; }
.platform-card a { color:var(--fg-muted); font-size:12px; }
.platform-table { overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:18px; }
.platform-table table { width:100%; margin:0; }
.platform-table th,.platform-table td { padding:16px 20px; font-size:13px; text-align:start; }
.platform-table th { background:var(--table-head); }
.platform-dialog { width:560px; max-width:calc(100vw - 32px); padding:24px; }
.platform-dialog h2 { margin:0 0 24px; font-size:20px; }
.platform-form { display:grid; gap:18px; }
.platform-form label { display:grid; gap:7px; font-size:12px; font-weight:500; color:var(--fg-muted); }
.platform-form input,.platform-form select { width:100%; min-height:44px; border:1px solid var(--border-strong); border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; background:var(--surface); color:var(--fg); }
.platform-form input:focus-visible,.platform-form select:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }
.platform-form .platform-actions { margin-top:8px; }
.platform-message { padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:14px; font-size:13px; margin-bottom:16px; overflow-wrap:anywhere; }
.platform-dialog pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.platform-login { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 10% 10%,var(--sky-soft),transparent 55%),radial-gradient(ellipse at 90% 90%,var(--surface-alt),transparent 55%),var(--bg); }
.platform-login .platform-card { width:440px; max-width:100%; padding:32px; border-radius:24px; }
.platform-logo { width:120px; height:80px; object-fit:contain; margin-bottom:20px; }
.platform-login h1 { font-size:26px; }
.platform-login .platform-form { margin-top:24px; }
.platform-login .btn { min-height:42px; }
.platform-backdrop { display:none; }
:root[data-theme='dark'] .platform-summary--0 { background:#0b2533; color:#8ecae6; }
:root[data-theme='dark'] .platform-summary--1 { background:#3d1428; color:#ffb3d4; }
:root[data-theme='dark'] .platform-summary--2 { background:#3a3115; color:#ffb703; }
:root[data-theme='dark'] .platform-summary--3 { background:#20242d; color:#e1e6ec; }
:root[data-theme='dark'] .platform-card .badge { background:#0b2533; color:#8ecae6; }
:root[data-theme='dark'] .platform-card .badge.paused { background:#3d1428; color:#ffb3d4; }
@media(max-width:1000px){.platform-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 .platform-nav.platform-nav-open { inset-inline-start:0; visibility:visible; }
 .platform-shell:has(.platform-nav-open) .platform-backdrop { display:block; position:fixed; inset:0; z-index:40; background:#20222a66; border:0; }
 .platform-nav { z-index:50; }
 .platform-shell .user-chip__text { display:none; }
 .platform-shell .appbar__right { gap:10px; }
 .platform-shell .appbar .user-chip { margin-inline-start:0; }
}
@media(max-width:480px){.platform-main{padding:16px}.platform-stats{gap:12px}.platform-summary{padding:16px;min-height:110px}.platform-card{padding:20px}.platform-shell .appbar{padding-inline:16px}.platform-shell .user-chip__avatar{width:38px;height:38px}}
/* Phase 3 uses the same tokens and control geometry as the school office. */
.platform-main { min-width:0; }
.platform-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 12px; }
.platform-filters { display:flex; gap:12px; flex:1; max-width:640px; }
.platform-filters input { flex:1; min-width:0; }
.platform-filters input,.platform-filters select { height:40px; min-height:40px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--fg); font:inherit; font-size:13px; }
.platform-toolbar > .btn { min-height:40px; flex-shrink:0; }
.school-card { display:flex; flex-direction:column; }
.school-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.school-card__icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--sky-soft); color:var(--fg); }
.school-card__icon .nav__icon { margin:0; }
.school-card__domain { margin:0; }
.school-card__count { display:flex; align-items:baseline; gap:9px; padding:24px 0 4px; margin-top:auto; }
.school-card__count strong { font-size:28px; font-weight:650; }
.school-card__count span { font-size:12px; color:var(--fg-muted); }
.school-card .platform-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.school-card .platform-actions a { color:var(--fg); font-size:13px; text-decoration:none; }
.platform-actions .btn { min-height:40px; height:auto; font-size:13px; text-align:center; }
.platform-empty { grid-column:1 / -1; text-align:center; padding:56px 24px; background:var(--surface); border:1px dashed var(--border); border-radius:20px; color:var(--fg-muted); }
.platform-empty .nav__icon { display:inline-flex; margin:0; }
.platform-empty h2 { color:var(--fg); font-size:18px; margin:16px 0 8px; }
.platform-feedback { border-inline-start:3px solid var(--coral); background:var(--surface-alt); }
dialog.modal.platform-dialog { padding:28px; width:540px; border-radius:20px; background:var(--surface); max-height:calc(100dvh - 32px); }
.platform-dialog .platform-form > p { margin:0; font-size:13px; }
.platform-table td { vertical-align:top; overflow-wrap:anywhere; }
.platform-table th:first-child { min-width:170px; }
.platform-table th:last-child { min-width:185px; }
.platform-table td:first-child { text-transform:capitalize; }
.platform-table td:nth-child(2) { max-width:600px; }
.platform-login .platform-card { box-sizing:border-box; }
.platform-login .platform-form input { min-width:0; }
.platform-form input[type=color] { padding:5px; cursor:pointer; }
.platform-form input[type=file] { min-width:0; font-size:12px; }
.platform-shell .nav__brand .brand-logo { object-fit:contain; }
.platform-shell .platform-summary--0 { background:var(--sky); }
.platform-shell .platform-summary--1 { background:var(--coral); }
.platform-shell .platform-summary--2 { background:var(--yellow, #ffb703); }
:root[data-theme='dark'] .platform-shell .platform-summary--0 { background:#0b2533; }
:root[data-theme='dark'] .platform-shell .platform-summary--1 { background:#3d1428; }
:root[data-theme='dark'] .platform-shell .platform-summary--2 { background:#3a3115; }
@media(max-width:600px){
 .platform-toolbar { align-items:stretch; flex-direction:column; }
 .platform-filters { max-width:none; }
 .platform-filters select { max-width:45%; }
 .platform-toolbar > .btn { align-self:flex-end; }
 .platform-grid { gap:16px; }
 dialog.modal.platform-dialog { padding:22px; }
 .platform-login { padding:16px; }
 .platform-login .platform-card { padding:24px; }
}
.platform-filters input[type=search] { width:100%; flex:1 1 260px; }
.platform-filters select { width:180px; flex:0 0 180px; }
@media(max-width:600px){.platform-filters select{width:145px;flex-basis:145px}}
.platform-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr)); }
.platform-table table { min-width:720px; }
@media(max-width:600px){
 .platform-shell .appbar { flex-wrap:nowrap; gap:8px; }
 .platform-shell .appbar__left { min-width:0; }
 .platform-shell .appbar__heading { min-width:0; }
 .platform-shell .appbar__heading .page-head__sub { font-size:10px; }
 .platform-shell .appbar__right { margin-inline-start:auto; flex-shrink:0; }
}

.platform-audit-detail{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem}.platform-main>.platform-card,.platform-main>.platform-table,.platform-main>.platform-grid{margin-block-end:20px}.platform-filters label{display:grid;gap:6px;min-width:130px}.platform-form label input{max-width:100%}

/* Where a school stands with its trial or plan. Amber for "ending soon",
   rose for "restricted" - the two states the operator has to act on. */
.platform-card .badge.warn { background:#fff1cc; color:#023047; }
.platform-card .school-card__standing { align-self:flex-start; margin-block:-4px 6px; }
.platform-card .badge.standing-badge.paused { background:#fde2ee; color:#a3124e; }
:root[data-theme='dark'] .platform-card .badge.warn { background:#3a3115; color:#ffd166; }
:root[data-theme='dark'] .platform-card .badge.standing-badge.paused { background:#3d1428; color:#ffb3d4; }
.billing-settings { max-width:720px; }
/* Read-only past its month: the one state that asks the operator to decide. */
.platform-card .badge.standing-badge.due { background:#c2185b; color:#ffffff; }
:root[data-theme='dark'] .platform-card .badge.standing-badge.due { background:#f72585; color:#1a0b10; }
.enforcement-notice { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-block-end:20px; border:1px solid #ffb703; background:#fff1cc; }
.enforcement-notice p { margin:4px 0 0; }
:root[data-theme='dark'] .enforcement-notice { border-color:#5a4610; background:#3a3115; }

/* Footer: the copyright line and the product name, under every page. */
.platform-footer {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:6px 18px; margin-inline:26px; padding:18px 0 22px;
  border-top:1px solid var(--border); color:var(--fg-subtle); font-size:12.5px;
}
.platform-footer__product { color:var(--fg-muted); font-weight:500; }
.platform-login { grid-auto-flow:row; align-content:center; gap:18px; grid-template-columns:minmax(0,440px); justify-content:center; }
/* Fills its column instead of a fixed 440px, so a phone never scrolls sideways. */
.platform-login .platform-card { width:100%; }
.platform-login .platform-footer { flex-direction:column; justify-content:center; margin:0; padding:0; border:0; text-align:center; }
@media (max-width:760px) {
  .platform-footer { margin-inline:16px; flex-direction:column; align-items:flex-start; }
}

/* Hand-over details for a school owner: after creating a school, or after
   resetting its admin password. */
.handover { display:grid; gap:10px; padding:18px 20px; margin-block:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-alt); }
.handover__school { font-size:17px; font-weight:700; }
.handover__row { display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px; align-items:baseline; }
.handover__key { color:var(--fg-muted); font-size:13px; }
.handover__value { font-weight:600; overflow-wrap:anywhere; text-align:left; }
.handover__password { font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:18px; letter-spacing:.06em; }
.handover__note { margin:0; color:var(--fg-muted); font-size:13px; }
/* An address must not break at its hyphen: "kabul-" / "star" reads as two. */
.handover__link { white-space:nowrap; overflow-wrap:normal; font-size:14px; }
.handover-dialog > .subtle { display:block; min-height:1.4em; margin-top:6px; }
.handover-dialog { max-width:min(620px,calc(100vw - 32px)); }
.handover-dialog .platform-actions { align-items:center; flex-wrap:wrap; }
@media (max-width:560px) { .handover__row { grid-template-columns:1fr; gap:2px; } .handover__link { white-space:normal; overflow-wrap:anywhere; } }

/* The printed slip: only the card, black on white, no browser header or
   footer (the empty margin boxes claim both margins; see css/print.css). */
#handover-print { display:none; }
@media print {
  @page { size:A5; margin:15mm; @top-left { content:''; } @bottom-left { content:''; } }
  html.printing-handover body > *:not(#handover-print) { display:none !important; }
  html.printing-handover #handover-print { display:block; }
  html.printing-handover, html.printing-handover body { background:#fff !important; color:#000 !important; }
  #handover-print .handover { border:1pt solid #999; background:#fff; color:#000; }
  #handover-print .handover__key, #handover-print .handover__note { color:#333; }
}
.handover-dialog .platform-actions > .btn--primary { grid-column:1 / -1; }
/* Good news in the console - "Saved successfully", "Settings saved" - in the
   palette's green, with a tick. See palette-vivid.css for the colours. */
.platform-message--ok { display:flex; align-items:center; gap:10px; background:var(--positive-soft,#e3faf3); border-color:var(--positive,#06d6a0); color:var(--positive-text,#05775a); font-weight:600; }
.platform-message--ok::before { content:'\2713'; display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:var(--positive,#06d6a0); color:var(--positive-ink,#023047); font-size:12px; font-weight:800; }

/* Two-step verification setup: the QR code to scan, and the same key
   written out for typing in, in groups of four. The code sits on white in
   both themes - a scanner needs dark modules on a light ground. */
.mfa-step { margin: 0; }
.mfa-step--manual { margin-top: 4px; color: var(--fg-muted); font-size: 14px; }
.mfa-qr { width: 200px; margin: 4px auto 6px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mfa-key__value { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-alt); color: var(--fg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .04em; word-break: break-all; user-select: all; }
.mfa-meta { margin: 0; color: var(--fg-muted); font-size: 13px; }

.platform-slug-hint { margin: 6px 0 0; color: var(--fg-muted); font-size: 13px; font-weight: 400; }