/* Elevionis Staff Experience
 * Shared shell and semantic surface layer for Admin, Teacher and Coordinator.
 * The Sales workspace is the Admin-authorized Leads module; there is no separate
 * persisted Sales role in the current backend authorization model.
 */

:root {
  /* Student Portal canonical visual vocabulary (student.css 2026 shell). */
  --student-canvas: #FCFBFF;
  --student-sidebar: #F5F1FF;
  --student-surface: #FFFFFF;
  --student-surface-soft: #F9F7FF;
  --student-text: #25143D;
  --student-text-secondary: #6D6482;
  --student-border: #E4DFF0;
  --student-border-strong: #D3CBE2;
  --student-primary: #6D3DF0;
  --student-primary-hover: #552ACB;
  --student-focus: #7B4DFF;
  --student-accent-soft: #F1ECFF;
  --student-shadow: 0 10px 28px rgba(54, 31, 92, .06);
  --student-shadow-soft: 0 4px 14px rgba(54, 31, 92, .045);
  --nav-bg: #F5F1FF;
  --nav-surface: #FFFFFF;
  --nav-surface-interactive: #FBFAFF;
  --nav-border: #E4DFF0;
  --nav-text: #25143D;
  --nav-text-muted: #6D6482;
  --nav-icon: #6D6482;
  --nav-active-bg: #6D3DF0;
  --nav-active-text: #FFFFFF;
  --nav-hover-bg: #ECE6FF;
  --nav-expanded-bg: #ECE6FF;
  --nav-expanded-text: #25143D;
  --nav-child-active-bg: #F1ECFF;
  --nav-child-active-text: #552ACB;
  --nav-destructive: #B44155;
  --nav-destructive-hover: #963447;
  --sp-bg-primary: var(--student-canvas);
  --sp-bg-secondary: var(--student-surface-soft);
  --sp-bg-card: var(--student-surface);
  --sp-bg-input: var(--student-surface);
  --sp-border: var(--student-border);
  --sp-text-primary: var(--student-text);
  --sp-text-secondary: var(--student-text-secondary);
  --sp-text-muted: var(--student-text-secondary);
  --sp-accent: var(--student-primary);
  --sp-card-header: var(--student-surface-soft);
  --sp-badge-bg: var(--student-accent-soft);
  --sp-badge-text: var(--student-primary-hover);
  --sp-card-border: var(--student-border);
  --sp-input-border: var(--student-border-strong);
  --sp-input-focus: var(--student-focus);
  --sp-placeholder: var(--student-text-secondary);
  --staff-bg: var(--student-canvas);
  --staff-surface: var(--student-surface);
  --staff-surface-soft: var(--sp-card-header);
  --staff-surface-raised: var(--sp-bg-card);
  --staff-border: var(--sp-border);
  --staff-border-strong: var(--sp-input-border);
  --staff-text: var(--sp-text-primary);
  --staff-text-secondary: var(--sp-text-secondary);
  --staff-text-muted: var(--sp-text-muted);
  --staff-accent: var(--sp-accent);
  --staff-accent-strong: var(--sp-badge-text);
  --staff-accent-soft: var(--sp-badge-bg);
  --staff-on-accent: var(--nav-active-text);
  --staff-focus: var(--sp-input-focus);
  --staff-success: #047857;
  --staff-warning: #b45309;
  --staff-danger: #be123c;
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-danger: #FFFFFF;
  --staff-sidebar: var(--nav-bg);
  --staff-sidebar-hover: var(--nav-hover-bg);
  --staff-sidebar-active: var(--nav-active-bg);
  --staff-sidebar-width: 252px;
  --staff-sidebar-collapsed-width: 76px;
  --staff-content-max: 1600px;
  --staff-font: "Manrope", "Poppins", system-ui, sans-serif;
  --staff-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --staff-page-gutter: clamp(24px, 2.7vw, 40px);
  --staff-page-top: clamp(24px, 2.5vw, 40px);
  --staff-section-gap: 24px;
  --staff-card-padding: 20px;
  --staff-control-gap: 10px;
  --staff-form-gap: 16px;
  --staff-dialog-padding: 24px;
  --staff-frame-standard: 1320px;
  --staff-frame-wide: 1600px;
  --staff-frame-dense: 1480px;
  --staff-frame-focused: 760px;
  --staff-control-height: 44px;
  --staff-space-1: 4px;
  --staff-space-2: 8px;
  --staff-space-3: 12px;
  --staff-space-4: 16px;
  --staff-space-5: 20px;
  --staff-space-6: 24px;
  --staff-space-8: 32px;
  --staff-radius-sm: 8px;
  --staff-radius-md: 12px;
  --staff-radius-lg: 16px;
  --staff-radius-control: var(--staff-radius-sm);
  --staff-radius-card: var(--staff-radius-lg);
  --staff-radius-compact: 10px;
  --staff-radius-dialog: 20px;
  --staff-radius-pill: 999px;
  --staff-shadow-sm: 0 1px 2px rgba(35, 16, 79, 0.05), 0 4px 12px rgba(35, 16, 79, 0.04);
  --staff-shadow-md: 0 12px 32px rgba(35, 16, 79, 0.1);
  --staff-shadow-surface: var(--staff-shadow-sm);
  --staff-shadow-overlay: var(--staff-shadow-md);
  --staff-shadow-floating: 0 16px 42px rgba(35, 16, 79, 0.16);
  --staff-text-page-title: clamp(1.55rem, 2vw, 2rem);
  --staff-text-section-title: 1.125rem;
  --staff-text-body: 0.9375rem;
  --staff-text-label: 0.8125rem;
  --staff-text-meta: 0.75rem;
  /* Semantic elevation contract. Route modules must use these layers instead
     of competing numeric z-index values. */
  --staff-layer-base: 0;
  --staff-layer-sticky: 10;
  --staff-layer-navigation: 100;
  --staff-layer-popover: 200;
  --staff-layer-drawer: 300;
  --staff-layer-modal: 400;
  --staff-layer-system: 500;
  --staff-layer-feedback: 600;
  /* One Staff semantic layer, backed by the Student Portal authority. */
  --background: var(--staff-bg);
  --surface: var(--staff-surface);
  --surface-raised: var(--staff-surface-raised);
  --surface-soft: var(--staff-surface-soft);
  --sidebar: var(--nav-bg);
  --header: var(--nav-surface);
  --border: var(--staff-border);
  --border-strong: var(--staff-border-strong);
  --text: var(--staff-text);
  --text-secondary: var(--staff-text-secondary);
  --text-muted: var(--staff-text-muted);
  --accent: var(--staff-accent);
  --accent-hover: var(--student-primary-hover);
  --accent-soft: var(--staff-accent-soft);
  --focus: var(--staff-focus);
  --success: var(--staff-success);
  --warning: var(--staff-warning);
  --danger: var(--staff-danger);
  --info: #2563eb;
  --input-bg: var(--sp-bg-input);
  --input-border: var(--staff-border-strong);
  --disabled: color-mix(in srgb, var(--staff-text-muted) 54%, var(--staff-surface));
}

[data-theme="dark"] {
  --student-canvas: #0E0D17;
  --student-sidebar: #12111E;
  --student-surface: #171623;
  --student-surface-soft: #1C1A2A;
  --student-text: #F7F5FF;
  --student-text-secondary: #B7B0C9;
  --student-border: #343145;
  --student-border-strong: #4A4561;
  --student-primary: #8B63FF;
  --student-primary-hover: #A68AFF;
  --student-focus: #A68AFF;
  --student-accent-soft: #211B38;
  --nav-bg: #12111E;
  --nav-surface: #1A1828;
  --nav-surface-interactive: #211E31;
  --nav-border: #353148;
  --nav-text: #F7F5FF;
  --nav-text-muted: #B7B0C9;
  --nav-icon: #C5BED6;
  --nav-active-bg: #8358F4;
  --nav-active-text: #FFFFFF;
  --nav-hover-bg: #28233A;
  --nav-expanded-bg: #28233A;
  --nav-expanded-text: #F7F5FF;
  --nav-child-active-bg: #211B38;
  --nav-child-active-text: #A68AFF;
  --nav-destructive: #DC7183;
  --nav-destructive-hover: #EC8C9B;
  --sp-bg-primary: var(--student-canvas);
  --sp-bg-secondary: var(--student-surface-soft);
  --sp-bg-card: var(--student-surface);
  --sp-bg-input: var(--student-surface-soft);
  --sp-border: var(--student-border);
  --sp-text-primary: var(--student-text);
  --sp-text-secondary: var(--student-text-secondary);
  --sp-text-muted: var(--student-text-secondary);
  --sp-accent: var(--student-primary);
  --sp-card-header: var(--student-surface-soft);
  --sp-badge-bg: var(--student-accent-soft);
  --sp-badge-text: var(--student-primary-hover);
  --sp-card-border: var(--student-border);
  --sp-input-border: var(--student-border-strong);
  --sp-input-focus: var(--student-focus);
  --sp-placeholder: var(--student-text-secondary);
  --staff-bg: var(--student-canvas);
  --staff-surface: var(--student-surface);
  --staff-surface-soft: var(--sp-card-header);
  --staff-surface-raised: var(--sp-bg-card);
  --staff-border: var(--sp-border);
  --staff-border-strong: var(--sp-input-border);
  --staff-text: var(--sp-text-primary);
  --staff-text-secondary: var(--sp-text-secondary);
  --staff-text-muted: var(--sp-text-muted);
  --staff-accent: var(--sp-accent);
  --staff-accent-strong: var(--sp-badge-text);
  --staff-accent-soft: var(--sp-badge-bg);
  --staff-on-accent: var(--student-canvas);
  --staff-focus: var(--sp-input-focus);
  --staff-success: #34d399;
  --staff-warning: #fbbf24;
  --staff-danger: #fb7185;
  --on-success: #0E0D17;
  --on-warning: #0E0D17;
  --on-danger: #0E0D17;
  --staff-sidebar: var(--nav-bg);
  --staff-sidebar-hover: var(--nav-hover-bg);
  --staff-sidebar-active: var(--nav-active-bg);
  --staff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 0, 0, 0.14);
  --staff-shadow-md: 0 16px 42px rgba(0, 0, 0, 0.3);
  --info: #60a5fa;
}

body.staff-app {
  --staff-toggle-size: 44px;
  --staff-toggle-outset: calc(var(--staff-toggle-size) / 2);
  --staff-toggle-header-gap: 16px;
  background: var(--staff-bg);
  color: var(--staff-text);
  /* Bridge legacy component vocabulary into the single semantic layer. */
  --navy: var(--text);
  --navy-light: var(--text-secondary);
  --teal: var(--accent);
  --teal-hover: var(--accent-hover);
  --primary-teal: var(--accent);
  --border-color: var(--border);
  --white: var(--surface);
  --bg-light: var(--background);
  --bg-color: var(--background);
  --text-main: var(--text);
  --text-dark: var(--text);
  --text-light: var(--text-secondary);
  --cream: var(--accent-soft);
  --light-blue: var(--accent-soft);
  --primary-blue: var(--info);
  --radius-md: var(--staff-radius-md);
  --radius-lg: var(--staff-radius-lg);
}

body.staff-app.staff-shell-visible,
body.staff-app.staff-shell-visible button,
body.staff-app.staff-shell-visible input,
body.staff-app.staff-shell-visible select,
body.staff-app.staff-shell-visible textarea {
  font-family: var(--staff-font);
}

.staff-app .admin-only[hidden] { display: none !important; }

.staff-app .sidebar {
  position: relative;
  width: var(--staff-sidebar-width);
  min-width: var(--staff-sidebar-width);
  height: 100vh;
  height: 100dvh;
  background: var(--nav-bg) !important;
  color: var(--nav-text);
  border-right: 1px solid var(--nav-border);
  box-shadow: none;
  transition: width 220ms ease, min-width 220ms ease, transform 240ms ease;
  isolation: isolate;
}

.staff-app .sidebar-header {
  min-height: 112px;
  padding: 22px 22px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom-color: var(--nav-border);
  overflow: visible;
}

