:root {
  --platform-navy-950: #071a2f;
  --platform-navy-900: #0b2442;
  --platform-navy-800: #123759;
  --platform-navy-700: #18507e;
  --platform-blue-600: #256a9e;
  --platform-gold-500: #c99a45;
  --platform-gold-400: #ddb769;
  --platform-canvas: #f3f6fa;
  --platform-surface: #ffffff;
  --platform-surface-soft: #f8fafc;
  --platform-line: #dfe6ee;
  --platform-line-strong: #cbd6e2;
  --platform-text: #17283a;
  --platform-muted: #68798b;
  --platform-success: #16805d;
  --platform-success-soft: #e8f6f0;
  --platform-warning: #a66813;
  --platform-warning-soft: #fff5df;
  --platform-danger: #b83b46;
  --platform-danger-soft: #fcecef;
  --platform-info: #236fa1;
  --platform-info-soft: #eaf4fb;
  --platform-shadow-sm: 0 8px 24px rgba(16, 40, 65, 0.06);
  --platform-shadow-md: 0 18px 48px rgba(16, 40, 65, 0.1);
  --platform-radius-sm: 10px;
  --platform-radius-md: 16px;
  --platform-radius-lg: 22px;
  --platform-sidebar-width: 286px;
  /* دفعة اللوحة الجديدة */
  --pf-ink: var(--platform-text);
  --pf-edge: var(--platform-line);
  --pf-quiet: var(--platform-muted);
  --pf-lift: 0 10px 30px rgba(16, 40, 65, .07);
}

/* Twilio WhatsApp delivery monitoring */
.platform-wa-monitor {
  display: grid;
  gap: 18px;
}

.platform-wa-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.platform-wa-summary--management {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.platform-wa-connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--platform-success);
  border: 1px solid color-mix(in srgb, var(--platform-success) 28%, var(--platform-line));
  border-radius: var(--platform-radius-sm);
  background: var(--platform-success-soft);
  font-size: 11px;
  font-weight: 800;
}

.platform-wa-connection i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--platform-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--platform-success) 14%, transparent);
}

.platform-wa-connection[data-state="hidden"] {
  color: var(--platform-warning);
  border-color: color-mix(in srgb, var(--platform-warning) 28%, var(--platform-line));
  background: var(--platform-warning-soft);
}

.platform-wa-connection[data-state="hidden"] i {
  background: var(--platform-warning);
}

.platform-wa-connection[data-state="error"] {
  color: var(--platform-danger);
  border-color: color-mix(in srgb, var(--platform-danger) 28%, var(--platform-line));
  background: var(--platform-danger-soft);
}

.platform-wa-connection[data-state="error"] i {
  background: var(--platform-danger);
}

.platform-wa-filter {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
}

.platform-wa-filter .platform-field {
  width: min(360px, 100%);
}

.platform-wa-panel {
  overflow-x: auto;
}

.platform-wa-table {
  min-width: 1420px;
}

.platform-wa-table .wa-monitor__source,
.platform-wa-table .wa-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--platform-line);
  border-radius: 999px;
  background: var(--platform-surface-soft);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.platform-wa-table .wa-status::before {
  content: "•";
  margin-inline-end: 5px;
}

.platform-wa-table .wa-status[data-status="queued"]::before { content: "◷"; }
.platform-wa-table .wa-status[data-status="sending"]::before { content: "↗"; }
.platform-wa-table .wa-status[data-status="sent"]::before { content: "✓"; }
.platform-wa-table .wa-status[data-status="delivered"]::before { content: "✓✓"; letter-spacing: -3px; margin-inline-end: 8px; }
.platform-wa-table .wa-status[data-status="read"]::before { content: "◉"; }
.platform-wa-table .wa-status[data-status="failed"]::before,
.platform-wa-table .wa-status[data-status="configuration_error"]::before { content: "!"; }
.platform-wa-table .wa-status[data-status="undelivered"]::before { content: "×"; }
.platform-wa-table .wa-status[data-status="canceled"]::before { content: "—"; }
.platform-wa-table .wa-status[data-status="no_whatsapp_number"]::before { content: "∅"; }

.platform-wa-table .wa-status--pending,
.platform-wa-table .wa-status--info {
  color: var(--platform-info);
  border-color: color-mix(in srgb, var(--platform-info) 28%, var(--platform-line));
  background: var(--platform-info-soft);
}

.platform-wa-table .wa-status--success {
  color: var(--platform-success);
  border-color: color-mix(in srgb, var(--platform-success) 28%, var(--platform-line));
  background: var(--platform-success-soft);
}

.platform-wa-table .wa-status--warning {
  color: var(--platform-warning);
  border-color: color-mix(in srgb, var(--platform-warning) 28%, var(--platform-line));
  background: var(--platform-warning-soft);
}

.platform-wa-table .wa-status--danger {
  color: var(--platform-danger);
  border-color: color-mix(in srgb, var(--platform-danger) 28%, var(--platform-line));
  background: var(--platform-danger-soft);
}

.platform-wa-table .wa-status--neutral {
  color: var(--platform-muted);
}

.platform-wa-table .wa-monitor__status-note,
.platform-wa-table .wa-monitor__failure,
.platform-wa-table .wa-monitor__technical code,
.platform-wa-table .wa-monitor__technical small {
  display: block;
  max-width: 300px;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--platform-muted);
  font-size: 10px;
  line-height: 1.65;
}

.platform-wa-table .wa-monitor__failure,
.platform-wa-table .wa-monitor__technical small {
  color: var(--platform-danger);
  font-weight: 700;
}

.platform-wa-table .wa-monitor__technical code {
  color: var(--platform-text);
}

.platform-wa-table .wa-monitor__empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 24px;
  color: var(--platform-muted);
  text-align: center;
}

.platform-wa-table .wa-monitor__empty strong,
.platform-wa-table .wa-monitor__empty span {
  display: block;
}

.platform-wa-table .wa-monitor__failure[hidden],
.platform-wa-error[hidden] {
  display: none !important;
}

.platform-wa-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  color: var(--platform-danger);
  border: 1px solid color-mix(in srgb, var(--platform-danger) 28%, var(--platform-line));
  border-radius: var(--platform-radius-sm);
  background: var(--platform-danger-soft);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .platform-wa-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-wa-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-wa-filter .platform-field {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--platform-text);
  font-family: "Tajawal", Tahoma, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

svg {
  display: block;
}

.platform-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform-icon--sm {
  width: 17px;
  height: 17px;
}

.platform-icon--lg {
  width: 25px;
  height: 25px;
}

.platform-skip-link {
  position: fixed;
  top: 10px;
  right: 50%;
  z-index: 1200;
  transform: translate(50%, -150%);
  border-radius: 10px;
  background: var(--platform-surface);
  color: var(--platform-navy-900);
  padding: 10px 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--platform-shadow-md);
  transition: transform 0.2s ease;
}

.platform-skip-link:focus {
  transform: translate(50%, 0);
}

.platform-dashboard-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 0%, rgba(37, 106, 158, 0.06), transparent 29rem),
    var(--platform-canvas);
}

.platform-shell {
  min-height: 100vh;
}

.platform-sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 100;
  width: var(--platform-sidebar-width);
  overflow: hidden auto;
  color: #f3f7fb;
  background:
    radial-gradient(circle at 20% 0%, rgba(221, 183, 105, 0.14), transparent 15rem),
    linear-gradient(180deg, var(--platform-navy-900) 0%, var(--platform-navy-950) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -14px 0 40px rgba(8, 26, 47, 0.08);
}

.platform-sidebar::after {
  content: "";
  position: absolute;
  inset: auto -70px -110px auto;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.platform-sidebar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 27px 20px 22px;
}

.platform-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-decoration: none;
}

.platform-brand__mark {
  position: relative;
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--platform-gold-400), #b17c29);
  color: var(--platform-navy-950);
  box-shadow: 0 10px 26px rgba(2, 15, 29, 0.28);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.platform-brand__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 10px;
}

.platform-brand__text {
  min-width: 0;
}

.platform-brand__name {
  display: block;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.platform-brand__caption {
  display: block;
  margin-top: 2px;
  color: rgba(231, 239, 247, 0.66);
  font-size: 11px;
  font-weight: 500;
}

.platform-sidebar__rule {
  height: 1px;
  margin: 24px 4px 19px;
  background: rgba(255, 255, 255, 0.09);
}

.platform-nav__label {
  margin: 0 12px 9px;
  color: rgba(231, 239, 247, 0.49);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.platform-nav {
  display: grid;
  gap: 7px;
}

.platform-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 47px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: rgba(241, 246, 251, 0.72);
  padding: 0 13px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.platform-nav__link:hover,
.platform-nav__link:focus-visible {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
  transform: translateX(-2px);
  outline: none;
}

.platform-nav__link.is-active {
  border-color: rgba(221, 183, 105, 0.2);
  background: linear-gradient(90deg, rgba(221, 183, 105, 0.16), rgba(255, 255, 255, 0.06));
  color: #fff;
}

.platform-nav__link.is-active::before {
  content: "";
  position: absolute;
  inset: 9px -20px 9px auto;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--platform-gold-400);
}

.platform-sidebar__footer {
  margin-top: auto;
  padding-top: 28px;
}

.platform-user-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
  padding: 10px;
}

.platform-user-card__avatar,
.platform-user-chip__avatar {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(221, 183, 105, 0.17);
  color: #f4d89e;
  font-weight: 900;
}

.platform-user-card__avatar {
  width: 42px;
  height: 42px;
}

.platform-user-card__info {
  min-width: 0;
}

.platform-user-card__name {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-user-card__role {
  display: block;
  margin-top: 2px;
  color: rgba(231, 239, 247, 0.54);
  font-size: 10px;
}

.platform-user-card__logout {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(244, 216, 158, 0.88);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.platform-user-card form {
  margin: 0;
}

.platform-user-card__logout:hover,
.platform-user-card__logout:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.platform-main {
  min-width: 0;
  margin-right: var(--platform-sidebar-width);
}

.platform-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(203, 214, 226, 0.82);
  background: rgba(255, 255, 255, 0.9);
  padding: 0 clamp(20px, 3vw, 42px);
  backdrop-filter: blur(14px);
}

.platform-topbar__start,
.platform-topbar__end {
  display: flex;
  align-items: center;
  gap: 12px;
}

.platform-topbar__title {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: 16px;
  font-weight: 900;
}

.platform-topbar__date {
  display: block;
  margin-top: 1px;
  color: var(--platform-muted);
  font-size: 11px;
  font-weight: 500;
}

.platform-sidebar-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--platform-line);
  border-radius: 12px;
  background: var(--platform-surface);
  color: var(--platform-navy-900);
  cursor: pointer;
}

.platform-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--platform-line);
  border-radius: 13px;
  background: var(--platform-surface);
  padding: 7px 9px 7px 13px;
}

.platform-user-chip__avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--platform-info-soft);
  color: var(--platform-navy-800);
  font-size: 12px;
}

.platform-user-chip__text strong,
.platform-user-chip__text span {
  display: block;
}

.platform-user-chip__text strong {
  font-size: 11px;
  font-weight: 900;
}

.platform-user-chip__text span {
  margin-top: 1px;
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-content {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 33px clamp(20px, 3vw, 42px) 48px;
}

.platform-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border: 1px solid rgba(18, 55, 89, 0.08);
  border-radius: var(--platform-radius-lg);
  background:
    linear-gradient(115deg, rgba(11, 36, 66, 0.98), rgba(24, 80, 126, 0.92)),
    var(--platform-navy-900);
  color: #fff;
  padding: clamp(24px, 3.3vw, 39px);
  box-shadow: var(--platform-shadow-md);
}

.platform-hero::before,
.platform-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.platform-hero::before {
  top: -118px;
  left: -56px;
  width: 290px;
  height: 290px;
}

.platform-hero::after {
  bottom: -160px;
  left: 100px;
  width: 270px;
  height: 270px;
}

.platform-hero__content,
.platform-hero__actions {
  position: relative;
  z-index: 1;
}

.platform-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #f0d49d;
  font-size: 11px;
  font-weight: 800;
}

.platform-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--platform-gold-400);
}

.platform-hero h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.platform-hero__description {
  max-width: 690px;
  margin: 9px 0 0;
  color: rgba(239, 246, 252, 0.72);
  font-size: 13px;
  line-height: 1.9;
}

.platform-hero__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.platform-button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--platform-line-strong);
  border-radius: 11px;
  background: var(--platform-surface);
  color: var(--platform-navy-900);
  padding: 0 15px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.platform-button:hover,
