/*
 * Sharpena production design system
 *
 * This is the canonical shared layer for tokens, components, application shell,
 * responsive composition, and accessibility. Feature-specific layouts remain in
 * app.css while they are migrated phase by phase.
 */

:root {
  color-scheme: light;

  /*
   * Canonical Sharpena identity. Tenant records may supply school marks and
   * copy, but they never participate in application or document colors.
   */
  --sharpena-nav-bg: #08254f;
  --sharpena-nav-text: #dbeafe;
  --sharpena-nav-active: #2563eb;
  --sharpena-primary: #2563eb;
  --sharpena-primary-hover: #1748bf;
  --sharpena-secondary: #0891b2;
  --sharpena-accent: #7c3aed;
  --sharpena-page-bg: #f4f8fc;
  --sharpena-card-bg: #ffffff;
  --sharpena-card-border: rgba(148, 163, 184, 0.24);
  --sharpena-card-shadow: 0 8px 24px rgba(15, 40, 80, 0.07);
  --sharpena-text: #182542;
  --sharpena-text-muted: #64748b;
  --sharpena-focus: #2563eb;
  --sharpena-link: #1d4ed8;
  --sharpena-input-border: rgba(100, 116, 139, 0.34);
  --sharpena-success: #15803d;
  --sharpena-warning: #b45309;
  --sharpena-danger: #c2413b;
  --sharpena-info: #2563eb;
  --sharpena-locked: #526174;
  --sharpena-document-navy: #0f3c78;
  --sharpena-document-aqua: #00abc8;
  --sharpena-document-gold: #f7b718;

  /* Typography */
  --sp-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --sp-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --sp-text-xs: 0.75rem;
  --sp-text-sm: 0.875rem;
  --sp-text-md: 1rem;
  --sp-text-lg: 1.125rem;
  --sp-text-xl: 1.375rem;
  --sp-text-2xl: 1.75rem;
  --sp-text-3xl: 2.25rem;
  --sp-leading-tight: 1.2;
  --sp-leading-body: 1.55;

  /* Spacing */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-8: 32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;

  /* Geometry */
  --sp-radius-sm: 10px;
  --sp-radius-md: 14px;
  --sp-radius-lg: 18px;
  --sp-radius-xl: 24px;
  --sp-radius-pill: 999px;
  --sp-border: var(--sharpena-card-border);
  --sp-border-strong: rgba(100, 116, 139, 0.34);

  /* Neutral and brand surfaces */
  --sp-ink: #0b1739;
  --sp-text: var(--sharpena-text);
  --sp-text-muted: var(--sharpena-text-muted);
  --sp-text-subtle: #8793a8;
  --sp-canvas: var(--sharpena-page-bg);
  --sp-surface: var(--sharpena-card-bg);
  --sp-surface-soft: #f8fbff;
  --sp-surface-raised: rgba(255, 255, 255, 0.94);
  --sp-surface-glass: rgba(255, 255, 255, 0.82);
  --sp-primary: var(--sharpena-primary);
  --sp-primary-strong: var(--sharpena-primary-hover);
  --sp-secondary: var(--sharpena-secondary);
  --sp-accent: var(--sharpena-accent);
  --sp-sidebar: var(--sharpena-nav-bg);
  --sp-focus: var(--sharpena-focus);

  /* Semantic states */
  --sp-info: var(--sharpena-info);
  --sp-success: var(--sharpena-success);
  --sp-warning: var(--sharpena-warning);
  --sp-danger: var(--sharpena-danger);
  --sp-neutral: var(--sharpena-locked);
  --sp-info-soft: #eaf2ff;
  --sp-success-soft: #e9f8ef;
  --sp-warning-soft: #fff5df;
  --sp-danger-soft: #fff0ee;
  --sp-neutral-soft: #eef2f6;

  /* Elevation and motion */
  --sp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sp-shadow-sm: var(--sharpena-card-shadow);
  --sp-shadow-md: 0 18px 48px rgba(15, 40, 80, 0.11);
  --sp-shadow-overlay: 0 28px 80px rgba(15, 23, 42, 0.2);
  --sp-motion-fast: 140ms;
  --sp-motion-base: 200ms;
  --sp-motion-slow: 240ms;
  --sp-ease: cubic-bezier(0.2, 0.75, 0.2, 1);

  /* Layering */
  --sp-z-base: 1;
  --sp-z-card: 10;
  --sp-z-sticky: 50;
  --sp-z-sidebar: 80;
  --sp-z-topbar: 100;
  --sp-z-dropdown: 200;
  --sp-z-drawer: 300;
  --sp-z-modal: 400;
  --sp-z-toast: 500;

  /* Layout */
  --sp-sidebar-width: 264px;
  --sp-sidebar-compact: 88px;
  --sp-content-max: 1480px;
  --sp-reading-max: 760px;
  --sp-topbar-height: 68px;
  --sp-mobile-nav-height: 72px;
  --sp-control-compact: 36px;
  --sp-control-default: 44px;
  --sp-control-large: 48px;
  --sp-safe-top: env(safe-area-inset-top, 0px);
  --sp-safe-right: env(safe-area-inset-right, 0px);
  --sp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sp-safe-left: env(safe-area-inset-left, 0px);

  /* Compatibility aliases for the existing feature layer */
  --navy: var(--sp-ink);
  --text: var(--sp-text);
  --muted: var(--sp-text-muted);
  --blue: var(--sp-primary);
  --blue-strong: var(--sp-primary-strong);
  --border: var(--sp-border);
  --radius-sm: var(--sp-radius-sm);
  --radius-md: var(--sp-radius-md);
  --radius-lg: var(--sp-radius-lg);
  --radius-xl: var(--sp-radius-xl);
  --shadow-soft: var(--sp-shadow-sm);
  --z-base: var(--sp-z-base);
  --z-card: var(--sp-z-card);
  --z-sticky: var(--sp-z-sticky);
  --z-sidebar: var(--sp-z-sidebar);
  --z-topbar: var(--sp-z-topbar);
  --z-dropdown: var(--sp-z-dropdown);
  --z-drawer: var(--sp-z-drawer);
  --z-modal: var(--sp-z-modal);
  --z-toast: var(--sp-z-toast);

}

html {
  scroll-padding-top: calc(var(--sp-topbar-height) + var(--sp-space-8));
}

body {
  min-width: 320px;
  color: var(--sp-text);
  background:
    linear-gradient(180deg, rgba(232, 242, 255, 0.64), rgba(247, 250, 253, 0) 360px),
    var(--sp-canvas);
  font-family: var(--sp-font-sans);
  line-height: var(--sp-leading-body);
  letter-spacing: 0;
}