.staff-brand {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.staff-app .sidebar-header .staff-brand {
  width: 100%;
  min-width: 0;
}

.staff-brand-expanded { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.staff-brand-collapsed { display: none; align-items: center; justify-content: center; min-height: 44px; }

.staff-app .brand-logo {
  margin: 0 auto;
  filter: none;
}

.staff-app .logo-expanded { width: 164px; }
.staff-app .logo-collapsed { display: block; width: 36px; margin: 0; }
.staff-app .logo-dark { display: none; }
[data-theme="dark"] .staff-app .logo-light { display: none; }
[data-theme="dark"] .staff-app .logo-dark { display: block; }

.staff-app .staff-role-context {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 26px auto 0;
  padding: 4px 9px;
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  background: var(--nav-surface);
  color: var(--nav-text-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
}
.staff-app .staff-role-context[hidden] { display: none; }

.staff-sidebar-collapse {
  /* Same containing block as Student: the rail itself, not the brand header. */
  position: absolute;
  top: 24px;
  right: calc(-1 * var(--staff-toggle-outset));
  z-index: 3;
  display: grid;
  width: var(--staff-toggle-size);
  height: var(--staff-toggle-size);
  align-items: center;
  justify-content: center;
  place-items: center;
  padding: 0;
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  background: var(--nav-surface);
  color: var(--nav-text-muted);
  box-shadow: var(--student-shadow-soft);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.staff-sidebar-collapse:hover { color: var(--nav-text); background: var(--nav-hover-bg); border-color: var(--nav-border); transform: none; }
.staff-sidebar-collapse:active { color: var(--nav-text); background: var(--nav-expanded-bg); transform: none; }
.staff-sidebar-collapse:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.staff-sidebar-collapse .material-symbols-outlined { font-size: 20px; line-height: 1; }

.staff-app .sidebar-nav {
  gap: 2px;
  padding: 12px 10px;
  scrollbar-color: var(--student-border-strong) transparent;
}

.staff-app .nav-section {
  padding: 14px 12px 6px;
  color: var(--nav-text-muted);
  font-size: 0.63rem;
  letter-spacing: 0.11em;
}

.staff-app .sidebar-nav [data-nav-roles][hidden] { display: none !important; }
.staff-app .nav-accordion.has-active-child > .nav-accordion-header {
  color: var(--nav-expanded-text);
  border-color: var(--nav-border);
  font-weight: 700;
}
.staff-app .nav-accordion-content #nav-academic-legacy .nav-item { width: 100%; }

.staff-app :where(.nav-item, .nav-accordion-header) {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nav-text-muted);
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.staff-app .nav-item {
  gap: 12px;
  padding: 10px 12px;
  font-size: 0.86rem;
  line-height: 1.3;
}

.staff-app .nav-accordion-header {
  padding: 10px 12px;
  font-size: 0.86rem;
}

.staff-app :where(.nav-item, .nav-accordion-header):hover {
  color: var(--nav-text);
  background: var(--nav-hover-bg);
}
.staff-app :where(.nav-item, .nav-accordion-header):focus-visible {
  color: var(--nav-text);
  background: var(--nav-hover-bg);
  border-color: var(--staff-focus);
}

.staff-app :where(.nav-item, .nav-accordion-header):focus-visible,
.staff-app :where(.staff-account-toggle, .btn-dark-toggle, .staff-logout, .staff-sidebar-collapse):focus-visible,
.staff-app .teacher-nav-tab:focus-visible {
  outline: 2px solid var(--staff-focus);
  outline-offset: 2px;
}

.staff-app .nav-item.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  border-left: 0;
  box-shadow: 0 7px 16px rgba(109, 61, 240, 0.22);
}

.staff-app .nav-item.active .material-symbols-outlined { color: var(--nav-active-text); }
.staff-app .nav-accordion.open > .nav-accordion-header {
  color: var(--nav-expanded-text);
  background: var(--nav-expanded-bg);
  border-color: var(--nav-border);
}
.staff-app .nav-accordion.open > .nav-accordion-header .material-symbols-outlined {
  color: var(--nav-expanded-text);
}
.staff-app .nav-item .material-symbols-outlined,
.staff-app .nav-accordion-title .material-symbols-outlined { flex: 0 0 auto; font-size: 20px; }
.staff-app .nav-label { min-width: 0; overflow-wrap: anywhere; }

.staff-app .nav-accordion.admin-only { display: block; }
.staff-app .nav-accordion-content {
  margin: 2px 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--nav-hover-bg) 62%, transparent);
  transition: max-height 220ms ease, opacity 180ms ease;
  opacity: 0;
}
.staff-app .nav-accordion.open > .nav-accordion-content { opacity: 1; }
.staff-app .nav-accordion-content .nav-item { padding: 9px 10px 9px 40px; font-size: 0.8rem; }
.staff-app .nav-accordion-content .nav-item.active {
  color: var(--nav-child-active-text);
  background: var(--nav-child-active-bg);
  border-color: color-mix(in srgb, var(--nav-child-active-text) 18%, transparent);
  box-shadow: none;
}
.staff-app .nav-accordion-content .nav-item.active .material-symbols-outlined {
  color: var(--nav-child-active-text);
}
.staff-app .nav-accordion-content .nav-item:hover,
.staff-app .nav-accordion-content .nav-item:focus-visible {
  color: var(--nav-text);
  background: var(--nav-hover-bg);
}
.staff-app .nav-chevron { font-size: 18px; }

.staff-app .sidebar-footer {
  padding: 12px;
  border-top-color: var(--nav-border);
  background: var(--nav-surface);
}

.staff-app .staff-account-toggle,
.staff-app .btn-dark-toggle,
.staff-app .staff-logout {
  min-height: 44px;
  border: 1px solid var(--nav-border);
  border-radius: 10px;
  color: var(--nav-text-muted);
  background: var(--nav-surface-interactive);
}

.staff-app .staff-account-toggle { margin-bottom: 6px; padding: 7px 9px; }
.staff-app .btn-dark-toggle,
.staff-app .staff-logout {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 9px 11px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.staff-app .btn-dark-toggle { margin: 0 0 6px; }
.staff-app .staff-logout { margin: 0; }
.staff-app :where(.staff-account-toggle, .btn-dark-toggle, .staff-logout):hover {
  color: var(--nav-text);
  background: var(--nav-hover-bg);
}
.staff-app .staff-account-toggle {
  color: var(--nav-text);
  background: var(--nav-surface-interactive);
  border-color: var(--nav-border);
}
.staff-app .staff-account-toggle strong { color: var(--nav-text) !important; }
.staff-app .staff-account-toggle small { color: var(--nav-text-muted) !important; }
.staff-app .staff-account-toggle .sat-chevron { color: var(--nav-icon); }
.staff-app .staff-account-toggle[aria-expanded="true"] {
  color: var(--nav-expanded-text);
  background: var(--nav-expanded-bg);
  border-color: var(--nav-border);
}
.staff-app .staff-account-toggle[aria-expanded="true"] .sat-chevron { color: var(--nav-expanded-text); }
.staff-app .btn-dark-toggle {
  color: var(--nav-text-muted);
  background: var(--nav-surface-interactive);
  border-color: var(--nav-border);
}
.staff-app .btn-dark-toggle .material-symbols-outlined { color: var(--nav-icon); }
.staff-app .staff-logout {
  color: var(--nav-destructive) !important;
  background: var(--nav-surface-interactive);
  border-color: color-mix(in srgb, var(--nav-destructive) 32%, transparent);
}
.staff-app .staff-logout .material-symbols-outlined { color: var(--nav-destructive) !important; }
.staff-app .staff-logout:hover {
  color: var(--nav-destructive-hover) !important;
  background: color-mix(in srgb, var(--nav-destructive) 10%, var(--nav-surface)) !important;
  border-color: color-mix(in srgb, var(--nav-destructive) 48%, transparent) !important;
}
.staff-app .staff-logout:hover .material-symbols-outlined { color: var(--nav-destructive-hover) !important; }
.staff-app .staff-logout:focus-visible {
  color: var(--nav-destructive) !important;
  outline: 2px solid var(--nav-destructive);
  outline-offset: 3px;
}
.staff-app .staff-logout:active {
  color: var(--nav-destructive-hover) !important;
  border-color: var(--nav-destructive) !important;
}

.staff-app .staff-account-menu {
  margin: 0 0 6px;
  border-radius: 10px;
  opacity: 0;
  transition: max-height 200ms ease, opacity 160ms ease;
}
.staff-app .staff-account-menu.open { max-height: 140px; opacity: 1; }
.staff-app .staff-account-menu .nav-item { padding-inline: 11px; }

.staff-app .staff-sidebar-close {
  border: 1px solid var(--nav-border);
  border-radius: var(--staff-radius-md);
  color: var(--nav-text);
  background: var(--nav-surface-interactive);
}

.staff-app .sidebar.is-collapsed {
  width: var(--staff-sidebar-collapsed-width);
  min-width: var(--staff-sidebar-collapsed-width);
}
.staff-app .sidebar.is-collapsed .sidebar-header {
  min-height: 116px;
  padding: 22px 10px 0;
  justify-content: flex-start;
}
.staff-app .sidebar.is-collapsed .sidebar-header .staff-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}
.staff-app .sidebar.is-collapsed .staff-sidebar-collapse {
  top: 70px;
  right: 14px;
}
.staff-app .sidebar.is-collapsed .staff-brand-expanded,
.staff-app .sidebar.is-collapsed .nav-label,
.staff-app .sidebar.is-collapsed .nav-section,
.staff-app .sidebar.is-collapsed .sat-text,
.staff-app .sidebar.is-collapsed .sat-chevron,
.staff-app .sidebar.is-collapsed .nav-chevron,
.staff-app .sidebar.is-collapsed .staff-account-menu { display: none !important; }
.staff-app .sidebar.is-collapsed .staff-brand-collapsed { display: flex; }
.staff-app .sidebar.is-collapsed .sidebar-nav { padding-inline: 10px; overflow-x: hidden; }
.staff-app .sidebar.is-collapsed :where(.nav-item, .nav-accordion-header, .staff-account-toggle, .btn-dark-toggle, .staff-logout) {
  justify-content: center;
  gap: 0;
  padding-inline: 8px;
}
.staff-app .sidebar.is-collapsed .nav-accordion-title { gap: 0; }
.staff-app .sidebar.is-collapsed .nav-accordion-content { max-height: 0 !important; }
.staff-app .sidebar.is-collapsed .sidebar-footer { padding-inline: 10px; }

.staff-app .main-content {
  min-width: 0;
  background: var(--staff-bg);
  transition: background-color 180ms ease;
}

.staff-app .content-topbar {
  min-height: 64px;
  height: 64px;
  padding: 0 clamp(16px, 2vw, 32px);
  /* Reserve the rail control's outer half plus a real content gap.
     Keep the sticky header below the sidebar (z-index:10), not over its circle. */
  padding-left: max(clamp(16px, 2vw, 32px), calc(var(--staff-toggle-outset) + var(--staff-toggle-header-gap)));
  z-index: 9;
  background: color-mix(in srgb, var(--staff-surface) 94%, transparent);
  border-bottom-color: var(--staff-border);
  box-shadow: 0 1px 0 rgba(33, 29, 46, 0.03);
}

.staff-app .topbar-section-name { color: var(--staff-text); font-size: 0.92rem; }
.staff-app .topbar-domain-name { color: var(--staff-text-secondary); font-size: 0.78rem; white-space: nowrap; }
.staff-app .topbar-domain-name:not([hidden])::after { content: '›'; margin-left: 8px; color: var(--staff-text-secondary); }
.staff-app .topbar-domain-name[hidden] { display: none; }
.staff-app .content-topbar .topbar-icon { color: var(--staff-accent); }
.staff-app .topbar-user { color: var(--staff-text-secondary); }
.topbar-role {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--staff-border);
  border-radius: 999px;
  background: var(--staff-surface-soft);
  color: var(--staff-accent-strong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.staff-app .main-content > :where(section, .content-section, .view-panel) {
  width: min(100%, var(--staff-content-max));
  margin-inline: auto;
  padding: var(--staff-page-top) var(--staff-page-gutter);
}

.staff-app .staff-page-frame {
  --staff-frame-max: var(--staff-frame-standard);
}
.staff-app .staff-page-frame[data-staff-frame="wide"] { --staff-frame-max: var(--staff-frame-wide); }
.staff-app .staff-page-frame[data-staff-frame="dense"] { --staff-frame-max: var(--staff-frame-dense); }
.staff-app .staff-page-frame[data-staff-frame="focused"] { --staff-frame-max: var(--staff-frame-focused); }
.staff-app .main-content > .staff-page-frame {
  width: min(100%, calc(var(--staff-frame-max) + var(--staff-page-gutter) + var(--staff-page-gutter)));
  margin-inline: auto;
}

.staff-app .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--staff-space-4);
  margin-bottom: clamp(18px, 2vw, 28px);
}
.staff-app .section-header h1 {
  color: var(--staff-text);
  font-size: var(--staff-text-page-title);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.staff-app .section-header .subtitle {
  max-width: 76ch;
  margin: 6px 0 0;
  color: var(--staff-text-secondary);
  font-size: var(--staff-text-body);
  line-height: 1.55;
}
.staff-app .section-header .header-actions,
.staff-app .staff-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--staff-control-gap);
}
.staff-app .staff-inline-actions--end { justify-content: flex-end; }