.platform-button:focus-visible {
  border-color: #afbecd;
  box-shadow: 0 8px 20px rgba(16, 40, 65, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.platform-button--primary {
  border-color: var(--platform-navy-800);
  background: var(--platform-navy-800);
  color: #fff;
}

.platform-button--primary:hover,
.platform-button--primary:focus-visible {
  border-color: var(--platform-navy-700);
  background: var(--platform-navy-700);
}

.platform-button--gold {
  border-color: var(--platform-gold-400);
  background: linear-gradient(135deg, var(--platform-gold-400), var(--platform-gold-500));
  color: var(--platform-navy-950);
}

.platform-button--soft {
  border-color: var(--platform-line);
  background: var(--platform-surface-soft);
}

.platform-button--compact {
  min-height: 38px;
  padding-inline: 12px;
  font-size: 11px;
}

.platform-button--wide {
  width: 100%;
}

.platform-hero .platform-button--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.platform-hero .platform-button--ghost:hover,
.platform-hero .platform-button--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.platform-flashes {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.platform-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--platform-line);
  border-radius: 13px;
  background: var(--platform-surface);
  padding: 12px 14px;
  box-shadow: var(--platform-shadow-sm);
  font-size: 12px;
  font-weight: 700;
}

.platform-flash::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--platform-info);
  box-shadow: 0 0 0 4px var(--platform-info-soft);
}

.platform-flash--success {
  border-color: #cce8dc;
  color: #13694e;
}

.platform-flash--success::before {
  background: var(--platform-success);
  box-shadow: 0 0 0 4px var(--platform-success-soft);
}

.platform-flash--error,
.platform-flash--danger {
  border-color: #f3cfd4;
  color: #98323c;
}

.platform-flash--error::before,
.platform-flash--danger::before {
  background: var(--platform-danger);
  box-shadow: 0 0 0 4px var(--platform-danger-soft);
}

.platform-flash--warning {
  border-color: #f2dfb7;
  color: #875610;
}

.platform-flash--warning::before {
  background: var(--platform-warning);
  box-shadow: 0 0 0 4px var(--platform-warning-soft);
}

.platform-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.platform-stat {
  position: relative;
  display: grid;
  min-height: 130px;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--platform-line);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface);
  padding: 19px;
  box-shadow: var(--platform-shadow-sm);
}

.platform-stat::after {
  content: "";
  position: absolute;
  inset: auto -20px -30px auto;
  width: 78px;
  height: 78px;
  border: 12px solid rgba(18, 55, 89, 0.025);
  border-radius: 50%;
}

.platform-stat__label {
  display: block;
  color: var(--platform-muted);
  font-size: 11px;
  font-weight: 700;
}

.platform-stat__value {
  display: block;
  margin-top: 3px;
  color: var(--platform-navy-900);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.platform-stat__note {
  display: block;
  margin-top: 5px;
  color: #8a98a7;
  font-size: 9px;
  font-weight: 600;
}

.platform-stat__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--platform-info-soft);
  color: var(--platform-info);
}

.platform-stat--success .platform-stat__icon {
  background: var(--platform-success-soft);
  color: var(--platform-success);
}

.platform-stat--gold .platform-stat__icon {
  background: var(--platform-warning-soft);
  color: var(--platform-warning);
}

.platform-stat--violet .platform-stat__icon {
  background: #f0edfb;
  color: #7057b8;
}

.platform-section {
  scroll-margin-top: 96px;
  margin-top: 30px;
}

.platform-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.platform-section__heading {
  min-width: 0;
}

.platform-section__heading h2 {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.platform-section__heading p {
  margin: 4px 0 0;
  color: var(--platform-muted);
  font-size: 11px;
  font-weight: 500;
}

.platform-panel {
  border: 1px solid var(--platform-line);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface);
  box-shadow: var(--platform-shadow-sm);
}

.platform-action-panel {
  margin-bottom: 15px;
}

.platform-action-panel > summary,
.platform-detail > summary {
  list-style: none;
}

.platform-action-panel > summary::-webkit-details-marker,
.platform-detail > summary::-webkit-details-marker {
  display: none;
}

.platform-action-panel__summary {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 17px;
  cursor: pointer;
}

.platform-action-panel__summary-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.platform-action-panel__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--platform-info-soft);
  color: var(--platform-navy-700);
}

.platform-action-panel__title,
.platform-action-panel__caption {
  display: block;
}

.platform-action-panel__title {
  color: var(--platform-navy-900);
  font-size: 13px;
  font-weight: 900;
}

.platform-action-panel__caption {
  margin-top: 1px;
  color: var(--platform-muted);
  font-size: 10px;
}

.platform-action-panel__chevron,
.platform-detail__chevron {
  transition: transform 0.22s ease;
}

.platform-action-panel[open] .platform-action-panel__chevron,
.platform-detail[open] .platform-detail__chevron {
  transform: rotate(180deg);
}

.platform-action-panel__body {
  border-top: 1px solid var(--platform-line);
  padding: 20px;
}

.platform-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.platform-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.platform-field--full {
  grid-column: 1 / -1;
}

.platform-field__label {
  color: #40566c;
  font-size: 10px;
  font-weight: 800;
}

.platform-field__hint {
  margin: -2px 0 0;
  color: #8c99a6;
  font-size: 9px;
}

.platform-input,
.platform-select {
  width: 100%;
  min-width: 0;
  height: 45px;
  border: 1px solid var(--platform-line-strong);
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--platform-text);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.platform-input::placeholder {
  color: #a6b1bc;
  font-weight: 500;
}

.platform-input:hover,
.platform-select:hover {
  border-color: #b6c4d2;
}

.platform-input:focus,
.platform-select:focus {
  border-color: var(--platform-blue-600);
  box-shadow: 0 0 0 3px rgba(37, 106, 158, 0.12);
}

.platform-input[type="file"] {
  height: auto;
  min-height: 45px;
  padding: 8px;
  color: var(--platform-muted);
  font-size: 10px;
}

.platform-input[type="file"]::file-selector-button {
  height: 29px;
  margin-inline-start: 9px;
  border: 0;
  border-radius: 8px;
  background: var(--platform-info-soft);
  color: var(--platform-navy-800);
  padding: 0 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.platform-form-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 2px;
}

.platform-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.platform-search {
  position: relative;
  width: min(370px, 100%);
}

.platform-search .platform-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #8998a7;
  transform: translateY(-50%);
  pointer-events: none;
}

.platform-search .platform-input {
  padding-right: 43px;
  background: var(--platform-surface);
}

.platform-toolbar__count {
  color: var(--platform-muted);
  font-size: 11px;
  font-weight: 700;
}

.platform-toolbar__count strong {
  color: var(--platform-navy-900);
}

.platform-school-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.platform-school-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--platform-line);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface);
  box-shadow: var(--platform-shadow-sm);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.platform-school-card:hover {
  border-color: #c5d1dd;
  box-shadow: var(--platform-shadow-md);
  transform: translateY(-2px);
}

.platform-school-card[hidden] {
  display: none;
}

.platform-school-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
}

.platform-school-card__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.platform-school-logo {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--platform-line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(37, 106, 158, 0.1), rgba(201, 154, 69, 0.12)),
    #fff;
  color: var(--platform-navy-800);
  font-size: 16px;
  font-weight: 900;
}

.platform-school-logo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff;
  object-fit: contain;
  padding: 5px;
}

.platform-school-card__name {
  overflow: hidden;
  margin: 0;
  color: var(--platform-navy-900);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-school-card__domain {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--platform-muted);
  font-family: "Tajawal", Tahoma, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
}

.platform-school-card__domain span {
  overflow: hidden;
  direction: ltr;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-school-card__badges {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.platform-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--platform-line);
  border-radius: 999px;
  background: var(--platform-surface-soft);
  color: var(--platform-muted);
  padding: 2px 9px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.platform-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.platform-badge--active,
.platform-badge--trial {
  border-color: #cce8dc;
  background: var(--platform-success-soft);
  color: var(--platform-success);
}

.platform-badge--trial {
  border-color: #cde2ef;
  background: var(--platform-info-soft);
  color: var(--platform-info);
}

.platform-badge--scheduled {
  border-color: #d9d2f3;
  background: #f1edff;
  color: #6b4bb5;
}

.platform-badge--neutral {
  border-color: var(--platform-line);
  background: var(--platform-surface-soft);
  color: var(--platform-muted);
}

.platform-badge--past_due,
.platform-badge--suspended {
  border-color: #f0dfba;
  background: var(--platform-warning-soft);
  color: var(--platform-warning);
}

.platform-badge--archived,
.platform-badge--expired,
.platform-badge--cancelled {
  border-color: #f3cfd4;
  background: var(--platform-danger-soft);
  color: var(--platform-danger);
}

.platform-school-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 18px 15px;
}

.platform-school-metric {
  min-width: 0;
  border: 1px solid #edf1f5;
  border-radius: 10px;
  background: var(--platform-surface-soft);
  padding: 9px;
  text-align: center;
}

.platform-school-metric dt,
.platform-school-metric dd {
  margin: 0;
}

.platform-school-metric dt {
  overflow: hidden;
  color: var(--platform-muted);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-school-metric dd {
  margin-top: 1px;
  color: var(--platform-navy-900);
  font-size: 15px;
  font-weight: 900;
}

.platform-subscription-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 18px 15px;
  border: 1px solid #e9eef3;
  border-radius: 11px;
  background: #fbfcfd;
  padding: 10px 12px;
}

.platform-subscription-line__item {
  min-width: 0;
}

.platform-subscription-line__label {
  display: block;
  color: var(--platform-muted);
  font-size: 8px;
  font-weight: 700;
}

.platform-subscription-line__value {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: var(--platform-text);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-school-card__actions {
  border-top: 1px solid var(--platform-line);
  background: #fcfdfe;
}

.platform-detail + .platform-detail {
  border-top: 1px solid var(--platform-line);
}

.platform-detail__summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #40566c;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.platform-detail__summary:hover,
.platform-detail__summary:focus-visible {
  background: #f4f7fa;
  color: var(--platform-navy-800);
  outline: none;
}

.platform-detail__summary-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.platform-detail__body {
  border-top: 1px solid var(--platform-line);
  background: var(--platform-surface);
  padding: 18px;
}

.platform-search-empty,
.platform-empty-state {
  border: 1px dashed var(--platform-line-strong);
  border-radius: var(--platform-radius-md);
  background: rgba(255, 255, 255, 0.7);
  color: var(--platform-muted);
  padding: 36px 20px;
  text-align: center;
}

.platform-search-empty[hidden] {
  display: none;
}

.platform-empty-state__icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  place-items: center;
  border-radius: 15px;
  background: var(--platform-info-soft);
  color: var(--platform-info);
}

.platform-empty-state strong {
  display: block;
  color: var(--platform-navy-900);
  font-size: 13px;
}

.platform-empty-state p {
  margin: 4px 0 0;
  font-size: 10px;
}

.platform-table-wrap {
  overflow: auto;
}

.platform-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.platform-table th,
.platform-table td {
  border-bottom: 1px solid var(--platform-line);
  padding: 13px 12px;
  text-align: start;
  vertical-align: middle;
}

.platform-table th {
  background: #f6f8fa;
  color: #64778a;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.platform-table td {
  font-size: 10px;
}

.platform-table tbody tr:last-child td {
  border-bottom: 0;
}

.platform-table tbody tr {
  transition: background 0.16s ease;
}

.platform-table tbody tr:hover {
  background: #fbfcfd;
}

.platform-table .platform-input {
  height: 39px;
  font-size: 10px;
}

.platform-plan-code {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  border-radius: 8px;
  background: var(--platform-info-soft);
  color: var(--platform-navy-800);
  padding: 2px 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  direction: ltr;
}

.platform-plan-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.platform-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--platform-muted);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.platform-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.platform-switch__track {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #cdd6df;
  transition: background 0.18s ease;
}

.platform-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(16, 40, 65, 0.24);
  transition: transform 0.18s ease;
}

.platform-switch input:checked + .platform-switch__track {
  background: var(--platform-success);
}

.platform-switch input:checked + .platform-switch__track::after {
  transform: translateX(-15px);
}

.platform-switch input:focus-visible + .platform-switch__track {
  box-shadow: 0 0 0 3px rgba(37, 106, 158, 0.16);
}

.platform-switch input:disabled + .platform-switch__track {
  cursor: not-allowed;
  opacity: 0.55;
}

.platform-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
}

.platform-settings-card {
  padding: 20px;
}

.platform-settings-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
}

.platform-settings-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--platform-info-soft);
  color: var(--platform-navy-700);
}

.platform-settings-card__head h3 {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: 13px;
  font-weight: 900;
}

.platform-settings-card__head p {
  margin: 2px 0 0;
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-security-note {
  display: flex;
  height: 100%;
  min-height: 210px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 100%, rgba(221, 183, 105, 0.15), transparent 13rem),
    var(--platform-navy-900);
  color: #fff;
  padding: 22px;
}

.platform-security-note__icon {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
  color: #f0d49d;
}

.platform-security-note h3 {
  margin: 15px 0 5px;
  font-size: 15px;
  font-weight: 900;
}