body,
button,
input,
select,
textarea {
  font-family: var(--sp-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sp-ink);
  font-family: var(--sp-font-display);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

p,
li,
td,
th,
label,
small,
strong,
span,
a,
button {
  overflow-wrap: anywhere;
}

a,
button,
input,
select,
textarea,
summary {
  transition:
    color var(--sp-motion-fast) var(--sp-ease),
    background-color var(--sp-motion-fast) var(--sp-ease),
    border-color var(--sp-motion-fast) var(--sp-ease),
    box-shadow var(--sp-motion-fast) var(--sp-ease),
    transform var(--sp-motion-fast) var(--sp-ease);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sp-focus) 42%, transparent);
  outline-offset: 3px;
}

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: var(--sp-space-3);
  left: var(--sp-space-3);
  z-index: calc(var(--sp-z-toast) + 1);
  padding: var(--sp-space-3) var(--sp-space-4);
  color: #fff;
  background: var(--sp-ink);
  border-radius: var(--sp-radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.long-data,
.truncate-safe {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrap-safe {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Shared status language */
.status-pill,
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 9px;
  color: var(--sp-neutral);
  background: var(--sp-neutral-soft);
  border: 1px solid color-mix(in srgb, var(--sp-neutral) 14%, transparent);
  border-radius: var(--sp-radius-pill);
  font-size: var(--sp-text-xs);
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
}

.status-chip::before {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  content: "";
}

.status-pill.success,
.status-pill.clear,
.status-pill.published,
.status-chip.status-clear,
.status-chip.status-published {
  color: var(--sp-success);
  background: var(--sp-success-soft);
}

.status-pill.warning,
.status-pill.needs-attention,
.status-pill.not-configured,
.status-chip.status-needs-attention,
.status-chip.status-not-configured {
  color: var(--sp-warning);
  background: var(--sp-warning-soft);
}

.status-pill.danger,
.status-pill.error {
  color: var(--sp-danger);
  background: var(--sp-danger-soft);
}

.status-pill.primary,
.status-pill.info,
.status-pill.ready,
.status-pill.submitted,
.status-chip.status-ready,
.status-chip.status-submitted {
  color: var(--sp-info);
  background: var(--sp-info-soft);
}

.status-pill.draft,
.status-pill.locked,
.status-pill.not-recorded,
.status-chip.status-draft,
.status-chip.status-locked,
.status-chip.status-not-recorded {
  color: var(--sp-neutral);
  background: var(--sp-neutral-soft);
}

/* Shared card primitives */
.ui-card,
.tool-panel,
.metric-card,
.empty-state-card,
.focus-queue,
.activity-panel {
  min-width: 0;
  color: var(--sp-text);
  background: var(--sp-surface-raised);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-sm);
}

.metric-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-space-2);
  min-height: 144px;
  padding: var(--sp-space-5);
  overflow: hidden;
}

.metric-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--metric-accent, var(--sp-info));
  content: "";
  opacity: 0.76;
}

.metric-card[data-state="clear"],
.metric-card[data-state="published"] {
  --metric-accent: var(--sp-success);
}

.metric-card[data-state="needs-attention"],
.metric-card[data-state="not-configured"] {
  --metric-accent: var(--sp-warning);
}

.metric-card[data-state="error"] {
  --metric-accent: var(--sp-danger);
}

.metric-card-top,
.metric-card-header,
.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-space-3);
  min-width: 0;
}

.metric-card-label {
  color: var(--sp-text-muted);
  font-size: var(--sp-text-sm);
  font-weight: 750;
  line-height: 1.3;
}

.metric-card-value,
.metric-card > strong {
  display: block;
  color: var(--sp-ink);
  font-size: clamp(1.65rem, 2.2vw, 2.15rem);
  font-weight: 780;
  line-height: 1.05;
}

.metric-card-context,
.metric-card > p {
  margin: 0;
  color: var(--sp-text-muted);
  font-size: var(--sp-text-sm);
  line-height: 1.4;
}

.metric-card-action {
  align-self: end;
  width: fit-content;
  margin-top: auto;
  color: var(--sp-primary-strong);
  font-size: var(--sp-text-sm);
  font-weight: 800;
}

.metric-card-action:hover {
  color: var(--sp-primary);
}

.empty-state-card {
  display: grid;
  justify-items: start;
  gap: var(--sp-space-3);
  padding: var(--sp-space-6);
}

.empty-state-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--sp-info);
  background: var(--sp-info-soft);
  border-radius: var(--sp-radius-md);
}

.empty-state-card > strong {
  color: var(--sp-ink);
  font-size: var(--sp-text-lg);
}

.empty-state-card > p {
  max-width: 58ch;
  margin: 0;
  color: var(--sp-text-muted);
}

.focus-queue {
  padding: var(--sp-space-5);
}

.focus-queue-list,
.activity-feed {
  padding: 0;
  margin: var(--sp-space-4) 0 0;
  list-style: none;
}

.focus-queue-item,
.activity-feed > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-space-3);
  min-width: 0;
  padding: var(--sp-space-3) 0;
  border-top: 1px solid var(--sp-border);
}

.focus-queue-item:first-child,
.activity-feed > li:first-child {
  border-top: 0;
}

.focus-queue-severity {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.focus-queue-severity.is-critical {
  color: var(--sp-danger);
}

.focus-queue-severity.is-warning {
  color: var(--sp-warning);
}

.focus-queue-severity.is-info {
  color: var(--sp-info);
}

.focus-queue-copy,
.activity-feed-copy {
  min-width: 0;
}

.focus-queue-copy strong,
.activity-feed strong {
  display: block;
  color: var(--sp-ink);
}

.focus-queue-copy p,
.activity-feed p {
  margin: 2px 0 0;
  color: var(--sp-text-muted);
  font-size: var(--sp-text-sm);
  line-height: 1.4;
}

.activity-feed small {
  color: var(--sp-text-subtle);
  font-size: var(--sp-text-xs);
}

.activity-feed-marker {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--sp-primary);
  background: var(--sp-primary-soft);
  border-radius: var(--sp-radius-sm);
}

.activity-feed-marker .icon-svg {
  width: 17px;
  height: 17px;
}

.activity-feed time {
  color: var(--sp-text-subtle);
  font-size: var(--sp-text-xs);
  white-space: nowrap;
}

.activity-feed-copy strong,
.activity-feed-copy p {
  overflow-wrap: anywhere;
}

/* Form and action primitives
   Feature styles may change colors or layout but cannot quietly create a
   fourth action height.  Compact controls opt in explicitly; all other
   native and semantic actions share the practical 44px target. */
:where(
  button,
  .primary-button,
  .secondary-button,
  .ghost-button,
  .soft-button,
  .danger-button,
  .icon-button,
  .teacher-row-action
) {
  box-sizing: border-box;
  min-height: var(--sp-control-height, var(--sp-control-default)) !important;
  border-radius: var(--sp-radius-sm);
}