/* Phase 4 reusable visual roles. State-driven visibility remains module-owned. */
.staff-app .staff-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-bottom: var(--staff-section-gap);
}
.staff-app .staff-kpi-alert {
  background: linear-gradient(135deg, var(--staff-warning), var(--staff-danger));
  color: var(--on-warning);
}
.staff-app .staff-kpi-alert :where(.kpi-icon, .kpi-value) { color: currentColor; }
.staff-app .staff-kpi-alert .kpi-label { color: color-mix(in srgb, currentColor 86%, transparent); }
.staff-app .staff-heading-icon { font-size: 1.1rem; vertical-align: text-bottom; }
.staff-app .staff-toolbar {
  display: flex;
  flex: 1 1 360px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--staff-control-gap);
}
.staff-app .staff-control-compact { min-height: 40px; padding: 6px 11px; font-size: 0.85rem; }
.staff-app .staff-filter-search { width: min(100%, 220px); }
.staff-app .staff-filter-select { width: min(100%, 180px); }
.staff-app .staff-card-spaced { margin-top: var(--staff-section-gap); padding: 18px; }
.staff-app .staff-card-top { margin-top: var(--staff-space-5); }
.staff-app .staff-intervention-card { border-left: 4px solid var(--staff-accent); }
.staff-app .staff-intervention-metrics { display: flex; flex-wrap: wrap; min-height: 62px; gap: var(--staff-control-gap); margin: 4px 0 14px; }
.staff-app .staff-accent-text { color: var(--staff-accent); }
.staff-app .staff-dialog-body-scroll { max-height: 70vh; overflow-y: auto; }
.staff-app .staff-intervention-config { margin-bottom: 14px; padding: var(--staff-space-3); border: 1px solid var(--staff-border); border-radius: var(--staff-radius-control); background: var(--staff-surface-soft); }
.staff-app .staff-pointer { cursor: pointer; }
.staff-app .staff-intervention-ai { display: flex; align-items: center; gap: var(--staff-space-2); margin-top: var(--staff-space-3); color: var(--staff-accent); font-weight: 600; cursor: pointer; }
.staff-app .staff-intervention-help { margin: 6px 0 0; color: var(--staff-text-secondary); font-size: var(--staff-text-meta); }
.staff-app .staff-intervention-warning { margin: 10px 0 0; color: var(--staff-warning); font-size: var(--staff-text-meta); }
.staff-app .staff-intervention-variables { margin-bottom: var(--staff-space-3); color: var(--staff-text-secondary); font-size: var(--staff-text-label); }
.staff-app .staff-list-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--staff-space-3); }
.staff-app .staff-list-actions { flex-wrap: wrap; margin-left: auto; }
.staff-app .staff-export-button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; font-size: 0.85rem; white-space: nowrap; }
.staff-app .staff-icon-sm { font-size: 1rem; }
.staff-app .staff-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--staff-control-gap); margin-top: var(--staff-space-3); }
.staff-app .ui-hours-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--staff-radius-pill); font-size: 0.72rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--staff-success) 12%, var(--staff-surface)); color: var(--staff-success); }
.staff-app .ui-hours-badge[data-hours-state="low"] { background: color-mix(in srgb, var(--staff-warning) 16%, var(--staff-surface)); color: var(--staff-warning); }
.staff-app .ui-hours-badge[data-hours-state="exhausted"],
.staff-app .ui-hours-badge[data-hours-state="over"] { background: color-mix(in srgb, var(--staff-danger) 14%, var(--staff-surface)); color: var(--staff-danger); }
.staff-app .staff-hours-chips { display: flex; flex-wrap: wrap; gap: var(--staff-space-1); margin-top: 5px; }
.staff-app .staff-hours-inconsistency { padding: 1px 8px; border-radius: var(--staff-radius-pill); background: color-mix(in srgb, var(--staff-danger) 10%, var(--staff-surface)); color: var(--staff-danger); font-size: 0.68rem; font-weight: 600; }
.staff-app .staff-hours-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--staff-space-3); padding: 10px 6px; border-bottom: 1px solid var(--staff-border); }
.staff-app .staff-hours-row-main { flex: 1; min-width: 0; }
.staff-app .staff-hours-name { color: var(--staff-text); font-weight: 700; }
.staff-app .staff-hours-meta { margin-top: 1px; color: var(--staff-text-secondary); font-size: 0.78rem; }
.staff-app .staff-hours-alert { margin-top: 2px; color: var(--staff-danger); font-size: 0.72rem; }
.staff-app .staff-hours-row-status { flex: 0 0 auto; }
.staff-app .staff-hours-card { margin-top: var(--staff-space-4); border-left: 4px solid var(--staff-danger); }
.staff-app .staff-hours-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--staff-control-gap); margin-bottom: 0; }
.staff-app .staff-hours-title { display: flex; align-items: center; gap: var(--staff-space-2); margin: 0; color: var(--staff-danger); font-size: 1rem; }
.staff-app .staff-hours-tag { color: var(--staff-text-secondary); font-size: 0.7rem; }
.staff-app .staff-hours-note { margin: 6px 4px 2px; color: var(--staff-text-secondary); font-size: 0.76rem; }
.staff-app .staff-hours-body { padding: 6px 4px; }
.staff-app .staff-hours-ok { padding: 14px; color: var(--staff-success); }
.staff-app .staff-callout {
  padding: var(--staff-space-4);
  border: 1px solid color-mix(in srgb, var(--staff-accent) 28%, var(--staff-border));
  border-radius: var(--staff-radius-card);
  background: color-mix(in srgb, var(--staff-accent-soft) 62%, var(--staff-surface));
  color: var(--staff-accent-strong);
  font-size: 0.85rem;
  line-height: 1.5;
}
.staff-app .staff-textarea-resizable { resize: vertical; line-height: 1.7; }
.staff-app .staff-btn-block { width: 100%; justify-content: center; }
.staff-app .staff-empty-pad { padding: 18px; }
.staff-app .staff-tab-rail {
  display: flex;
  max-width: 100%;
  gap: 6px;
  margin: 6px 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--staff-border);
  scrollbar-width: thin;
}
.staff-app .staff-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--staff-control-height);
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--staff-text-secondary);
  font: 650 0.875rem/1.2 var(--staff-font);
  white-space: nowrap;
  cursor: pointer;
}
.staff-app .staff-tab:is(:hover, :focus-visible) { color: var(--staff-text); background: var(--staff-surface-soft); }
.staff-app .staff-tab.is-active { border-bottom-color: var(--staff-accent); color: var(--staff-accent); }
.staff-app .staff-badge-count {
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--staff-radius-pill);
  background: var(--staff-danger);
  color: var(--on-danger);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.staff-app .staff-table-card { padding: 0; overflow: hidden; }
.staff-app .staff-table-action-head { text-align: right; }
.staff-app .staff-min-width-zero { min-width: 0; }
.staff-app .staff-table-scroll { overflow-x: auto; }
.staff-app .staff-table-min-620 { min-width: 620px; }
.staff-app .staff-discount-bar { margin-top: 18px; padding: 11px 16px; }
.staff-app .staff-discount-bar .ui-card-body { margin: 0; }
.staff-app .staff-discount-copy { flex: 1 1 220px; min-width: 0; }
.staff-app .staff-discount-copy strong { font-size: 0.86rem; }
.staff-app .staff-discount-copy p { margin: 1px 0 0; color: var(--staff-text-secondary); font-size: 0.74rem; }
.staff-app .staff-compact-label { font-size: var(--staff-text-label); font-weight: 600; }
.staff-app .staff-number-compact { width: 70px; text-align: center; }
.staff-app .staff-loading-state { padding: 48px; color: var(--staff-text-muted); text-align: center; }
.staff-app .staff-profile-card { width: min(100%, var(--staff-frame-focused)); margin-inline: auto; }
.staff-app [tabindex="-1"]:focus { outline: none; }
.staff-app .staff-profile-card :where(.form-control, .form-select) { display: block; width: 100%; box-sizing: border-box; }
.staff-app .staff-profile-card .form-group > small { display: block; margin-top: 6px; line-height: 1.45; }
.staff-app .staff-profile-avatar-wrap { margin-bottom: 30px; text-align: center; }
.staff-app .staff-profile-avatar-control { position: relative; display: inline-block; }
.staff-app .staff-profile-avatar {
  width: 120px;
  height: 120px;
  border: 4px solid var(--staff-accent);
  border-radius: 50%;
  background: var(--staff-surface-soft);
  object-fit: cover;
}
.staff-app .staff-profile-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--staff-accent);
  color: var(--staff-on-accent);
  font-size: 44px;
  font-weight: 800;
}
.staff-app .staff-profile-avatar-edit {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--staff-surface);
  border-radius: 50%;
  background: var(--staff-text);
  color: var(--staff-surface);
  cursor: pointer;
}
.staff-app .staff-visually-hidden-control { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.staff-app .staff-profile-status { min-height: 18px; }
.staff-app .staff-form-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--staff-border); }
.staff-app .staff-schedule-actions { display: flex; align-items: center; gap: var(--staff-control-gap); }
.staff-app .staff-calendar-status { color: var(--staff-text-secondary); font-size: 0.85rem; font-weight: 500; }
.staff-app .staff-provider-button { display: flex; align-items: center; gap: 5px; border-color: var(--staff-info, var(--info)); color: var(--staff-info, var(--info)); }
.staff-app .staff-icon-accent { background: linear-gradient(135deg, var(--staff-accent), var(--staff-accent-strong)); }
.staff-app .staff-icon-success { background: linear-gradient(135deg, var(--staff-success), color-mix(in srgb, var(--staff-success) 65%, var(--staff-surface))); }
.staff-app .staff-icon-info { background: linear-gradient(135deg, var(--info), color-mix(in srgb, var(--info) 65%, var(--staff-surface))); }
.staff-app .staff-icon-warning { background: linear-gradient(135deg, var(--staff-warning), color-mix(in srgb, var(--staff-warning) 65%, var(--staff-surface))); }
.staff-app .staff-success-text { color: var(--staff-success); }
.staff-app .staff-danger-text { color: var(--staff-danger); }
.staff-app .staff-success-outline { border-color: var(--staff-success); color: var(--staff-success); }
.staff-app .staff-status-line { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--staff-success); font-size: 0.8rem; }
.staff-app .staff-note-tight { margin: 2px 0 0; }
.staff-app .staff-note-zero { margin: 0; }
.staff-app .staff-note-spaced { margin: 12px 0; }
.staff-app .staff-note-top { margin: 12px 0 0; }
.staff-app .staff-btn-compact-pad { padding: 8px 16px; }
.staff-app .staff-pad-2 { padding: 2px; }
.staff-app .staff-pad-10 { padding: 10px; }
.staff-app .staff-search-bottom { margin-bottom: 8px; }
.staff-app .staff-count-note { margin: 0 0 6px; }
.staff-app .staff-loading-copy { padding: 12px; color: var(--staff-text-muted); font-size: 0.85rem; }
.staff-app .staff-flex-column { display: flex; flex-direction: column; }
.staff-app .staff-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 18px; }
.staff-app .staff-field-row-end { align-items: flex-end; margin-top: 14px; }
.staff-app .staff-field-grow { flex: 1 1 200px; min-width: 0; }
.staff-app .staff-field-170 { flex: 0 1 170px; min-width: 150px; }
.staff-app .staff-icon-inline { font-size: 1.1rem; vertical-align: middle; }
.staff-app .staff-search-wrap { position: relative; min-width: 200px; }
.staff-app .staff-search-icon { position: absolute; top: 50%; left: 10px; color: var(--staff-text-muted); font-size: 1.1rem; pointer-events: none; transform: translateY(-50%); }
.staff-app .staff-search-input { padding-left: 34px; }
.staff-app .modal.staff-modal-720 { width: min(94vw, 720px); max-width: 720px; }
.staff-app .modal.staff-modal-640 { width: min(94vw, 640px); max-width: 640px; }
.staff-app .modal.staff-modal-600 { width: min(94vw, 600px); max-width: 600px; }
.staff-app .staff-scroll-50 { max-height: 50vh; overflow-y: auto; }
.staff-app .staff-mono-textarea { width: 100%; padding: 10px; resize: vertical; font-family: var(--staff-font-mono); }