.platform-security-note p {
  margin: 0;
  color: rgba(239, 246, 252, 0.68);
  font-size: 10px;
  line-height: 1.8;
}

.platform-security-note__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: #d6e7dd;
  font-size: 9px;
  font-weight: 800;
}

.platform-security-note__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #51d3a3;
  box-shadow: 0 0 0 4px rgba(81, 211, 163, 0.12);
}

.platform-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  border-top: 1px solid var(--platform-line);
  color: #8996a3;
  padding-top: 18px;
  font-size: 9px;
}

.platform-sidebar-backdrop {
  display: none;
}

/* Login */
.platform-login-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 106, 158, 0.1), transparent 31rem),
    #edf2f7;
  color: var(--platform-text);
}

.platform-login-page::before {
  content: "";
  position: fixed;
  inset: auto auto -220px -170px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(18, 55, 89, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.platform-login-wrapper {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 28px;
}

.platform-login-shell {
  display: grid;
  width: min(980px, 100%);
  min-height: 610px;
  grid-template-columns: minmax(0, 1.02fr) minmax(400px, 0.98fr);
  overflow: hidden;
  border: 1px solid rgba(18, 55, 89, 0.1);
  border-radius: 28px;
  background: var(--platform-surface);
  box-shadow: 0 28px 80px rgba(13, 36, 62, 0.16);
}

.platform-login-brand {
  position: relative;
  display: flex;
  min-height: 610px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(221, 183, 105, 0.18), transparent 18rem),
    linear-gradient(145deg, var(--platform-navy-900), var(--platform-navy-950));
  color: #fff;
  padding: 42px;
}

.platform-login-brand::before,
.platform-login-brand::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.platform-login-brand::before {
  width: 320px;
  height: 320px;
  right: -170px;
  bottom: -80px;
}

.platform-login-brand::after {
  width: 190px;
  height: 190px;
  right: -90px;
  bottom: -15px;
}

.platform-login-brand__top,
.platform-login-brand__content,
.platform-login-brand__foot {
  position: relative;
  z-index: 1;
}

.platform-login-brand__content {
  max-width: 410px;
}

.platform-login-brand__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(221, 183, 105, 0.22);
  border-radius: 999px;
  background: rgba(221, 183, 105, 0.09);
  color: #f0d49d;
  padding: 6px 11px;
  font-size: 9px;
  font-weight: 800;
}

.platform-login-brand__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--platform-gold-400);
}

.platform-login-brand h1 {
  margin: 17px 0 10px;
  font-size: clamp(27px, 3.2vw, 40px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.35;
}

.platform-login-brand__description {
  margin: 0;
  color: rgba(239, 246, 252, 0.68);
  font-size: 12px;
  line-height: 1.95;
}

.platform-login-features {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.platform-login-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(248, 251, 254, 0.82);
  font-size: 10px;
  font-weight: 700;
}

.platform-login-feature__icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  color: #f0d49d;
}

.platform-login-brand__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(239, 246, 252, 0.45);
  font-size: 9px;
}

.platform-login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--platform-surface);
  padding: clamp(34px, 5vw, 58px);
}

.platform-login-form-panel__mobile-brand {
  display: none;
  margin-bottom: 25px;
}

.platform-login-form-panel__eyebrow {
  margin: 0 0 6px;
  color: var(--platform-gold-500);
  font-size: 10px;
  font-weight: 900;
}

.platform-login-form-panel h2 {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.platform-login-form-panel__intro {
  margin: 7px 0 22px;
  color: var(--platform-muted);
  font-size: 11px;
  line-height: 1.8;
}

.platform-auth-form {
  display: grid;
  gap: 16px;
}

.platform-auth-field {
  display: grid;
  gap: 7px;
}

.platform-auth-field label {
  color: #40566c;
  font-size: 10px;
  font-weight: 900;
}

.platform-auth-input {
  position: relative;
  display: block;
}

.platform-auth-input > .platform-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 1;
  color: #8494a4;
  transform: translateY(-50%);
  pointer-events: none;
}

.platform-auth-input .platform-input {
  height: 49px;
  padding-right: 43px;
  font-size: 12px;
}

.platform-auth-input .platform-input--with-toggle {
  padding-left: 47px;
}

.platform-password-toggle {
  position: absolute;
  top: 50%;
  left: 7px;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #7c8d9e;
  transform: translateY(-50%);
  cursor: pointer;
}

.platform-password-toggle:hover,
.platform-password-toggle:focus-visible {
  background: var(--platform-surface-soft);
  color: var(--platform-navy-800);
  outline: none;
}

.platform-login-submit {
  min-height: 49px;
  margin-top: 3px;
  border-radius: 12px;
  font-size: 12px;
}

.platform-login-security {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  border-top: 1px solid var(--platform-line);
  color: #8795a4;
  padding-top: 15px;
  font-size: 9px;
  line-height: 1.75;
}

.platform-login-security .platform-icon {
  margin-top: 2px;
  color: var(--platform-success);
}

.platform-login-flashes {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.platform-login-flashes .platform-flash {
  box-shadow: none;
}

@media (max-width: 1200px) {
  .platform-school-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .platform-sidebar {
    transform: translateX(105%);
    transition: transform 0.25s ease;
  }

  .platform-main {
    margin-right: 0;
  }

  .platform-sidebar-toggle {
    display: grid;
  }

  .platform-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    visibility: hidden;
    border: 0;
    background: rgba(5, 18, 33, 0.46);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.24s ease, visibility 0.24s ease;
  }

  body.platform-sidebar-open {
    overflow: hidden;
  }

  body.platform-sidebar-open .platform-sidebar {
    transform: translateX(0);
  }

  body.platform-sidebar-open .platform-sidebar-backdrop {
    visibility: visible;
    opacity: 1;
  }

  .platform-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .platform-login-wrapper {
    padding: 18px;
  }

  .platform-login-shell {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 23px;
  }

  .platform-login-brand {
    display: none;
  }

  .platform-login-form-panel {
    min-height: min(650px, calc(100vh - 36px));
    padding: 34px clamp(24px, 8vw, 50px);
  }

  .platform-login-form-panel__mobile-brand {
    display: block;
  }

  .platform-login-form-panel__mobile-brand .platform-brand__name {
    color: var(--platform-navy-900);
  }

  .platform-login-form-panel__mobile-brand .platform-brand__caption {
    color: var(--platform-muted);
  }

  .platform-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .platform-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .platform-topbar {
    min-height: 68px;
    padding-inline: 15px;
  }

  .platform-topbar__title {
    font-size: 13px;
  }

  .platform-user-chip__text {
    display: none;
  }

  .platform-user-chip {
    padding: 5px;
  }

  .platform-content {
    padding: 20px 14px 35px;
  }

  .platform-hero {
    border-radius: 18px;
    padding: 22px;
  }

  .platform-hero h1 {
    font-size: 23px;
  }

  .platform-hero__actions {
    width: 100%;
  }

  .platform-hero__actions .platform-button {
    flex: 1;
  }

  .platform-stats {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .platform-stat {
    min-height: 107px;
  }

  .platform-section {
    margin-top: 24px;
  }

  .platform-section__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .platform-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-search {
    width: 100%;
  }

  .platform-form-grid {
    grid-template-columns: 1fr;
  }

  .platform-field--full,
  .platform-form-actions {
    grid-column: 1;
  }

  .platform-form-actions {
    flex-direction: column;
  }

  .platform-form-actions .platform-button {
    width: 100%;
  }

  .platform-school-card__header {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-school-card__badges {
    flex-direction: row;
    align-items: center;
  }

  .platform-school-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Platform V2: multi-page administration */
.platform-nav__label--spaced {
  margin-top: 24px;
}

.platform-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.platform-page-head h2 {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.platform-page-head p:not(.platform-eyebrow) {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--platform-muted);
  font-size: 12px;
}

.platform-head-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.platform-workflow-note {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin: -6px 0 18px;
  border: 1px solid #cde2ef;
  border-radius: 14px;
  background: var(--platform-info-soft);
  color: var(--platform-navy-800);
  padding: 13px 15px;
  font-size: 10px;
}

.platform-workflow-note strong {
  color: var(--platform-blue-600);
  font-size: 11px;
  white-space: nowrap;
}

.platform-workflow-note span {
  position: relative;
  padding-inline-start: 13px;
}

.platform-workflow-note span::before {
  content: "";
  position: absolute;
  top: 0.62em;
  inset-inline-start: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--platform-blue-600);
}

.platform-subscription-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin-bottom: 22px;
}

.platform-subscription-actions .platform-action-panel {
  margin-bottom: 0;
}

.platform-select--status {
  min-width: 118px;
  margin-top: 7px;
}

.platform-table-note {
  display: block;
  max-width: 150px;
  margin-top: 6px;
  color: var(--platform-muted);
  font-size: 8px;
  line-height: 1.5;
}

.platform-eyebrow--dark {
  color: var(--platform-gold-500);
}

.platform-section--first {
  margin-top: 0;
}

.platform-dashboard-grid,
.platform-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.platform-dashboard-grid > .platform-section,
.platform-two-column > .platform-section {
  min-width: 0;
}

.platform-text-link {
  color: var(--platform-blue-600);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.platform-text-link:hover,
.platform-text-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.platform-list-panel {
  overflow: hidden;
}

.platform-list-row {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--platform-line);
  color: inherit;
  padding: 10px 14px;
  text-decoration: none;
  transition: background 0.18s ease;
}

.platform-list-row:last-child {
  border-bottom: 0;
}

.platform-list-row:hover,
.platform-list-row:focus-visible {
  background: var(--platform-surface-soft);
  outline: none;
}

.platform-list-row__main {
  min-width: 0;
  flex: 1;
}

.platform-list-row__main strong,
.platform-list-row__main small {
  display: block;
}

.platform-list-row__main strong {
  overflow: hidden;
  color: var(--platform-navy-900);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-list-row__main small {
  margin-top: 2px;
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-list-row__meta {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 3px;
}

.platform-list-row__meta small {
  color: var(--platform-muted);
  font-size: 8px;
}

.platform-school-logo--small {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.platform-school-logo--large {
  width: 72px;
  height: 72px;
  border-radius: 19px;
}

.platform-alert-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--platform-info);
  box-shadow: 0 0 0 5px var(--platform-info-soft);
}

.platform-alert-dot--warning {
  background: var(--platform-warning);
  box-shadow: 0 0 0 5px var(--platform-warning-soft);
}

.platform-countdown,
.platform-count-pill,
.platform-role-chip {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-line);
  border-radius: 999px;
  background: var(--platform-surface-soft);
  color: var(--platform-navy-800);
  padding: 3px 10px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.platform-empty-state--compact {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 27px 16px;
}

.platform-card-footer {
  border-top: 1px solid var(--platform-line);
  padding: 13px 18px 16px;
}

.platform-search__icon {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 1;
  color: #8998a7;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.platform-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--platform-muted);
  font-size: 10px;
  font-weight: 700;
}

.platform-breadcrumb a {
  color: var(--platform-blue-600);
  text-decoration: none;
}

.platform-page-head--school {
  align-items: flex-start;
  border: 1px solid var(--platform-line);
  border-radius: var(--platform-radius-lg);
  background: var(--platform-surface);
  padding: 20px;
  box-shadow: var(--platform-shadow-sm);
}

.platform-school-title {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 15px;
}

.platform-school-title > div {
  min-width: 0;
}

.platform-school-title h2 {
  overflow: visible;
  font-size: clamp(20px, 2.4vw, 29px);
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.platform-school-title p:last-child {
  direction: ltr;
  text-align: right;
}

.platform-head-badges,
.platform-admin-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.platform-page-head--school > .platform-head-badges {
  flex: 0 0 auto;
  max-width: min(260px, 34%);
}

.platform-stats--school .platform-stat,
.platform-stats--system .platform-stat {
  min-height: 112px;
}

.platform-panel--padded {
  padding: 20px;
}

.platform-definition-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.platform-definition-list > div {
  border: 1px solid var(--platform-line);
  border-radius: 11px;
  background: var(--platform-surface-soft);
  padding: 11px;
}

.platform-definition-list dt,
.platform-definition-list dd {
  margin: 0;
}

.platform-definition-list dt {
  color: var(--platform-muted);
  font-size: 9px;
  font-weight: 700;
}

.platform-definition-list dd {
  margin-top: 3px;
  color: var(--platform-navy-900);
  font-size: 11px;
  font-weight: 900;
}

.platform-subscription-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.platform-subscription-summary > div {
  border: 1px solid var(--platform-line);
  border-radius: 11px;
  background: var(--platform-surface-soft);
  padding: 11px;
}

.platform-subscription-summary span,
.platform-subscription-summary strong {
  display: block;
}

.platform-subscription-summary span {
  color: var(--platform-muted);
  font-size: 8px;
  font-weight: 700;
}

.platform-subscription-summary strong {
  margin-top: 2px;
  color: var(--platform-navy-900);
  font-size: 11px;
  font-weight: 900;
}

.platform-detail--standalone {
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid var(--platform-line);
  border-radius: 11px;
}

.platform-mini-list {
  display: grid;
  gap: 8px;
}

.platform-mini-list > div {
  border-bottom: 1px solid var(--platform-line);
  padding-bottom: 8px;
}

.platform-mini-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.platform-mini-list strong,
.platform-mini-list span {
  display: block;
}

.platform-mini-list strong {
  color: var(--platform-navy-900);
  font-size: 10px;
}

.platform-mini-list span {
  margin-top: 2px;
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-feature-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-feature-card {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--platform-line);
  border-radius: 12px;
  background: var(--platform-surface-soft);
  padding: 12px;
}

.platform-feature-card--inline {
  min-height: 45px;
}

.platform-feature-card--warning {
  border-color: #f0dfba;
  background: var(--platform-warning-soft);
}

.platform-feature-card--plan-locked {
  border-color: #e5d8da;
  background: #fbf7f7;
}

.platform-feature-card--plan-unavailable {
  border-color: #ead8dc;
  background: linear-gradient(180deg, #fffafa, #fbf7f7);
}

.platform-feature-card--override {
  min-height: 190px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.platform-feature-card__copy {
  min-width: 0;
}

.platform-feature-card__copy strong,
.platform-feature-card__copy small {
  display: block;
}

.platform-feature-card__copy strong {
  color: var(--platform-navy-900);
  font-size: 10px;
  font-weight: 900;
}

.platform-feature-card__copy small {
  margin-top: 2px;
  color: var(--platform-muted);
  font-size: 8px;
  line-height: 1.6;
}

.platform-feature-card__status,
.platform-feature-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.platform-feature-result {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--platform-line);
  border-radius: 9px;
  background: #fff;
  color: var(--platform-muted);
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 700;
}

.platform-feature-result--enabled strong {
  color: var(--platform-success);
}

.platform-feature-result--disabled strong {
  color: var(--platform-danger);
}

.platform-feature-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: auto;
}

.platform-feature-mode label {
  position: relative;
  min-width: 0;
}

.platform-feature-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.platform-feature-mode span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--platform-line);
  border-radius: 8px;
  background: #fff;
  color: var(--platform-muted);
  padding: 5px;
  text-align: center;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.platform-feature-mode input:checked + span {
  border-color: var(--platform-blue-600);
  background: var(--platform-info-soft);
  color: var(--platform-navy-900);
  box-shadow: inset 0 0 0 1px rgba(37, 106, 158, 0.1);
}

.platform-feature-mode input[value="enabled"]:checked + span {
  border-color: #9ed2bb;
  background: var(--platform-success-soft);
  color: var(--platform-success);
}

.platform-feature-mode input[value="disabled"]:checked + span {
  border-color: #e9bdc4;
  background: var(--platform-danger-soft);
  color: var(--platform-danger);
}

.platform-feature-mode input:focus-visible + span {
  outline: 3px solid rgba(37, 106, 158, 0.15);
  outline-offset: 1px;
}

.platform-feature-mode input:disabled + span {
  cursor: not-allowed;
  opacity: 0.62;
}

.platform-mini-list span .platform-badge {
  display: inline-flex;
  margin: 0 0 4px;
}

.platform-textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid var(--platform-line-strong);
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--platform-text);
  padding: 11px 12px;
  font-size: 11px;
  font-weight: 600;
}