/* Details menus trigger actions just like buttons.  Legacy feature sheets
   used several unrelated 34px and 40px values here, which could make a
   menu trigger sit lower than the action beside it.  Keep normal menus at
   the default target; compact contexts opt into the compact token below. */
:where(.more-menu > summary, .inline-tools > summary) {
  box-sizing: border-box;
  min-height: var(--sp-control-height, var(--sp-control-default)) !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* Major disclosure headers are full action targets. Nested disclosures keep
   the same compact dimension as tabs and row actions, replacing the legacy
   42px and 30px values without making dense inline explanations oversized. */
:where(.disclosure-panel > summary) {
  box-sizing: border-box;
  min-height: var(--sp-control-default) !important;
  border-radius: var(--sp-radius-sm) !important;
}

:where(.inline-disclosure > summary) {
  box-sizing: border-box;
  min-height: var(--sp-control-compact) !important;
  border-radius: var(--sp-radius-sm) !important;
}

:where(
  .sharpena-control,
  .sharpena-select,
  .global-search input,
  [data-control-size]
) {
  box-sizing: border-box;
  min-height: var(--sp-control-height, var(--sp-control-default)) !important;
}

/* Single-line controls have an exact rendered dimension, not merely a
   minimum. Textareas retain the flexible rule above so their authored rows
   and user-entered content can expand without clipping. */
:where(
  input.sharpena-control,
  select.sharpena-select,
  input[data-control-size],
  select[data-control-size]
) {
  height: var(--sp-control-height, var(--sp-control-default)) !important;
}

/* Standard labelled form fields previously inherited a 40px feature rule for
   text/date/number inputs while their select and button peers were 44px.
   Keep every single-line field on the same exact shared height, but leave
   multi-line and binary/native controls free to retain their proper shape. */
.field :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select
) {
  box-sizing: border-box;
  min-height: var(--sp-control-height, var(--sp-control-default)) !important;
  height: var(--sp-control-height, var(--sp-control-default)) !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* Semantic components use the shared corner treatment even while legacy
   feature selectors retain their layout-specific padding and colors. */
:is(
  .primary-button,
  .secondary-button,
  .ghost-button,
  .soft-button,
  .danger-button,
  .icon-button,
  .teacher-row-action,
  .text-button
) {
  border-radius: var(--sp-radius-sm) !important;
}

:is(.sharpena-control, .sharpena-select, [data-control-size]) {
  border-radius: var(--sp-radius-sm) !important;
}

/* Header menus are peer actions, not undersized disclosure affordances. */
:is(.action-row, .principal-header-actions, .gradebook-header-actions) .more-menu > summary {
  box-sizing: border-box;
  min-height: var(--sp-control-default) !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* The term-lock menu sits next to a standard management action. Keep its
   icon trigger square and aligned with that action at every breakpoint. */
.term-lock-more > summary {
  box-sizing: border-box;
  width: var(--sp-control-default) !important;
  min-width: var(--sp-control-default) !important;
  height: var(--sp-control-default) !important;
  min-height: var(--sp-control-default) !important;
  border-radius: var(--sp-radius-sm) !important;
}

:where(
  .compact-action-button,
  .text-button,
  .teacher-row-action,
  .profile-section-menu > summary,
  .gradebook-row-more > summary,
  [data-button-size="compact"],
  [data-control-size="compact"]
) {
  --sp-control-height: var(--sp-control-compact);
}

/* Tab overflow and per-row menus deliberately use the compact control size;
   the square gradebook trigger must not retain its old 34px width while its
   shared minimum height becomes 36px. */
:where(.tab-row a, .profile-section-menu > summary) {
  box-sizing: border-box;
  min-height: var(--sp-control-compact) !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* Filter, segmented-view, and section-navigation tabs are compact actions.
   These used 28px, 32px, 34px, and 38px feature-specific heights; the shared
   compact target keeps them aligned and comfortably tappable without turning
   a dense toolbar into a row of full-size primary actions. */
:where(
  .notification-filter-tabs a,
  .academic-filter-tabs a,
  .gradebook-view-toggle a,
  .principal-tab-group-links a,
  .principal-section-nav-links a,
  .workspace-section-nav-links a
) {
  box-sizing: border-box;
  min-height: var(--sp-control-compact) !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* Gradebook workspace tabs switch the core working surface and remain the
   deliberate default-size exception among navigation controls. */
.gradebook-tabs a {
  box-sizing: border-box;
  min-height: var(--sp-control-default) !important;
  border-radius: var(--sp-radius-sm) !important;
}

.gradebook-row-more > summary {
  box-sizing: border-box;
  width: var(--sp-control-compact) !important;
  min-width: var(--sp-control-compact) !important;
  height: var(--sp-control-compact) !important;
  min-height: var(--sp-control-compact) !important;
  border-radius: var(--sp-radius-sm) !important;
}

:where([data-button-size="large"], [data-control-size="large"]) {
  --sp-control-height: var(--sp-control-large);
}

.icon-button {
  display: inline-grid;
  width: var(--sp-control-height, var(--sp-control-default)) !important;
  min-width: var(--sp-control-height, var(--sp-control-default)) !important;
  padding: 0;
  place-items: center;
  color: var(--sp-text);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  cursor: pointer;
}

.icon-button:hover {
  color: var(--sp-primary);
  background: var(--sp-info-soft);
  border-color: color-mix(in srgb, var(--sp-primary) 30%, var(--sp-border));
}

.field-stack {
  display: grid;
  gap: var(--sp-space-2);
  min-width: 0;
}

.field-stack > label {
  color: var(--sp-text);
  font-size: var(--sp-text-sm);
  font-weight: 750;
}

.field-stack :where(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--sp-text);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-sm);
  font: inherit;
}

.field-stack textarea {
  min-height: 112px;
  resize: vertical;
}

.inline-validation {
  color: var(--sp-danger);
  font-size: var(--sp-text-sm);
  font-weight: 700;
}

.save-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
  color: var(--sp-text-muted);
  font-size: var(--sp-text-sm);
  font-weight: 700;
}

.save-state[data-state="saving"]::before {
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--sp-primary) 22%, transparent);
  border-top-color: var(--sp-primary);
  border-radius: 50%;
  content: "";
  animation: sp-spin 0.7s linear infinite;
}

@keyframes sp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Data density and responsive composition */
.data-surface {
  min-width: 0;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-xs);
  overflow: hidden;
}

.data-table-scroll {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

.data-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--sp-surface);
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: var(--sp-z-sticky);
  color: var(--sp-text-muted);
  background: var(--sp-surface-soft);
  font-size: var(--sp-text-xs);
  line-height: 1.3;
  text-align: left;
  white-space: normal;
}

.data-table :where(th, td) {
  min-width: 112px;
  padding: var(--sp-space-3) var(--sp-space-4);
  border-bottom: 1px solid var(--sp-border);
  vertical-align: middle;
}