.staff-app .ops-tabs {
  display: flex;
  max-width: 100%;
  margin-bottom: var(--staff-space-4);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--staff-border);
  gap: var(--staff-space-1);
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.staff-app .ops-tab {
  flex: 0 0 auto;
  min-height: var(--staff-control-height);
  padding: 10px var(--staff-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--staff-text-secondary);
  font: 700 0.92rem/1.2 var(--staff-font);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
}
.staff-app .ops-tab.is-active { border-bottom-color: var(--staff-accent); color: var(--staff-accent); }
.staff-app .ops-tab:focus-visible {
  border-radius: 6px 6px 0 0;
  outline: 2px solid var(--staff-focus);
  outline-offset: -2px;
}
.staff-app .ops-tab .material-symbols-outlined { font-size: 1.1rem; vertical-align: middle; }
.staff-app .staff-s360-modal .s360-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--staff-space-3); }
.staff-app .s360-canonical { margin-bottom: 15px; }
.staff-app .s360-canonical-disclosure { margin-bottom: 15px; border: 1px solid var(--staff-border, #e2e8f0); border-radius: 8px; background: var(--staff-surface, #fff); color: var(--staff-text, #1e293b); }
.staff-app .s360-canonical-disclosure > summary { cursor: pointer; padding: 12px 14px; font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }
.staff-app .s360-canonical-disclosure[open] > summary { border-bottom: 1px solid var(--staff-border, #e2e8f0); margin-bottom: 12px; }
.staff-app .s360-canonical-disclosure .s360-canonical { padding: 0 12px; }
.staff-app .s360-canonical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.staff-app .s360-canonical-card { min-width: 0; padding: 14px; border: 1px solid var(--staff-border, #e2e8f0); border-radius: 8px; background: var(--staff-surface, #fff); color: var(--staff-text, #1e293b); }
.staff-app .s360-canonical-card h4 { margin: 0 0 10px; font-size: .88rem; }
.staff-app .s360-canonical-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px 9px; margin: 0; font-size: .8rem; }
.staff-app .s360-canonical-dl dt { color: var(--staff-muted, #64748b); }
.staff-app .s360-canonical-dl dd { margin: 0; overflow-wrap: anywhere; }
.staff-app .s360-canonical-list { margin: 0; padding-left: 17px; font-size: .8rem; }
.staff-app .s360-canonical-list li { overflow-wrap: anywhere; margin-bottom: 5px; }
.staff-app .s360-canonical-empty { color: var(--staff-muted, #64748b); font-size: .82rem; }
.staff-app .s360-canonical-error { color: #b91c1c; font-size: .82rem; }
.staff-app .staff-s360-modal .s360-fb-row { display: flex; align-items: flex-start; gap: var(--staff-space-2); }
.staff-app .staff-s360-modal .staff-s360-name { margin-bottom: 15px; color: var(--staff-text); font-size: 1.4rem; }
.staff-app .staff-mg-add-row { display: flex; flex-wrap: wrap; gap: var(--staff-space-2); margin-bottom: 10px; }
.staff-app .staff-mg-new-url { flex: 3 1 200px; min-width: 0; }
.staff-app .staff-mg-new-title { flex: 1 1 110px; min-width: 0; }
.staff-app .staff-mg-add-btn { flex: 0 0 auto; }
.staff-app .staff-mg-list { max-height: 50vh; overflow: hidden auto; }
.staff-app .mg-row { display: flex; align-items: center; gap: var(--staff-space-2); padding: 8px 4px; border-bottom: 1px solid var(--staff-border); }
.staff-app .mg-row .mg-active { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--staff-accent); cursor: pointer; }
.staff-app .mg-row .mg-title { flex: 1 1 90px; min-width: 0; padding: 5px 8px; font-size: 0.82rem; }
.staff-app .mg-row .mg-url { flex: 1.6 1 120px; min-width: 0; overflow: hidden; color: var(--staff-text-secondary); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-app .mg-row .mg-del { flex: 0 0 auto; padding: 3px 8px; border-color: var(--staff-danger); color: var(--staff-danger); }

/* Teacher dashboard is Staff-owned and follows semantic Light/Dark tokens. */
.staff-app .staff-teacher-dashboard .td-greeting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--staff-space-4); margin-bottom: var(--staff-space-5); }
.staff-app .staff-teacher-dashboard .td-greeting h1 { margin: 0; }
.staff-app .staff-teacher-dashboard .td-greeting .subtitle { margin: 2px 0 0; }
.staff-app .staff-teacher-dashboard .td-class-card { display: flex; align-items: flex-start; gap: var(--staff-space-3); margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--staff-border); border-left: 4px solid var(--td-accent, var(--staff-accent)); border-radius: var(--staff-radius-md); background: var(--staff-surface); transition: box-shadow 180ms ease, transform 180ms ease; }
.staff-app .staff-teacher-dashboard .td-class-card:hover { box-shadow: var(--staff-shadow-surface); transform: translateY(-1px); }
.staff-app .staff-teacher-dashboard .td-type-group { --td-accent: var(--staff-accent); }
.staff-app .staff-teacher-dashboard .td-type-booking { --td-accent: var(--staff-success); }
.staff-app .staff-teacher-dashboard .td-type-trial { --td-accent: #6d28d9; --staff-on-accent: var(--nav-active-text); }
.staff-app .staff-teacher-dashboard .td-class-icon { display: flex; flex-shrink: 0; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--staff-radius-compact); }
.staff-app .staff-teacher-dashboard .td-type-group .td-class-icon { background: var(--staff-accent-soft); color: var(--staff-accent); }
.staff-app .staff-teacher-dashboard .td-type-booking .td-class-icon { background: color-mix(in srgb, var(--staff-success) 16%, var(--staff-surface)); color: var(--staff-success); }
.staff-app .staff-teacher-dashboard .td-type-trial .td-class-icon { background: color-mix(in srgb, #6d28d9 16%, var(--staff-surface)); color: #6d28d9; }
.staff-app .staff-teacher-dashboard .td-class-icon .material-symbols-outlined { font-size: 1.4rem; }
.staff-app .staff-teacher-dashboard .td-class-body { flex: 1; min-width: 0; }
.staff-app .staff-teacher-dashboard .td-class-top { display: flex; align-items: center; justify-content: space-between; gap: var(--staff-space-2); }
.staff-app .staff-teacher-dashboard .td-class-name { overflow: hidden; color: var(--staff-text); font-size: 0.95rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.staff-app .staff-teacher-dashboard .td-class-tag { flex-shrink: 0; padding: 3px 9px; border-radius: var(--staff-radius-pill); background: var(--td-accent); color: var(--staff-on-accent); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.staff-app .staff-teacher-dashboard .td-class-meta { margin-top: 3px; color: var(--staff-text-secondary); font-size: 0.8rem; }
.staff-app .staff-teacher-dashboard .td-class-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--staff-control-gap); margin-top: 10px; }
.staff-app .staff-teacher-dashboard .td-class-time { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--staff-border); border-radius: var(--staff-radius-control); background: var(--staff-surface-soft); color: var(--staff-text); font-size: 0.82rem; font-weight: 600; }
.staff-app .staff-teacher-dashboard .td-class-time .material-symbols-outlined { color: var(--td-accent); font-size: 1rem; }
.staff-app .staff-teacher-dashboard .td-join-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0.42rem 0.9rem; border-radius: var(--staff-radius-control); background: var(--td-accent); color: var(--staff-on-accent); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: filter 150ms ease; }
.staff-app .staff-teacher-dashboard .td-join-btn:hover { filter: brightness(1.08); }
.staff-app .staff-teacher-dashboard .td-class-nolink { color: var(--staff-text-muted); font-size: 0.78rem; }
.staff-app .staff-teacher-dashboard .td-today-count { margin-left: auto; padding: 2px 10px; border-radius: var(--staff-radius-pill); background: var(--staff-accent-soft); color: var(--staff-accent); font-size: 0.72rem; font-weight: 700; }
.staff-app .staff-teacher-dashboard .td-today-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 10px 12px; color: var(--staff-text-secondary); font-size: 0.8rem; }
.staff-app .staff-teacher-dashboard .td-today-summary p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.staff-app .staff-teacher-dashboard .td-agenda-warning { margin: 10px; color: var(--staff-text-secondary); font-size: 0.8rem; }
.staff-app .staff-teacher-dashboard .td-attn-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--staff-space-3); padding: 10px 4px; border-bottom: 1px solid var(--staff-border); }
.staff-app .staff-teacher-dashboard .td-attn-row:last-child { border-bottom: 0; }
.staff-app .staff-teacher-dashboard .td-group-header { display: flex; align-items: center; justify-content: space-between; gap: var(--staff-control-gap); margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--staff-radius-control); background: var(--staff-accent-soft); color: var(--staff-text); cursor: pointer; user-select: none; }
.staff-app .staff-teacher-dashboard .td-group-header .material-symbols-outlined { transition: transform 200ms ease; }
.staff-app .staff-teacher-dashboard .td-group-header.collapsed .td-chevron { transform: rotate(-90deg); }
.staff-app .staff-teacher-dashboard .td-empty { padding: 22px 12px; color: var(--staff-text-muted); font-size: 0.9rem; text-align: center; }
.staff-app .staff-teacher-dashboard .td-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.staff-app .staff-teacher-dashboard .td-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0.25rem 0.5rem; border: 1px solid var(--staff-border-strong); border-radius: 6px; background: transparent; color: var(--staff-text); font-size: 0.75rem; text-decoration: none; cursor: pointer; }
.staff-app .staff-teacher-dashboard .td-chip.wa { border-color: var(--staff-success); color: var(--staff-success); }
@keyframes staff-dashboard-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.staff-app .staff-teacher-dashboard .td-skel { display: inline-block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--staff-surface-soft) 25%, var(--staff-border) 37%, var(--staff-surface-soft) 63%); background-size: 400% 100%; animation: staff-dashboard-shimmer 1.2s ease-in-out infinite; }

.staff-app :where(.data-card, .stat-card, .kpi-card, .chart-container, .premium-class-card, .billing-card) {
  background: var(--staff-surface);
  border-color: var(--staff-border);
  box-shadow: var(--staff-shadow-sm);
}

.staff-app :where(.data-card, .billing-card) { border-radius: var(--staff-radius-lg); }

/* Reachable module surfaces: normalize older module-specific class names to
 * the same semantic card, control, table and state treatment. */
.staff-app :where(.adm-sum, .adm-card, .aws-card, .aws-launch, .sav2-event,
  .pay-table-card, .plans-modality-root, .broadcast-card, .broadcast-history,
  .leads-panel, .cohort-card, .pm-card, .hpa-card, .ca-card) {
  background: var(--sp-bg-card);
  border-color: var(--sp-card-border);
  color: var(--sp-text-primary);
}
.staff-app :where(.adm-sum-n, .adm-card-head h3, .adm-section-head h2,
  .adm-detail > summary .adm-d-title, .aws-sname, .aws-launch h3,
  .sav2-title, .kpi-value, .billing-card-n) { color: var(--sp-text-primary); }
.staff-app :where(.adm-sum-l, .adm-section-head p, .adm-d-note, .adm-cc-desc,
  .aws-head .subtitle, .aws-count, .aws-state, .sav2-metric, .sav2-sub,
  .billing-card-l, .leads-muted) { color: var(--sp-text-secondary); }
.staff-app :where(.aws-search, .aws-filter, .aws-card input, .aws-card select,
  .ca-input, .hpa-filter-label input, .hpa-filter-label select) {
  background: var(--sp-bg-input);
  border-color: var(--sp-input-border);
  color: var(--sp-text-primary);
}
.staff-app :where(.data-table, .aws-table) { color: var(--sp-text-primary); }
.staff-app :where(.data-table th, .aws-table th) {
  background: var(--sp-card-header);
  color: var(--sp-text-secondary);
  border-color: var(--sp-card-border);
}
.staff-app :where(.data-table td, .aws-table td) { border-color: var(--sp-card-border); }
.staff-app :where(.sav2-filter.is-on, .aws-open, .ca-btn--primary) {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
}
.staff-app :where(.ui-empty-cell, .billing-empty, .aws-loading, .aws-state, .cc-empty) {
  color: var(--sp-text-muted);
}
.staff-app :where(.billing-cards, .kpi-grid, .adm-summary-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.staff-app :where(.table-responsive, .data-table-wrap, .aws-table-wrap, .pay-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.staff-app :where(.billing-tabs, .leads-tabs, .aws-tabs, .ops-tabs, .pay-tabs, .pm-tabs) {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.staff-app :where(.billing-drawer, .leads-drawer, .asp-drawer, .sp-modal) {
  background: var(--sp-bg-card);
  color: var(--sp-text-primary);
}
.staff-app :where(.billing-drawer-head, .leads-drawer-head, .asp-bar) {
  border-color: var(--sp-card-border);
  background: var(--sp-card-header);
}

/* Inline legacy component colors are normalized only inside Staff. These
 * selectors keep status meaning while preventing light-only surfaces and
 * low-contrast metadata from leaking through in either theme. */
.staff-app :where([style*="color:#64748b"], [style*="color: #64748b"],
  [style*="color:#94a3b8"], [style*="color: #94a3b8"],
  [style*="color:#a3acbe"], [style*="color: #a3acbe"],
  [style*="color:#8b93a3"], [style*="color: #8b93a3"]) {
  color: var(--text-secondary) !important;
}
.staff-app :where([style*="color:#1e293b"], [style*="color: #1e293b"],
  [style*="color:#0f172a"], [style*="color: #0f172a"],
  [style*="color:#334155"], [style*="color: #334155"],
  [style*="color:#475569"], [style*="color: #475569"]) {
  color: var(--text) !important;
}
.staff-app :where([style*="color:#7c3aed"], [style*="color: #7c3aed"],
  [style*="color:#8b5cf6"], [style*="color: #8b5cf6"]) {
  color: var(--accent) !important;
}
.staff-app :where([style*="color:#10b981"], [style*="color: #10b981"],
  [style*="color:#047857"], [style*="color: #047857"]) {
  color: var(--success) !important;
}
.staff-app :where([style*="color:#f43f5e"], [style*="color: #f43f5e"],
  [style*="color:#e11d48"], [style*="color: #e11d48"]) {
  color: var(--danger) !important;
}
.staff-app :where([style*="background:#fff"], [style*="background: #fff"],
  [style*="background:#FFFFFF"], [style*="background: #FFFFFF"],
  [style*="background: white"], [style*="background-color: white"],
  [style*="background:#f8f9fa"], [style*="background: #f8f9fa"],
  [style*="background:#f1f5f9"], [style*="background: #f1f5f9"],
  [style*="background:#faf9fd"], [style*="background: #faf9fd"],
  [style*="background:#f4f1fd"], [style*="background: #f4f1fd"]) {
  background: var(--surface-soft) !important;
}
.staff-app :where([style*="border:1px solid #e2e8f0"], [style*="border: 1px solid #e2e8f0"],
  [style*="border:1px solid #e5e7eb"], [style*="border: 1px solid #e5e7eb"],
  [style*="border:1px solid #cbd5e1"], [style*="border: 1px solid #cbd5e1"]) {
  border-color: var(--border-strong) !important;
}

.staff-app .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--staff-on-accent);
}
.staff-app .btn-primary:hover,
.staff-app .btn-primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.staff-app .btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.staff-app .btn-outline:hover,
.staff-app .btn-outline:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.staff-app :where(.text-navy, .text-dark) { color: var(--text); }
.staff-app .text-teal { color: var(--accent); }

/* Admin dashboard and operational states. */
.staff-app :where(.adm-sum-hint, .adm-spark, .adm-activity, .adm-act-meta) {
  color: var(--text-secondary);
}
.staff-app #health-failed-card.adm-sum--failed :where(.adm-sum-l, .adm-sum-hint) {
  color: var(--danger);
}
.staff-app #health-failed-card.adm-sum--ok :where(.adm-sum-l, .adm-sum-hint) {
  color: var(--success);
}
.staff-app :where(#intervention-config, #hours-consistency-panel) {
  background: var(--surface-soft);
  border-color: var(--border);
}
.staff-app #intervention-config :where(label, .ui-muted) { color: var(--text) !important; }
.staff-app #intervention-config :where(p, .ui-muted + span) { color: var(--text-secondary) !important; }
.staff-app #intervention-config label[style*="color:#b45309"],
.staff-app #intervention-config label[style*="color: #b45309"] { color: var(--warning) !important; }

/* Tabs and Google Calendar controls in Schedule, Payments and Plans. */
.staff-app :where(#schedule .ops-tabs, #pay-toptabs, #mp-tabs) {
  border-bottom-color: var(--border) !important;
}
.staff-app :where(#schedule .ops-tab, .pay-toptab, .mp-tab) {
  color: var(--text-secondary) !important;
}
.staff-app :where(#schedule .ops-tab.is-active, .pay-toptab.is-active, .mp-tab.is-active) {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.staff-app #btn-connect-gcal {
  background: var(--surface) !important;
  border-color: var(--info) !important;
  color: var(--info) !important;
}
.staff-app #gcal-status { color: var(--text-secondary) !important; }

/* Attendance keeps status meaning without inheriting the legacy light-only
 * buttons and history modal. */
.staff-app #attendance :where(.att-status-btn.present, .sav2-badge.is-p, .sav2-badge.is-done) {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: var(--on-success) !important;
}
.staff-app #attendance :where(.att-status-btn.late, .sav2-badge.is-l, .sav2-badge.is-empty) {
  background: color-mix(in srgb, var(--warning) 20%, var(--surface)) !important;
  border-color: var(--warning) !important;
  color: var(--warning) !important;
}
.staff-app #attendance :where(.att-status-btn.absent, .sav2-badge.is-a) {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--on-danger) !important;
}
.staff-app #attendance :where(.att-status-btn.justified, .sav2-badge.is-j) {
  background: color-mix(in srgb, var(--info) 18%, var(--surface)) !important;
  border-color: var(--info) !important;
  color: var(--info) !important;
}
.staff-app #attendance :where(.sav2-badge.is-prog, .sav2-badge.is-mod-1) {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.staff-app #attendance :where(.sav2-badge.is-cancel, .sav2-badge.is-count) {
  background: var(--surface-soft) !important;
  color: var(--text-secondary) !important;
}
.staff-app #attendance :where(.sav2-wrap, .sav2-day-col, .sav2-event, .sav2-event--cancelled) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.staff-app #attendance .sav2-event--cancelled { background: var(--surface-soft) !important; color: var(--text-secondary) !important; }
.staff-app #attendance .sav2-day-col,
.staff-app #attendance .sav2-filter {
  background: var(--surface-soft) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