.platform-textarea:focus {
  border-color: var(--platform-blue-600);
  box-shadow: 0 0 0 3px rgba(37, 106, 158, 0.12);
}

.platform-maintenance-box {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  margin-top: 14px;
}

.platform-form-actions--top {
  margin-top: 14px;
}

.platform-check-fieldset {
  margin: 0;
  border: 1px solid var(--platform-line);
  border-radius: 12px;
  padding: 12px;
}

.platform-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.platform-check-grid label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--platform-line);
  border-radius: 8px;
  background: var(--platform-surface-soft);
  padding: 5px 8px;
  color: var(--platform-text);
  font-size: 9px;
  font-weight: 700;
}

.platform-admin-grid,
.platform-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.platform-admin-card,
.platform-plan-card {
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}

.platform-admin-card__head,
.platform-plan-card__head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--platform-line);
  margin: -2px -2px 16px;
  padding: 0 2px 14px;
}

.platform-admin-card__head .platform-user-card__avatar {
  flex: 0 0 auto;
  background: var(--platform-info-soft);
  color: var(--platform-navy-800);
}

.platform-admin-card__head h3,
.platform-plan-card__head h3 {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: 14px;
  font-weight: 900;
}

.platform-admin-card__head p,
.platform-plan-card__head p {
  margin: 2px 0 0;
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-admin-card__identity,
.platform-plan-card__head > div:first-child {
  min-width: 0;
  flex: 1;
}

.platform-admin-card__badges {
  flex: 0 0 auto;
}

.platform-form-grid--compact {
  gap: 11px;
}

.platform-form-grid--compact .platform-input,
.platform-form-grid--compact .platform-select {
  height: 40px;
  font-size: 10px;
}

.platform-inline-reset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  border-top: 1px solid var(--platform-line);
  margin-top: 15px;
  padding-top: 14px;
}

.platform-permission-summary {
  border: 1px solid var(--platform-line);
  border-radius: 11px;
  background: var(--platform-surface-soft);
  color: var(--platform-muted);
  padding: 12px;
  font-size: 10px;
  font-weight: 700;
}

.platform-table-primary {
  display: block;
  color: var(--platform-navy-900);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.platform-table-primary small {
  display: block;
  margin-top: 2px;
  color: var(--platform-muted);
  font-size: 8px;
  font-weight: 600;
}

.platform-table--subscriptions {
  min-width: 1260px;
}

.platform-table--subscriptions .platform-input,
.platform-table--subscriptions .platform-select {
  min-width: 120px;
}

.platform-plan-card__head {
  align-items: flex-start;
}

.platform-plan-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 15px;
}

.platform-plan-price strong {
  color: var(--platform-navy-900);
  font-size: 27px;
  font-weight: 900;
}

.platform-plan-price span {
  color: var(--platform-muted);
  font-size: 9px;
  font-weight: 700;
}

.platform-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.platform-permission-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-permission-option {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--platform-line);
  border-radius: 10px;
  background: var(--platform-surface-soft);
  padding: 9px;
}

.platform-permission-option input {
  margin-top: 3px;
  accent-color: var(--platform-navy-700);
}

.platform-permission-option span {
  min-width: 0;
}

.platform-permission-option strong,
.platform-permission-option small {
  display: block;
}

.platform-permission-option strong {
  color: var(--platform-text);
  font-size: 9px;
  line-height: 1.5;
}

.platform-permission-option small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--platform-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-admin-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 15px;
}

.platform-admin-meta > div {
  border: 1px solid var(--platform-line);
  border-radius: 9px;
  background: var(--platform-surface-soft);
  padding: 8px;
}

.platform-admin-meta dt,
.platform-admin-meta dd {
  margin: 0;
}

.platform-admin-meta dt {
  color: var(--platform-muted);
  font-size: 8px;
}

.platform-admin-meta dd {
  margin-top: 2px;
  color: var(--platform-text);
  font-size: 9px;
  font-weight: 800;
}

.platform-stat__value--text {
  margin-top: 8px;
  font-size: 19px;
  letter-spacing: 0;
}

.platform-stat--danger .platform-stat__icon {
  background: var(--platform-danger-soft);
  color: var(--platform-danger);
}

.platform-file-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: var(--platform-info-soft);
  color: var(--platform-navy-800);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
}

.platform-callout {
  margin-top: 20px;
  border: 1px solid var(--platform-line);
  border-radius: 13px;
  padding: 14px 16px;
}

.platform-callout strong,
.platform-callout p {
  display: block;
  margin: 0;
}

.platform-callout strong {
  color: var(--platform-navy-900);
  font-size: 11px;
}

.platform-callout p {
  margin-top: 4px;
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-callout--info {
  border-color: #cde2ef;
  background: var(--platform-info-soft);
}

.platform-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.platform-filter-bar .platform-search {
  flex: 1;
}

.platform-filter-bar__select {
  width: min(260px, 100%);
}

.platform-table--audit {
  min-width: 1120px;
}

.platform-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--platform-muted);
  font-size: 10px;
  font-weight: 800;
}

.platform-pagination > :last-child {
  justify-self: end;
}

.platform-status-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background:
    radial-gradient(circle at 20% 10%, rgba(37, 106, 158, 0.1), transparent 28rem),
    var(--platform-canvas);
  padding: 22px;
}

.platform-status-card {
  width: min(100%, 620px);
  border: 1px solid var(--platform-line);
  border-radius: 24px;
  background: var(--platform-surface);
  padding: clamp(28px, 6vw, 54px);
  text-align: center;
  box-shadow: var(--platform-shadow-md);
}

.platform-status-card__mark {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--platform-gold-400), #b17c29);
  color: var(--platform-navy-950);
  font-size: 19px;
  font-weight: 900;
}

.platform-status-card .platform-eyebrow {
  justify-content: center;
}

.platform-status-card h1 {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 900;
}

.platform-status-card h2 {
  margin: 8px 0 0;
  color: var(--platform-blue-600);
  font-size: 16px;
}

.platform-status-card > p:not(.platform-eyebrow) {
  margin: 14px auto 0;
  color: var(--platform-muted);
  font-size: 12px;
}

.platform-status-card .platform-button {
  margin-top: 20px;
}

.platform-status-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 19px;
  border-top: 1px solid var(--platform-line);
  padding-top: 16px;
  color: var(--platform-muted);
  font-size: 10px;
}

.platform-status-contact a {
  color: var(--platform-blue-600);
}

@media (max-width: 1180px) {
  .platform-feature-grid,
  .platform-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-workflow-note {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-workflow-note strong {
    grid-column: 1 / -1;
  }

  .platform-admin-grid,
  .platform-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .platform-dashboard-grid,
  .platform-two-column {
    grid-template-columns: 1fr;
  }

  .platform-maintenance-box {
    grid-template-columns: 1fr;
  }

  .platform-subscription-actions,
  .platform-workflow-note {
    grid-template-columns: 1fr;
  }

  .platform-workflow-note strong {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .platform-page-head,
  .platform-page-head--school {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-page-head > .platform-button,
  .platform-page-head > form .platform-button {
    width: 100%;
  }

  .platform-school-title {
    align-items: flex-start;
  }

  .platform-school-logo--large {
    width: 58px;
    height: 58px;
  }

  .platform-head-badges {
    justify-content: flex-start;
  }

  .platform-page-head--school > .platform-head-badges {
    max-width: none;
  }

  .platform-head-actions {
    width: 100%;
  }

  .platform-head-actions .platform-button {
    flex: 1 1 100%;
  }

  .platform-feature-grid,
  .platform-feature-grid--compact,
  .platform-permission-grid,
  .platform-permission-grid--compact,
  .platform-definition-list,
  .platform-subscription-summary,
  .platform-admin-meta {
    grid-template-columns: 1fr;
  }

  .platform-inline-reset {
    grid-template-columns: 1fr;
  }

  .platform-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-filter-bar__select {
    width: 100%;
  }

  .platform-feature-mode {
    grid-template-columns: 1fr;
  }
}

/* Phase 5: platform theme parity and support workspace */
html[data-platform-theme="dark"] {
  color-scheme: dark;
  --platform-canvas: #07111f;
  --platform-surface: #0d1d2e;
  --platform-surface-soft: #11263a;
  --platform-line: #22394f;
  --platform-line-strong: #315069;
  --platform-text: #edf4fb;
  --platform-muted: #9caec0;
  --platform-success-soft: #10372b;
  --platform-warning-soft: #3a2c14;
  --platform-danger-soft: #3b1d25;
  --platform-info-soft: #102f48;
  --platform-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --platform-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.3);
}

html[data-platform-theme="dark"] .platform-dashboard-page {
  background:
    radial-gradient(circle at 14% 0%, rgba(87, 170, 231, 0.08), transparent 29rem),
    var(--platform-canvas);
}

html[data-platform-theme="dark"] .platform-login-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(87, 170, 231, 0.09), transparent 31rem),
    var(--platform-canvas);
}

html[data-platform-theme="dark"] .platform-login-shell {
  border-color: var(--platform-line);
  box-shadow: var(--platform-shadow-md);
}