.data-table :where(th, td):first-child {
  min-width: 200px;
}

.responsive-row-list {
  display: none;
}

.skeleton {
  position: relative;
  min-height: 1em;
  overflow: hidden;
  color: transparent !important;
  background: var(--sp-neutral-soft);
  border-radius: 6px;
}

.skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  content: "";
  transform: translateX(-100%);
  animation: sp-shimmer 1.25s infinite;
}

@keyframes sp-shimmer {
  to {
    transform: translateX(100%);
  }
}

.error-state {
  padding: var(--sp-space-5);
  color: var(--sp-danger);
  background: var(--sp-danger-soft);
  border: 1px solid color-mix(in srgb, var(--sp-danger) 22%, transparent);
  border-radius: var(--sp-radius-md);
}

/* Dialogs and drawers */
.confirmation-dialog,
.command-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  color: var(--sp-text);
  background: var(--sp-surface-raised);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xl);
  box-shadow: var(--sp-shadow-overlay);
  overflow: hidden;
}

.confirmation-dialog::backdrop,
.command-dialog::backdrop {
  background: rgba(7, 18, 42, 0.46);
  backdrop-filter: blur(8px);
}

.dialog-header,
.dialog-body,
.dialog-actions {
  padding: var(--sp-space-5);
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-space-4);
  border-bottom: 1px solid var(--sp-border);
}

.dialog-header h2 {
  margin: 0;
  font-size: var(--sp-text-xl);
}

.dialog-body {
  display: grid;
  gap: var(--sp-space-4);
  overflow: auto;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-space-3);
  border-top: 1px solid var(--sp-border);
}

.right-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--sp-z-drawer);
  width: min(460px, 100vw);
  max-width: 100%;
  padding: var(--sp-space-6);
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow-overlay);
  overflow: auto;
}

/* Universal application shell */
.app-shell {
  display: grid;
  grid-template-columns: var(--sp-sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--sp-motion-base) var(--sp-ease);
}

.app-shell[data-sidebar-collapsed="true"] {
  grid-template-columns: var(--sp-sidebar-compact) minmax(0, 1fr);
}

.app-shell:not([data-sidebar-collapsed="true"]):has(.app-sidebar:hover),
.app-shell:not([data-sidebar-collapsed="true"]):has(.app-sidebar:focus-within) {
  grid-template-columns: var(--sp-sidebar-width) minmax(0, 1fr);
}

.app-shell[data-sidebar-collapsed="true"]:has(.app-sidebar:hover),
.app-shell[data-sidebar-collapsed="true"]:has(.app-sidebar:focus-within) {
  grid-template-columns: var(--sp-sidebar-compact) minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--sp-z-sidebar);
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  height: 100dvh;
  padding:
    max(var(--sp-space-4), var(--sp-safe-top))
    var(--sp-space-3)
    max(var(--sp-space-4), var(--sp-safe-bottom));
  color: #e5eefc;
  background:
    linear-gradient(180deg, rgba(13, 60, 118, 0.28), transparent 48%),
    var(--sp-sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-shadow: 10px 0 34px rgba(15, 38, 74, 0.08);
  overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar:hover,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar:focus-within {
  width: auto;
  padding-inline: var(--sp-space-3);
}

.app-sidebar .brand {
  justify-content: flex-start;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--sp-space-2);
}

.app-sidebar .brand-label,
.app-sidebar .nav-label,
.app-sidebar .sidebar-footer,
.app-sidebar .sidebar-user-meta {
  max-width: 180px;
  opacity: 1;
  transform: none;
}

.app-sidebar .brand-label,
.app-sidebar .nav-label {
  min-width: 0;
}

.app-sidebar .sidebar-footer {
  height: auto;
  padding: var(--sp-space-3);
  border: 1px solid rgba(219, 234, 254, 0.16);
}

.app-sidebar .side-nav-link {
  justify-content: flex-start;
  min-height: 46px;
  padding-inline: var(--sp-space-2);
}

.app-sidebar .side-nav-link:hover {
  transform: none;
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar .brand {
  justify-content: center;
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar :is(
  .brand-label,
  .nav-label,
  .sidebar-footer,
  .sidebar-user-meta,
  .side-nav-count
) {
  position: absolute;
  width: 1px;
  height: 1px;
  max-width: 0;
  padding: 0;
  margin: -1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar .side-nav-link {
  justify-content: center;
  padding-inline: 0;
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar:hover .brand,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar:focus-within .brand,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar:hover .side-nav-link,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar:focus-within .side-nav-link {
  justify-content: center;
  padding-inline: 0;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar-collapse-button .nav-label {
  display: none;
}

.sidebar-collapse-button {
  margin-top: var(--sp-space-2);
  color: #dbeafe;
}

.sidebar-collapse-button .icon-svg {
  transition: transform var(--sp-motion-base) var(--sp-ease);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar-collapse-button .icon-svg {
  transform: rotate(180deg);
}

.app-main {
  width: 100%;
  min-width: 0;
  padding-top: var(--sp-space-3);
}

.utility-bar {
  top: var(--sp-space-3);
  z-index: var(--sp-z-topbar);
  width: calc(100% - (2 * var(--sp-space-6)));
  max-width: var(--sp-content-max);
  min-height: var(--sp-topbar-height);
  padding: var(--sp-space-3) var(--sp-space-4);
  margin: 0 auto;
  background: var(--sp-surface-glass);
  border: 1px solid var(--sp-border);
  border-top: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-sm);
}

.command-launcher {
  display: inline-flex;
  flex: 1 1 260px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-3);
  width: min(400px, 34vw);
  max-width: 400px;
  min-height: 44px;
  padding: 0 var(--sp-space-3);
  color: var(--sp-text-muted);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  cursor: pointer;
}

.command-launcher:hover {
  color: var(--sp-text);
  background: var(--sp-surface);
  border-color: var(--sp-border-strong);
}

.command-launcher-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
  min-width: 0;
}

.command-launcher kbd {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: var(--sp-text-muted);
  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: 7px;
  box-shadow: var(--sp-shadow-xs);
  font: 700 var(--sp-text-xs) var(--sp-font-sans);
}

.utility-profile-avatar {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ffffff;
  background: var(--sp-primary);
  border-radius: 50%;
  font-size: var(--sp-text-xs);
  font-weight: 800;
}

.command-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-space-2);
}

.command-search-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-space-4);
  color: var(--sp-text);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-md);
  font: inherit;
}

.command-search-hints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-space-2);
}

.command-search-hints span {
  padding: var(--sp-space-3);
  color: var(--sp-text-muted);
  background: var(--sp-surface-soft);
  border-radius: var(--sp-radius-sm);
  font-size: var(--sp-text-sm);
}