.staff-app #attendance .sav2-filter.is-on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--staff-on-accent) !important;
}
.staff-app #attendance :where(.sav2-metric, .sav2-day-dow, .sav2-day-mon,
  .sav2-sub, .sav2-rchip, .sav2-rchip b.is-empty) { color: var(--text-secondary) !important; }
.staff-app #attendance :where(.sav2-metric b, .sav2-day-num, .sav2-time,
  .sav2-title, #staff-att-v2-range) { color: var(--text) !important; }
.staff-app #attendance .sav2-event--cancelled :where(.sav2-title, .sav2-time, .sav2-sub) {
  color: var(--text-secondary) !important;
}
.staff-app #attendance #staff-att-v2-range { background: var(--surface-soft) !important; }
.staff-app #history-modal-overlay > div {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.staff-app #history-modal-overlay :where(h3, #history-modal-content) { color: var(--text) !important; }
.staff-app #history-modal-overlay :where(p, label, #history-modal-student-name) { color: var(--text-secondary) !important; }
.staff-app #history-modal-overlay select,
.staff-app #history-modal-overlay button { background: var(--surface-soft) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }

.staff-app :where(.form-control, .form-input, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--staff-border-strong);
  background-color: var(--staff-surface);
  color: var(--staff-text);
}
.staff-app :where(.form-control, .form-input, .form-select, input, select, textarea):focus-visible {
  outline: 2px solid var(--staff-focus);
  outline-offset: 1px;
  border-color: var(--staff-focus);
}
.staff-app :where(input, textarea)::placeholder { color: var(--staff-text-muted); }
.staff-app :where(button, [role="button"], a, input, select, textarea):disabled { cursor: not-allowed; opacity: 0.58; }

.staff-app .data-table { color: var(--staff-text); }
.staff-app .data-table th {
  background: var(--staff-surface-soft);
  color: var(--staff-text-secondary);
  border-bottom-color: var(--staff-border);
}
.staff-app .data-table td { border-bottom-color: var(--staff-border); }
.staff-app .data-table tbody tr { transition: background-color 140ms ease; }
.staff-app .data-table tbody tr:hover { background: color-mix(in srgb, var(--staff-accent-soft) 38%, transparent); }

.staff-app :where(.ui-empty-cell, .billing-empty, .aws-loading) { color: var(--staff-text-muted) !important; }
.staff-app :where(.empty-state, .loading-text, .skeleton-row td) { color: var(--staff-text-secondary) !important; }
.staff-app .skeleton,
.staff-app .skeleton-row td > span {
  background: linear-gradient(90deg, var(--staff-surface-soft) 25%, var(--staff-border) 37%, var(--staff-surface-soft) 63%);
}
.staff-app :where(.badge, .chip, .pill, .status-badge) { border-color: var(--staff-border); }
.staff-app :where(.dropdown-menu, .tooltip, [role="menu"]) {
  background: var(--staff-surface) !important;
  border-color: var(--staff-border) !important;
  color: var(--staff-text) !important;
  box-shadow: var(--staff-shadow-md);
}

#staff-overlay-root { display: contents; }
.staff-app .content-section,
.staff-app .view-panel.panel-visible { animation-fill-mode: none; }
body.staff-app.staff-blocking-surface-open,
body.staff-app.staff-modal-open { overflow: hidden; }
.staff-app .teacher-bottom-nav { z-index: var(--staff-layer-navigation); }
.staff-app :where(.dropdown-menu, [role="menu"], .pm-menu-list, .staff-bell-panel) { z-index: var(--staff-layer-popover) !important; }
.staff-app :where(.pay-drawer-backdrop, .billing-drawer, .leads-drawer-backdrop, .leads-drawer, .asp-overlay, .asp-drawer, .tc-overlay) { z-index: var(--staff-layer-drawer) !important; }
.staff-app :where(.modal-backdrop, [data-staff-blocking-surface="true"], .acr-overlay, .acv-overlay, .cc-modal, .co-modal, .ob-overlay, .ske-overlay, .wl-modal, .billing-modal-backdrop) { z-index: var(--staff-layer-modal) !important; }
.staff-app :where(.staff-dialog-backdrop, .rv-overlay, .pwa-sheet) { z-index: var(--staff-layer-system) !important; }
.staff-app .staff-feedback-region { z-index: var(--staff-layer-feedback); }
.staff-app [data-staff-blocking-surface="true"] > :where([role="dialog"], [role="alertdialog"]),
.staff-app :where(.acr-card, .acv-card, .cc-modal-card, .co-modal-card, .ske-card, .wl-sched) {
  max-height: min(90vh, calc(100dvh - 32px)) !important;
  overscroll-behavior: contain;
}
.staff-app.staff-blocking-surface-open .teacher-bottom-nav,
body.staff-blocking-surface-open .teacher-bottom-nav { pointer-events: none; }
.staff-app :where(.dropdown-item, [role="menuitem"]):hover,
.staff-app :where(.dropdown-item, [role="menuitem"]):focus-visible {
  background: var(--staff-accent-soft) !important;
  color: var(--staff-text) !important;
}

.staff-app .modal {
  display: flex;
  flex-direction: column;
  width: min(94vw, 560px);
  max-height: min(90vh, calc(100dvh - 32px));
  border: 1px solid var(--staff-border);
  border-radius: var(--staff-radius-lg);
  background: var(--staff-surface);
  color: var(--staff-text);
  box-shadow: var(--staff-shadow-md);
}
.staff-app .modal-header { border-bottom-color: var(--staff-border); }
.staff-app .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.staff-app .modal-footer {
  flex: 0 0 auto;
  border-top-color: var(--staff-border);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--staff-surface);
}
.staff-app .modal-header :where(h1, h2, h3) { color: var(--staff-text); }
.staff-app .btn-close { min-width: 44px; min-height: 44px; color: var(--staff-text-secondary); border-radius: 10px; }
.staff-app .btn-close:hover { background: var(--staff-surface-soft); color: var(--staff-text); }

.staff-app .teacher-bottom-nav {
  background: color-mix(in srgb, var(--staff-surface) 96%, transparent);
  border-top-color: var(--staff-border);
  box-shadow: 0 -8px 28px rgba(35, 16, 79, 0.1);
}
.staff-app .teacher-nav-tab { min-width: 0; min-height: 56px; color: var(--staff-text-muted); }
.staff-app .teacher-nav-tab.active { color: var(--staff-accent); }
.staff-app .teacher-nav-tab.active::before { background: var(--staff-accent); }

@media (min-width: 769px) and (max-width: 1180px) {
  .staff-app .main-content > :where(section, .content-section, .view-panel) { padding: 24px; }
}

@media (max-width: 820px) {
  .staff-app .ops-tab { padding-inline: 12px; }
}

@media (max-width: 768px) {
  .staff-app .sidebar {
    position: fixed;
    width: min(86vw, 304px);
    min-width: min(86vw, 304px);
    box-shadow: none;
  }
  .staff-app.staff-sidebar-open .sidebar {
    box-shadow: 18px 0 50px rgba(10, 5, 24, 0.34);
  }
  .staff-app .sidebar-header { min-height: 96px; padding: 18px 48px 14px 18px; }
  .staff-app .logo-expanded { width: 154px; }
  .staff-app .staff-role-context { font-size: 0.6rem; }
  .staff-sidebar-collapse { display: none; }
  .staff-app .staff-sidebar-close { top: 12px; right: 10px; }
  .staff-app .sidebar-nav { padding-block: 8px; }
  .staff-app .content-topbar { min-height: 56px; height: 56px; padding-inline: 10px 14px; }
  .staff-app .content-topbar .topbar-icon { display: none; }
  .staff-app .topbar-user { display: none; }
  .topbar-role { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .staff-app .main-content > :where(section, .content-section, .view-panel) { padding: 18px 16px 24px; }
  .staff-app .section-header { flex-direction: column; align-items: stretch; }
  .staff-app .section-header .header-actions { flex-direction: row; flex-wrap: wrap; }
  .staff-app .section-header .header-actions > * { flex: 1 1 160px; }
  .staff-app .modal-backdrop { align-items: flex-end; padding: 0; }
  .staff-app .modal {
    width: 100%;
    max-width: none !important;
    max-height: min(92vh, calc(100dvh - 24px));
    margin: 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(24px);
  }
  .staff-app .modal-footer { padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); }
  .staff-app .modal:is(.staff-modal-720, .staff-modal-640, .staff-modal-600) { width: 100%; }
  .staff-app .modal-backdrop.show .modal { transform: translateY(0); }
}

@media (max-width: 430px) {
  .staff-app .main-content > :where(section, .content-section, .view-panel) { padding-inline: 12px; }
  .staff-app .content-topbar { gap: 7px; }
  .staff-app .topbar-section-name { max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .staff-app .topbar-domain-name { max-width: 95px; overflow: hidden; text-overflow: ellipsis; }
  .topbar-role { max-width: 108px; padding-inline: 8px; font-size: 0.62rem; }
  .staff-app .teacher-nav-tab { font-size: 0.62rem; }
}

@media (max-width: 480px) {
  .staff-app .staff-s360-modal .s360-grid { grid-template-columns: 1fr; }
  .staff-app .s360-canonical-grid { grid-template-columns: 1fr; }
  .staff-app .staff-s360-modal .s360-fb-row { flex-direction: column; }
  .staff-app .staff-s360-modal .s360-fb-row > button { width: 100%; }
  .staff-app .staff-s360-modal .modal-body { padding: 14px; }
  .staff-app .staff-s360-modal .staff-s360-name { font-size: 1.2rem; }
}

@media (max-width: 560px) {
  .staff-app .staff-mg-add-row { flex-direction: column; align-items: stretch; }
  .staff-app .staff-mg-add-btn { width: 100%; }
  .staff-app .mg-row { flex-wrap: wrap; row-gap: 6px; }
  .staff-app .mg-row .mg-active { order: 1; }
  .staff-app .mg-row .mg-title { order: 2; flex: 1 1 60%; }
  .staff-app .mg-row .mg-del { order: 3; }
  .staff-app .mg-row .mg-url { order: 4; flex: 1 1 100%; white-space: normal; word-break: break-all; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .staff-app .sidebar-header { min-height: 76px; padding-block: 10px; }
  .staff-app .staff-role-context { display: none; }
  .staff-app .sidebar-footer { padding-block: 8px; }
  .staff-app .staff-account-toggle { display: none; }
  .staff-app .teacher-bottom-nav { height: 54px; }
}

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

/* Phase 3: Staff interaction grammar -------------------------------------
 * These primitives intentionally remain Staff-owned. They standardize state
 * and accessibility without imposing Student density or replacing specialized
 * domain renderers. */
.staff-app .staff-control,
.staff-app :where(.form-control, .form-select) {
  min-height: 44px;
  max-width: 100%;
  border: 1px solid var(--input-border);
  border-radius: var(--staff-radius-sm);
  background: var(--input-bg);
  color: var(--text);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.staff-app textarea.staff-control { min-height: 96px; resize: vertical; }
.staff-app .staff-control:hover:not(:disabled):not([readonly]) { border-color: var(--border-strong); }
.staff-app .staff-control:focus-visible,
.staff-app :where(.form-control, .form-select):focus-visible {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}
.staff-app .staff-control:disabled,
.staff-app .staff-control[data-staff-state="disabled"] {
  cursor: not-allowed;
  opacity: .66;
  color: var(--text-muted);
  background: var(--surface-soft);
}
.staff-app .staff-control[readonly],
.staff-app .staff-control[data-staff-state="readonly"] {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
}
.staff-app .staff-control.is-invalid,
.staff-app .staff-control[aria-invalid="true"] { border-color: var(--danger); }
.staff-app .staff-control.is-valid { border-color: var(--success); }
.staff-field { display: grid; gap: 6px; min-width: 0; }
.staff-field > label { color: var(--text); font-size: .82rem; font-weight: 700; }
.staff-field-help,
.staff-field-feedback { margin: 0; color: var(--text-secondary); font-size: .78rem; line-height: 1.45; }
.staff-field-feedback.is-error { color: var(--danger); }
.staff-form-stack { display: grid; gap: var(--staff-space-4); }
.staff-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--staff-space-4); }
.staff-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--staff-space-2); }
.staff-app .btn { min-height: 44px; }
.staff-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--staff-radius-sm);
  background: transparent;
  color: currentColor;
  font: inherit;
  cursor: pointer;
}
.staff-icon-button:hover { background: var(--surface-soft); }
.staff-icon-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 2px; }
.staff-btn-danger {
  min-height: 44px;
  border: 1px solid var(--danger);
  border-radius: var(--staff-radius-sm);
  background: var(--danger);
  color: var(--on-danger);
  font-weight: 750;
}
.staff-btn-danger:hover { filter: brightness(.94); }
.staff-btn-danger:focus-visible { outline: 3px solid color-mix(in srgb, var(--danger) 32%, transparent); outline-offset: 2px; }
.staff-app :where(button, .btn).is-busy { cursor: progress; }
.staff-app :where(button, .btn)[aria-busy="true"]::after { content: ""; width: .85em; height: .85em; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: staff-spin .7s linear infinite; }
@keyframes staff-spin { to { transform: rotate(360deg); } }