html[data-platform-theme="dark"] .platform-login-brand {
  background:
    radial-gradient(circle at 0 0, rgba(221, 183, 105, 0.18), transparent 18rem),
    linear-gradient(145deg, #0b2442, #071a2f);
}

html[data-platform-theme="dark"] .platform-login-form-panel h2,
html[data-platform-theme="dark"] .platform-auth-field label {
  color: var(--platform-text);
}

html[data-platform-theme="dark"] .platform-topbar {
  border-color: var(--platform-line);
  background: rgba(9, 24, 39, 0.9);
}

html[data-platform-theme="dark"] :is(
  .platform-topbar__title,
  .platform-page-head h2,
  .platform-section__heading h2,
  .platform-stat__value,
  .platform-table-primary,
  .platform-panel h2,
  .platform-panel h3,
  .platform-empty-state strong,
  .platform-list-row__main strong,
  .platform-action-panel__title,
  .platform-admin-card__head h3,
  .platform-plan-card__head h3,
  .platform-plan-price strong,
  .platform-callout strong,
  .platform-status-card h1,
  .platform-support-panel-head h3,
  .platform-support-message__content strong,
  .platform-support-facts dd
) {
  color: var(--platform-text);
}

html[data-platform-theme="dark"] :is(
  .platform-input,
  .platform-select,
  .platform-textarea,
  .platform-feature-mode span
) {
  color: var(--platform-text);
  border-color: var(--platform-line-strong);
  background: #0a1928;
}

html[data-platform-theme="dark"] .platform-table th {
  color: var(--platform-muted);
  background: #112438;
}

html[data-platform-theme="dark"] .platform-table tbody tr:hover {
  background: #102235;
}

html[data-platform-theme="dark"] .platform-button--primary {
  border-color: #225f8c;
  background: #225f8c;
}

html[data-platform-theme="dark"] .platform-button--primary:hover,
html[data-platform-theme="dark"] .platform-button--primary:focus-visible {
  border-color: #2b75aa;
  background: #2b75aa;
}

html[data-platform-theme="dark"] .platform-flash {
  background: var(--platform-surface);
}

html[data-platform-theme="dark"] .platform-stat--violet .platform-stat__icon {
  background: #292340;
}

.platform-theme-toggle {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  color: var(--platform-text);
  border: 1px solid var(--platform-line);
  border-radius: 12px;
  background: var(--platform-surface);
  cursor: pointer;
  transition: 0.18s ease;
}

.platform-theme-toggle:hover,
.platform-theme-toggle:focus-visible {
  border-color: var(--platform-blue-600);
  color: var(--platform-blue-600);
  outline: none;
}

.platform-nav__badge {
  display: inline-flex;
  min-width: 22px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  padding: 1px 6px;
  color: #ffe2e6;
  border: 1px solid rgba(255, 116, 132, 0.38);
  border-radius: 999px;
  background: rgba(184, 59, 70, 0.38);
  font-size: 9px;
  font-weight: 900;
}

.platform-support-stats {
  margin-bottom: 22px;
}

.platform-support-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(140px, 1fr));
  gap: 13px;
  align-items: end;
  margin-bottom: 15px;
  padding: 17px;
}

.platform-support-filter__search {
  align-self: end;
}

.platform-support-filter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-support-table {
  min-width: 1120px;
}

.platform-support-table tr.is-unread {
  background: color-mix(in srgb, var(--platform-info) 7%, var(--platform-surface));
}

.platform-support-unread {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  margin-top: 5px;
  padding: 1px 7px;
  color: var(--platform-danger);
  border-radius: 999px;
  background: var(--platform-danger-soft);
  font-size: 8px;
  font-weight: 900;
}