.page-shell {
  width: min(var(--sp-content-max), calc(100% - (2 * var(--sp-space-6))));
  margin: var(--sp-space-6) auto var(--sp-space-16);
  padding-bottom: var(--sp-safe-bottom);
}

.messages {
  z-index: var(--sp-z-toast);
}

.mobile-bottom-nav {
  z-index: var(--sp-z-topbar);
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: var(--sp-sidebar-compact) minmax(0, 1fr);
  }

  .app-shell .app-sidebar :is(
    .brand-label,
    .nav-label,
    .sidebar-footer,
    .sidebar-user-meta,
    .side-nav-count
  ) {
    position: absolute;
    width: 1px;
    height: 1px;
    max-width: 0;
    padding: 0;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .app-shell .app-sidebar .brand,
  .app-shell .app-sidebar .side-nav-link {
    justify-content: center;
    padding-inline: 0;
  }

  .sidebar-collapse-button {
    display: none;
  }

  .utility-bar {
    flex-wrap: wrap;
  }

  .command-launcher {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }

  .data-table.is-responsive {
    display: none;
  }

  .responsive-row-list {
    display: grid;
    gap: var(--sp-space-3);
    padding: var(--sp-space-3);
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(var(--sp-mobile-nav-height) + var(--sp-safe-bottom) + var(--sp-space-4));
  }

  .app-shell,
  .app-shell[data-sidebar-collapsed="true"] {
    display: block;
    min-height: auto;
  }

  .app-sidebar {
    display: none;
  }

  .app-main {
    padding-top: 0;
  }

  .utility-bar {
    top: 0;
    width: 100%;
    max-width: none;
    min-height: 58px;
    padding:
      max(var(--sp-space-2), var(--sp-safe-top))
      max(var(--sp-space-3), var(--sp-safe-right))
      var(--sp-space-2)
      max(var(--sp-space-3), var(--sp-safe-left));
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: var(--sp-shadow-xs);
  }

  .utility-context {
    flex: 1 1 160px;
    overflow: hidden;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) {
    align-items: center;
    flex-flow: row nowrap;
    gap: var(--sp-space-2);
    min-height: 64px;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-context {
    order: initial;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    width: auto;
    min-width: 0;
    overflow: hidden;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-context > .utility-muted {
    display: none;
  }

  .utility-context-kicker {
    display: none;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .command-launcher {
    order: initial;
    flex: 0 0 44px;
    width: 44px;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-actions {
    order: initial;
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
  }

  .school-switcher {
    max-width: 100%;
  }

  .school-switcher .school-identity-copy > span,
  .academic-year-form,
  .utility-profile-name,
  .teacher-add-menu {
    display: none;
  }

  .utility-actions {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .utility-profile-menu > summary {
    width: 44px;
    max-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }

  .command-launcher {
    order: initial;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    background: transparent;
  }

  .command-launcher .command-label,
  .command-launcher kbd {
    display: none;
  }

  .page-shell {
    width: min(100% - (2 * var(--sp-space-4)), var(--sp-content-max));
    margin-top: var(--sp-space-4);
    margin-bottom: var(--sp-space-8);
    padding-bottom: calc(var(--sp-mobile-nav-height) + var(--sp-safe-bottom) + var(--sp-space-6));
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(var(--mobile-nav-slots, 5), minmax(0, 1fr));
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(var(--sp-mobile-nav-height) + var(--sp-safe-bottom));
    padding:
      var(--sp-space-2)
      max(var(--sp-space-2), var(--sp-safe-right))
      max(var(--sp-space-2), var(--sp-safe-bottom))
      max(var(--sp-space-2), var(--sp-safe-left));
    background: rgba(255, 255, 255, 0.96);
    border: 0;
    border-top: 1px solid var(--sp-border);
    border-radius: 0;
    box-shadow: 0 -12px 30px rgba(15, 40, 80, 0.1);
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav > a,
  .mobile-bottom-nav > details > summary {
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    color: var(--sp-text-muted);
    border-radius: var(--sp-radius-sm);
    font-size: 0.67rem;
    line-height: 1.15;
  }

  .mobile-bottom-nav > a.is-active,
  .mobile-bottom-nav > details[open] > summary {
    color: var(--sp-primary);
    background: var(--sp-info-soft);
  }

  .mobile-bottom-nav .nav-icon {
    display: inline-grid;
    width: 34px;
    height: 32px;
    place-items: center;
    background: transparent;
    border: 0;
  }

  .mobile-bottom-nav .icon-svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.15;
  }

  .mobile-more-popover {
    position: fixed;
    inset: auto var(--sp-space-3)
      calc(var(--sp-mobile-nav-height) + var(--sp-safe-bottom) + var(--sp-space-2))
      var(--sp-space-3);
    z-index: var(--sp-z-drawer);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-space-2);
    max-height: min(68dvh, 620px);
    padding: var(--sp-space-4);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-xl);
    box-shadow: var(--sp-shadow-overlay);
    overflow: auto;
  }

  /* The popover is an interactive sheet only while its native details control
     is open. Explicitly removing it from layout prevents closed menu links
     from remaining off-canvas in keyboard navigation. */
  .mobile-more-menu:not([open]) > .mobile-more-popover {
    display: none;
  }

  .mobile-more-popover a {
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
    min-height: 48px;
    padding: var(--sp-space-2);
    color: var(--sp-text);
    background: var(--sp-surface-soft);
    border-radius: var(--sp-radius-sm);
  }

  .command-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .command-search-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .command-search-form button {
    width: 100%;
  }

  .command-search-hints {
    grid-template-columns: minmax(0, 1fr);
  }

  .right-drawer {
    inset: 0;
    width: 100vw;
    padding:
      max(var(--sp-space-5), var(--sp-safe-top))
      max(var(--sp-space-4), var(--sp-safe-right))
      max(var(--sp-space-5), var(--sp-safe-bottom))
      max(var(--sp-space-4), var(--sp-safe-left));
  }

  .metric-card {
    min-height: 124px;
    padding: var(--sp-space-4);
  }

  .focus-queue-item,
  .activity-feed > li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .focus-queue-item > :last-child,
  .activity-feed > li > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 380px) {
  .page-shell {
    width: calc(100% - (2 * var(--sp-space-3)));
  }

  .mobile-bottom-nav > a,
  .mobile-bottom-nav > details > summary {
    font-size: 0.62rem;
  }

  .mobile-bottom-nav .nav-icon {
    width: 32px;
    height: 30px;
  }
}

/* Keep the full academic year readable in the desktop utility bar. Earlier
   responsive rules squeeze the native select enough to clip its final digits. */
@media (min-width: 981px) {
  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form {
    flex: 0 0 244px;
    min-width: 244px;
    flex-wrap: nowrap;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form select {
    flex: 1 1 168px;
    min-width: 168px;
    font-variant-numeric: tabular-nums;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form button {
    flex: 0 0 auto;
  }
}

/* Principal workspace: expose only the active destination's local pages. */
:is(.principal-section-nav, .workspace-section-nav) {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  min-width: 0;
  margin: 0 0 var(--sp-space-5);
  padding: 0 0 var(--sp-space-2);
  border-bottom: 1px solid var(--sp-border);
}

:is(.principal-section-nav-label, .workspace-section-nav-label) {
  flex: 0 0 auto;
  color: var(--sp-text-muted);
  font-size: var(--sp-text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

:is(.principal-section-nav-links, .workspace-section-nav-links) {
  display: flex;
  align-items: center;
  gap: var(--sp-space-1);
  min-width: 0;
  padding: var(--sp-space-1);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

:is(.principal-section-nav-links, .workspace-section-nav-links) a {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px var(--sp-space-3);
  color: var(--sp-text-muted);
  border-radius: 8px;
  font-size: var(--sp-text-sm);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

:is(.principal-section-nav-links, .workspace-section-nav-links) a:hover {
  color: var(--sp-primary-strong);
  background: var(--sp-info-soft);
}

:is(.principal-section-nav-links, .workspace-section-nav-links) a.is-active {
  color: var(--sp-primary-strong);
  background: var(--sp-info-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-primary) 24%, transparent);
}

@media (max-width: 640px) {
  :is(.principal-section-nav, .workspace-section-nav) {
    display: block;
    /* Keep the horizontal chip scroller inside the page shell. Bleeding it
       beyond the shell made the mobile principal workspace scroll 4px wider
       than its client width. */
    margin-inline: 0;
  }

  :is(.principal-section-nav-label, .workspace-section-nav-label) {
    display: block;
    padding-inline: var(--sp-space-2);
  }

  :is(.principal-section-nav-links, .workspace-section-nav-links) {
    padding-inline: var(--sp-space-2);
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

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

/* Combined UI and gradebook correction: a deliberate, persistent sidebar and
   a schedule grid that responds to its card width rather than the viewport. */
:root {
  --sp-sidebar-width: 272px;
  --sp-sidebar-compact: 80px;
}

.app-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--sp-space-3);
  overflow: hidden;
}

.app-sidebar__scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(191, 219, 254, 0.45) transparent;
}

.app-sidebar__scroll::-webkit-scrollbar { width: 4px; height: 0; }
.app-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.app-sidebar__scroll::-webkit-scrollbar-thumb {
  background: rgba(191, 219, 254, 0.4);
  border-radius: 999px;
}
.app-sidebar__scroll::-webkit-scrollbar-button { display: none; }

/* Tooltip pseudo-elements extend the nav's scroll width even when invisible.
   They are only useful for the deliberate collapsed desktop rail. */
@media (min-width: 1024px) {
  .app-shell:not([data-sidebar-collapsed="true"]) .app-sidebar .side-nav-link[data-tooltip]::after,
  .app-shell:not([data-sidebar-collapsed="true"]) .app-sidebar .sidebar-logout-button[data-tooltip]::after {
    content: none;
  }
}

.app-sidebar__footer {
  display: grid;
  gap: var(--sp-space-2);
  min-width: 0;
}

.app-sidebar .sidebar-footer {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: var(--sp-space-3);
  overflow: hidden;
}

.app-sidebar .sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.app-sidebar .sidebar-user:hover,
.app-sidebar .sidebar-user:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.app-sidebar .sidebar-user-name,
.app-sidebar .sidebar-user-role,
.app-sidebar .brand-label,
.app-sidebar .nav-label {
  overflow-wrap: anywhere;
}

.teacher-schedule-panel { container-type: inline-size; }

.teacher-schedule-row {
  grid-template-columns: minmax(66px, max-content) 3px minmax(0, 1fr) auto;
  grid-template-areas:
    "time line copy action"
    "time line count action";
}

.teacher-time-block { grid-area: time; }
.teacher-schedule-line { grid-area: line; }
.teacher-schedule-copy { grid-area: copy; overflow-wrap: anywhere; }
.teacher-student-count { grid-area: count; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.teacher-row-action { grid-area: action; min-width: 0; max-width: 100%; justify-self: end; white-space: normal; overflow-wrap: anywhere; }

@container (max-width: 520px) {
  .teacher-schedule-row {
    grid-template-columns: 62px 3px minmax(0, 1fr);
    grid-template-areas:
      "time line copy"
      "time line count"
      ". line action";
    align-items: start;
  }

  .teacher-schedule-line { align-self: stretch; min-height: 36px; height: auto; }
  .teacher-row-action { justify-self: start; }
}

@media (min-width: 1024px) {
  .app-shell,
  .app-shell:not([data-sidebar-collapsed="true"]):has(.app-sidebar:hover),
  .app-shell:not([data-sidebar-collapsed="true"]):has(.app-sidebar:focus-within) {
    grid-template-columns: var(--sp-sidebar-width) minmax(0, 1fr);
  }

  .app-shell[data-sidebar-collapsed="true"],
  .app-shell[data-sidebar-collapsed="true"]:has(.app-sidebar:hover),
  .app-shell[data-sidebar-collapsed="true"]:has(.app-sidebar:focus-within) {
    grid-template-columns: var(--sp-sidebar-compact) minmax(0, 1fr);
  }

  .app-sidebar,
  .app-sidebar:hover,
  .app-sidebar:focus-within {
    width: auto;
    height: calc(100dvh - 16px);
    margin: 8px 0 8px 8px;
    padding: 18px 14px;
    overflow: hidden;
  }

  .app-sidebar .brand,
  .app-sidebar:hover .brand,
  .app-sidebar:focus-within .brand,
  .app-sidebar .side-nav-link,
  .app-sidebar:hover .side-nav-link,
  .app-sidebar:focus-within .side-nav-link {
    justify-content: flex-start;
    padding-inline: var(--sp-space-2);
  }

  .app-sidebar .brand-label,
  .app-sidebar .nav-label,
  .app-sidebar .sidebar-footer,
  .app-sidebar .sidebar-user-meta {
    position: static;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0;
    opacity: 1;
    overflow: hidden;
    clip: auto;
    transform: none;
  }

  .sidebar-collapse-button { display: inline-flex; }

  .app-shell[data-sidebar-collapsed="true"] .app-sidebar {
    padding-inline: var(--sp-space-3);
  }

  .app-shell[data-sidebar-collapsed="true"] .app-sidebar .brand,
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar .side-nav-link {
    justify-content: center;
    padding-inline: 0;
  }

  .app-shell[data-sidebar-collapsed="true"] .app-sidebar .sidebar-footer {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    opacity: 1;
    overflow: visible;
    clip: auto;
    background: transparent;
    border: 0;
  }

  .app-shell[data-sidebar-collapsed="true"] .app-sidebar .sidebar-user {
    justify-content: center;
  }

  .app-shell[data-sidebar-collapsed="true"] .app-sidebar :is(
    .brand-label,
    .nav-label,
    .sidebar-user-meta,
    .side-nav-count,
    .sidebar-footer > :not(.sidebar-user)
  ) {
    position: absolute;
    width: 1px;
    height: 1px;
    max-width: 0;
    padding: 0;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell,
  .app-shell[data-sidebar-collapsed="true"] {
    grid-template-columns: var(--sp-sidebar-compact) minmax(0, 1fr);
  }

  .app-sidebar {
    width: auto;
    margin: 8px 0 8px 8px;
    padding-inline: var(--sp-space-3);
  }

  .app-shell .app-sidebar .sidebar-footer {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    opacity: 1;
    overflow: visible;
    clip: auto;
    background: transparent;
    border: 0;
  }

  .app-shell .app-sidebar .sidebar-user {
    justify-content: center;
  }

  .app-shell .app-sidebar :is(
    .brand-label,
    .nav-label,
    .sidebar-user-meta,
    .side-nav-count,
    .sidebar-footer > :not(.sidebar-user)
  ) {
    position: absolute;
    width: 1px;
    height: 1px;
    max-width: 0;
    padding: 0;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .sidebar-collapse-button { display: none; }
}

/* Keep the mobile navigation shell out of document flow.  The combined
   sidebar grid rules above intentionally enhance desktop/tablet, but must not
   re-enable the desktop sidebar after the mobile contract hides it. */
@media (max-width: 767px) {
  .app-shell,
  .app-shell[data-sidebar-collapsed="true"] {
    display: block;
    min-height: auto;
  }

  .app-sidebar {
    display: none;
  }

  /* Family-facing assessment detail is a record list, not an advanced grid.
     Show every field as a labeled card rather than requiring horizontal table
     scrolling on a phone. */
  .portal-grade-detail-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .portal-grade-detail-table {
    min-width: 0 !important;
  }

  .portal-grade-detail-table thead {
    display: none;
  }

  .portal-grade-detail-table,
  .portal-grade-detail-table tbody,
  .portal-grade-detail-table tr,
  .portal-grade-detail-table td {
    display: block;
    width: 100%;
  }

  .portal-grade-detail-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--sp-space-3);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    overflow: hidden;
  }

  .portal-grade-detail-table td {
    min-height: 46px;
    padding: var(--sp-space-3);
    border-bottom: 1px solid var(--sp-border);
  }

  .portal-grade-detail-table td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--sp-text-muted);
    content: attr(data-label);
    font-size: var(--sp-text-xs);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .portal-grade-detail-table td:nth-child(1),
  .portal-grade-detail-table td:nth-child(2),
  .portal-grade-detail-table td:nth-child(3),
  .portal-grade-detail-table td:nth-child(6),
  .portal-grade-detail-table td:nth-child(7),
  .portal-grade-detail-table td:nth-child(8) {
    grid-column: 1 / -1;
  }

  .portal-grade-detail-table td:last-child {
    border-bottom: 0;
  }
}

/* Principal directory/readiness tables have only a narrow content column once
   the tablet rail is active. Convert them to the existing labeled-record card
   composition before their desktop headers become unreadable. */
@media (min-width: 681px) and (max-width: 1120px) {
  .principal-table-wrap:has(.principal-directory-table) {
    overflow: visible;
    border: 0;
  }

  .principal-directory-table {
    min-width: 0 !important;
  }

  .principal-directory-table thead {
    display: none;
  }

  .principal-directory-table,
  .principal-directory-table tbody,
  .principal-directory-table tr,
  .principal-directory-table td {
    display: block;
    width: 100%;
  }

  .principal-directory-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: var(--sp-space-3);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    overflow: hidden;
  }

  .principal-directory-table td {
    min-height: 46px;
    padding: var(--sp-space-3);
    border-bottom: 1px solid var(--sp-border);
  }

  .principal-directory-table td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--sp-text-muted);
    content: attr(data-label);
    font-size: var(--sp-text-xs);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .principal-directory-table td:first-child,
  .principal-directory-table td:last-child {
    grid-column: 1 / -1;
  }

  .principal-directory-table td:first-child::before,
  .principal-directory-table td:last-child::before {
    display: none;
  }

  .principal-directory-table td:last-child {
    display: flex;
    align-items: center;
    border-bottom: 0;
  }

  .principal-directory-table td:last-child .teacher-row-action {
    width: 100%;
    justify-content: center;
  }
}

/* Routine management lists become labeled records on phones.  Unlike an
   advanced grade grid, user-access controls must be immediately visible and
   actionable without a horizontal pan. */
@media (max-width: 680px) {
  .platform-users-table-wrap {
    overflow: visible;
    border: 0;
  }

  .platform-users-table {
    display: block;
    min-width: 0 !important;
    width: 100%;
  }

  .platform-users-table thead {
    display: none;
  }

  .platform-users-table,
  .platform-users-table tbody,
  .platform-users-table tr,
  .platform-users-table td {
    display: block;
    width: 100%;
  }

  .platform-users-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .platform-users-table td {
    min-height: 42px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border);
  }

  .platform-users-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--sp-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .platform-users-table td:first-child::before,
  .platform-users-table td:last-child::before {
    display: none;
  }

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

  .platform-users-table .compact-actions {
    flex-wrap: wrap;
  }

  .platform-audit-table-wrap {
    overflow: visible;
    border: 0;
  }

  .platform-audit-table {
    display: block;
    min-width: 0 !important;
    width: 100%;
  }

  .platform-audit-table thead {
    display: none;
  }

  .platform-audit-table,
  .platform-audit-table tbody,
  .platform-audit-table tr,
  .platform-audit-table td {
    display: block;
    width: 100%;
  }

  .platform-audit-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--sp-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .platform-audit-table td {
    min-height: 42px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border);
    overflow-wrap: anywhere;
  }

  .platform-audit-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--sp-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

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

  .platform-audit-table .audit-context-code {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* Parent metric values include both compact numbers and human-readable record
   states. Never let the latter force a dashboard card wider than its grid. */
.parent-metric-card,
.parent-metric-copy,
.parent-metric-copy strong {
  min-width: 0;
}

.parent-metric-copy strong {
  overflow-wrap: break-word;
  white-space: normal;
}

/* Responsive date and timestamp presentation
   -----------------------------------------
   Dates are data, rather than decorative labels: they must remain readable in
   every metric card.  The workspaces use a few different card families, so
   keep their sizing and wrapping rules together instead of allowing each view
   to introduce its own clipping or nowrap exception. */
:where(
  .metric-card,
  .teacher-metric-card,
  .workspace-stat-card,
  .principal-metric-card,
  .student-metric-card,
  .parent-metric-card
) {
  min-width: 0;
}

:where(
  .metric-card,
  .teacher-metric-card,
  .workspace-stat-card,
  .principal-metric-card,
  .student-metric-card,
  .parent-metric-card
) :is(strong, small, em, time, .metric-card-value) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
}

/* Some legacy dashboard rules target a card family and an element together
   (for example, `.principal-metric-card small`).  Match that specificity so a
   timestamp never falls back to a one-line ellipsis on a narrow card. */
.metric-card :is(strong, small, em, time, .metric-card-value),
.teacher-metric-card :is(strong, small, em, time, .metric-card-value),
.workspace-stat-card :is(strong, small, em, time, .metric-card-value),
.principal-metric-card :is(strong, small, em, time, .metric-card-value),
.student-metric-card :is(strong, small, em, time, .metric-card-value),
.parent-metric-card :is(strong, small, em, time, .metric-card-value) {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
}

.teacher-metric-copy,
.workspace-stat-card > div,
.principal-metric-card > span:last-child,
.student-metric-card > span:last-child,
.parent-metric-copy {
  min-width: 0;
}

/* Keep date/time cells inside responsive gradebook rows.  Both the gradebook
   directory and the class workspace intentionally keep the month/day and year
   as separate tokens: neither can force a card or a table summary wider than
   its available content rail. */
.gradebook-date,
.gradebook-last-updated-value,
.gradebook-date :is(strong, small, em, time),
.gradebook-last-updated-value :is(strong, small, em, time) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.gradebook-date time,
.gradebook-last-updated-value time {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.gradebook-date-date,
.gradebook-date-year,
.gradebook-last-updated-date,
.gradebook-last-updated-year {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  white-space: nowrap;
}

.gradebook-metric-grid .teacher-metric-copy strong {
  font-size: clamp(1.08rem, 1.55vw, 1.5rem);
  line-height: 1.12;
  white-space: normal;
}

/* A date has two independently meaningful pieces of information. Keep them
   on their own lines in the compact teacher gradebook card, and retain an
   HTML line-break fallback for a stale or partially loaded stylesheet. */
.gradebook-metric-grid .teacher-metric-card {
  container-type: inline-size;
  /* The icon is fixed-width. The text rail is deliberately the only
     flexible column so a localized timestamp can never grow the card past
     its grid track in a collapsed teacher sidebar or at browser zoom. */
  grid-template-columns: 40px minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  overflow: clip;
}

.gradebook-metric-grid .teacher-metric-copy,
.gradebook-metric-grid .teacher-metric-copy > * {
  min-width: 0;
  max-width: 100%;
}

.gradebook-last-updated-value time {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.gradebook-last-updated-value .gradebook-last-updated-date,
.gradebook-last-updated-value .gradebook-last-updated-year {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.gradebook-last-updated-break {
  display: none;
}

.gradebook-metric-grid .teacher-metric-copy strong.gradebook-last-updated-value {
  font-size: clamp(1.1rem, 5.5cqi, 1.42rem);
  line-height: 1.12;
}

/* The gradebook's localized date is deliberately split into date and year
   tokens.  Keep those tokens on separate safe lines so a narrow content rail
   cannot clip the year or push the metric card horizontally.  Use a column
   flex layout here rather than relying on the older grid/span cascade: some
   teacher workspaces load additional metric-card rules with the same
   specificity. */
.gradebook-metric-grid .teacher-metric-copy strong.gradebook-last-updated-value,
.gradebook-metric-grid .teacher-metric-copy strong.gradebook-last-updated-value time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.gradebook-metric-grid .teacher-metric-copy strong.gradebook-last-updated-value {
  /* A valid fallback for browsers that do not yet support container units. */
  font-size: 1.25rem;
  font-size: clamp(1.1rem, 5.5cqi, 1.42rem);
}

.gradebook-metric-grid .teacher-metric-copy .gradebook-last-updated-date,
.gradebook-metric-grid .teacher-metric-copy .gradebook-last-updated-year {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  white-space: nowrap;
}

/* Leadership actions and teacher class controls use the width of their own
   content rail rather than the browser viewport. This keeps desktop zoom,
   split-screen windows, and narrow side-by-side panels from forcing one word
   per line or allowing controls to paint into an adjacent card. */
.principal-action-center,
.teacher-class-list-panel {
  container-type: inline-size;
}

.principal-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--space-3, 12px);
}

.principal-action-grid > a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3, 12px);
  min-height: 7.25rem;
  padding: 1rem;
  border-color: color-mix(in srgb, #b7c9e8 58%, transparent);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(28, 53, 102, 0.055);
}

.principal-action-grid > a > .panel-icon {
  width: 2.6rem;
  height: 2.6rem;
}

.principal-action-grid > a > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.principal-action-grid strong,
.principal-action-grid small {
  overflow-wrap: break-word;
  word-break: normal;
}

.principal-action-grid strong {
  font-size: clamp(0.84rem, 1.1cqi, 0.98rem);
  line-height: 1.25;
}

.principal-action-grid small {
  margin-top: 0;
  font-size: clamp(0.72rem, 0.95cqi, 0.82rem);
  line-height: 1.4;
}

.teacher-directory-head,
.teacher-directory-row {
  grid-template-columns:
    minmax(9.5rem, 1.35fr)
    minmax(4rem, 0.5fr)
    minmax(8rem, 1fr)
    minmax(3.75rem, 0.42fr)
    minmax(4.25rem, 0.52fr)
    minmax(4.5rem, 0.56fr)
    minmax(10.5rem, 0.92fr);
}

.teacher-directory-row > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.teacher-directory-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  justify-content: stretch;
  gap: 0.35rem;
}

.teacher-directory-actions a {
  display: grid;
  min-width: 0;
  min-height: 2.25rem;
  place-items: center;
  padding: 0.4rem 0.5rem;
  overflow: hidden;
  border-radius: 0.625rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-directory-actions a:last-child {
  grid-column: 1 / -1;
}

@container (max-width: 66rem) {
  .teacher-directory-head,
  .teacher-directory-row {
    grid-template-columns:
      minmax(9rem, 1.35fr)
      minmax(3.75rem, 0.45fr)
      minmax(3.75rem, 0.45fr)
      minmax(4.5rem, 0.54fr)
      minmax(9.5rem, 0.84fr);
  }

  .teacher-directory-head span:nth-child(3),
  .teacher-directory-row > span:nth-child(3),
  .teacher-directory-head span:nth-child(5),
  .teacher-directory-row > span:nth-child(5) {
    display: none;
  }
}

@container (max-width: 38rem) {
  .principal-action-grid {
    grid-template-columns: 1fr;
  }

  .teacher-directory-head {
    display: none;
  }

  .teacher-directory-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 1rem 0;
  }

  .teacher-directory-row > span:not(:first-child) {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .teacher-directory-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .teacher-directory-actions a:last-child {
    grid-column: auto;
  }
}