.staff-table-region { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--border-strong) transparent; }
.staff-table-region:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 28%, transparent); outline-offset: 2px; }
.staff-app .staff-table { width: 100%; color: var(--text); }
.staff-app .staff-table th { color: var(--text-secondary); background: var(--surface-soft); }
.staff-app .staff-table :where(th, td) { border-color: var(--border); }
.staff-app .staff-table tbody tr:focus-within { outline: 2px solid color-mix(in srgb, var(--focus) 36%, transparent); outline-offset: -2px; }
.staff-app .staff-table--compact :where(th, td) { padding-block: 8px; }

.staff-tablist { display: flex; gap: 6px; max-width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--staff-radius-md); background: var(--surface-soft); scrollbar-width: thin; }
.staff-tablist [role="tab"] { min-height: 44px; flex: 0 0 auto; padding-inline: 14px; border: 1px solid transparent; border-radius: var(--staff-radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-weight: 700; cursor: pointer; }
.staff-tablist [role="tab"]:hover { background: var(--surface); color: var(--text); }
.staff-tablist [role="tab"][aria-selected="true"] { border-color: var(--border); background: var(--surface); color: var(--accent); box-shadow: var(--staff-shadow-sm); }
.staff-tablist [role="tab"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 28%, transparent); outline-offset: -3px; }

.staff-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--staff-layer-system);
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--background) 50%, rgba(7, 4, 16, .72));
  backdrop-filter: blur(3px);
}
.staff-dialog {
  width: min(100%, 540px);
  max-height: min(90dvh, 760px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--staff-radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--staff-shadow-md);
}
.staff-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 14px; border-bottom: 1px solid var(--border); }
.staff-dialog__header h2 { margin: 0; color: var(--text); font-size: 1.12rem; }
.staff-dialog__header p { margin: 6px 0 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.55; white-space: pre-line; }
.staff-dialog__entity { margin: 16px 20px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--staff-radius-sm); background: var(--surface-soft); color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.staff-dialog__body { display: grid; gap: 14px; padding: 18px 20px; }
.staff-dialog__actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface); }
.staff-dialog__actions > button { min-height: 44px; }
.staff-inline-feedback { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 46%, var(--border)); border-radius: var(--staff-radius-sm); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); font-size: .84rem; }

.staff-app [data-staff-blocking-surface="true"] :where(button, [role="button"]) { min-height: 44px; }
.staff-history-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px);
  background: color-mix(in srgb, var(--background) 38%, rgba(7, 4, 16, .82));
  backdrop-filter: blur(5px);
}
.staff-history-overlay[hidden] { display: none; }
.staff-history-dialog {
  display: flex;
  flex-direction: column;
  width: min(850px, 100%);
  max-height: min(88dvh, 860px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--staff-radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--staff-shadow-overlay);
}
.staff-history-dialog :where(h3, #history-modal-content) { color: var(--text) !important; }
.staff-history-dialog #history-modal-student-name { color: var(--text-secondary) !important; }

.staff-feedback-region { position: fixed; z-index: var(--staff-layer-feedback); right: 18px; bottom: 18px; display: grid; gap: 10px; width: min(390px, calc(100vw - 32px)); pointer-events: none; }
.staff-notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 16px; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--staff-radius-md); background: var(--surface); color: var(--text); box-shadow: var(--staff-shadow-md); pointer-events: auto; }
.staff-notice--success { border-left-color: var(--success); }
.staff-notice--info { border-left-color: var(--info); }
.staff-notice--warning { border-left-color: var(--warning); }
.staff-notice--error { border-left-color: var(--danger); }
.staff-notice__text { flex: 1; padding-block: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.staff-notice__dismiss { min-width: 36px; min-height: 36px; font-size: 1.35rem; line-height: 1; }

.staff-state { display: grid; justify-items: start; gap: 6px; min-height: 88px; padding: 18px; border: 1px solid var(--border); border-radius: var(--staff-radius-md); background: var(--surface-soft); color: var(--text-secondary); }
.staff-state__title { color: var(--text); }
.staff-state__message { margin: 0; line-height: 1.5; }
.staff-state--error { border-color: color-mix(in srgb, var(--danger) 42%, var(--border)); }
.staff-state--warning { border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); }
.staff-state--loading { opacity: .86; }
.staff-state__action { margin-top: 4px; }

@media (max-width: 768px) {
  .staff-form-grid { grid-template-columns: 1fr; }
  .staff-dialog-backdrop { align-items: end; padding: 0; }
  .staff-dialog { width: 100%; max-height: min(94dvh, 820px); border-radius: 20px 20px 0 0; }
  .staff-dialog__actions { padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); }
  .staff-dialog__actions > button { flex: 1 1 140px; }
  .staff-feedback-region { right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .staff-history-overlay { align-items: flex-end; padding: 0; }
  .staff-history-dialog {
    width: 100%;
    max-height: min(94dvh, 820px);
    padding: 18px 16px max(18px, calc(env(safe-area-inset-bottom) + 12px));
    border-radius: 20px 20px 0 0;
  }
  .staff-app :where(.leads-tab, .pm-tab, .pm-kebab, details > summary) { min-height: 44px; }
}

/* Mounted Classroom hierarchy keeps inherited Staff contrast in both themes. */
.staff-app #classroom-admin-root .ca-seg button:not(.on) { color: var(--text-secondary); }
.staff-app #classroom-admin-root .ca-seg button:not(.on):hover { color: var(--text); }
.staff-app #classroom-admin-root .ca-breadcrumb-row { display: flex; align-items: center; flex-wrap: wrap; margin: 2px 0 14px; }
.staff-app #classroom-admin-root .ca-bc,
.staff-app #classroom-admin-root .ca-bc-current { background: none; border: 0; padding: 0; font-family: inherit; font-size: .85rem; font-weight: 600; }
.staff-app #classroom-admin-root .ca-bc { color: var(--accent); cursor: pointer; }
.staff-app #classroom-admin-root .ca-bc.is-active,
.staff-app #classroom-admin-root .ca-bc-current { color: var(--text); font-weight: 800; cursor: default; }
.staff-app #classroom-admin-root .ca-bc-sep { color: var(--text-muted); margin: 0 7px; }
.staff-app #classroom-admin-root .ca-scope-box { background: var(--surface-soft); border-color: var(--border); color: var(--text); }

/* Academic workspace + student panel --------------------------------------
 * These surfaces are frontend-only skins over the existing reader/writer
 * flows. They intentionally inherit the Student Portal semantic vocabulary so
 * the academic workspace remains one Staff ecosystem in both themes. */
.staff-app #academic .aws-root {
  width: 100%;
  max-width: none;
}
.staff-app #academic .aws-head {
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--staff-radius-lg);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
  box-shadow: var(--staff-shadow-sm);
}
.staff-app #academic .aws-head h1 { color: var(--text); letter-spacing: -0.025em; }
.staff-app #academic .aws-head .subtitle { color: var(--text-secondary); max-width: 58ch; }
.staff-app #academic .aws-tabs {
  gap: 6px;
  margin: 16px 0 20px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--staff-radius-md);
  background: var(--surface-soft);
}
.staff-app #academic .aws-tab {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-secondary);
}
.staff-app #academic .aws-tab:hover,
.staff-app #academic .aws-tab:focus-visible { color: var(--text); background: var(--surface); }
.staff-app #academic .aws-tab.is-on {
  color: var(--accent);
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--staff-shadow-sm);
}
.staff-app #academic :where(.aws-search, .aws-filter) {
  min-height: 44px;
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text);
}
.staff-app #academic .aws-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.staff-app #academic .aws-search input { color: var(--text); background-color: transparent; }
.staff-app #academic .aws-card,
.staff-app #academic .aws-launch {
  border-color: var(--border);
  border-radius: var(--staff-radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--staff-shadow-sm);
}
.staff-app #academic .aws-table th { color: var(--text-secondary); border-bottom-color: var(--border); background: var(--surface-soft); }
.staff-app #academic .aws-table td { color: var(--text); border-bottom-color: var(--border); }
.staff-app #academic .aws-table tbody tr { background: var(--surface); transition: background-color 140ms ease; }
.staff-app #academic .aws-table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 48%, transparent); }
.staff-app #academic :where(.aws-sname, .aws-launch h3) { color: var(--text); }
.staff-app #academic :where(.aws-ssub, .aws-count, .aws-prog small, .aws-launch p) { color: var(--text-secondary); }
.staff-app #academic .aws-bar { background: var(--border); }
.staff-app #academic .aws-bar > span { background: var(--accent); }
.staff-app #academic .aws-open { background: var(--accent); border-color: var(--accent); color: var(--staff-on-accent); min-height: 44px; }
.staff-app #academic .aws-open:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.staff-app #academic .aws-state { color: var(--text-secondary); }
.staff-app #academic .aws-state .material-symbols-outlined { color: var(--text-muted); }
.staff-app #academic .aws-state.err { color: var(--danger); }
.staff-app #academic .aws-note { color: var(--text-secondary); background: var(--accent-soft); border-color: var(--border); }
.staff-app #academic .aws-launch p { line-height: 1.6; }