.platform-support-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  color: var(--support-tone, var(--platform-muted));
  border: 1px solid color-mix(in srgb, var(--support-tone, var(--platform-muted)) 28%, var(--platform-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--support-tone, var(--platform-muted)) 9%, var(--platform-surface));
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.platform-support-badge--status-open,
.platform-support-badge--status-in_progress { --support-tone: #2e81bd; }
.platform-support-badge--status-waiting_school { --support-tone: #b7791f; }
.platform-support-badge--status-resolved { --support-tone: #16805d; }
.platform-support-badge--status-closed { --support-tone: #68798b; }
.platform-support-badge--priority-low { --support-tone: #68798b; }
.platform-support-badge--priority-normal { --support-tone: #2e81bd; }
.platform-support-badge--priority-high { --support-tone: #b7791f; }
.platform-support-badge--priority-urgent { --support-tone: #c94a56; }

.platform-support-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
  gap: 17px;
  align-items: start;
}

.platform-support-conversation,
.platform-support-editor {
  display: grid;
  gap: 17px;
}

.platform-support-closure {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
  padding: 14px 17px;
  border: 1px solid color-mix(in srgb, var(--closure-tone, var(--platform-muted)) 30%, var(--platform-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--closure-tone, var(--platform-muted)) 8%, var(--platform-surface));
  box-shadow: var(--platform-shadow-sm);
}

.platform-support-closure[data-tone="danger"] { --closure-tone: #c94a56; }
.platform-support-closure[data-tone="warning"] { --closure-tone: #b7791f; }
.platform-support-closure[data-tone="neutral"] { --closure-tone: #68798b; }

.platform-support-closure > div {
  display: grid;
  gap: 4px;
}

.platform-support-closure strong {
  color: var(--closure-tone, var(--platform-text));
  font-size: 10px;
}

.platform-support-closure span {
  color: var(--platform-text);
  font-size: 10px;
  line-height: 1.7;
}

.platform-support-live-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.platform-support-live-state__connection,
.platform-support-live-state__new {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
}

.platform-support-live-state__connection {
  color: var(--platform-success);
  background: var(--platform-success-soft);
}

.platform-support-live-state__connection[data-state="warning"] {
  color: #9a6419;
  background: color-mix(in srgb, #b7791f 12%, var(--platform-surface));
}

.platform-support-live-state__new {
  color: var(--platform-info);
  background: color-mix(in srgb, var(--platform-info) 10%, var(--platform-surface));
}

.platform-support-editor {
  position: sticky;
  top: 94px;
}

.platform-support-panel-head {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--platform-line);
  background: linear-gradient(180deg, var(--platform-surface), var(--platform-surface-soft));
}

.platform-support-panel-head h3 {
  margin: 0;
  color: var(--platform-navy-900);
  font-size: 13px;
  font-weight: 900;
}

.platform-support-panel-head p {
  margin: 3px 0 0;
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-support-thread {
  display: grid;
  gap: 13px;
  max-height: 680px;
  overflow: auto;
  padding: 17px;
  background: color-mix(in srgb, var(--platform-surface-soft) 75%, var(--platform-surface));
  scrollbar-color: var(--platform-line-strong) transparent;
}

.platform-support-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  width: min(88%, 740px);
}

.platform-support-message--school {
  justify-self: start;
}

.platform-support-message--platform {
  justify-self: end;
}

.platform-support-message__avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #2e81bd, #18507e);
  font-size: 12px;
  font-weight: 900;
}

.platform-support-message--platform .platform-support-message__avatar {
  color: #162b3f;
  background: linear-gradient(145deg, var(--platform-gold-400), var(--platform-gold-500));
}

.platform-support-message__content {
  overflow: hidden;
  border: 1px solid var(--platform-line);
  border-radius: 15px;
  background: var(--platform-surface);
}

.platform-support-message--school .platform-support-message__content {
  border-start-start-radius: 5px;
}

.platform-support-message--platform .platform-support-message__content {
  border-start-end-radius: 5px;
  background: color-mix(in srgb, var(--platform-gold-500) 5%, var(--platform-surface));
}

.platform-support-message__content header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--platform-line);
}

.platform-support-message__content header strong,
.platform-support-message__content header span {
  display: block;
}

.platform-support-message__content header strong {
  color: var(--platform-navy-900);
  font-size: 10px;
}

.platform-support-message__content header span,
.platform-support-message__content header time {
  color: var(--platform-muted);
  font-size: 8px;
}

.platform-support-message__body {
  padding: 11px 12px 13px;
  color: var(--platform-text);
  font-size: 11px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.platform-support-message__changes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px;
}

.platform-support-message__changes span {
  padding: 4px 7px;
  color: var(--platform-muted);
  border-radius: 8px;
  background: var(--platform-surface-soft);
  font-size: 8px;
}

.platform-support-message--event {
  width: 100%;
}

.platform-support-form {
  padding: 17px;
}

.platform-form-grid__full {
  grid-column: 1 / -1;
}

.platform-support-reply {
  min-height: 130px;
}

.platform-support-facts {
  display: grid;
  margin: 0;
  padding: 4px 17px 12px;
}

.platform-support-facts > div {
  display: grid;
  grid-template-columns: minmax(85px, 0.75fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--platform-line);
}

.platform-support-facts > div:last-child {
  border-bottom: 0;
}

.platform-support-facts dt,
.platform-support-facts dd {
  margin: 0;
}

.platform-support-facts dt {
  color: var(--platform-muted);
  font-size: 9px;
}

.platform-support-facts dd {
  overflow-wrap: anywhere;
  color: var(--platform-text);
  font-size: 9px;
  font-weight: 800;
  text-align: end;
}

.platform-support-history-body {
  padding: 4px 17px 12px;
}

.platform-support-history-panel .ticket-history,
.platform-support-history-panel .ticket-history__empty {
  margin: 0;
}

.platform-support-history-panel .ticket-history {
  display: grid;
  padding: 0;
  list-style: none;
}

.platform-support-history-panel .ticket-history__item {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--platform-line);
}

.platform-support-history-panel .ticket-history__item:last-child {
  border-bottom: 0;
}

.platform-support-history-panel .ticket-history__item strong {
  color: var(--platform-text);
  font-size: 9px;
}

.platform-support-history-panel .ticket-history__item span,
.platform-support-history-panel .ticket-history__item time,
.platform-support-history-panel .ticket-history__empty {
  color: var(--platform-muted);
  font-size: 8px;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .platform-support-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .platform-support-filter__search {
    grid-column: span 2;
  }
}

@media (max-width: 960px) {
  .platform-support-detail-layout {
    grid-template-columns: 1fr;
  }

  .platform-support-editor {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .platform-support-filter,
  .platform-support-editor {
    grid-template-columns: 1fr;
  }

  .platform-support-filter__search {
    grid-column: auto;
  }

  .platform-support-filter__actions,
  .platform-support-filter__actions > * {
    width: 100%;
  }

  .platform-support-message {
    width: 100%;
  }

  .platform-support-message__content header {
    flex-direction: column;
    gap: 3px;
  }

  .platform-support-closure {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-support-live-state {
    justify-content: flex-start;
  }
}

/* Core bilingual controls and direction support */
html[dir="ltr"] body {
  font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

/* Final acceptance: support notifications and complete shared dark surface */
[hidden] {
  display: none !important;
}

.platform-notifications {
  position: relative;
}

.platform-notifications > summary {
  list-style: none;
}

.platform-notifications > summary::-webkit-details-marker {
  display: none;
}

.platform-notifications__trigger {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--platform-text);
  border: 1px solid var(--platform-line);
  border-radius: 12px;
  background: var(--platform-surface);
  cursor: pointer;
}

.platform-notifications__trigger > span {
  position: absolute;
  inset: -6px auto auto -6px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding-inline: 5px;
  color: #fff;
  border: 2px solid var(--platform-surface);
  border-radius: 999px;
  background: var(--platform-danger);
  font-size: 9px;
  font-weight: 900;
}

.platform-notifications__menu {
  position: absolute;
  inset: calc(100% + 10px) auto auto 0;
  z-index: 120;
  width: min(390px, 88vw);
  overflow: hidden;
  color: var(--platform-text);
  border: 1px solid var(--platform-line);
  border-radius: 16px;
  background: var(--platform-surface);
  box-shadow: var(--platform-shadow-md);
}

html[dir="ltr"] .platform-notifications__menu {
  inset: calc(100% + 10px) 0 auto auto;
}

.platform-notifications__menu header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--platform-line);
  background: var(--platform-surface-soft);
}

.platform-notifications__menu header a {
  color: var(--platform-info);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.platform-notification {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  color: var(--platform-text);
  border-bottom: 1px solid var(--platform-line);
  text-decoration: none;
}

.platform-notification:hover,
.platform-notification:focus-visible {
  background: var(--platform-info-soft);
  outline: none;
}

.platform-notification strong {
  font-size: 11px;
}

.platform-notification span,
.platform-notification small,
.platform-notifications__empty {
  color: var(--platform-muted);
  font-size: 10px;
}

.platform-notifications__empty {
  padding: 24px 15px;
  text-align: center;
}

html[data-platform-theme="dark"] body,
html[data-platform-theme="dark"] .platform-shell,
html[data-platform-theme="dark"] .platform-main,
html[data-platform-theme="dark"] .platform-content {
  color: var(--platform-text);
  background-color: var(--platform-canvas);
}

html[data-platform-theme="dark"] :is(
  .platform-panel,
  .platform-stat,
  .platform-school-card,
  .platform-admin-card,
  .platform-plan-card,
  .platform-action-panel,
  .platform-detail,
  .platform-feature-card,
  .platform-settings-card,
  .platform-list-panel,
  .platform-list-row,
  .platform-status-card,
  .platform-support-conversation,
  .platform-support-editor,
  .platform-support-facts-panel,
  .platform-support-history-panel,
  .platform-subscription-summary,
  .platform-check-fieldset,
  .platform-permission-option,
  .platform-security-note,
  .platform-maintenance-box,
  .platform-callout,
  .platform-workflow-note,
  .platform-empty-state,
  .platform-search-empty,
  dialog
) {
  color: var(--platform-text);
  border-color: var(--platform-line);
  background-color: var(--platform-surface);
  box-shadow: var(--platform-shadow-sm);
}

html[data-platform-theme="dark"] :is(
  .platform-page-head,
  .platform-section__header,
  .platform-card-footer,
  .platform-panel__head,
  .platform-action-panel__summary,
  .platform-detail__summary,
  .platform-support-panel-head,
  .platform-support-facts > div,
  .platform-support-history-panel .ticket-history__item,
  .platform-toolbar,
  .platform-pagination,
  .platform-definition-list > div
) {
  color: var(--platform-text);
  border-color: var(--platform-line);
}

html[data-platform-theme="dark"] :is(
  .platform-button,
  .platform-button--soft,
  .platform-button--ghost,
  .platform-sidebar-toggle,
  .platform-user-chip,
  .platform-theme-toggle,
  .platform-search,
  .platform-count-pill,
  .platform-role-chip,
  .platform-plan-code,
  .platform-table-note
) {
  color: var(--platform-text);
  border-color: var(--platform-line);
  background: var(--platform-surface-soft);
}

html[data-platform-theme="dark"] :is(
  .platform-input,
  .platform-select,
  .platform-textarea,
  .platform-auth-input,
  input,
  select,
  textarea
)::placeholder {
  color: #778da3;
  opacity: 1;
}

html[data-platform-theme="dark"] :is(select, option) {
  color: var(--platform-text);
  background: #0a1928;
}

html[data-platform-theme="dark"] .platform-table {
  color: var(--platform-text);
  border-color: var(--platform-line);
  background: var(--platform-surface);
}

html[data-platform-theme="dark"] .platform-table td {
  color: var(--platform-text);
  border-color: var(--platform-line);
  background: transparent;
}

html[data-platform-theme="dark"] :is(
  .platform-field__label,
  .platform-field__hint,
  .platform-page-head p,
  .platform-section__heading p,
  .platform-stat__label,
  .platform-stat__note,
  .platform-list-row__meta,
  .platform-card-footer,
  .platform-table-note,
  .platform-empty-state p,
  .platform-action-panel__caption,
  .platform-feature-card__copy small,
  .platform-admin-meta,
  .platform-plan-price span,
  .platform-support-facts dt,
  .ticket-history__empty
) {
  color: var(--platform-muted);
}

html[data-platform-theme="dark"] :is(
  .platform-feature-card--warning,
  .platform-workflow-note,
  .platform-callout--info
) {
  background: var(--platform-warning-soft);
}

html[data-platform-theme="dark"] :is(
  .platform-support-message__content,
  .platform-support-message--school .platform-support-message__content,
  .platform-support-message--platform .platform-support-message__content
) {
  color: var(--platform-text);
  border-color: var(--platform-line);
  background: var(--platform-surface-soft);
}

@media (max-width: 720px) {
  .platform-notifications__menu {
    position: fixed;
    inset: 76px 12px auto 12px !important;
    width: auto;
  }
}

/* Final dark-theme gap closure for the shared school-management card system. */
html[data-platform-theme="dark"] :is(
  .platform-subscription-line,
  .platform-school-card__actions,
  .platform-school-metric
) {
  color: var(--platform-text);
  border-color: var(--platform-line);
  background: var(--platform-surface-soft);
}

html[data-platform-theme="dark"] :is(
  .platform-school-card__name,
  .platform-school-metric dd,
  .platform-subscription-line__value
) {
  color: var(--platform-text);
}

html[data-platform-theme="dark"] .platform-detail__summary:hover,
html[data-platform-theme="dark"] .platform-detail__summary:focus-visible {
  color: #fff;
  background: #173249;
}

/* Final administrative acceptance: school security and monitoring center */
.platform-security-credentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.platform-security-credential{padding:18px}.platform-security-credential>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--platform-line)}.platform-security-credential h3{margin:4px 0;font-size:15px}.platform-security-credential p{margin:0;color:var(--platform-muted);font-size:10px}.platform-security-credential__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;color:var(--platform-muted);font-size:10px}.platform-security-credential__meta strong{color:var(--platform-text)}.platform-security-credential__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.platform-security-credential__form .platform-button{grid-column:1/-1;justify-self:start}.platform-wa-summary--management{grid-template-columns:repeat(7,minmax(0,1fr))}.platform-wa-filter{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(150px,.8fr)) auto auto;align-items:end}.platform-wa-filter .platform-field{width:100%}.platform-wa-filter .platform-field--date{min-width:145px}.platform-wa-panel{border-block-start:3px solid var(--platform-gold-500);border-radius:var(--platform-radius-md)}.platform-wa-table{min-width:1180px}.platform-wa-table tbody tr:hover td{background:color-mix(in srgb,var(--platform-info-soft) 55%,transparent)}

.support-live-toasts{position:fixed;z-index:6200;inset-block-start:82px;inset-inline-end:18px;display:grid;width:min(390px,calc(100vw - 28px));gap:10px;pointer-events:none}.support-live-toast{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;padding:13px;color:var(--platform-text);border:1px solid var(--platform-line);border-inline-start:4px solid var(--platform-info);border-radius:14px;background:var(--platform-surface);box-shadow:var(--platform-shadow-md);text-decoration:none;opacity:0;transform:translateY(-10px);transition:.2s ease;pointer-events:auto}.support-live-toast.is-visible{opacity:1;transform:none}.support-live-toast__mark{display:grid;width:36px;height:36px;place-items:center;color:#fff;border-radius:11px;background:var(--platform-info);font-weight:900}.support-live-toast>span:last-child{display:grid;gap:3px}.support-live-toast strong{font-size:11px}.support-live-toast small{overflow:hidden;color:var(--platform-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}

/* Close remaining shared dark-surface gaps without changing light mode. */
html[data-platform-theme="dark"] :is(.platform-feature-result,.platform-feature-mode span,.platform-security-credential,.platform-security-credential__meta,.platform-wa-panel,.platform-wa-filter,.platform-notifications__menu,.support-live-toast){color:var(--platform-text);border-color:var(--platform-line);background:var(--platform-surface)}html[data-platform-theme="dark"] :is(.platform-input,.platform-select,.platform-textarea,.platform-auth-input input,.platform-search input,.platform-filter input,.platform-filter select){color:var(--platform-text)!important;border-color:var(--platform-line)!important;background:#0c1d2d!important;color-scheme:dark}html[data-platform-theme="dark"] :is(.platform-table thead th,.platform-table th){color:#dbe8f3;border-color:#31475c;background:#10263a}html[data-platform-theme="dark"] :is(.platform-table tbody tr:hover td,.platform-list-row:hover,.platform-school-card:hover){background:#10283d}html[data-platform-theme="dark"] :is(.platform-feature-mode input:checked + span,.platform-feature-result--enabled,.platform-feature-result--disabled){background:var(--platform-surface-soft)}html[data-platform-theme="dark"] :is(.platform-school-logo,.platform-school-logo img){border-color:#40566b;background:#f6f8fb}html[data-platform-theme="dark"] :is(.platform-dialog,.platform-dialog__body,.platform-modal,.platform-modal__body,.platform-dropdown,.platform-pagination){color:var(--platform-text);border-color:var(--platform-line);background:var(--platform-surface)}html[data-platform-theme="dark"] :is(.platform-button--secondary,.platform-button--soft,.platform-button--ghost):hover{color:#fff;border-color:#426481;background:#18344c}html[data-platform-theme="dark"] :is(.platform-empty-state,.platform-notifications__empty,.platform-support-empty){color:var(--platform-muted);background:var(--platform-surface-soft)}

@media(max-width:1180px){.platform-wa-summary--management{grid-template-columns:repeat(4,minmax(0,1fr))}.platform-wa-filter{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-wa-filter .platform-button{width:100%}}
@media(max-width:760px){.platform-security-credentials,.platform-security-credential__form,.platform-wa-summary--management,.platform-wa-filter{grid-template-columns:1fr}.platform-security-credential>header{align-items:stretch;flex-direction:column}.platform-security-credential__form .platform-button{width:100%}.support-live-toasts{inset-block-start:72px;inset-inline:14px;width:auto}}

html[dir="ltr"] .platform-sidebar {
  inset: 0 auto 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 0;
  box-shadow: 14px 0 40px rgba(8, 26, 47, 0.08);
}

html[dir="ltr"] .platform-main {
  margin-right: 0;
  margin-left: var(--platform-sidebar-width);
}

html[dir="ltr"] .platform-search .platform-icon,
html[dir="ltr"] .platform-auth-input > .platform-icon {
  right: auto;
  left: 14px;
}

html[dir="ltr"] .platform-search .platform-input,
html[dir="ltr"] .platform-auth-input .platform-input {
  padding-right: 14px;
  padding-left: 43px;
}

html[dir="ltr"] .platform-auth-input .platform-input--with-toggle {
  padding-right: 47px;
}

html[dir="ltr"] .platform-password-toggle {
  right: 7px;
  left: auto;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  padding: 3px;
  border: 1px solid var(--platform-line, rgba(151, 169, 188, 0.35));
  border-radius: 10px;
  background: var(--platform-surface, rgba(255, 255, 255, 0.92));
  direction: ltr;
}

.language-switcher__option {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 7px;
  color: var(--platform-muted, #64748b);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  unicode-bidi: isolate;
}

.language-switcher__option:hover,
.language-switcher__option:focus-visible {
  color: var(--platform-text, #102a43);
  outline: 2px solid rgba(41, 105, 160, 0.2);
  outline-offset: 1px;
}

.language-switcher__option.is-active {
  background: var(--platform-navy-700, #1f5f94);
  color: #fff;
}

.language-switcher--sidebar {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}

.language-switcher--sidebar .language-switcher__option {
  color: rgba(255, 255, 255, 0.78);
}

.language-switcher--sidebar .language-switcher__option.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.language-switcher--auth {
  position: fixed;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  z-index: 30;
  box-shadow: var(--platform-shadow-sm, 0 8px 24px rgba(12, 37, 63, 0.12));
}

@media (max-width: 1024px) {
  html[dir="ltr"] .platform-sidebar {
    transform: translateX(-105%);
  }

  html[dir="ltr"] .platform-main {
    margin-left: 0;
  }

  html[dir="ltr"] body.platform-sidebar-open .platform-sidebar {
    transform: translateX(0);
  }
}

@media (max-width: 720px) {
  .language-switcher--header {
    display: none;
  }

  .language-switcher--auth {
    inset-block-start: 10px;
    inset-inline-end: 10px;
  }
}

/* ===================================================================
   لوحة إدارة المنصة — الطبقة الجديدة
   فاتحة أساسًا، والداكن يعيد تعريف الرموز وحدها في آخر الملف.
   الجرأة كلها في شريط واحد كحلي؛ ما عداه هادئ حتى تُقرأ الأرقام.
   =================================================================== */

.pf { display: grid; gap: 14px; }

/* شريط الحالة — القطعة الجريئة الوحيدة */
.pf-band {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px; align-items: center; padding: 26px 28px; overflow: hidden;
  color: #fff; border-radius: var(--platform-radius-lg);
  background:
    radial-gradient(560px 220px at 92% -20%, rgba(226, 198, 127, .20), transparent 62%),
    linear-gradient(122deg, #071c33, #123a5e 58%, #08243f);
  box-shadow: 0 18px 40px rgba(8, 32, 56, .22);
}
.pf-band::before {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px;
  background: linear-gradient(180deg, #e2c67f, #c79b4b); content: "";
}
.pf-band__eyebrow { margin: 0 0 8px; color: #dcbe77; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.pf-band h2 { margin: 0 0 10px; color: #fff; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; }
.pf-band p { max-width: 60ch; margin: 0; color: #c7dcee; font-size: 12.5px; line-height: 1.9; }
.pf-band__acts { display: flex; flex-wrap: wrap; gap: 9px; }

/* بطاقات الأرقام */
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 12px; }
.pf-stat {
  position: relative; display: grid; gap: 7px; padding: 17px 18px 16px; overflow: hidden;
  border: 1px solid var(--pf-edge); border-radius: var(--platform-radius-md);
  background: var(--platform-surface); box-shadow: var(--pf-lift);
}
.pf-stat::after {
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--pf-accent, var(--platform-gold-500)); content: "";
}
.pf-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-stat__label { color: var(--pf-quiet); font-size: 10.5px; font-weight: 800; }
.pf-stat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pf-accent, var(--platform-gold-500)); }
.pf-stat__value { color: var(--pf-ink); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -.02em; }
.pf-stat__note { color: var(--pf-quiet); font-size: 10.5px; }

/* مخطط النشاط — أعمدة حقيقية من سجل العمليات */
.pf-chart { display: grid; gap: 10px; padding: 16px 18px; }
.pf-chart__bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; align-items: end; height: 92px; }
.pf-chart__bar { display: grid; align-content: end; height: 100%; }
.pf-chart__bar i {
  display: block; min-height: 3px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--platform-blue-600), color-mix(in srgb, var(--platform-blue-600) 45%, transparent));
}
.pf-chart__bar.is-peak i { background: linear-gradient(180deg, var(--platform-gold-400), var(--platform-gold-500)); }
.pf-chart__axis { display: flex; justify-content: space-between; color: var(--pf-quiet); font-size: 9px; font-variant-numeric: tabular-nums; }
.pf-chart__empty { padding: 22px 0; color: var(--pf-quiet); font-size: 11px; text-align: center; }

/* قوائم وصفوف */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pf-card {
  display: grid; align-content: start; overflow: hidden;
  border: 1px solid var(--pf-edge); border-radius: var(--platform-radius-md);
  background: var(--platform-surface); box-shadow: var(--pf-lift);
}
.pf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--pf-edge); }
.pf-card__head h3 { margin: 0; color: var(--pf-ink); font-size: 14px; font-weight: 800; }
.pf-card__head a { color: var(--platform-blue-600); font-size: 11px; font-weight: 700; text-decoration: none; }
.pf-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--pf-edge); }
.pf-row:last-child { border-bottom: 0; }
.pf-row__mark { display: grid; width: 34px; height: 34px; place-items: center; color: var(--platform-navy-800); border-radius: 10px; background: var(--platform-surface-soft); font-size: 12px; font-weight: 900; }
.pf-row__text strong { display: block; color: var(--pf-ink); font-size: 12.5px; }
.pf-row__text small { display: block; color: var(--pf-quiet); font-size: 10px; font-variant-numeric: tabular-nums; }
.pf-tag { padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.pf-tag.is-ok { color: var(--platform-success); background: var(--platform-success-soft); }
.pf-tag.is-warn { color: var(--platform-warning); background: var(--platform-warning-soft); }
.pf-tag.is-bad { color: var(--platform-danger); background: var(--platform-danger-soft); }
.pf-tag.is-info { color: var(--platform-info); background: var(--platform-info-soft); }

.pf-empty { padding: 20px 18px; color: var(--pf-quiet); font-size: 11px; text-align: center; }

@media (max-width: 1020px) {
  .pf-band { grid-template-columns: minmax(0, 1fr); }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* الداكن: الرموز وحدها تتغير، والشريط الكحلي يبقى هو هو */
html[data-platform-theme="dark"] {
  --pf-lift: 0 10px 30px rgba(0, 0, 0, .28);
}
html[data-platform-theme="dark"] .pf-row__mark { color: var(--platform-gold-400); }

/* ===================================================================
   مواءمة المكوّنات المشتركة مع لغة اللوحة الجديدة.
   هذه الطبقة تأتي آخر الملف فتفوز على التعريفات السابقة بنفس الأولوية،
   وتغطي صفحات إدارة المنصة كلها دون تعديل أي قالب.
   =================================================================== */

/* البطاقات واللوحات */
.platform-section { display: grid; gap: 12px; }
.platform-section__header { align-items: flex-start; padding-bottom: 2px; }
.platform-section__heading h2 {
  margin: 0; color: var(--pf-ink); font-size: 16px; font-weight: 800;
  letter-spacing: -.01em;
}
.platform-section__heading p { margin: 4px 0 0; color: var(--pf-quiet); font-size: 11px; line-height: 1.75; }
.platform-text-link { color: var(--platform-blue-600); font-size: 11px; font-weight: 800; text-decoration: none; }
.platform-text-link:hover { text-decoration: underline; }

.platform-panel {
  border: 1px solid var(--pf-edge); border-radius: var(--platform-radius-md);
  background: var(--platform-surface); box-shadow: var(--pf-lift);
}

/* بطاقات الأرقام في بقية الصفحات — نفس لغة لوحة التحكم */
.platform-stat {
  position: relative; overflow: hidden;
  border: 1px solid var(--pf-edge); border-radius: var(--platform-radius-md);
  background: var(--platform-surface); box-shadow: var(--pf-lift);
}
.platform-stat::after {
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--platform-gold-500); content: "";
}
.platform-stat--success::after { background: var(--platform-success); }
.platform-stat--gold::after { background: var(--platform-gold-500); }
.platform-stat--violet::after { background: #7c62c4; }
.platform-stat__label { color: var(--pf-quiet); font-size: 10.5px; font-weight: 800; }
.platform-stat__value {
  color: var(--pf-ink); font-size: 32px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.08; letter-spacing: -.02em;
}
.platform-stat__note { color: var(--pf-quiet); font-size: 10.5px; }

/* الأزرار */
.platform-button {
  min-height: 40px; padding: 10px 17px; border-radius: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: 0;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.platform-button:hover { transform: translateY(-1px); }
.platform-button--gold {
  color: #16243a; border-color: transparent;
  background: linear-gradient(135deg, var(--platform-gold-400), var(--platform-gold-500));
  box-shadow: 0 8px 20px rgba(199, 155, 75, .28);
}
.platform-button--primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--platform-navy-700), var(--platform-navy-900));
  box-shadow: 0 8px 20px rgba(11, 36, 66, .24);
}
.platform-button--ghost { border-color: var(--pf-edge); background: transparent; }

/* الحقول */
.platform-field { display: grid; align-content: start; gap: 6px; }
.platform-field > label { color: var(--pf-quiet); font-size: 10.5px; font-weight: 800; }
.platform-input, .platform-select, .platform-textarea {
  min-height: 42px; padding: 10px 12px; border: 1px solid var(--pf-edge);
  border-radius: 11px; background: var(--platform-surface);
  color: var(--pf-ink); font: inherit; font-size: 12px;
}
.platform-input:focus, .platform-select:focus, .platform-textarea:focus {
  border-color: color-mix(in srgb, var(--platform-blue-600) 60%, var(--pf-edge));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-blue-600) 14%, transparent);
  outline: none;
}

/* الشارات */
.platform-badge {
  padding: 4px 11px; border: 0; border-radius: 999px;
  font-size: 10px; font-weight: 800; white-space: nowrap;
}
.platform-badge--active { color: var(--platform-success); background: var(--platform-success-soft); }
.platform-badge--suspended { color: var(--platform-danger); background: var(--platform-danger-soft); }
.platform-badge--archived { color: var(--platform-warning); background: var(--platform-warning-soft); }

/* الجداول */
.platform-table { border-collapse: collapse; }
.platform-table :is(th, td) { padding: 12px 14px; border-bottom: 1px solid var(--pf-edge); font-size: 12px; }
.platform-table th {
  color: var(--pf-quiet); background: var(--platform-surface-soft);
  font-size: 10.5px; font-weight: 800;
}
.platform-table td { color: var(--pf-ink); font-variant-numeric: tabular-nums; }
.platform-table tbody tr:last-child td { border-bottom: 0; }
.platform-table tbody tr:hover td {
  background: color-mix(in srgb, var(--platform-blue-600) 4%, var(--platform-surface));
}

/* الحالات الفارغة */
.platform-empty-state {
  display: grid; gap: 5px; padding: 26px 20px; text-align: center;
  border: 1px dashed var(--pf-edge); border-radius: var(--platform-radius-md);
  background: var(--platform-surface-soft);
}
.platform-empty-state strong { color: var(--pf-ink); font-size: 13px; }
.platform-empty-state p { margin: 0; color: var(--pf-quiet); font-size: 11px; }
.platform-empty-state--compact { padding: 18px 16px; }

/* شريط الحالة في ملف المدرسة — هوية المدرسة بدل عنوان عام */
.pf-band--school { grid-template-columns: minmax(0, 1fr); }
.pf-band__identity { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 18px; align-items: center; }
.pf-band__logo {
  display: grid; width: 78px; height: 78px; place-items: center; overflow: hidden;
  border: 1px solid rgba(226, 198, 127, .38); border-radius: 20px;
  background: rgba(255, 255, 255, .10);
}
.pf-band__logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pf-band--school h2 { margin: 4px 0 4px; }
.pf-band--school p[dir="ltr"] { margin: 0; color: #b7d0e5; font-size: 11px; }
.pf-band__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.pf-band__chip {
  padding: 4px 11px; color: #d9e7f3;
  border: 1px solid rgba(226, 198, 127, .28); border-radius: 999px;
  background: rgba(255, 255, 255, .08); font-size: 10px; font-weight: 800;
}
.pf-band__chip.is-plan { color: #16243a; border-color: transparent; background: linear-gradient(135deg, #e2c67f, #c79b4b); }
.pf-band__chip.is-on { color: #06301f; border-color: transparent; background: #7fd7ac; }
.pf-band__chip.is-off { color: #300b0b; border-color: transparent; background: #efa3a3; }

@media (max-width: 620px) {
  .pf-band__identity { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   لغة الرؤوس الجديدة — تُلغي الشريط الكحلي الضخم.
   لوحة الإدارة تُقرأ ولا تُبهر بكتلة داكنة: سطح فاتح، مسطرة ذهبية
   رفيعة، هرم طباعي واضح، وإجراءات في صف العنوان لا معلّقة في فراغ.
   selector واحد يغطي الرأسين معًا فترتقي كل الصفحات دفعة واحدة.
   =================================================================== */

.pf-band,
.platform-page-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px 20px 22px;
  overflow: hidden;
  color: var(--pf-ink);
  border: 1px solid var(--pf-edge);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface);
  box-shadow: var(--pf-lift);
  backdrop-filter: none;
}
.pf-band::before,
.platform-page-head::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--platform-gold-400), var(--platform-gold-500));
  content: "";
}
.pf-band > div,
.platform-page-head > div { min-width: 0; }

.pf-band__eyebrow,
.platform-page-head .platform-eyebrow {
  margin: 0 0 6px;
  color: var(--platform-gold-500);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.pf-band h2,
.platform-page-head h2 {
  margin: 0;
  color: var(--pf-ink);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.pf-band p,
.platform-page-head > div > p {
  max-width: 68ch;
  margin: 7px 0 0;
  color: var(--pf-quiet);
  font-size: 12px;
  line-height: 1.85;
}

.pf-band__acts,
.platform-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

/* أزرار الرأس تجلس الآن على سطح فاتح، فتعود ألوانها الطبيعية */
.pf-band .platform-button--ghost,
.platform-page-head .platform-button--ghost {
  color: var(--pf-ink);
  border-color: var(--pf-edge);
  background: var(--platform-surface);
}
.pf-band .platform-button--ghost:hover,
.platform-page-head .platform-button--ghost:hover {
  border-color: color-mix(in srgb, var(--platform-blue-600) 45%, var(--pf-edge));
}

/* ---- ملف المدرسة: هوية على سطح فاتح ---- */
.pf-band--school { align-items: center; }
.pf-band__logo {
  border: 1px solid var(--pf-edge);
  border-radius: 18px;
  background: var(--platform-surface-soft);
}
.pf-band--school h2 { margin: 3px 0 3px; }
.pf-band--school p[dir="ltr"] {
  margin: 0;
  color: var(--pf-quiet);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.pf-band__chip {
  padding: 4px 11px;
  color: var(--pf-quiet);
  border: 1px solid var(--pf-edge);
  border-radius: 999px;
  background: var(--platform-surface-soft);
  font-size: 10px;
  font-weight: 800;
}
.pf-band__chip.is-plan {
  color: #4a3608;
  border-color: color-mix(in srgb, var(--platform-gold-500) 45%, var(--pf-edge));
  background: color-mix(in srgb, var(--platform-gold-400) 26%, var(--platform-surface));
}
.pf-band__chip.is-on {
  color: var(--platform-success);
  border-color: color-mix(in srgb, var(--platform-success) 30%, var(--pf-edge));
  background: var(--platform-success-soft);
}
.pf-band__chip.is-off {
  color: var(--platform-danger);
  border-color: color-mix(in srgb, var(--platform-danger) 30%, var(--pf-edge));
  background: var(--platform-danger-soft);
}

/* الشريط الوحيد الذي يبقى داكنًا هو ترويسة الدخول، لا صفحات العمل */
html[data-platform-theme="dark"] .pf-band,
html[data-platform-theme="dark"] .platform-page-head {
  background: var(--platform-surface);
}

/* ===================================================================
   صقل المكوّنات الباقية في صفحات إدارة المنصة.
   الترتيب هنا مقصود: كل قاعدة تعالج مكوّنًا يتكرر في تسع صفحات،
   فالتعديل الواحد يظهر في كلها.
   =================================================================== */

/* النماذج */
.platform-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  padding: 18px 20px;
}
.platform-field--full { grid-column: 1 / -1; }
.platform-field__label {
  color: var(--pf-quiet);
  font-size: 10.5px;
  font-weight: 800;
}
.platform-field__hint {
  color: var(--pf-quiet);
  font-size: 9.5px;
  line-height: 1.7;
}
.platform-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  grid-column: 1 / -1;
  padding-top: 4px;
}

/* الأزرار الهادئة */
.platform-button--soft {
  color: var(--platform-blue-600);
  border-color: color-mix(in srgb, var(--platform-blue-600) 22%, var(--pf-edge));
  background: color-mix(in srgb, var(--platform-blue-600) 6%, var(--platform-surface));
}
.platform-button--soft:hover {
  border-color: color-mix(in srgb, var(--platform-blue-600) 45%, var(--pf-edge));
}
.platform-button--danger {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #c04a55, var(--platform-danger));
}
.platform-button--wide { width: 100%; justify-content: center; }

/* اللوحات القابلة للطي — إنشاء مدرسة، تجديد اشتراك، وأخواتها */
.platform-action-panel { overflow: hidden; }
.platform-action-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.platform-action-panel__summary::-webkit-details-marker { display: none; }
.platform-action-panel__summary:hover {
  background: color-mix(in srgb, var(--platform-blue-600) 3%, var(--platform-surface));
}
.platform-action-panel__summary-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.platform-action-panel__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  color: var(--platform-gold-500);
  border: 1px solid color-mix(in srgb, var(--platform-gold-500) 30%, var(--pf-edge));
  border-radius: 12px;
  background: color-mix(in srgb, var(--platform-gold-400) 12%, var(--platform-surface));
}
.platform-action-panel__title { display: block; color: var(--pf-ink); font-size: 13px; font-weight: 800; }
.platform-action-panel__caption { display: block; margin-top: 2px; color: var(--pf-quiet); font-size: 10.5px; }
.platform-action-panel__chevron { color: var(--pf-quiet); transition: transform .18s ease; }
.platform-action-panel[open] .platform-action-panel__chevron { transform: rotate(180deg); }
.platform-action-panel__body { border-top: 1px solid var(--pf-edge); }

/* شريط الأدوات والبحث */
.platform-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--pf-edge);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface);
  box-shadow: var(--pf-lift);
}
.platform-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; }
.platform-search__icon {
  position: absolute;
  inset-inline-start: 12px;
  color: var(--pf-quiet);
  font-size: 14px;
  pointer-events: none;
}
.platform-search .platform-input { width: 100%; padding-inline-start: 34px; }
.platform-toolbar__count { color: var(--pf-quiet); font-size: 11px; }
.platform-toolbar__count strong { color: var(--pf-ink); font-variant-numeric: tabular-nums; }