.staff-app .asp-overlay {
  background: color-mix(in srgb, var(--background) 74%, #05030d 26%);
  backdrop-filter: blur(3px);
}
.staff-app .asp-drawer {
  width: min(1120px, calc(100vw - 72px));
  max-width: 100%;
  border-left: 1px solid var(--border);
  background: var(--background);
  color: var(--text);
  box-shadow: -24px 0 60px rgba(25, 14, 52, 0.22);
}
.staff-app .asp-bar {
  min-height: 92px;
  padding: 20px 26px;
  border-bottom-color: var(--border);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
}
.staff-app .asp-bar h2 { color: var(--text); letter-spacing: -0.02em; }
.staff-app .asp-bar .asp-sub { color: var(--text-secondary); }
.staff-app .asp-eyebrow { color: var(--accent); }
.staff-app .asp-context-item + .asp-context-item::before { color: var(--text-muted); }
.staff-app .asp-close {
  min-width: 44px;
  min-height: 44px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.staff-app .asp-close:hover { color: var(--text); background: var(--accent-soft); }
.staff-app .asp-tabs {
  gap: 6px;
  padding: 8px 18px;
  border-bottom-color: var(--border);
  background: var(--surface);
  scrollbar-color: var(--border-strong) transparent;
}
.staff-app .asp-workspace { background: var(--background); }
.staff-app .asp-tabs { scrollbar-width: none; }
.staff-app .asp-tabs::-webkit-scrollbar { display: none; }
.staff-app :where(.asp-card, .asp-lesson, .asp-hist, .pev-wrap, .pev-card, .pev-status-copy, .pev-footer) { overflow-wrap: anywhere; min-width: 0; }
.staff-app .asp-tab {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-secondary);
}
.staff-app .asp-tab:hover,
.staff-app .asp-tab:focus-visible { color: var(--text); background: var(--surface-soft); }
.staff-app .asp-tab.is-on { color: var(--accent); border-color: var(--border); background: var(--accent-soft); }
.staff-app .asp-body {
  padding: 24px;
  background: var(--background);
  overscroll-behavior: contain;
  scrollbar-color: var(--border-strong) transparent;
}
.staff-app .asp-section-icon { color: var(--accent); background: var(--accent-soft); }
.staff-app .asp-section-head h3 { color: var(--text); }
.staff-app .asp-section-head p { color: var(--text-secondary); }
.staff-app .asp-card--current { border-left-color: var(--accent); }
.staff-app .asp-stat { color: var(--text-secondary); background: var(--surface-soft); }
.staff-app .asp-card { border-color: var(--border); border-radius: var(--staff-radius-md); background: var(--surface); color: var(--text); box-shadow: var(--staff-shadow-sm); }
.staff-app .asp-card h3 { color: var(--text); flex-wrap: wrap; }
.staff-app .asp-lhead { align-items: flex-start; }
.staff-app .asp-lt { flex: 1; min-width: 0; }
.staff-app .asp-scz { flex: 0 0 auto; white-space: nowrap; }
.staff-app .asp-lesson:has(.asp-scz.in_progress) { border-color: var(--accent); background: var(--accent-soft); }
.staff-app .asp-row, .staff-app .asp-lt, .staff-app .asp-skf { color: var(--text); }
.staff-app .asp-muted, .staff-app .asp-metric .c, .staff-app .asp-legend { color: var(--text-secondary); }
.staff-app .asp-drawer :where(.asp-utitle, .asp-state) { color: var(--text-secondary); }
.staff-app .asp-drawer .asp-state.err { color: var(--danger); }
.staff-app .asp-drawer .asp-state.forbidden { color: var(--warning); }
.staff-app .asp-drawer .asp-state .material-symbols-outlined { color: currentColor; }
.staff-app .asp-drawer :is(.asp-chip, .asp-scz.in_progress) { color: var(--accent); background: var(--accent-soft); }
.staff-app .asp-drawer .asp-scz.completed { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.staff-app .asp-drawer .asp-scz.not_started { color: var(--text-secondary); background: var(--surface-soft); }
.staff-app .asp-metric { border-color: var(--border); background: var(--surface-soft); }
.staff-app .asp-metric .k { color: var(--text-secondary); }
.staff-app .asp-metric .v { color: var(--text); }
.staff-app .asp-drawer .asp-metric.nc .v { color: var(--warning); }
.staff-app .asp-drawer :is(.spv-name, .spv-row) { color: var(--text); border-color: var(--border); }
.staff-app .asp-drawer :is(.spv-sdesc, .spv-criteria dd) { color: var(--text-secondary); }
.staff-app .asp-drawer .spv-criteria { color: var(--text); background: var(--surface); border-color: var(--border); }
.staff-app .asp-drawer .spv-criteria summary { min-height: 44px; color: var(--text); }
.staff-app .asp-drawer .spv-criteria dt { color: var(--text); }
.staff-app .asp-drawer .spv-chip.spv-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.staff-app .asp-drawer .spv-chip.spv-info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, var(--surface)); }
.staff-app .asp-drawer .spv-chip.spv-ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.staff-app .asp-drawer .spv-chip.spv-muted { color: var(--text-secondary); background: var(--surface-soft); }
.staff-app .asp-note { color: var(--text-secondary); background: var(--surface-soft); border-color: var(--border); }
.staff-app .asp-note.info2 { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); }
.staff-app .asp-lesson, .staff-app .asp-metric { border-color: var(--border); }
.staff-app .asp-bar-mini { background: var(--border); }
.staff-app .asp-bar-mini > span { background: var(--accent); }
.staff-app .asp-skf input { border-color: var(--input-border); background: var(--input-bg); color: var(--text); min-height: 40px; }
.staff-app .asp-btn { min-height: 42px; background: var(--accent); border-color: var(--accent); }
.staff-app .asp-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.staff-app .asp-btn.sec { background: var(--surface); color: var(--accent); border-color: var(--border-strong); }
.staff-app .asp-hist { border-top-color: var(--border); color: var(--text-secondary); }
.staff-app .asp-history-list { border-left-color: var(--border); }
.staff-app .asp-history-list .asp-hist::before { background: var(--surface); border-color: var(--accent); }
.staff-app .asp-link { color: var(--accent); }
.staff-app .asp-skel { background: linear-gradient(90deg, var(--surface-soft), var(--border), var(--surface-soft)); background-size: 200% 100%; }
.staff-app .asp-grid th { color: var(--text-secondary); }
.staff-app .asp-grid td { border-top-color: var(--border); }
.staff-app .asp-grid .asp-wk, .staff-app .asp-grid .asp-wt { color: var(--text); }
.staff-app .asp-cell.x { background: var(--surface-soft); color: var(--text-muted); }
.staff-app .pev-wrap { color: var(--text); }
.staff-app .pev-card { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: var(--staff-shadow-sm); }
.staff-app .pev-card p { font-size: 13px; line-height: 1.5; margin: 8px 0; }
.staff-app .pev-card h3,
.staff-app .pev-status h2,
.staff-app .pev-next-step { color: var(--text); }
.staff-app .pev-wrap :is(.pev-row, .pev-field label, .pev-lbl, .pev-choice label, .pev-competency) { color: var(--text); }
.staff-app .pev-wrap :is(.pev-sub, .pev-muted, .pev-field .pev-w, .pev-status p, .pev-status-meta, .pev-history-meta) { color: var(--text-secondary); }
.staff-app .pev-status { border-color: var(--border); border-left-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--surface)); }
.staff-app .pev-status-icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.staff-app .pev-kicker { color: var(--accent); }
.staff-app .pev-status--issued_pass { border-color: color-mix(in srgb, var(--success) 38%, var(--border)); border-left-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.staff-app .pev-status--issued_pass .pev-status-icon { color: var(--success); background: color-mix(in srgb, var(--success) 15%, var(--surface)); }
.staff-app .pev-status--issued_reinforcement { border-color: color-mix(in srgb, var(--warning) 38%, var(--border)); border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.staff-app .pev-status--issued_reinforcement .pev-status-icon { color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, var(--surface)); }
.staff-app .pev-wrap :where(.pev-status--void, .pev-status--superseded) { border-color: var(--border); border-left-color: var(--text-muted); background: var(--surface-soft); }
.staff-app .pev-wrap :where(.pev-status--void, .pev-status--superseded) .pev-status-icon { color: var(--text-muted); background: var(--surface-raised); }
.staff-app .pev-checklist li { color: var(--text-secondary); }
.staff-app .pev-checklist .is-complete { color: var(--success); }
.staff-app .pev-checklist .is-pending .material-symbols-outlined { color: var(--text-muted); }
.staff-app .pev-chip { color: var(--accent); background: var(--accent-soft); }
.staff-app .pev-chip.pass { color: var(--success); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
.staff-app .pev-chip.reinf { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); }
.staff-app .pev-wrap :where(.pev-result-metric, .pev-competency) { color: var(--text); background: var(--surface-soft); border-color: var(--border); }
.staff-app .pev-result-metric span,
.staff-app .pev-section-label { color: var(--text-secondary); }
.staff-app .pev-result-metric strong { color: var(--text); }
.staff-app .pev-evidence .pev-row { background: var(--surface-soft); border-left-color: var(--accent); }
.staff-app .pev-history { border-left-color: var(--border); }
.staff-app .pev-history-item::before { background: var(--surface); border-color: var(--accent); }
.staff-app .pev-route { color: var(--text); background: var(--surface-soft); border-color: var(--border); }
.staff-app .pev-rl { color: var(--text-secondary); }
.staff-app .pev-rv { color: var(--text); }
.staff-app .pev-wrap :where(.pev-inwrap input, .pev-lv input, .pev-ta, [data-pev="titular-reason"]) { color: var(--text); background: var(--input-bg); border-color: var(--input-border); }
.staff-app .pev-footer { background: var(--surface); border-color: var(--border); }
.staff-app .pev-wrap :where(.pev-result-metric small, .pev-secondary) { color: var(--text-secondary); }
.staff-app .pev-workflow-title { color: var(--text); }
.staff-app .pev-secondary { border-top: 1px solid var(--border); }
.staff-app .pev-secondary summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.staff-app .pev-next-step span { color: var(--text-secondary); }
.staff-app .pev-btn { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.staff-app .pev-btn:hover { background: var(--surface-soft); border-color: var(--accent); }
.staff-app .pev-btn.primary { color: var(--staff-on-accent); background: var(--accent); border-color: var(--accent); }
.staff-app .pev-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
[data-theme="dark"] .staff-app .pev-btn.primary:not([disabled]),
[data-theme="dark"] .staff-app .asp-btn:not(.sec):not([disabled]) { color: #0E0D17; }
.staff-app .pev-btn[disabled] { opacity: 1; color: var(--text-secondary); background: var(--surface-soft); border-color: var(--border); cursor: not-allowed; }
.staff-app .pev-choice label { min-height: 44px; white-space: normal; }
.staff-app .pev-btn--quiet { color: var(--text-secondary); background: var(--surface); border-color: var(--border); }
.staff-app .pev-btn--danger { color: var(--danger); background: var(--surface); border-color: color-mix(in srgb, var(--danger) 48%, var(--border)); }
.staff-app .pev-link { color: var(--accent); }
.staff-app .pev-warn,
.staff-app .pev-warn-box { color: var(--warning); background: color-mix(in srgb, var(--warning) 11%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); }
.staff-app .pev-err { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.staff-app .pev-skel div { background: var(--surface-soft); }
.staff-app .pev-empty { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; }
.staff-app .pev-empty > .material-symbols-outlined { display: grid; place-items: center; width: 36px; height: 36px; color: var(--accent); background: var(--accent-soft); border-radius: 10px; }
.staff-app .pev-empty .pev-card { width: 100%; }
.staff-app :where(.pev-btn, .pev-link, .pev-inwrap input, .pev-lv input, .pev-ta, [data-pev="titular-reason"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.staff-app :where(.aws-tab, .aws-open, .asp-tab, .asp-close, .asp-btn, .asp-link):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .staff-app .asp-drawer { width: 100vw; border-left: 0; }
  .staff-app .asp-bar { min-height: 72px; padding: max(14px, env(safe-area-inset-top)) 16px 12px; }
  .staff-app .asp-tabs { padding-inline: 12px; }
  .staff-app .asp-body { padding: 18px 14px calc(20px + env(safe-area-inset-bottom)); }
  .staff-app #academic .aws-head { padding: 18px; }
  .staff-app #academic .aws-tabs { margin-inline: -2px; }
}

/* The academic detail uses a horizontal rail below the tablet grid breakpoint. */
@media (max-width: 519px) {
  .staff-app .asp-tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .staff-app .asp-tabs::-webkit-scrollbar { display: block; height: 6px; }
  .staff-app .asp-tab { flex: 0 0 auto; white-space: nowrap; }
  .staff-app .asp-tab .material-symbols-outlined { flex: 0 0 auto; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .staff-app .asp-drawer { width: calc(100vw - 32px); }
}

/* All sections remain visible on tablets; desktop uses the vertical section rail. */
@media (min-width: 520px) and (max-width: 1024px) {
  .staff-app .asp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .staff-app .asp-tab { white-space: normal; justify-content: flex-start; }
  .staff-app .asp-tabs::after { display: none; }
}

@media (min-width: 1025px) {
  .staff-app .asp-tabs { padding: 20px 12px; border-right-color: var(--border); }
}

@media (max-width: 430px) {
  .staff-app .asp-bar h2 { font-size: 1rem; }
  .staff-app .asp-body { padding-inline: 12px; }
  .staff-app #academic .aws-head h1 { font-size: 1.45rem; }
  .staff-app #academic .aws-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .staff-app #academic .aws-tab { flex: 0 0 auto; }
  .staff-app #cohorts #cohort-root .co-sum { gap: 8px; padding: 12px; }
  .staff-app #cohorts #cohort-root .co-sum-ic { width: 36px; height: 36px; }
  .staff-app #cohorts #cohort-root .co-sum-l { font-size: .68rem; letter-spacing: 0; overflow-wrap: normal; }
}
/* Phase 2C: bounded CRM work queue and labelled Admissions cards. */
#leads-root .leads-work-summary,
#leads-root .leads-work-queue {
  min-width: 0;
  margin-block: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--staff-border, #ddd7eb);
  border-radius: 16px;
  background: var(--staff-surface, #fff);
  color: var(--staff-text, #242133);
}
#leads-root .leads-work-summary h2,
#leads-root .leads-work-queue h2 { margin: 0 0 .75rem; }
#leads-root .leads-work-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; align-items: end; }
#leads-root .leads-work-filters label { display: grid; gap: .3rem; min-width: 0; font-weight: 650; }
#leads-root .leads-work-filters :is(input,select) { width: 100%; min-width: 0; min-height: 44px; padding: .55rem; border: 1px solid var(--staff-border, #ddd7eb); border-radius: 8px; background: var(--staff-surface, #fff); color: var(--staff-text, #242133); font: inherit; }
#leads-root .leads-work-filters button { min-height: 44px; }
#leads-root .leads-work-status { margin-block: 1rem; overflow-wrap: anywhere; }
#leads-root .leads-work-table-wrap { max-width: 100%; overflow-x: auto; }
#leads-root .leads-work-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#leads-root .leads-work-table :is(th,td) { padding: .8rem .55rem; border-bottom: 1px solid var(--staff-border, #ddd7eb); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
#leads-root .leads-work-table th { font-weight: 700; }
#leads-root .leads-work-table th small,
#leads-root .leads-work-table td small { display: block; font-weight: 400; margin-top: .25rem; }
#leads-root .leads-work-open { border: 0; padding: .35rem 0; background: transparent; color: var(--staff-accent, #6b39c7); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
#leads-root .leads-work-open:focus-visible,
#leads-root .leads-work-filters :is(input,select,button):focus-visible,
#leads-root .leads-work-pages button:focus-visible { outline: 3px solid var(--staff-accent, #6b39c7); outline-offset: 2px; }
#leads-root .leads-work-pages { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
#admissions .admission-cases-row { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
@media (max-width: 1200px) {
  #leads-root .leads-work-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #admissions .admission-cases-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #leads-root .leads-work-filters { grid-template-columns: minmax(0, 1fr); }
  #leads-root .leads-work-table-wrap { overflow: visible; }
  #leads-root .leads-work-table,
  #leads-root .leads-work-table tbody,
  #leads-root .leads-work-table tr,
  #leads-root .leads-work-table :is(th,td) { display: block; width: 100%; }
  #leads-root .leads-work-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #leads-root .leads-work-table tr { margin-bottom: .75rem; padding: .75rem; border: 1px solid var(--staff-border, #ddd7eb); border-radius: 10px; }
  #leads-root .leads-work-table :is(th,td) { padding: .25rem 0; border: 0; }
  #leads-root .leads-work-table td::before { content: attr(data-label) ': '; font-weight: 700; }
  #admissions .admission-cases-row { grid-template-columns: minmax(0, 1fr); }
}

/* Phase 4C uses the shared Staff cards, controls and theme tokens. */
.teacher-preview{padding:18px;min-width:0}.teacher-preview h2{font-size:1.05rem}
.teacher-preview-list{padding-left:20px;overflow-wrap:anywhere}
.teacher-preview-list li{padding-block:6px}
.teacher-preview-list [data-teacher-event-key]>a{display:inline-flex;align-items:center;min-height:44px;margin-top:6px}
.sched-detail [data-prepare-event]{display:inline-flex;align-items:center;min-height:44px;margin:6px 0}
.teacher-students{min-width:0}.teacher-students input{width:100%;max-width:560px;min-height:44px;margin-block:8px 16px}
.teacher-roster-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px;margin-bottom:12px;border:1px solid var(--border-color,#ddd);border-radius:12px;overflow-wrap:anywhere;background:var(--card-bg,#fff)}
.teacher-roster-row>div{min-width:0}.teacher-roster-row h2{font-size:1rem;margin:0}.teacher-roster-row p{margin:4px 0;font-size:.9rem}
.teacher-students button,.teacher-preview button,.teacher-preview a{min-height:44px;min-width:44px}
.teacher-students button:focus-visible,.teacher-preview a:focus-visible{outline:3px solid var(--ev-accent,#7c3aed);outline-offset:3px}
#teacher-roster-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.teacher-detail{padding:16px;margin-bottom:16px;overflow-wrap:anywhere}.teacher-detail-content{margin-top:16px;min-width:0}
[data-theme="dark"] .teacher-roster-row{background:var(--card-bg,#232137);border-color:#49445b}
@media(max-width:430px){.teacher-roster-row{align-items:stretch}.teacher-roster-row>div{flex-basis:100%}.teacher-detail,.teacher-preview{padding:12px}}

.teacher-primary-navigation{display:flex;flex-direction:column;gap:6px}
@media(max-width:768px){
  body[data-staff-role="teacher"] #teacher-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(82px + env(safe-area-inset-bottom,0px));overflow:hidden;justify-content:stretch;background:var(--staff-surface)}
  body[data-staff-role="teacher"] #teacher-bottom-nav .teacher-nav-tab{min-width:0;max-width:none;min-height:82px;padding:6px 1px;gap:3px;font-family:Arial,sans-serif;font-size:.75rem;line-height:1.15;white-space:normal;overflow-wrap:normal}
  body[data-staff-role="teacher"] #teacher-bottom-nav .teacher-nav-tab .material-symbols-outlined{flex:0 0 auto;line-height:1}
  body[data-staff-role="teacher"] #teacher-bottom-nav .teacher-nav-tab > span:not(.material-symbols-outlined){max-width:100%;font-family:inherit}
  body[data-staff-role="teacher"] #main-app-container .main-content{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px) + 1rem)}
}

.staff-app #ops-tabs[hidden],.staff-app #ops-calendar-actions[hidden],.staff-app #teacher-bottom-nav button[hidden]{display:none!important}

.staff-app[data-staff-role="teacher"] #confirm-root .cc-btn{min-height:44px;min-width:44px}

/* Teacher Inicio uses the available page width, including the Staff sidebar. */
.staff-app[data-staff-role="teacher"] #classroom-heading[hidden]{display:none!important}
.staff-app[data-staff-role="teacher"] #teacher-dashboard-root{display:block;max-width:1160px;min-width:0;container-type:inline-size;color:var(--staff-text)}
.staff-app[data-staff-role="teacher"] #teacher-dashboard-root :is(h1,h2,h3,p){margin-top:0}
.staff-app[data-staff-role="teacher"] .th-header{margin-bottom:18px}
.staff-app[data-staff-role="teacher"] .th-header h1{margin-bottom:3px}
.staff-app[data-staff-role="teacher"] .th-header .subtitle{margin-bottom:16px;color:var(--staff-text-secondary)}
.staff-app[data-staff-role="teacher"] .th-hero{display:flex;align-items:center;gap:14px;min-width:0;padding:15px 18px;border:1px solid color-mix(in srgb,var(--staff-accent) 18%,var(--staff-border));border-radius:var(--staff-radius-lg);background:color-mix(in srgb,var(--staff-accent-soft) 48%,var(--staff-surface));color:var(--staff-text)}
.staff-app[data-staff-role="teacher"] .th-hero-icon,.staff-app[data-staff-role="teacher"] .th-panel-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:var(--staff-radius-control);background:var(--staff-accent-soft);color:var(--staff-accent)}
.staff-app[data-staff-role="teacher"] .th-hero-copy{min-width:0}
.staff-app[data-staff-role="teacher"] .th-hero-copy strong{display:block;margin-bottom:3px;font-size:.82rem;letter-spacing:.01em}
.staff-app[data-staff-role="teacher"] .th-hero-copy p{margin:0;color:var(--staff-text-secondary);font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}
.staff-app[data-staff-role="teacher"] .th-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px;margin-bottom:18px}
.staff-app[data-staff-role="teacher"] .th-summary-card{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;grid-template-rows:auto auto 1fr;align-items:start;gap:3px 10px;min-width:0;min-height:126px;padding:16px;border:1px solid var(--staff-border);border-radius:var(--staff-radius-lg);background:var(--staff-surface);color:var(--staff-text);text-decoration:none;box-shadow:var(--staff-shadow-sm);transition:border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
.staff-app[data-staff-role="teacher"] .th-summary-card:hover{border-color:var(--staff-accent);box-shadow:var(--staff-shadow-surface);transform:translateY(-1px)}
.staff-app[data-staff-role="teacher"] .th-summary-card:focus-visible,.staff-app[data-staff-role="teacher"] :is(.th-quick-action,.th-shortcut-link,.th-tertiary-link):focus-visible{outline:2px solid var(--staff-accent);outline-offset:3px}
.staff-app[data-staff-role="teacher"] .th-summary-icon{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--staff-radius-control);background:var(--staff-accent-soft);color:var(--staff-accent)}
.staff-app[data-staff-role="teacher"] .th-summary-label{grid-column:2;font-size:.78rem;color:var(--staff-text-secondary)}
.staff-app[data-staff-role="teacher"] .th-summary-value{grid-column:2;font-size:1.38rem;line-height:1.22;overflow-wrap:anywhere}
.staff-app[data-staff-role="teacher"] .th-summary-note{grid-column:1/-1;align-self:end;margin-top:8px;font-size:.76rem;line-height:1.35;color:var(--staff-text-secondary)}
.staff-app[data-staff-role="teacher"] .th-summary-card>.th-card-chevron{grid-column:3;grid-row:1/3;align-self:center}
.staff-app[data-staff-role="teacher"] .th-card-chevron{color:var(--staff-text-secondary)}
.staff-app[data-staff-role="teacher"] .th-card-chevron .material-symbols-outlined{font-size:18px}
.staff-app[data-staff-role="teacher"] .th-main{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;margin-bottom:18px}
.staff-app[data-staff-role="teacher"] .th-agenda,.staff-app[data-staff-role="teacher"] .th-side-card{min-width:0;margin:0;padding:18px;border:1px solid var(--staff-border);border-radius:var(--staff-radius-lg);background:var(--staff-surface);box-shadow:var(--staff-shadow-sm)}
.staff-app[data-staff-role="teacher"] .th-agenda h2,.staff-app[data-staff-role="teacher"] .th-side-card h2{margin-bottom:16px;font-size:1.05rem}
.staff-app[data-staff-role="teacher"] .th-class-list{list-style:none;margin:0 0 12px;padding:0}
.staff-app[data-staff-role="teacher"] .th-class-row{display:grid;grid-template-columns:74px 104px minmax(0,1fr);gap:12px;min-width:0;padding:16px 0;border-bottom:1px solid var(--staff-border)}
.staff-app[data-staff-role="teacher"] .th-class-row:first-child{padding-top:0}
.staff-app[data-staff-role="teacher"] .th-date-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;align-self:start;min-height:66px;padding:8px 5px;border:1px solid var(--staff-border);border-radius:var(--staff-radius-control);background:color-mix(in srgb,var(--staff-accent-soft) 45%,var(--staff-surface));color:var(--staff-text);text-align:center}
.staff-app[data-staff-role="teacher"] .th-date-tile strong{font-size:.8rem;font-weight:700;line-height:1.2;text-transform:capitalize}
.staff-app[data-staff-role="teacher"] .th-date-tile span{color:var(--staff-text-secondary);font-size:.72rem;line-height:1.2;white-space:nowrap}
.staff-app[data-staff-role="teacher"] .th-class-time{display:flex;align-items:flex-start;padding-top:4px;min-width:0}
.staff-app[data-staff-role="teacher"] .th-class-time strong{color:var(--staff-text);font-size:.88rem;white-space:nowrap}
.staff-app[data-staff-role="teacher"] .th-class-body{min-width:0}
.staff-app[data-staff-role="teacher"] .th-class-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:5px}
.staff-app[data-staff-role="teacher"] .th-class-type,.staff-app[data-staff-role="teacher"] .th-status{display:inline-flex;align-items:center;padding:3px 8px;border-radius:var(--staff-radius-pill);font-size:.7rem;font-weight:650;line-height:1.3}
.staff-app[data-staff-role="teacher"] .th-class-type{background:var(--staff-accent-soft);color:var(--staff-accent)}
.staff-app[data-staff-role="teacher"] .th-status{background:var(--staff-surface-soft);color:var(--staff-text-secondary)}
.staff-app[data-staff-role="teacher"] .th-class-title{margin:0 0 8px;font-size:.93rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.staff-app[data-staff-role="teacher"] .th-class-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.staff-app[data-staff-role="teacher"] .th-tertiary-link{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:5px 0;color:var(--staff-accent);font-size:.8rem;font-weight:650;text-decoration:none}
.staff-app[data-staff-role="teacher"] .th-tertiary-link:hover{text-decoration:underline}
.staff-app[data-staff-role="teacher"] .th-tertiary-link .material-symbols-outlined{font-size:16px}
.staff-app[data-staff-role="teacher"] .th-agenda-footer{margin-top:3px}
.staff-app[data-staff-role="teacher"] .th-side{display:grid;align-content:start;gap:14px;min-width:0}
.staff-app[data-staff-role="teacher"] .th-side-card p,.staff-app[data-staff-role="teacher"] .th-empty{color:var(--staff-text-secondary)}
.staff-app[data-staff-role="teacher"] .th-panel-heading{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.staff-app[data-staff-role="teacher"] .th-panel-heading h2{margin:0}
.staff-app[data-staff-role="teacher"] .th-panel-icon{width:32px;height:32px}
.staff-app[data-staff-role="teacher"] .th-panel-icon .material-symbols-outlined{font-size:19px}
.staff-app[data-staff-role="teacher"] .th-today-summary{margin-bottom:14px;font-size:.9rem;line-height:1.4}
.staff-app[data-staff-role="teacher"] .th-day-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.staff-app[data-staff-role="teacher"] .th-day-times>div{display:grid;gap:2px;padding:9px 11px;border-radius:var(--staff-radius-control);background:var(--staff-surface-soft)}
.staff-app[data-staff-role="teacher"] .th-day-times span{color:var(--staff-text-secondary);font-size:.72rem}
.staff-app[data-staff-role="teacher"] .th-day-times strong{font-size:.95rem}
.staff-app[data-staff-role="teacher"] .th-quick-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.staff-app[data-staff-role="teacher"] .th-quick-action{display:grid;grid-template-columns:minmax(0,1fr) 16px;grid-template-rows:30px auto auto;align-content:start;gap:4px 2px;min-width:0;min-height:105px;padding:10px;border:1px solid var(--staff-border);border-radius:var(--staff-radius-control);background:var(--staff-surface-soft);color:var(--staff-text);text-decoration:none;transition:border-color 150ms ease,background 150ms ease}
.staff-app[data-staff-role="teacher"] .th-quick-action:hover{border-color:var(--staff-accent);background:var(--staff-accent-soft)}
.staff-app[data-staff-role="teacher"] .th-quick-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--staff-accent-soft);color:var(--staff-accent)}
.staff-app[data-staff-role="teacher"] .th-quick-icon .material-symbols-outlined{font-size:18px}
.staff-app[data-staff-role="teacher"] .th-quick-action strong{grid-column:1/-1;font-size:.77rem;line-height:1.25;overflow-wrap:anywhere}
.staff-app[data-staff-role="teacher"] .th-quick-description{grid-column:1/-1;color:var(--staff-text-secondary);font-size:.69rem;line-height:1.25;overflow-wrap:anywhere}
.staff-app[data-staff-role="teacher"] .th-quick-action .th-card-chevron{grid-column:2;grid-row:1;align-self:center}
.staff-app[data-staff-role="teacher"] .th-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:10px}
.staff-app[data-staff-role="teacher"] .th-shortcut{min-width:0;margin:0;padding:0;border:1px solid var(--staff-border);border-radius:var(--staff-radius-control);background:var(--staff-surface);box-shadow:var(--staff-shadow-sm)}
.staff-app[data-staff-role="teacher"] .th-shortcut-alert{border-color:color-mix(in srgb,var(--staff-accent) 45%,var(--staff-border));background:color-mix(in srgb,var(--staff-accent-soft) 40%,var(--staff-surface))}
.staff-app[data-staff-role="teacher"] .th-shortcut-link{display:grid;grid-template-columns:28px minmax(0,1fr) 16px;gap:3px 7px;align-items:center;min-height:112px;padding:12px;color:var(--staff-text);text-decoration:none}
.staff-app[data-staff-role="teacher"] .th-shortcut-link:hover .th-shortcut-label{text-decoration:underline}
.staff-app[data-staff-role="teacher"] .th-shortcut-icon{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--staff-accent-soft);color:var(--staff-accent)}
.staff-app[data-staff-role="teacher"] .th-shortcut-icon .material-symbols-outlined{font-size:17px}
.staff-app[data-staff-role="teacher"] .th-shortcut-label{grid-column:2;font-size:.76rem;font-weight:650;line-height:1.25;overflow-wrap:anywhere}
.staff-app[data-staff-role="teacher"] .th-shortcut-value{grid-column:2;grid-row:2;font-size:1.24rem;line-height:1.1}
.staff-app[data-staff-role="teacher"] .th-shortcut-link .th-card-chevron{grid-column:3;grid-row:1/3}
.staff-app[data-staff-role="teacher"] .th-shortcut-context,.staff-app[data-staff-role="teacher"] .th-preview-note{grid-column:1/-1;margin:6px 0 0;color:var(--staff-text-secondary);font-size:.72rem;line-height:1.3;overflow-wrap:anywhere}
.staff-app[data-staff-role="teacher"] .th-shortcut .btn{min-height:36px;margin:0 12px 10px;white-space:normal;text-align:left}
.staff-app[data-staff-role="teacher"] .teacher-student-status{display:inline-flex;align-items:center;margin-top:8px;padding:3px 9px;border-radius:var(--staff-radius-pill);background:var(--staff-accent-soft);color:var(--staff-accent);font-size:.78rem;font-weight:700}
@container (min-width: 930px){.staff-app[data-staff-role="teacher"] .th-main{grid-template-columns:minmax(0,1fr) minmax(280px,30%)}}
@container (max-width: 620px){.staff-app[data-staff-role="teacher"] .th-class-row{grid-template-columns:64px minmax(0,1fr);gap:6px 10px}.staff-app[data-staff-role="teacher"] .th-date-tile{grid-column:1;grid-row:1/3;min-height:62px}.staff-app[data-staff-role="teacher"] .th-class-time{grid-column:2;grid-row:1;padding-top:2px}.staff-app[data-staff-role="teacher"] .th-class-body{grid-column:2;grid-row:2}}
@media(max-width:768px){body.staff-app[data-staff-role="teacher"] #dashboard.staff-page-frame{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px) + 16px)}}
@media(max-width:560px){
  .staff-app[data-staff-role="teacher"] #schedule #ops-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:visible}
  .staff-app[data-staff-role="teacher"] #schedule #ops-tabs .ops-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:8px 3px;white-space:normal;font-size:.78rem;line-height:1.2;text-align:center}
}