/* ملاحظة سير العمل */
.platform-workflow-note {
  display: grid;
  gap: 6px;
  padding: 15px 18px;
  border: 1px solid var(--pf-edge);
  border-inline-start: 3px solid var(--platform-gold-500);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface);
  box-shadow: var(--pf-lift);
}
.platform-workflow-note strong { color: var(--pf-ink); font-size: 12.5px; }
.platform-workflow-note span { color: var(--pf-quiet); font-size: 11px; line-height: 1.8; }

/* بطاقات المدارس في صفحة المدارس */
.platform-school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 13px;
}
.platform-school-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid var(--pf-edge);
  border-radius: var(--platform-radius-md);
  background: var(--platform-surface);
  box-shadow: var(--pf-lift);
  transition: transform .16s ease, box-shadow .16s ease;
}
.platform-school-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16, 40, 65, .11); }
.platform-school-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.platform-school-card__identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.platform-school-logo {
  display: grid;
  width: 46px;
  height: 46px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--pf-edge);
  border-radius: 13px;
  background: var(--platform-surface-soft);
}
.platform-school-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.platform-school-logo--small { width: 36px; height: 36px; border-radius: 11px; }
.platform-school-logo--large { width: 74px; height: 74px; border-radius: 18px; }
.platform-school-card__name { margin: 0; color: var(--pf-ink); font-size: 13.5px; font-weight: 800; }
.platform-school-card__domain { margin-top: 3px; color: var(--pf-quiet); font-size: 10px; }
.platform-school-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }

.platform-school-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 11px 0;
  border-block: 1px solid var(--pf-edge);
}
.platform-school-metric { display: grid; gap: 2px; text-align: center; }
.platform-school-metric dt { color: var(--pf-quiet); font-size: 9.5px; font-weight: 800; }
.platform-school-metric dd {
  margin: 0;
  color: var(--pf-ink);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.platform-subscription-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.platform-subscription-line__label { display: block; color: var(--pf-quiet); font-size: 9.5px; font-weight: 800; }
.platform-subscription-line__value {
  display: block;
  margin-top: 2px;
  color: var(--pf-ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.platform-card-footer { padding-top: 2px; }

/* التنفس بين الأقسام */
.platform-content { display: grid; align-content: start; gap: 14px; }
.platform-search-empty {
  padding: 22px;
  color: var(--pf-quiet);
  border: 1px dashed var(--pf-edge);
  border-radius: var(--platform-radius-md);
  font-size: 11.5px;
  text-align: center;
}

/* ===================================================================
   الوضع الداكن — تصحيح ألوان الحالة.
   كتلة الثيم الداكن كانت تعيد تعريف خلفيات *-soft وتترك ألوان النص
   على قيم الوضع الفاتح، فكان نص أخضر داكن يجلس على خلفية خضراء داكنة
   بتباين 2.6 فقط. تفتيح الرموز يصلح 36 محددًا تستعملها نصًا دفعة واحدة.
   =================================================================== */
html[data-platform-theme="dark"] {
  --platform-success: #5cc596;
  --platform-warning: #e2b45f;
  --platform-danger: #ef8f8f;
  --platform-info: #6fb4e8;
}

/* الاستثناء الوحيد: عدّاد الإشعارات يحمل نصًا أبيض فوق اللون نفسه،
   فيحتفظ بخلفية داكنة مشبعة حتى يبقى الأبيض مقروءًا. */
html[data-platform-theme="dark"] .platform-notifications__trigger > span,
html[data-platform-theme="dark"] .platform-nav__badge--alert,
html[data-platform-theme="dark"] .school-nav__badge--alert {
  color: #fff;
  background: #a8343f;
}

/* الروابط النصية الزرقاء تُقرأ على أبيض لا على كحلي داكن.
   لا أفتّح --platform-blue-600 نفسه لأنه يُستعمل خلفيةً أيضًا. */
html[data-platform-theme="dark"] .pf-card__head a,
html[data-platform-theme="dark"] .platform-text-link,
html[data-platform-theme="dark"] .platform-notifications__menu header a,
html[data-platform-theme="dark"] .platform-button--soft {
  color: #7cc0ef;
}
html[data-platform-theme="dark"] .platform-button--soft {
  border-color: color-mix(in srgb, #7cc0ef 30%, var(--pf-edge));
  background: color-mix(in srgb, #7cc0ef 10%, var(--platform-surface));
}

/* أحرف الحساب داخل الدوائر: الخلفية *-soft تصير داكنة في الوضع الداكن
   بينما بقي النص على navy-800، فكان الحرف يختفي (تباين 1.13). */
html[data-platform-theme="dark"] .platform-user-chip__avatar,
html[data-platform-theme="dark"] .platform-admin-card__head .platform-user-card__avatar {
  color: #9fd0f2;
}

/* رابط تخطي المحتوى يظهر عند التنقل بلوحة المفاتيح فقط،
   وكان كحليًا على سطح داكن. */
html[data-platform-theme="dark"] .platform-skip-link {
  color: var(--platform-text);
  border: 1px solid var(--platform-line-strong);
}

/* ===================================================================
   تصحيح: قواعدي السابقة غطّت بعض خصائص مكوّنات قديمة وتركت الباقي،
   فبقيت خصائص لا تنتمي للتصميم الجديد وأنتجت أشكالًا غريبة.
   الإعلانات هنا كاملة لا جزئية.
   =================================================================== */

/* الشريط العلوي لبطاقة الرقم: القاعدة القديمة كانت دائرة 78px بحدّ 12px،
   فورث شريطي عرضها وحدّها ونصف قطرها وصار قرصًا مسطّحًا. */
.platform-stat::after {
  position: absolute;
  inset: 0 0 auto 0;
  width: auto;
  height: 3px;
  border: 0;
  border-radius: 0;
  background: var(--platform-gold-500);
  content: "";
}
.platform-stat--success::after { background: var(--platform-success); }
.platform-stat--gold::after { background: var(--platform-warning); }
.platform-stat--violet::after { background: #7c62c4; }
.platform-stat--danger::after { background: var(--platform-danger); }

/* رأس بطاقة المدرسة: الاسم الطويل كان يدفع الشارات خارج البطاقة
   والبطاقة overflow:hidden فتُقصّ. الآن يلتف الصف بدل أن يفيض. */
.platform-school-card__header { flex-wrap: wrap; }
.platform-school-card__identity { flex: 1 1 190px; min-width: 0; }
.platform-school-card__name { overflow-wrap: anywhere; }
.platform-school-card__badges {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  max-width: 100%;
}

/* صفحة مركز النسخ الاحتياطية مصمَّمة بالكامل في core_readiness.css،
   وهي تُحمَّل بعد هذا الملف في platform_base.html فتفوز عليه.
   أي تعديل على تلك الصفحة يُكتب هناك لا هنا. */

/* ===================================================================
   تصحيحات ٣: بطاقة بيانات الحساب، وعرض المحتوى، وزر إظهار كلمة المرور.
   =================================================================== */

/* بطاقة «بيانات الحساب الحالي» صُمّمت داكنة بتدرّج كحلي ونص أبيض.
   قاعدة .platform-panel التي كتبتها غطّت خلفيتها بالأبيض وتركت النص
   أبيض، فاختفى تمامًا. أنقلها إلى اللغة الفاتحة كاملةً بدل ترقيعها. */
.platform-security-note {
  background: var(--platform-surface);
  color: var(--pf-ink);
}
.platform-security-note__icon {
  color: var(--platform-gold-500);
  border: 1px solid color-mix(in srgb, var(--platform-gold-500) 30%, var(--pf-edge));
  background: color-mix(in srgb, var(--platform-gold-400) 12%, var(--platform-surface));
}
.platform-security-note h3 { color: var(--pf-ink); }
.platform-security-note p { color: var(--pf-quiet); font-size: 11px; }
.platform-security-note p strong { color: var(--pf-ink); }
.platform-security-note__status {
  color: var(--platform-success);
  font-size: 10px;
}
.platform-security-note__status::before {
  background: var(--platform-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--platform-success) 16%, transparent);
}
.platform-security-note > div { padding: 18px 20px 0; }
.platform-security-note__status { padding: 0 20px 18px; margin-top: 14px; }

/* المحتوى كان محصورًا في 1540px بحشو واسع، فتبدو البطاقات صغيرة
   على الشاشات العريضة. */
.platform-content {
  width: min(100%, 1800px);
  padding: 26px clamp(16px, 2vw, 30px) 44px;
}
.platform-school-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.pf-stats { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }

/* زر إظهار كلمة المرور صار أيقونة عين */
.platform-password-toggle svg { width: 18px; height: 18px; }
.platform-password-toggle [hidden] { display: none; }

/* auto-fill يحجز المسارات الفارغة، فثلاث بطاقات في أربعة مسارات تترك
   فراغًا وتبدو ضيّقة. auto-fit يطوي الفارغ فتتمدد البطاقات على العرض. */
.platform-school-grid {
  /* min() يمنع المسار من تجاوز عرض الحاوية على الشاشات الضيقة، لأن هذه
     القاعدة خارج استعلامات الوسائط وتتجاوزها. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* ===================================================================
   تصحيح مخطط النشاط وصفوف الروابط في لوحة التحكم.
   =================================================================== */

/* العمود كان شبكة بصفٍّ مقاسه بالمحتوى، فنسبة ارتفاع <i> لم تجد
   مرجعًا محددًا وسقطت إلى min-height فبدت الأعمدة خطوطًا مسطحة.
   flex بارتفاع محدد يعطي النسبة مرجعًا تُحسب عليه. */
.pf-chart__bars { align-items: stretch; height: 104px; }
.pf-chart__bar {
  display: flex;
  height: 100%;
  align-items: flex-end;
}
.pf-chart__bar i {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--platform-blue-600), color-mix(in srgb, var(--platform-blue-600) 42%, transparent));
}
.pf-chart__bar.is-peak i {
  background: linear-gradient(180deg, var(--platform-gold-400), var(--platform-gold-500));
}

/* الصف حين يكون رابطًا: بلا تسطير، ويستجيب للمرور */
a.pf-row {
  text-decoration: none;
  transition: background .16s ease;
}
a.pf-row:hover {
  background: color-mix(in srgb, var(--platform-blue-600) 4%, var(--platform-surface));
}
a.pf-row .pf-row__text strong,
a.pf-row .pf-row__text small { text-decoration: none; }
.pf-row__text strong { overflow-wrap: anywhere; }