/* SAP Flexura — Application Styles
   Creator: Gary Bordey, Chief Digital and Information Officer
   Version: 1.0 | March 2026
   Requires: sap-design-system.css (SAP Signum tokens) */

/* Typography recipe classes (Signum tokens; not in generated signum-tokens.css) */
.text-display { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-display); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); }
.text-display-light { font-family: var(--font-family-primary); font-weight: var(--font-weight-light); font-size: var(--font-size-display); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); }
.text-h1 { font-family: var(--font-family-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-h1); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); }
.text-h1-bold { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-h1); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); }
.text-h2 { font-family: var(--font-family-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-h2); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
.text-h2-bold { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-h2); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
.text-h3 { font-family: var(--font-family-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-h3); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-tight); }
.text-h3-bold { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-h3); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-tight); }
.text-h4 { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-h4); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); }
.text-h4-bold { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-h4); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); }
.text-h5 { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-h5); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); }
.text-h5-bold { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-h5); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); }
.text-h6 { font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-h6); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); }
.text-h6-bold { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-h6); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); }
.text-body-lg { font-family: var(--font-family-secondary); font-weight: var(--font-weight-regular); font-size: var(--font-size-body-lg); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); }
.text-body-lg-medium { font-family: var(--font-family-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-lg); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); }
.text-body-lg-bold { font-family: var(--font-family-secondary); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-lg); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); }
.text-body { font-family: var(--font-family-secondary); font-weight: var(--font-weight-regular); font-size: var(--font-size-body); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }
.text-body-medium { font-family: var(--font-family-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }
.text-body-bold { font-family: var(--font-family-secondary); font-weight: var(--font-weight-bold); font-size: var(--font-size-body); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }
.text-body-italic { font-family: var(--font-family-secondary); font-weight: var(--font-weight-regular); font-size: var(--font-size-body); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); font-style: italic; }
.text-body-sm { font-family: var(--font-family-secondary); font-weight: var(--font-weight-regular); font-size: var(--font-size-body-sm); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }
.text-body-sm-medium { font-family: var(--font-family-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-sm); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }
.text-body-sm-bold { font-family: var(--font-family-secondary); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-sm); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }
.text-subtitle { font-family: var(--font-family-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-subtitle); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); }
.text-overline { font-family: var(--font-family-secondary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-subtitle); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.text-caption { font-family: var(--font-family-secondary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-caption); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.text-caption-regular { font-family: var(--font-family-secondary); font-weight: var(--font-weight-regular); font-size: var(--font-size-caption); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.text-meta { font-family: var(--font-family-secondary); font-weight: var(--font-weight-regular); font-size: var(--font-size-meta); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }
.text-meta-medium { font-family: var(--font-family-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-meta); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); }

/* Reset and base styles */
* {
  box-sizing: border-box;
}

html {

  scrollbar-gutter: stable;
  overflow-y: auto;
}

body {
  font-family: var(--font-family-primary);
  margin: 0;
  padding: 0;
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
  scrollbar-gutter: stable;
}

/* FOUC: do not hide the whole body from CSS — if main JS fails, visibility:hidden produced a blank screen. */

/* Toolbar: shared tracks so Schools / Staffing / Schedule keep identical control widths */
:root {
  --flexura-market-track-width: 192px;
  --flexura-toolbar-columns:
    var(--flexura-market-track-width)
    minmax(180px, 1.2fr)
    minmax(180px, 1.4fr)
    auto;
}

.flexura-toolbar-grid {
  display: grid;
  grid-template-columns: var(--flexura-toolbar-columns);
  gap: var(--space-md);
  align-items: end;
  margin-top: var(--space-md);
  width: 100%;
  box-sizing: border-box;
}

.flexura-toolbar-grid > .form-group {
  margin-bottom: 0;
}

.flexura-market-field {
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
}

.flexura-market-field label {
  margin-bottom: var(--space-sm);
}

.flexura-market-select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  line-height: var(--line-height-normal);
  padding: 10px var(--space-lg);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--space-sm);
  background: var(--bg-neutral-primary);
}

.schools-market-column {
  white-space: nowrap;
}

body.page-staffing-schedule .staffing-controls.flexura-toolbar-grid .staffing-optimizer-wrap {
  grid-column: 1 / -1;
}

/* Layout components */
.app-container {
  padding: var(--space-2xl);
  background: var(--bg-neutral-secondary);
  min-height: 100vh;
  transition: margin-left 0.2s ease;
  margin-left: 0;
}

.app-container.sidebar-open {
  margin-left: 240px;
}

.content-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: var(--container-max-width);
  position: relative;
}

/* Sidebar Styles */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 100vh;
  background: var(--bg-neutral-primary);
  border-right: 1px solid var(--border-neutral-primary);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transform: translateX(0);
  transition: transform 0.2s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 769px) {
  .sidebar {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

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

.sidebar-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 48px;
}

.sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--text-neutral-secondary);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
  width: 32px;
  height: 32px;
}

.sidebar-toggle:hover {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
}

.sidebar-toggle:active {
  background: var(--bg-neutral-secondary);
}

.sidebar-toggle svg {
  display: block;
}

.sidebar-icon {
  display: block;
}

.sidebar-icon.hidden {
  display: none;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-sm) 0;
  overflow-y: auto;
}

.sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--text-neutral-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.sidebar-nav-item:hover {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
}

.sidebar-nav-item.active {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
  border-left-color: var(--border-brand-primary);
}

.sidebar-nav-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.sidebar-nav-item span {
  flex: 1;
}

.sidebar-nav-subitem {
  padding-left: calc(var(--space-lg) + 18px);
  font-size: 13px;
}

/* Reusable Admin Navigation Group (MMP-738) */
.sidebar-nav-group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav-group-toggle {
  width: 100%;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  font-family: inherit;
  text-align: left;
}

.sidebar-nav-group-toggle:hover {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
}

.sidebar-nav-group.expanded > .sidebar-nav-group-toggle,
.sidebar-nav-group-toggle[aria-expanded="true"] {
  color: var(--text-neutral-primary);
}

.sidebar-nav-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: auto;
  transition: transform 0.2s ease;
  stroke: currentColor;
}

.sidebar-nav-group.expanded .sidebar-nav-chevron,
.sidebar-nav-group-toggle[aria-expanded="true"] .sidebar-nav-chevron {
  transform: rotate(90deg);
}

.sidebar-nav-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav-submenu.hidden {
  display: none;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--border-neutral-secondary);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* MMP-612 Classic/Modern experience toggle (nav footer, left of release notes) */
.mode-toggle {
  display: flex;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-neutral-secondary);
  margin-right: auto;
}

.mode-toggle .mode-btn {
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  color: var(--text-neutral-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mode-toggle .mode-btn:hover {
  color: var(--text-neutral-primary);
}

.mode-toggle .mode-btn.is-active {
  background: var(--bg-brand-primary);
  color: var(--text-brand-on-brand, #fff);
  cursor: default;
}

.experience-mode-error {
  flex: 1 1 100%;
  order: -1;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-error-primary);
}

/* Release Highlights Button */
.release-highlights-btn {
  background: transparent;
  border: none;
  color: var(--text-neutral-tertiary);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s;
  width: 32px;
  height: 32px;
  opacity: 0.5;
}

.release-highlights-btn:hover {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-secondary);
  opacity: 0.8;
}

.release-highlights-btn:active {
  opacity: 1;
}

/* MMP-766: Deliberate 1.5-second charging animation on footer star button */
.release-highlights-btn.charging {
  position: relative;
  opacity: 1;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  animation: starPulse 1.5s linear forwards;
}

@keyframes starPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
  }
  100% {
    transform: scale(1.25);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.9);
  }
}

.release-highlights-btn svg {
  display: block;
}

/* MMP-849: the floating toggle is 32 px with a mouse and 44 px on touch (set in the touch floor block). */
:root {
  --sidebar-toggle-size: 32px;
}

/* Floating sidebar toggle button (shown when sidebar is collapsed on desktop, always on mobile) */
.sidebar-toggle-header {
  display: none;
  position: fixed;
  left: 0;
  top: var(--space-lg);
  z-index: 999;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-left: none;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  color: var(--text-neutral-primary);
  cursor: pointer;
  padding: var(--space-sm);
  transition: background-color 0.2s, border-color 0.2s;
  width: var(--sidebar-toggle-size);
  height: var(--sidebar-toggle-size);
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Show header toggle on mobile always */
@media (max-width: 768px) {
  .sidebar-toggle-header {
    display: flex;
    position: fixed;
    left: 0;
    top: var(--space-lg);
  }
}

/* Show header toggle on desktop when sidebar is collapsed */
@media (min-width: 769px) {
  body.sidebar-collapsed .sidebar-toggle-header {
    display: flex !important;
  }
}

.sidebar-toggle-header:hover {
  background: var(--bg-neutral-secondary);
  border-color: var(--border-neutral-secondary);
}

.sidebar-toggle-header svg {
  display: block;
}

.card {
  background: var(--bg-neutral-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-xs);
  margin: 0 auto var(--space-2xl) auto;
  max-width: 1058px;
  position: relative;
  will-change: auto;
}

/* Authentication styles */
.auth-container {
  max-width: 400px;
  margin: 100px auto;
  background: var(--bg-neutral-primary);
  padding: var(--space-3xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: center;
}

/* MMP-849: on phones the sign-in card keeps a side margin instead of running edge to edge. */
@media (max-width: 480px) {
  .auth-container {
    margin: var(--space-3xl) var(--space-lg);
    padding: var(--space-2xl);
  }
}

.auth-container label {
  text-align: left;
  padding-left: var(--space-lg);
}

.auth-title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.auth-buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-lg);
}

.auth-link-row {
  text-align: center;
  margin-top: var(--space-md);
}

/* Form components */
.form-group {
  margin-bottom: var(--space-lg);
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  font-size: 14px;
}

input, select {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--space-sm);
  font-size: 16px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

/* Global `input { width: 100% }` breaks radio layout; keep radios intrinsic size. */
input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Range sliders: do not use full-width block padding from global `input` */
input[type="range"] {
  width: auto;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

input[type="range"]:focus-visible {
  outline: 2px solid var(--border-brand-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--border-brand-primary);
}

/* MMP-815: native controls follow the active theme (Signum color-scheme). Zero specificity,
   so every classed control rule keeps winning. Text colour is left to the browser, which takes
   it from color-scheme, so light mode keeps today's text colour. */
:where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"])) {
  background-color: var(--bg-canvas);
}

:where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"])):disabled {
  background-color: var(--bg-neutral-disabled);
  color: var(--text-neutral-disabled);
}

/* MMP-815: the browser's placeholder grey falls below 4.5:1 on the dark canvas. */
:where(input, textarea)::placeholder {
  color: var(--text-neutral-tertiary);
}

/* Field validation error styles */
input.field-error, select.field-error {
  border-color: var(--border-error-primary);
  background-color: var(--bg-error-subtle);
}

input.field-error:focus, select.field-error:focus {
  border-color: var(--border-error-primary);
  box-shadow: 0 0 0 2px var(--border-error-ring);
}

/* Button system — SAP Signum (.btn + variants; gallery + 40-components).
   Legacy .button* aliases kept so any missed markup still gets Signum chrome. */
.btn,
.button,
.btn-primary,
.button-primary,
.btn-secondary,
.button-secondary,
.btn-danger,
.button-danger,
.btn-warning,
.button-warning,
.btn-success,
.button-success,
.btn-text,
.button-text,
.btn-aa,
.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font: inherit;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-md);
  border: var(--stroke-sm) solid transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:focus-visible,
.button:focus-visible,
.btn-primary:focus-visible,
.button-primary:focus-visible,
.btn-secondary:focus-visible,
.button-secondary:focus-visible,
.btn-danger:focus-visible,
.button-danger:focus-visible,
.btn-warning:focus-visible,
.button-warning:focus-visible,
.btn-success:focus-visible,
.button-success:focus-visible,
.btn-text:focus-visible,
.button-text:focus-visible,
.btn-aa:focus-visible,
.auth-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.btn:active:not(:disabled),
.button:active:not(:disabled),
.btn-primary:active:not(:disabled),
.button-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.button-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled),
.button-danger:active:not(:disabled),
.btn-warning:active:not(:disabled),
.button-warning:active:not(:disabled),
.btn-success:active:not(:disabled),
.button-success:active:not(:disabled),
.btn-text:active:not(:disabled),
.button-text:active:not(:disabled),
.btn-aa:active:not(:disabled),
.auth-button:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.95);
}

.btn:disabled,
.button:disabled,
.btn-primary:disabled,
.button-primary:disabled,
.btn-secondary:disabled,
.button-secondary:disabled,
.btn-danger:disabled,
.button-danger:disabled,
.btn-warning:disabled,
.button-warning:disabled,
.btn-success:disabled,
.button-success:disabled,
.btn-text:disabled,
.button-text:disabled,
.btn-aa:disabled,
.auth-button:disabled {
  background: var(--bg-neutral-disabled);
  color: var(--text-neutral-disabled);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.btn-primary, .button-primary, .auth-button {
  background: var(--bg-brand-primary);
  color: var(--text-on-brand);
}

.btn-primary:hover:not(:disabled),
.button-primary:hover:not(:disabled),
.auth-button:hover:not(:disabled) {
  background: var(--bg-brand-hover);
}

.btn-aa {
  background: var(--bg-brand-primary-aa);
  color: var(--color-neutral-0);
}

.btn-aa:hover:not(:disabled) {
  background: var(--bg-brand-hover-aa);
}

.btn-secondary, .button-secondary, .auth-button.secondary {
  background: transparent;
  color: var(--text-brand-primary);
  border-color: var(--border-brand-primary);
}

.btn-secondary:hover:not(:disabled),
.button-secondary:hover:not(:disabled),
.auth-button.secondary:hover:not(:disabled) {
  background: var(--bg-brand-subtle);
}

.btn-danger, .button-danger {
  background: var(--bg-error-bold);
  color: var(--color-neutral-0);
}

.btn-danger:hover:not(:disabled),
.button-danger:hover:not(:disabled) {
  background: var(--bg-error-hover);
}

.btn-warning, .button-warning {
  background: var(--bg-warning-bold);
  color: var(--color-neutral-100);
}

.btn-warning:hover:not(:disabled),
.button-warning:hover:not(:disabled) {
  background: var(--bg-warning-hover);
}

.btn-success, .button-success {
  background: var(--bg-success-bold);
  color: var(--color-neutral-0);
}

.btn-success:hover:not(:disabled),
.button-success:hover:not(:disabled) {
  background: var(--bg-success-hover);
}

.btn-text, .button-text {
  background: transparent;
  border-color: transparent;
  color: var(--text-brand-primary);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
}

.btn-text:hover:not(:disabled),
.button-text:hover:not(:disabled) {
  background: var(--bg-brand-ghost);
}

.btn-text:disabled,
.button-text:disabled {
  background: transparent;
}

.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  border-radius: var(--radius-xs);
}

.btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

#deleteProviderBtn {

  background: var(--bg-error-bold) !important;
  color: white !important;
}

#deleteProviderBtn:hover {

  background: var(--bg-error-bold) !important;
  color: white !important;
}

/* Header section */
.header {
  background: var(--bg-neutral-primary);
  padding: var(--space-2xl);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-xs);
  position: relative;
}

h1 {
  margin: 0 0 var(--space-lg) 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-neutral-primary);
}

h2 {
  margin: 0 0 var(--space-md) 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.user-info {
  position: absolute;
  top: var(--space-2xl);
  right: var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* MMP-627: shared chrome standalone header (renderPageHeader) */
.header.header--standalone {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: 0;
  position: relative;
}

.header.header--standalone h1 {
  margin: 0;
  /* Restore canon after .card .header h1 (28px/600) — D5/AC3 */
  font-size: 32px;
  font-weight: 700;
}

.header.header--standalone .user-info {
  position: static;
  top: auto;
  right: auto;
  margin-left: auto;
}

#userEmail {
  font-size: 13px;
  color: var(--text-neutral-secondary);
  font-weight: 500;
}

.controls {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  flex-direction: column;
  margin-top: var(--space-lg);
  width: 100%;
}

#providerSelect {
  width: 280px;
  max-width: 100%;
}

#addProviderBtn {
  align-self: flex-start;
}

/* Day selector chips */
.days-selector {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.day-chip {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-neutral-primary);
  background: var(--bg-neutral-primary);
  border-radius: var(--radius-xl);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.day-chip:hover {
  background: var(--bg-neutral-secondary);
}

.day-chip.selected {
  background: var(--bg-brand-primary);
  color: white;
  border-color: var(--border-brand-primary);
}



.calendar-header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xl);
}

.nav-button {
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
}

.nav-button:hover {
  background: var(--bg-neutral-hover);
}

#monthYear {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-neutral-primary);
}

/* Calendar grid */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-neutral-secondary);
  max-width: 100%;
}

.calendar-header {
  background: var(--bg-neutral-secondary);
  padding: var(--space-md);
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-neutral-secondary);
  outline: 1px solid var(--border-neutral-secondary);
  outline-offset: -1px;
}

/* MMP-538: relative anchor for the calendar busy overlay */
.calendar-container {
  position: relative;
}

.calendar-day {
  background: var(--bg-neutral-primary);
  padding: var(--space-md);
  text-align: center;
  cursor: pointer;
  min-height: 48px;
  max-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  outline: 1px solid var(--border-neutral-secondary);
  outline-offset: -1px;
  aspect-ratio: 1.2;
  transition: background-color 0.2s;
}

.calendar-day:hover {
  background: var(--bg-neutral-secondary);
}

.calendar-day.other-month {
  color: var(--text-neutral-tertiary);
  background: var(--bg-neutral-tertiary);
}

.calendar-day.selected {
  background: var(--bg-brand-primary);
  color: white;
}

.calendar-day.recurring {
  background: var(--bg-success-bold);
  color: white;
}

/* Hover and selection states for painted days */
.calendar-day.recurring:hover,
.calendar-day.exception-added:hover,
.calendar-day.exception-removed:hover {
  border: 2px solid var(--border-brand-primary);
}

.calendar-day.recurring.painted-selected,
.calendar-day.exception-added.painted-selected,
.calendar-day.exception-removed.painted-selected {
  border: 2px solid var(--border-brand-primary);
}

.calendar-day.exception-added {
  background: var(--bg-warning-bold);
  color: black;
}

.calendar-day.exception-removed {
  background: var(--bg-error-bold);
  color: white;
  text-decoration: line-through;
}

/* Legend */
.legend {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: var(--space-lg) 0 var(--space-2xl);
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 14px;
}

.legend-dot {
  width: var(--space-md);
  height: var(--space-md);
  border-radius: 50%;
}

.legend-dot-success { background: var(--bg-success-bold); }
.legend-dot-warning { background: var(--bg-warning-bold); }
.legend-dot-error   { background: var(--bg-error-bold); }

/* Calendar actions */
.calendar-actions {
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-neutral-secondary);
}

.btn-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* MMP-538: multi-day selection chrome (count + Clear selection), hidden when empty */
.calendar-selection-chrome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.calendar-selection-count {
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--text-neutral-secondary);
}

/* MMP-538: bulk Add/Remove/Clear Day busy overlay, mirrors .staffing-view-loading
   (MMP-583) anchored to .calendar-container (position: relative above). Reuses
   .staffing-status-spinner; no new spinner keyframes. */
.calendar-view-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--bg-neutral-primary);
  z-index: 5;
  border-radius: var(--radius-sm);
}

.calendar-view-loading.hidden {
  display: none !important;
}

.calendar-view-loading-title {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-neutral-primary);
}

/* Provider form controls */
.provider-form-label {
  color: var(--text-neutral-secondary);
  font-weight: 400;
}

.provider-form-select {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
}

/* Provider details sections */
.provider-details-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.provider-section {

  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-neutral-secondary);
}

.provider-section:last-child {
  border-bottom: none;
}

/* Preferences section */
.provider-preferences {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.preference-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-md);
}

.preference-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.preference-picker-title {
  margin: 0;
  color: var(--text-neutral-primary);
  font-size: 16px;
  font-weight: 600;
}

.preference-picker-description {
  margin: var(--space-xs) 0 0;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.preference-search-row,
.preference-add-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.provider-form-input,
.preference-search-input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
}

.preference-options,
.preference-autocomplete {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.preference-autocomplete {
  max-height: 180px;
  overflow: auto;
}

.preference-autocomplete:empty {
  display: none;
}

.preference-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
}

.preference-option-label {
  min-width: 0;
  color: var(--text-neutral-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preference-autocomplete-option {
  display: block;
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  text-align: left;
}

.preference-autocomplete-option:hover,
.preference-autocomplete-option:focus-visible {
  background: var(--bg-neutral-hover);
  outline: none;
}

.preference-draft-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-brand-subtle);
  border-radius: var(--radius-sm);
}

.preference-draft-label {
  min-width: 0;
  color: var(--text-neutral-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preference-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.preference-action-button,
.preference-classification-button,
.preference-draft-cancel,
.preference-clear-button,
.preference-chip-remove {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
  cursor: pointer;
  font-weight: 600;
}

.preference-action-button,
.preference-classification-button,
.preference-draft-cancel {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-caption);
}

.preference-action-button:hover,
.preference-classification-button:hover,
.preference-draft-cancel:hover,
.preference-clear-button:hover,
.preference-chip-remove:hover {
  background: var(--bg-neutral-hover);
}

.preference-action-button:disabled,
.preference-classification-button:disabled,
.preference-clear-button:disabled,
.preference-chip-remove:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.preference-selected-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.preference-selected-panel {
  min-height: 104px;
  padding: var(--space-md);
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
}

.preference-selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.preference-selected-header h5 {
  margin: 0;
  color: var(--text-neutral-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
}

.preference-clear-button {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-caption);
}

.preference-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.preference-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-brand-subtle);
  color: var(--text-neutral-primary);
  border: 1px solid var(--border-brand-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-sm);
}

.preference-chip--overridden {
  background: var(--bg-neutral-secondary);
  border-style: dashed;
  border-color: var(--border-neutral-default);
  color: var(--text-neutral-secondary);
}

.preference-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preference-chip-override-caption {
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

.preference-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: var(--radius-full);
  line-height: 1;
}

.preference-empty-state {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
}

/* Clearance requirement chips (Configuration, MMP-355) */
.clearance-requirements-section {
  margin-top: var(--space-md);
}

.clearance-picker-group {
  margin-bottom: var(--space-lg);
}

.clearance-picker-heading {
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-neutral-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
}

.clearance-search-row {
  position: relative;
  margin-bottom: var(--space-sm);
}

.clearance-search-input {
  width: 100%;
}

.school-preference-search-row {
  position: relative;
  margin-bottom: var(--space-sm);
}

.school-preference-autocomplete:empty {
  display: none;
}

.school-preference-autocomplete {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.clearance-autocomplete-list:empty {
  display: none;
}

.clearance-autocomplete-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.clearance-autocomplete-option {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  background: transparent;
  color: var(--text-neutral-primary);
  font-size: var(--font-size-body-sm);
  text-align: left;
  cursor: pointer;
}

.clearance-autocomplete-option:hover,
.clearance-autocomplete-option:focus-visible {
  background: var(--bg-brand-subtle);
  outline: none;
}

.clearance-autocomplete-hint {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
  padding: var(--space-xs) var(--space-md);
}

.clearance-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.clearance-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-brand-subtle);
  color: var(--text-neutral-primary);
  border: 1px solid var(--border-brand-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-sm);
}

.clearance-chip--derived {
  background: var(--bg-neutral-secondary);
  border-style: dashed;
  border-color: var(--border-neutral-default);
  color: var(--text-neutral-secondary);
}

.clearance-chip--inert {
  background: var(--bg-neutral-disabled);
  border-color: var(--border-neutral-primary);
  color: var(--text-neutral-secondary);
}

.clearance-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clearance-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: var(--radius-full);
  line-height: 1;
}

.clearance-chip-remove:hover {
  background: var(--bg-neutral-tertiary);
}

.clearance-chip-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.teams-page-header .teams-all-market-hint {
  margin: 0 var(--space-lg) var(--space-sm);
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.teams-provider-search-wrap {
  position: relative;
}

.teams-member-list {
  margin-top: var(--space-md);
}

.teams-error-banner {
  margin: 0 var(--space-lg) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-danger-subtle);
  color: var(--text-danger-primary);
  border: 1px solid var(--border-danger-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-sm);
}

.teams-loading-indicator {
  margin: 0 var(--space-lg) var(--space-md);
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.page-teams .teams-page-user-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-right: var(--space-md);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.clearance-empty-state {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
  margin: 0 0 var(--space-sm) 0;
}

@media (min-width: 769px) {
  .preference-selected-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.section-header {
  margin: 0 0 var(--space-lg) 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-neutral-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Identity section */
.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.identity-grid .form-group-wide {
  grid-column: 1 / -1;
}

.role-selection {
  margin-bottom: var(--space-lg);
}

.segmented-control {
  display: flex;
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.segment {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  color: var(--text-neutral-secondary);
}

.segment.selected {
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
  box-shadow: var(--shadow-xs);
}

/* Reusable Signum Tabs (MMP-738 / ADR-0058) */
.signum-tabs {
  display: flex;
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border-neutral-secondary);
}

.signum-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-neutral-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
  font-family: inherit;
}

.signum-tab:hover:not(:disabled) {
  color: var(--text-neutral-primary);
  background: var(--bg-neutral-hover);
}

.signum-tab.selected {
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--border-brand-primary);
  box-shadow: var(--shadow-xs);
}

.signum-tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.signum-tab:disabled {
  color: var(--text-neutral-disabled);
  background: var(--bg-neutral-disabled);
  cursor: not-allowed;
  border-bottom-color: transparent;
}

.credentials-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Provider color picker (reuses county-color-panel classes) */
.provider-color-section {
  margin-top: var(--space-lg);
  width: 100%;
}

.provider-color-section label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
  color: var(--text-neutral-primary);
}

.provider-color-preview {
  font-size: 14px;
  color: var(--text-neutral-secondary);
  min-height: 1.2em;
  margin-top: var(--space-sm);
}

/* Multi-select credential system */
.credentials-section {
  width: 100%;
}

.credential-selector {
  margin-top: 0.5rem;
}

.credential-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.credential-option {
  padding: 0.5rem 1rem;
  border: 2px solid var(--border-neutral-primary);
  background: var(--bg-neutral-tertiary);
  color: var(--text-neutral-primary);
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.credential-option:hover {
  border-color: var(--bg-brand-primary);
  background: var(--bg-brand-subtle);
}

.credential-option.selected {
  background: var(--bg-brand-primary);
  color: white;
  border-color: var(--bg-brand-primary);
}

.credential-option.disabled {
  background: var(--bg-neutral-disabled);
  color: var(--text-neutral-disabled);
  border-color: var(--border-neutral-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.credential-option.disabled:hover {
  background: var(--bg-neutral-disabled);
  color: var(--text-neutral-disabled);
  border-color: var(--border-neutral-secondary);
  transform: none;
}

.selected-credentials {
  min-height: 2.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border-neutral-primary);
  border-radius: 4px;
  background: var(--bg-neutral-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.credential-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-brand-primary);
  color: white;
  border-radius: 12px;
  font-size: 0.85rem;
  user-select: none;
}

.credential-chip .remove {
  cursor: pointer;
  font-weight: bold;
  padding: 0 0.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.credential-chip .remove:hover {
  background: rgba(255, 255, 255, 0.3);
}

.credentials-empty {
  color: var(--text-neutral-disabled);
  font-style: italic;
}

/* Disabled field states */
.field-disabled {
  background-color: var(--bg-neutral-disabled) !important;
  color: var(--text-neutral-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

.segment-disabled {
  background-color: var(--bg-neutral-disabled) !important;
  color: var(--text-neutral-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

.credential-disabled {
  background-color: var(--bg-neutral-disabled) !important;
  color: var(--text-neutral-disabled) !important;
  border-color: var(--border-neutral-secondary) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

.credential-disabled:hover {
  background-color: var(--bg-neutral-disabled) !important;
  border-color: var(--border-neutral-secondary) !important;
}

/* Provider Identity header: team lead */
/* Team lead toggle */
.team-lead-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 14px;
  color: var(--text-neutral-primary);
}

.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-neutral-secondary);
  transition: 0.3s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: var(--bg-success-bold);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Address section */
.address-full-width {
  grid-column: 1 / -1;
  margin-bottom: var(--space-md);
}

.address-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* ZIP field specific styling to fix Firefox text cutoff */
#zip {
  padding: var(--space-md) 12px !important;
}

/* Geo info display */
.geo-info {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.geo-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 6px;
  font-size: 13px;
}

.geo-row:last-child {
  margin-bottom: 0;
}

.geo-label {
  font-weight: 500;
  color: var(--text-neutral-secondary);
  min-width: 50px;
}

.geo-value {
  font-family: var(--font-family-mono);
  color: var(--text-neutral-primary);
  font-size: 12px;
}

.precision-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-warning-subtle);
  color: var(--text-warning-primary);
  font-size: 10px;
  font-weight: 500;
}

.geocoding-spinner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-neutral-secondary);
}

/* Travel policy section */
.cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Non–DDS/DMD: row 1 = hourly | day hours; row 2 = per diem under hourly column only */
.non-dentist-rates-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-lg);
  grid-column: 1 / -1;
  align-items: stretch;
}

.non-dentist-rates-pair .non-dentist-rates-hourly {
  grid-column: 1;
  grid-row: 1;
}

.non-dentist-rates-pair .non-dentist-rates-day-hours {
  grid-column: 2;
  grid-row: 1;
}

.non-dentist-rates-pair .non-dentist-rates-per-diem {
  grid-column: 1;
  grid-row: 2;
}

.non-dentist-rates-pair .cost-item {
  margin: 0;
}

.cost-item {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.cost-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-neutral-secondary);
  margin-bottom: var(--space-xs);
}

.cost-input-group {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.cost-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-neutral-primary);
  border-radius: 6px;
  font-size: 14px;
}

.currency-input {
  width: 60px;
  padding: var(--space-sm);
  border: 1px solid var(--border-neutral-primary);
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}

/* Distance bands */
.distance-bands {
  margin-bottom: var(--space-xl);
}

.distance-bands-title {
  margin: 0 0 var(--space-md) 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.dds-travel-stipend-schedule {
  margin-top: var(--space-sm);
}

.provider-travel-stipend-header {
  margin-bottom: var(--space-md);
}

.provider-travel-stipend-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.dds-stipend-hint {
  margin: 0 0 var(--space-md) 0;
  font-size: 13px;
  color: var(--text-neutral-secondary);
  line-height: 1.45;
}

.dds-stipend-table-wrap {
  overflow-x: auto;
}

/* MMP-869: on a phone the provider stipend table fits its card, so the delete buttons stay in
   view: the amount column drops its 7.5rem minimum and cells use 6 px side padding. */
@media (max-width: 480px) {
  .dds-stipend-table-wrap .lookup-table th,
  .dds-stipend-table-wrap .lookup-table td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .dds-stipend-table-wrap .lookup-table .travel-stipend-amount-col {
    min-width: 0;
  }
}

.provider-stipend-override-table .dds-stipend-override-cell {
  min-width: 220px;
  vertical-align: middle;
}

.provider-stipend-override-table .dds-stipend-override-input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.35;
}

.provider-stipend-override-table .dds-stipend-config-default {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.travel-stipend-open {
  color: var(--text-neutral-secondary);
}

.travel-stipend-default-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-sm);
  padding: 1px var(--space-xs);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-full);
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.travel-stipend-inherited-row {
  background: rgba(0, 112, 242, 0.03);
}

.travel-stipend-schedule-locked .col-drag,
.travel-stipend-schedule-locked .col-del,
.travel-stipend-schedule-locked th.col-drag,
.travel-stipend-schedule-locked th.col-del {
  display: none;
}

.lookup-table td.travel-stipend-locked-cell {
  cursor: default;
  color: var(--text-neutral-primary);
}

.lookup-table td.travel-stipend-locked-cell:hover {
  background: transparent;
}

.travel-stipend-preview-handle {
  opacity: 0.3;
}

.band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.band-item {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.band-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-neutral-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hotel-preference {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
}

.hotel-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-neutral-primary);
  line-height: 1.25;
}

/* Global `label { margin-bottom }` applies to the switch <label>; reset so flex cross-alignment matches the text. */
.hotel-preference .toggle {
  margin-bottom: 0;
  flex-shrink: 0;
  align-self: center;
}

/* Credentials display */
.credentials-display {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.credential-chip {
  background: var(--bg-info-subtle);
  color: var(--text-brand-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.credentials-empty {
  color: var(--text-neutral-secondary);
  font-size: 13px;
  font-style: italic;
}

/* Save button container */
.save-button-container {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* MMP-536: create-mode persistent duplicate banner (not #providerStatus) */
.provider-duplicate-banner {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-neutral-secondary);
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
  font-size: var(--font-size-body-sm);
}

.provider-duplicate-banner.warning {
  background: var(--bg-warning-subtle);
  color: var(--text-warning-primary);
  border-color: var(--border-warning-tint);
}

.provider-duplicate-banner.error {
  background: var(--bg-error-subtle);
  color: var(--text-error-primary);
  border-color: var(--border-danger-subtle, var(--border-neutral-secondary));
}

.provider-duplicate-banner.hidden,
.provider-duplicate-banner[hidden] {
  display: none !important;
}

.provider-duplicate-message {
  margin: 0 0 var(--space-xs) 0;
}

.provider-duplicate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Status messages */
.status {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-align: center;
  opacity: 1;
  max-height: 100px;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.status.hidden {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.status.success {
  background: var(--bg-success-subtle);
  color: var(--text-success-primary);
}

.status.error {
  background: var(--bg-error-subtle);
  color: var(--text-error-primary);
}

/* MMP-788: in-modal form error; long messages wrap left-aligned and are never clipped. */
.status.add-visit-error {
  text-align: left;
  max-height: none;
}

.status.add-visit-error.hidden {
  display: none;
}

.status.info {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
}

.size-display {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--text-neutral-secondary);
  text-align: right;
  margin-bottom: var(--space-sm);
  padding-right: var(--space-sm);
}

/* Utility classes */
.hidden {
  display: none !important;
}

.empty-state-text {
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
}

.helper-text {
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
  margin-top: var(--space-xs);
}

/* Responsive design */
@media (max-width: 768px) {
  .sidebar-toggle-header {
    display: flex;
  }

  .app-container {
    padding: var(--space-lg);
    margin-left: 0 !important;
  }

  .app-container.sidebar-open {
    margin-left: 0 !important;
  }

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

  .user-info {
    position: static;
    margin-top: var(--space-lg);
  }

  .calendar-day {
    min-height: 40px;
    padding: var(--space-sm);
    font-size: 12px;
  }

  .btn {
    width: 100%;
  }

  .identity-grid,
  .address-grid,
  .cost-grid,
  .band-grid {
    grid-template-columns: 1fr;
  }
}

/* MMP-849: reserve space for the floating sidebar toggle so it never covers the header card. */
@media (max-width: 768px) {
  .app-container {
    padding-top: calc(var(--space-lg) + var(--sidebar-toggle-size) + var(--space-sm));
  }
}

@media (min-width: 769px) {
  body.sidebar-collapsed .app-container {
    padding-left: calc(var(--sidebar-toggle-size) + var(--space-lg));
    padding-right: calc(var(--sidebar-toggle-size) + var(--space-lg));
  }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (min-width: 1800px) {
  :root {
    --container-max-width: 1600px;
  }
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.modal-container {
  background: var(--bg-neutral-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-container.modal-narrow {
  max-width: 560px;
}

.modal-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-neutral-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-neutral-secondary);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
  width: 32px;
  height: 32px;
}

.modal-close-btn:hover {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-primary);
}

.modal-close-btn svg {
  display: block;
}

.modal-content {
  padding: var(--space-lg);
  overflow-y: auto;
  flex: 1;
}

#travelStipendFirstTimeModal .modal-container {
  border-radius: 18px;
}

#travelStipendFirstTimeModal .modal-header {
  padding: 24px 28px;
}

#travelStipendFirstTimeModal .modal-content {
  padding: 30px 28px 28px;
}

.first-time-modal-intro {
  margin: 0 0 10px;
  color: var(--text-neutral-primary);
  font-size: 18px;
  line-height: 1.45;
}

.first-time-modal-options {
  margin: 0;
  color: var(--text-neutral-secondary);
  font-size: 16px;
  line-height: 1.5;
}

.first-time-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.first-time-modal-actions .btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.release-highlights-content {
  color: var(--text-neutral-primary);
  line-height: 1.6;
}

.release-highlights-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.release-highlights-content li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-neutral-secondary);
}

.release-highlights-content li:last-child {
  border-bottom: none;
}

.release-highlights-content strong {
  color: var(--text-neutral-primary);
  font-weight: 600;
}

.release-highlights-content p {
  margin: 0;
  color: var(--text-neutral-secondary);
}

.modal-footer {
  padding: var(--space-md);
  text-align: right;
  border-top: 1px solid var(--border-neutral-secondary);
}

/* MMP-852: on phones footer buttons wrap; keep space between them instead of letting them touch. */
@media (max-width: 480px) {
  .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-sm);
  }
}

.error-detail-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.error-detail-message {
  margin: 0;
  color: var(--text-neutral-primary);
  line-height: 1.5;
}

.error-detail-section {
  margin: 0;
}

.error-detail-subheading {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.error-detail-market {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.error-detail-school-list {
  margin: 0;
  padding-left: var(--space-lg);
  max-height: min(40vh, 320px);
  overflow-y: auto;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-primary);
  line-height: 1.45;
}

.error-detail-school-list li {
  margin-bottom: var(--space-xs);
}

.error-detail-copy-hint {
  margin: 0;
}

/* UI State Management - New Provider Mode */
.disabled-card {
  position: relative;
}

.disabled-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
  border-radius: var(--radius-md);
}

.day-chip.disabled {
  cursor: not-allowed !important;
  background-color: var(--bg-neutral-secondary) !important;
  color: var(--text-neutral-tertiary) !important;
}

.calendar.disabled {
  position: relative;
}

.calendar.disabled::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 5;
  border-radius: var(--radius-sm);
}

/* Ensure disabled buttons are truly non-interactive */
button:disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Make nav buttons clearly disabled */
.nav-button:disabled {
  background-color: var(--bg-neutral-secondary) !important;
  color: var(--text-neutral-tertiary) !important;
  border-color: var(--border-neutral-secondary) !important;
}

/* School List Styles */
#schoolListContainer {
  padding: 0 var(--space-2xl) var(--space-2xl) var(--space-2xl); /* Match header padding for alignment */
}

.school-list-header,
.school-list-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(8rem, 1fr) minmax(280px, 360px);
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-neutral-secondary);
  align-items: center;
  border-radius: var(--radius-xs);
  margin: 0 calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.school-list-header > *,
.school-list-row > * {
  min-width: 0;
}

.school-list-header {
  font-weight: 600;
  color: var(--text-neutral-secondary);
}

.school-list-row {
  transition: background-color 0.2s ease;
}

.school-list-row:hover {
  background-color: var(--bg-neutral-secondary);
}

.school-list-row:last-child {
  border-bottom: none;
}

.school-name {
  font-weight: 500;
  color: var(--text-neutral-primary);
  cursor: pointer;
  position: relative;
  display: inline-block;
  overflow-wrap: anywhere;
}

.school-name::after {
  content: '→';
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-left: var(--space-xs);
  color: var(--text-brand-primary);
  font-size: 14px;
}

.school-name:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

.school-city {
  color: var(--text-neutral-secondary);
}

.school-select {
  margin-top: var(--space-sm);
}

.pagination-info {
  margin: 0 var(--space-md);
}

.card-back-link {
  position: absolute;
  top: var(--space-2xl);
  right: var(--space-2xl);
}

/* MMP-827: on narrow screens the absolutely placed link crowded the first section
   heading (Schools and Visit Schedule details); put it in flow under the card title. */
@media (max-width: 768px) {
  .card-back-link {
    position: static;
    width: auto;
    justify-content: flex-start;
    margin-top: var(--space-xs);
    padding-left: 0;
  }
}

/* Detail states */
.detail-loading {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-neutral-secondary);
}

.detail-error {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-error-primary);
}

.visit-meter-cell {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  min-width: 0;
  width: 100%;
}

.visit-meter-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-neutral-secondary);
  white-space: nowrap;
}

.visit-meter {
  display: flex;
  gap: 3px;
  align-items: center;
  min-width: 0;
}

.visit-meter-segment {
  flex: 1 1 0;
  min-width: 0;
  height: 20px;
  background-color: var(--bg-neutral-tertiary);
  border-radius: 2px;
}

.visit-meter-segment.is-filled {
  background-color: var(--bg-brand-primary);
  cursor: help;
}

.visit-meter-segment.is-filled:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.visit-date-tooltip {
  position: fixed;
  left: var(--visit-tooltip-left);
  top: var(--visit-tooltip-top);
  z-index: 1000;
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-body-sm);
  white-space: nowrap;
  pointer-events: none;
}

.visit-date-tooltip.hidden {
  display: none;
}

@media (max-width: 768px) {
  .school-list-header {
    display: none;
  }

  .school-list-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .visit-meter-cell {
    width: 100%;
    max-width: 100%;
  }
}

/* Card 3: School Details Styles */
#schoolDetailsContainer {
  padding: 0 var(--space-2xl) var(--space-2xl) var(--space-2xl);
}

.school-details-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.details-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.details-section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-neutral-primary);
  margin: 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.details-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Visit Information Grouping */
.visit-info-group {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
}

.visit-type-group {
  display: flex;
  flex-direction: column;
}

.visit-schedule-visit-type-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.visit-schedule-visit-type-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.visit-schedule-visit-type-date {
  font-size: 0.875rem;
  color: var(--text-neutral-secondary);
}

.visit-schedule-visit-type-inherit {
  font-size: 0.875rem;
  color: var(--text-neutral-secondary);
  font-style: italic;
}

.visit-schedule-visit-type-placeholder {
  color: var(--text-neutral-secondary);
  margin: 0;
}

.visit-schedule-visit-type-error {
  color: var(--text-error-primary);
}

.future-visits-group {
  display: flex;
  flex-direction: column;
}

.visit-schedule-dates-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.visit-schedule-dates-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-neutral-secondary);
}

.visit-schedule-dates-row:last-child {
  border-bottom: none;
}

.visit-schedule-dates-label {
  font-size: 0.875rem;
  color: var(--text-neutral-secondary);
}

.visit-schedule-dates-value {
  font-weight: 500;
}

.visit-schedule-dates-empty {
  color: var(--text-neutral-secondary);
  justify-content: flex-start;
  border-bottom: none;
}

.patient-info-group {
  padding: var(--space-xl);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
}

.facility-info-group {
  padding: var(--space-xl);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
}

.basic-info-group {
  padding: var(--space-xl);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
}

.location-info-group {
  padding: var(--space-xl);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
}

.meta-info-group {
  padding: var(--space-xl);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .visit-info-group {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .details-grid-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .patient-info-group {
    padding: var(--space-lg);
  }

  .facility-info-group {
    padding: var(--space-lg);
  }

  .basic-info-group {
    padding: var(--space-lg);
  }

  .location-info-group {
    padding: var(--space-lg);
  }

  .meta-info-group {
    padding: var(--space-lg);
  }
}

.detail-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-neutral-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* MMP-836: read-only and group labels are spans (a label element must name a control);
   keep the box the global label rule gives the field labels. */
span.detail-label {
  display: block;
  margin-bottom: var(--space-sm);
}

.detail-value {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-neutral-primary);
  line-height: 1.4;
  word-wrap: break-word;
}

.detail-input {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-neutral-primary);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-neutral-primary);
  width: 100%;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* MMP-836: SAP Signum hit targets are at least 44 px for touch (component-contracts,
   Focus and accessibility). Fine-pointer density is unchanged. */
@media (pointer: coarse) {
  .detail-input {
    min-height: 44px;
  }
}

/* MMP-849, MMP-852, MMP-854: SAP Signum hit targets are at least 44 x 44 px for touch on every page,
   in every pop-up, in the sidebar, and for every link that stands on its own (links inside
   sentences keep their size).
   !important is deliberate: the floor is a minimum that must beat page rules with higher
   specificity (for example .config-section-control .form-control), and it exists only on touch. */
@media (pointer: coarse) {
  :root {
    --sidebar-toggle-size: 44px;
  }

  .app-container button,
  .app-container select,
  .app-container textarea,
  .app-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .auth-container button,
  .auth-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .modal-overlay button,
  .modal-overlay select,
  .modal-overlay textarea,
  .modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .drawer button,
  .drawer select,
  .drawer textarea,
  .drawer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .attendance-scope-modal button,
  .attendance-scope-modal select,
  .attendance-scope-modal textarea,
  .attendance-scope-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .visit-chip-context-menu button,
  .market-switcher-popover button,
  .market-switcher-first-load button,
  .market-switcher-toast button,
  .sidebar button,
  .sidebar .sidebar-nav-item {
    min-height: 44px !important;
  }

  .app-container .icon-button,
  .app-container .unsched-nav-btn,
  .app-container .lookup-delete-btn,
  .app-container .travel-stipend-delete-btn,
  .app-container .county-color-preset-delete-btn,
  .app-container .sidebar-toggle-header,
  .modal-close-btn,
  .drawer__close,
  .sidebar .sidebar-toggle,
  .sidebar .release-highlights-btn {
    min-width: 44px !important;
  }

  /* Links that stand on their own act as controls: links styled as buttons and Provider list rows. */
  a:is(.btn, .button, .btn-primary, .button-primary, .btn-secondary, .button-secondary, .btn-danger, .button-danger, .btn-warning, .button-warning, .btn-success, .button-success, .btn-text, .button-text, .btn-aa, .auth-button),
  body.page-providers .provider-roster-row {
    min-height: 44px !important;
  }

  /* Standalone text links (table, section, sign-in, Open record and empty-state links). */
  .data-list__link,
  .markets-table td > a,
  .page-provider-record .provider-record-rail a,
  .auth-link-row a,
  .page-provider-schedule-modern .schedule-open-record,
  body.page-providers .providers-empty-state a {
    display: inline-flex;
    align-items: center;
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Breadcrumbs grow their tap area without moving anything: vertical padding on an inline
     box leaves the line height alone, and the negative margin cancels the side padding, so a
     page header already taller than the Signum density cap on touch does not grow. */
  .page-header__breadcrumbs a {
    position: relative;
    z-index: 1;
    padding: 15px 5px;
    margin: 0 -5px;
  }

}

.detail-input:focus {
  outline: none;
  border-color: var(--border-brand-primary);
  background-color: var(--bg-neutral-primary);
}

.detail-input:disabled {
  background-color: var(--bg-neutral-secondary);
  color: var(--text-neutral-secondary);
  cursor: not-allowed;
}

.detail-help-text {
  margin-top: 2px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-neutral-tertiary);
}

/* MMP-827: inline field error below an input (UXR-002, UXR-005: colour plus text).
   The left inset matches .detail-help-text so error and help share one text edge. */
.detail-field-error {
  margin: var(--space-xs) 0 0 6px;
  font-size: var(--font-size-caption, 13px);
  color: var(--text-error-primary);
}

/* MMP-827: Shared NCES ID target line and the read-only sharer list. */
.school-shared-nces-target {
  margin: var(--space-xs) 0 0 6px;
  font-size: var(--font-size-caption, 13px);
  color: var(--text-neutral-secondary);
}

.school-shared-by {
  margin-top: var(--space-lg);
}

.school-shared-by-list {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-lg);
  color: var(--text-neutral-primary);
}

.school-shared-by-list li + li {
  margin-top: var(--space-xs);
}

/* MMP-466: school identity presentation */
.school-identity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.school-lifecycle-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.school-lifecycle-badge--active {
  background: #e8f5e9;
  color: #1b5e20;
}

.school-lifecycle-badge--closed {
  background: #ffebee;
  color: #b71c1c;
}

.school-lifecycle-badge--superseded {
  background: #fff8e1;
  color: #f57f17;
}

.school-type-label {
  font-size: 13px;
  color: var(--text-neutral-secondary);
}

/* MMP-546: Meta card identifiers registry (replaces mid-form identifiers table) */
.meta-identifiers-group {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-neutral-secondary);
}

.meta-identifiers-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-neutral-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
}

.meta-identifiers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.meta-identifier-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-identifier-secondary {
  font-size: 12px;
  color: var(--text-neutral-tertiary);
}

.meta-identifier-inactive .detail-label,
.meta-identifier-inactive .detail-value,
.meta-identifier-inactive .meta-identifier-secondary {
  opacity: 0.55;
}

.meta-identifiers-empty {
  color: var(--text-neutral-tertiary);
  font-style: italic;
  font-size: 14px;
  margin: 0;
}

.school-id-summary {
  font-size: 13px;
}

.partner-id-label {
  font-size: 12px;
  color: var(--text-neutral-tertiary);
  margin-left: 4px;
}

.save-button-container {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

#backToSchoolListTop {
  color: var(--text-brand-primary);
  font-size: 15px;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

#backToSchoolListTop:hover {
  background-color: var(--bg-brand-ghost);
}

@media (max-width: 768px) {
  .details-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  #schoolDetailsContainer {
    padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
  }
}

/* Data Pipeline Loading Animation */
.data-pipeline-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  flex-wrap: wrap;
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0.3;
  transform: scale(0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pipeline-stage.active {
  opacity: 1;
  transform: scale(1.1);
  animation: pulse 0.8s ease-in-out infinite;
}

.pipeline-stage.completed {
  opacity: 0.8;
  transform: scale(1);
}

.pipeline-stage .stage-icon {
  font-size: 32px;
  line-height: 1;
  transition: transform 0.3s ease;
}

.pipeline-stage.active .stage-icon {
  animation: bounce 0.6s ease-in-out infinite;
}

.pipeline-stage .stage-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-neutral-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-xs);
}

.pipeline-stage.active .stage-label {
  color: var(--text-brand-primary);
  font-weight: 600;
}

.pipeline-connector {
  width: 40px;
  height: 2px;
  background: var(--border-neutral-secondary);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}

.pipeline-connector.active {
  background: var(--bg-brand-primary);
  animation: flow 0.8s ease-in-out;
}

.pipeline-connector.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shimmer 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes flow {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

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

@media (max-width: 768px) {
  .data-pipeline-animation {
    gap: var(--space-sm);
  }

  .pipeline-stage .stage-icon {
    font-size: 24px;
  }

  .pipeline-stage .stage-label {
    font-size: 10px;
  }

  .pipeline-connector {
    width: 20px;
  }
}


.export-card-content {
  padding: var(--space-2xl);
}

.mono-inline {
  font-family: var(--font-family-mono);
  font-size: 12px;
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  border: 2px dashed var(--border-neutral-secondary);
  border-radius: var(--radius-md);
  background: var(--bg-neutral-tertiary);
  transition: all 0.2s ease;
  margin-bottom: var(--space-xl);
}

.upload-area:hover,
.upload-area.drag-over {
  border-color: var(--border-brand-primary);
  background: var(--bg-brand-ghost-subtle);
}

.upload-text {
  color: var(--text-neutral-secondary);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.exceptions-card-content {
  padding: var(--space-2xl);
}

.exceptions-description {
  margin: 0 0 var(--space-xl) 0;
  color: var(--text-neutral-secondary);
  line-height: 1.5;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.exceptions-summary-grid,
.admin-verdict-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.exceptions-summary-card,
.admin-verdict-card {
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.exceptions-summary-label,
.admin-verdict-label {
  display: block;
  color: var(--text-neutral-secondary);
  font-size: 12px;
  margin-bottom: var(--space-xs);
}

.exceptions-summary-value,
.admin-verdict-value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-neutral-primary);
  /* MMP-796: reason codes are long unspaced tokens (CONFLICTING_SCHOOL_HAS_VISIT); wrap them
     inside the card instead of overflowing it and widening the page at narrower widths. */
  overflow-wrap: anywhere;
}

.exceptions-filters {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.6fr 0.4fr;
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-md);
}

.exceptions-table,
.admin-runs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-md);
}

.exceptions-table thead th,
.admin-runs-table thead th {
  text-align: left;
  font-size: 12px;
  color: var(--text-neutral-secondary);
  font-weight: 600;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
  background: var(--bg-neutral-secondary);
}

.exceptions-table tbody td,
.admin-runs-table tbody td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
  vertical-align: top;
}

.exceptions-table tbody tr:hover,
.admin-runs-table tbody tr:hover {
  background: var(--bg-brand-ghost-subtle);
}

/* Recent-runs ledger: contain wide filenames inside the card (no card bleed). */
.admin-runs-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

#adminRunsCard {
  overflow: hidden;
  min-width: 0;
}

.admin-runs-table {
  table-layout: fixed;
}

.admin-runs-table thead th[title] {
  cursor: help;
}

.admin-runs-table .admin-runs-when {
  width: 11.5rem;
}

.admin-runs-table .admin-runs-who {
  width: 11rem;
}

.admin-runs-table .admin-runs-file {
  width: auto;
}

.admin-runs-table .admin-runs-mode {
  width: 7.5rem;
}

.admin-runs-table th.admin-runs-count,
.admin-runs-table td.admin-runs-count {
  width: 6.5rem;
}

.admin-runs-who,
.admin-runs-file,
.admin-runs-file .mono-inline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.admin-runs-file .mono-inline {
  display: block;
}

.exceptions-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
  color: var(--text-neutral-secondary);
  font-size: 12px;
}

/* -----------------------------------------------------------------------------
 * MMP-738 (Chunk 4): Sync Exceptions page-scoped styles
 * -------------------------------------------------------------------------- */
.sync-exceptions-tabs {
  max-width: 320px;
  margin-bottom: var(--space-md);
}

.sync-exceptions-retention-note {
  margin: var(--space-md) 0 0 0;
  color: var(--text-neutral-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.page-sync-exceptions .exceptions-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  margin-bottom: var(--space-md);
}

.page-sync-exceptions .exceptions-filters .filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.page-sync-exceptions .exceptions-filters .filter-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-neutral-secondary);
}

.page-sync-exceptions .exceptions-filters .filter-field-state {
  /* Fits the "e.g. PA" placeholder inside the 16px side padding (clipped at 80px). */
  width: 104px;
}

.page-sync-exceptions .exceptions-filters .filter-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
  margin-left: auto;
}

.page-sync-exceptions .card {
  min-width: 0;
  max-width: 100%;
}

.page-sync-exceptions .exceptions-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  margin-bottom: var(--space-md);
}

.page-sync-exceptions .exceptions-table th,
.page-sync-exceptions .exceptions-table td {
  white-space: nowrap;
  font-size: 13px;
}

.page-sync-exceptions .exceptions-table td:last-child {
  white-space: normal;
  min-width: 200px;
  max-width: 360px;
  word-break: break-word;
}

/* -----------------------------------------------------------------------------
 * MMP-789: Admin > Hidden Visits page-scoped styles (shipped tokens only)
 * -------------------------------------------------------------------------- */
.page-hidden-visits .card {
  min-width: 0;
  max-width: 100%;
}

.page-hidden-visits .hidden-visits-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.page-hidden-visits .hidden-visits-tabs {
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.page-hidden-visits .hidden-visits-tabs .signum-tab {
  white-space: nowrap;
}

.page-hidden-visits .hidden-visits-when {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 180px;
}

.page-hidden-visits .hidden-visits-when label {
  margin: 0;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--text-neutral-secondary);
}

/* The global `input, select` rule sets no surface or text colour, so a bare select stays white
   in dark mode; this page styles its one select with tokens (config-section-control recipe). */
.page-hidden-visits .hidden-visits-when select.form-control {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--text-neutral-primary);
  background-color: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
}

.page-hidden-visits .hidden-visits-when select.form-control:hover {
  border-color: var(--border-neutral-strong);
}

.page-hidden-visits .hidden-visits-when select.form-control:focus {
  outline: none;
  border-color: var(--border-brand-primary);
  box-shadow: 0 0 0 2px var(--border-brand-ring);
}

.page-hidden-visits .status {
  margin-bottom: var(--space-md);
}

.page-hidden-visits .hidden-visits-inline-btn {
  margin-left: var(--space-sm);
  vertical-align: baseline;
}

.page-hidden-visits .exceptions-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}

.page-hidden-visits .exceptions-table th,
.page-hidden-visits .exceptions-table td {
  font-size: 13px;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.page-hidden-visits .exceptions-table th:first-child,
.page-hidden-visits .exceptions-table td:first-child {
  padding-left: var(--space-md);
}

.page-hidden-visits .exceptions-table td:nth-child(2),
.page-hidden-visits .exceptions-table td:nth-child(3),
.page-hidden-visits .exceptions-table td:nth-child(4) {
  white-space: nowrap;
}

.page-hidden-visits .exceptions-table td:nth-child(1) {
  min-width: 130px;
}

.page-hidden-visits .exceptions-table td:nth-child(1) .hidden-visits-muted {
  white-space: nowrap;
}

.page-hidden-visits .exceptions-table td:nth-child(5) {
  min-width: 160px;
  max-width: 200px;
}

.page-hidden-visits .exceptions-table td:nth-child(6) {
  min-width: 90px;
  max-width: 180px;
}

.page-hidden-visits .hidden-visits-muted {
  margin-top: 2px;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.page-hidden-visits .hidden-visits-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  white-space: nowrap;
}

/* MMP-812: Signum row actions - icon plus label, quiet at rest, 44 px targets,
   weight and shape (not colour alone) separate the safe and destructive actions. */
.page-hidden-visits .hidden-visits-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-neutral-secondary);
  font-weight: var(--font-weight-medium);
}

.page-hidden-visits .hidden-visits-action--restore {
  color: var(--text-brand-primary);
  font-weight: var(--font-weight-semibold);
}

.page-hidden-visits .hidden-visits-action:hover,
.page-hidden-visits .hidden-visits-action:focus-visible {
  background: var(--bg-neutral-hover);
  color: var(--text-neutral-primary);
}

.page-hidden-visits .hidden-visits-action--delete:hover,
.page-hidden-visits .hidden-visits-action--delete:focus-visible {
  background: var(--bg-danger-subtle);
  color: var(--text-danger-primary);
}

.page-hidden-visits .hidden-visits-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.page-hidden-visits .hidden-visits-action[aria-disabled="true"],
.page-hidden-visits .hidden-visits-action[aria-disabled="true"]:hover,
.page-hidden-visits .hidden-visits-action[aria-disabled="true"]:focus-visible,
.page-hidden-visits .hidden-visits-action[aria-disabled="true"]:active {
  color: var(--text-neutral-disabled);
  background: transparent;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.page-hidden-visits .hidden-visits-action__icon,
.page-hidden-visits .hidden-visits-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.page-hidden-visits .hidden-visits-spinner {
  display: inline-block;
  border: 2px solid var(--border-neutral-secondary);
  border-top-color: var(--border-brand-primary);
  border-radius: 50%;
  animation: staffing-spin 0.7s linear infinite;
}

.page-hidden-visits .hidden-visits-th-actions {
  min-width: 44px;
}

.page-hidden-visits .hidden-visits-empty {
  padding: var(--space-lg) var(--space-md);
}

.page-hidden-visits .hidden-visits-empty .btn {
  margin-top: var(--space-sm);
}

.page-hidden-visits .hidden-visits-skeleton-bar {
  display: block;
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-tertiary);
  animation: hidden-visits-skeleton-fade 1.4s ease-in-out infinite;
}

@keyframes hidden-visits-skeleton-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.page-hidden-visits .exceptions-pager.hidden {
  display: none;
}

.page-hidden-visits .hidden-visits-pager-buttons {
  display: flex;
  gap: var(--space-sm);
}

body.page-hidden-visits.modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .page-hidden-visits .hidden-visits-skeleton-bar,
  .page-hidden-visits .hidden-visits-spinner {
    animation: none;
  }
}

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

  .exceptions-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .page-sync-exceptions .exceptions-summary-grid {
    grid-template-columns: 1fr;
  }

  .page-sync-exceptions .exceptions-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .page-sync-exceptions .exceptions-filters .filter-field {
    width: 100%;
  }

  .page-sync-exceptions .exceptions-filters .filter-field-state {
    width: 100%;
  }

  .page-sync-exceptions .exceptions-filters .filter-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.export-description {
  margin: 0 0 var(--space-xl) 0;
  color: var(--text-neutral-secondary);
  line-height: 1.5;
  font-size: 15px;
  letter-spacing: -0.01em;
}


.content-wrapper > .card + .card {
  margin-top: var(--space-lg);
}

/* Loading container with proper spacing */
.export-loading-container {
  margin-top: var(--space-xl);
  padding: var(--space-xl) 0;
  text-align: center;
}


.export-error-container {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background-color: var(--bg-error-tint);
  border: 1px solid var(--border-error-tint);
  border-radius: var(--radius-md);
  color: var(--text-neutral-primary);
}

.export-error-header {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: var(--space-sm);
  color: var(--text-error-primary);
  letter-spacing: -0.01em;
}

.export-error-message {
  font-size: 15px;
  line-height: 1.47;
  color: var(--text-neutral-primary);
  margin-bottom: var(--space-sm);
}

.export-error-footer {
  margin-top: var(--space-md);
  font-size: 13px;
  line-height: 1.38;
  color: var(--text-neutral-secondary);
}


.export-card-content .btn {
  margin-top: var(--space-md);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Card header improvements for better hierarchy */
.card .header h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 22px;
  line-height: 1.27;
}

.card .header h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 1.21;
}

/* MMP-627: standalone chrome titles beat .card .header h1 demotion */
.header.header--standalone h1 {
  font-size: 32px;
  font-weight: 700;
}

/* Improved card spacing on mobile */
@media (max-width: 768px) {
  .export-card-content {
    padding: var(--space-lg);
  }

  .export-description {
    font-size: 14px;
    margin-bottom: var(--space-lg);
  }

  .content-wrapper > .card + .card {
    margin-top: var(--space-md);
  }

  .export-loading-container {
    margin-top: var(--space-lg);
    padding: var(--space-lg) 0;
  }

  .export-error-container {
    margin-top: var(--space-lg);
    padding: var(--space-md);
  }
}

/* =========================================================================
   Configuration page
   ========================================================================= */

/* -- Auth link row anchors ------------------------------------------------ */

.auth-link-row a {
  color: var(--text-brand-primary);
  text-decoration: none;
  font-size: var(--font-size-body-sm);
}

/* -- Config page: card header (strip redundant box styles when nested in card) */

.card > .header {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-2xl);
}

/* MMP-627: reassert after .card > .header so standalone chrome loses trailing gap */
.header.header--standalone {
  margin-bottom: 0;
}

/* -- Config page: group headers ------------------------------------------ */

.config-group-header {
  margin-bottom: var(--space-lg);
}

.config-group-header h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-h4);
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.config-group-description {
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  line-height: 1.4;
}

/* -- Config page: settings group container ------------------------------- */

.config-settings-group {
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* -- Config page: divider ------------------------------------------------ */

.config-divider {
  border: none;
  margin: var(--space-4xl) 0 0 0;
}

/* -- Config page: setting rows ------------------------------------------- */

.config-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--bg-neutral-primary);
  font-family: var(--font-family-primary);
}

.config-settings-group .config-section + .config-section {
  border-top: 1px solid var(--border-neutral-secondary);
}

.config-section-text {
  flex: 1;
  min-width: 0;
}

.config-section-text h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.config-section-text p {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
  margin: 0;
  line-height: 1.5;
}

/* -- Config page: controls ----------------------------------------------- */

.config-section-control {
  flex-shrink: 0;
  min-width: 220px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.config-section-control .form-control {
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-sm);
  font-weight: 400;
  line-height: var(--line-height-normal);
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.config-section-control .form-control::placeholder {
  color: var(--text-neutral-tertiary);
  opacity: 1;
}

.config-section-control input.form-control:hover,
.config-section-control select.form-control:hover {
  border-color: var(--border-neutral-strong);
}

.config-section-control input.form-control:focus,
.config-section-control select.form-control:focus {
  outline: none;
  border-color: var(--border-brand-primary);
  box-shadow: 0 0 0 2px var(--border-brand-ring);
}

/* Global Settings: base / hourly / day hours — same width, right-aligned column (no inline USD suffix) */
.config-settings-group .cost-input-group.config-global-settings-numeric {
  justify-content: flex-end;
  width: 140px;
  flex-shrink: 0;
}

.config-settings-group .config-global-numeric-input {
  width: 100%;
  max-width: 140px;
  min-width: 140px;
  box-sizing: border-box;
}

.config-inline-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.config-unit-label {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

.config-compact-number-input {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  text-align: right;
}

.config-wide-control {
  flex: 0 1 420px;
  min-width: 360px;
}

.config-email-input {
  width: 100%;
  min-width: 360px;
  max-width: 420px;
}

.config-section-control:has(> select.form-control)::after {
  content: "";
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: var(--text-neutral-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
}

.config-section-control:has(> #timezoneSelect),
.config-section-control:has(> #systemTimezoneSelect) {
  flex: 0 0 245px;
  min-width: 245px;
}

.config-section-control.config-standard-select-control {
  flex: 0 0 245px;
  min-width: 245px;
}

.config-section-control select.form-control {
  width: 100%;
  appearance: none;
  padding-right: var(--space-3xl);
  cursor: pointer;
}

.config-select-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}

.config-select-wrap::after {
  content: "";
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: var(--text-neutral-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
}

.config-select-wrap select.form-control {
  width: 100%;
}

.config-schedule-control {
  flex: 0 1 540px;
  min-width: 500px;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.config-schedule-type-wrap {
  flex: 0 0 120px;
}

.config-schedule-detail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  min-width: 0;
}

.config-schedule-daily {
  flex: 1 1 340px;
}

.config-schedule-daily input[type="time"] {
  flex: 0 0 140px;
  width: 140px;
  min-width: 140px;
}

.config-timezone-wrap {
  flex: 0 0 245px;
  min-width: 245px;
}

.config-schedule-periodic {
  flex: 0 1 auto;
  white-space: nowrap;
}

.config-execution-window-control {
  flex: 0 1 660px;
  min-width: 620px;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}

.config-execution-window-fields {
  flex: 0 0 auto;
  flex-wrap: wrap;
  width: 100%;
}

.config-execution-window-helper {
  margin: 0;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.4;
  text-align: right;
}

.config-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.config-toggle-row .toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.config-hint {
  margin: var(--space-sm) 0 0 0;
  font-size: 13px;
  color: var(--text-neutral-secondary);
  line-height: 1.45;
}

/* MMP-528/532: caution shown only when the unverified-patients payload gate is ON
   and day-one source is ppi-pool, so both sides of the double-count combo are visible.
   Smaller than .config-section-text p (font-size-body-sm) per spec. */
.config-caution-note {
  margin: var(--space-sm) 0 0 0;
  font-size: var(--font-size-caption);
  color: var(--text-error-primary);
  line-height: 1.45;
}

/* MMP-761: disclosure note when RTF transmission to Nextmv is off */
.config-disclosure-note {
  margin: var(--space-sm) 0 0 0;
  font-size: var(--font-size-caption);
  color: var(--text-secondary, #57606a);
  line-height: 1.45;
}

.config-toggle-row > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.config-toggle-row .slider {
  border-radius: 20px;
}

.config-toggle-row .slider:before {
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
}

.config-toggle-row input:checked + .slider {
  background-color: var(--bg-brand-primary);
}

.config-toggle-row input:checked + .slider:before {
  transform: translateX(14px);
}

@media (max-width: 980px) {
  .config-section {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .config-section-control,
  .config-wide-control,
  .config-schedule-control,
  .config-execution-window-control {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
    justify-content: flex-start;
  }

  /* MMP-849: in a column a 245 px flex basis becomes height; these keep their width only above 980 px. */
  .config-section-control:has(> #timezoneSelect),
  .config-section-control:has(> #systemTimezoneSelect),
  .config-section-control.config-standard-select-control {
    flex: 0 0 auto;
    min-width: 0;
  }

  .config-email-input {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .config-schedule-control {
    align-items: stretch;
  }

  .config-execution-window-control {
    align-items: flex-start;
  }

  .config-execution-window-fields {
    justify-content: flex-start;
  }

  .config-execution-window-helper {
    text-align: left;
  }

  .config-schedule-type-wrap,
  .config-schedule-detail,
  .config-schedule-daily,
  .config-timezone-wrap {
    flex: 1 1 100%;
    min-width: 0;
  }

  .config-schedule-daily {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* -- Config page: status indicator --------------------------------------- */

#configStatus {
  margin-top: var(--space-sm);
}

/* -- Config page: lookup table ------------------------------------------- */

.lookup-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-lg);
}

.lookup-table th,
.lookup-table td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-snug);
}

.lookup-table tbody tr {
  border-bottom: 1px solid var(--border-neutral-subtle);
}

.lookup-table th {
  font-weight: 600;
  color: var(--text-neutral-secondary);
}

.lookup-table th.col-drag { width: 28px; }
.lookup-table th.col-default { width: 64px; text-align: center; }
.lookup-table th.col-active { width: 60px; text-align: center; }
.lookup-table th.col-del { width: 28px; }
.lookup-table td.col-default { text-align: center; }

.lookup-table tbody tr:hover { background: var(--bg-neutral-secondary); }

.lookup-table td.lookup-value {
  cursor: text;
  border-radius: var(--radius-sm);
}

.lookup-table td.lookup-value:hover { background: var(--bg-neutral-secondary); }
.lookup-table td.col-active { text-align: center; }

.lookup-table input[type="text"] {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-brand-primary);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--bg-neutral-primary);
  color: inherit;
  outline: none;
}

.lookup-empty {
  text-align: center;
  color: var(--text-neutral-secondary);
  padding: var(--space-2xl) 0;
}

.lookup-add-row td { border-bottom: none; }

.drag-handle {
  cursor: grab;
  color: var(--text-neutral-secondary);
  opacity: 0.4;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lookup-table tr:hover .drag-handle { opacity: 1; }
.data-list__row:hover .drag-handle:not(.drag-handle--disabled) { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
.drag-handle--disabled {
  cursor: not-allowed;
  opacity: 0.2;
}
.data-list__row.drag-over-top { box-shadow: inset 0 2px 0 0 var(--border-brand-primary); }
.data-list__row.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--border-brand-primary); }

.lookup-table .toggle {
  width: 36px;
  height: 20px;
}

.lookup-table .slider {
  border-radius: 20px;
}

.lookup-table .slider:before {
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
}

.lookup-table input:checked + .slider {
  background-color: var(--bg-brand-primary);
}

.lookup-table input:checked + .slider:before {
  transform: translateX(14px);
}
.lookup-table tr.dragging { opacity: 0.4; }
.lookup-table tr.drag-over-top { box-shadow: inset 0 2px 0 0 var(--border-brand-primary); }
.lookup-table tr.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--border-brand-primary); }

.lookup-table td.stipend-travel-cell,
.lookup-table td.stipend-stipend-cell {
  cursor: text;
  border-radius: var(--radius-sm);
}

.lookup-table td.stipend-travel-cell:hover,
.lookup-table td.stipend-stipend-cell:hover {
  background: var(--bg-neutral-secondary);
}

.lookup-table th.travel-stipend-amount-col,
.lookup-table td.travel-stipend-amount-col {
  min-width: 7.5rem;
  text-align: right;
}

.lookup-table .travel-stipend-scope-col,
.lookup-table .travel-stipend-scope-cell {
  min-width: 8.5rem;
}

.lookup-table .travel-stipend-scope-cell {
  color: var(--text-neutral-secondary);
  font-size: 12px;
}

.lookup-table .travel-stipend-scope-header td {
  padding-top: var(--space-md);
  padding-bottom: var(--space-xs);
  color: var(--text-neutral-primary);
  background: var(--bg-neutral-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Config lookup / stipend rows: delete control only when row is hovered or contains focus. */
.lookup-table tbody tr:not(:hover):not(:focus-within) .lookup-delete-btn,
.lookup-table tbody tr:not(:hover):not(:focus-within) .travel-stipend-delete-btn {
  opacity: 0;
  pointer-events: none;
}

/* MMP-849: touch has no hover, so row delete buttons stay visible. */
@media (hover: none) {
  .lookup-table tbody tr:not(:hover):not(:focus-within) .lookup-delete-btn,
  .lookup-table tbody tr:not(:hover):not(:focus-within) .travel-stipend-delete-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

.lookup-table .lookup-delete-btn,
.lookup-table .travel-stipend-delete-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  line-height: 1;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--text-neutral-secondary);
  transition: opacity 0.15s, color 0.15s;
}

.lookup-table tbody tr:hover .lookup-delete-btn,
.lookup-table tbody tr:focus-within .lookup-delete-btn,
.lookup-table tbody tr:hover .travel-stipend-delete-btn,
.lookup-table tbody tr:focus-within .travel-stipend-delete-btn {
  opacity: 1;
  pointer-events: auto;
}

.lookup-table .lookup-delete-btn:hover,
.lookup-table .travel-stipend-delete-btn:hover {
  color: var(--surface-negative);
}

/* Lookup Values: Visit Types default designation and soft-deactivate (inactive) row state. */
.lookup-default-radio {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--bg-brand-primary);
}

.lookup-default-tag,
.lookup-inactive-tag {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.lookup-default-tag {
  background: var(--bg-brand-primary);
  color: white;
}

.lookup-inactive-tag {
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-secondary);
}

.lookup-table tr.lookup-row-inactive {
  opacity: 0.6;
}

.lookup-table tr.lookup-row-inactive td.lookup-value {
  cursor: default;
}

.lookup-table tr.lookup-row-inactive td.lookup-value:hover {
  background: none;
}

.admin-ux-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.admin-ux-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.admin-ux-panel {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  background: var(--bg-neutral-primary);
}

.admin-ux-panel h3 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-body-lg);
}

.admin-ux-panel h4 {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.admin-ux-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.admin-ux-form-grid .form-control {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
}

.admin-ux-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.admin-boundary-bulk {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.admin-boundary-bulk-textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-body-sm);
  resize: vertical;
}

.admin-ux-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 260px;
  overflow: auto;
}

.admin-ux-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-body-sm);
}

.admin-ux-muted {
  display: block;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.4;
}

.admin-ux-badge {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-sm);
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
}

.admin-ux-badge.is-active {
  background: var(--bg-success-subtle, #e8f7ed);
  color: var(--text-success-primary, #107c41);
}

#ncesCoverageAuditSection {
  grid-column: 1 / -1;
}

#ncesCoverageAuditSection .nces-coverage-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-md);
}

.nces-coverage-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-md);
  font-size: var(--font-size-body-sm);
}

#ncesCoverageAuditSection .nces-coverage-table-wrapper .nces-coverage-table {
  margin-top: 0;
}

.nces-coverage-table th:not(:first-child),
.nces-coverage-table td:not(:first-child) {
  white-space: nowrap;
}

.nces-coverage-table th,
.nces-coverage-table td {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border-neutral-secondary);
}

.nces-coverage-table th {
  color: var(--text-neutral-secondary);
  font-weight: 600;
}

.nces-coverage-table .admin-ux-muted {
  display: inline;
  margin-left: var(--space-xs);
}

.admin-ux-empty,
.admin-ux-helper {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.5;
}

/* Travel Restriction Presets table: keep the delete affordance hidden until hover/focus. */
.travel-restriction-preset-table .travel-restriction-preset-delete-cell {
  text-align: right;
}

.travel-restriction-preset-table .travel-restriction-preset-delete-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  padding: 0;
  color: var(--text-neutral-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.travel-restriction-preset-table tbody tr:hover .travel-restriction-preset-delete-btn,
.travel-restriction-preset-table tbody tr:focus-within .travel-restriction-preset-delete-btn,
.travel-restriction-preset-table .travel-restriction-preset-delete-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.travel-restriction-preset-table .travel-restriction-preset-delete-btn:hover {
  color: var(--surface-negative);
  background: var(--bg-neutral-tertiary);
}

.travel-restriction-preset-table .travel-restriction-preset-delete-btn:focus-visible {
  outline: 2px solid var(--border-brand-primary);
  outline-offset: 2px;
}

.county-color-presets-section {
  margin-top: var(--space-2xl);
}

.config-color-preset-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-lg);
  table-layout: fixed;
}

.config-color-preset-table th,
.config-color-preset-table td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-snug);
  vertical-align: middle;
}

.config-color-preset-table thead th {
  font-weight: 600;
  color: var(--text-neutral-secondary);
}

.config-color-preset-table tbody tr {
  border-bottom: 1px solid var(--border-neutral-subtle);
}

.config-color-preset-table tbody tr:hover {
  background: var(--bg-neutral-secondary);
}

.config-color-preset-table .col-index {
  width: 40px;
}

.config-color-preset-table .col-name {
  width: 34%;
}

.config-color-preset-table .col-rgb {
  width: 58px;
  text-align: center;
}

.config-color-preset-table th.col-rgb,
.config-color-preset-table td.col-rgb {
  padding-left: 4px;
  padding-right: 4px;
}

.config-color-preset-table .col-hex {
  width: 110px;
  text-align: left;
}

.config-color-preset-table th.col-hex,
.config-color-preset-table td.col-hex {
  padding-left: 48px;
  padding-right: var(--space-xs);
}

.config-color-preset-table .col-active {
  width: 5.9406%;
  text-align: center;
}

.config-color-preset-table .col-swatch {
  width: 84px;
  text-align: center;
  padding-right: 20px;
}

.config-color-preset-table .col-tail {
  width: 3.7624%;
}

.config-color-preset-table td.col-active .config-toggle-row {
  justify-content: center;
}

.county-color-preset-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.county-color-preset-name {
  font-weight: 500;
  color: var(--text-neutral-primary);
  min-width: 0;
}

.county-color-preset-delete-btn {
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.county-color-preset-hex {
  font-family: var(--font-family-mono);
  color: var(--text-neutral-secondary);
}

.county-color-preset-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.county-color-preset-row-inactive {
  opacity: 0.62;
}

.county-color-preset-row-inactive .county-color-preset-swatch {
  box-shadow: none;
}

.county-color-preset-add-section {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px dashed var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-secondary);
}

.county-color-preset-add-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) minmax(140px, 1fr) auto repeat(3, minmax(80px, 0.7fr));
  gap: var(--space-md);
  align-items: end;
}

.county-color-preset-add-field {
  min-width: 0;
}

.county-color-preset-add-field label {
  margin-bottom: var(--space-sm);
}

.county-color-preset-add-field input {
  width: 100%;
}

.county-color-preset-add-separator {
  align-self: center;
  justify-self: center;
  margin-top: 22px;
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--text-neutral-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================================================
   Display Schedule page
   ========================================================================= */

#plotly-div {
  width: 100%;
  min-height: 600px;
  background: var(--bg-neutral-primary);
  border-radius: var(--radius-sm);
  margin-top: var(--space-lg);
}

.content-wrapper.expanded {
  max-width: none;
  overflow: visible;
}

.card.expanded {
  width: 1450px;
  max-width: 1450px;
  min-width: 1450px;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  margin: 0 auto;
}

body.min-width-constrained .app-container {
  overflow-x: auto;
  display: block;
}

.thermometer-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
}

.thermometer-skeleton-label {
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  font-weight: 500;
}

.thermometer-skeleton-bars {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.thermometer-skeleton-bar {
  flex: 1;
  height: 24px;
  background: linear-gradient(90deg, var(--bg-neutral-tertiary) 0%, var(--bg-neutral-secondary) 50%, var(--bg-neutral-tertiary) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s ease-in-out infinite;
  min-width: 20px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.thermometer-skeleton.hidden {
  display: none;
}

/* =========================================================================
   Schedule Calendar page
   ========================================================================= */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-neutral-secondary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: var(--space-lg);
}

.calendar-day-header {
  background: var(--bg-neutral-tertiary);
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  font-size: var(--font-size-caption);
  text-align: center;
}

.calendar-day-cell {
  min-height: 80px;
  background: var(--bg-neutral-primary);
  padding: var(--space-sm);
  font-size: var(--font-size-body-sm);
}

.calendar-day-cell.other-month {
  background: var(--bg-neutral-tertiary);
  color: var(--text-neutral-secondary);
}

.calendar-day-cell .day-num {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
}

.calendar-day-cell .visit-count {
  display: block;
  color: var(--text-brand-primary);
  font-size: var(--font-size-caption);
  margin-top: 8px;
}

.calendar-day-cell .patients-count {
  display: block;
  margin-top: 2px;
  color: var(--text-brand-primary);
  font-size: var(--font-size-caption);
}

.calendar-day-cell .capacity-count {
  display: block;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-meta);
  margin-top: 4px;
}

.calendar-hovercard {
  position: fixed;
  z-index: 1000;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-body-sm);
  max-width: 280px;
  max-height: 200px;
  overflow-y: auto;
}

.calendar-hovercard-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-neutral-primary);
}

.calendar-hovercard-school {
  display: block;
  padding: 2px 0;
  color: var(--text-neutral-secondary);
}

.calendar-hovercard-section {
  display: block;
  height: 10px;
}

.calendar-hovercard-expected {
  display: block;
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
}

.calendar-hover-target {
  cursor: help;
}

.calendar-hovercard.hidden {
  display: none;
}

/* MMP-528/530: shared P/R/UV "expected total patients" tooltip (staffing chip
   + calendar hovercard). Hidden at rest via the .hidden utility (display:none)
   so it can never occlude adjacent content while closed. */
.patient-count-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-body-sm);
  max-width: 260px;
}

.patient-count-tooltip.hidden {
  display: none;
}

.patient-count-tooltip-line1 {
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.patient-count-tooltip-line2 {
  margin-top: 4px;
  color: var(--text-neutral-secondary);
}

/* MMP-572/574: non-additive note - P/R/UV are not a student headcount.
   MMP-683: FV line 4 reuses the same separator/typography as line 3. */
.patient-count-tooltip-line3,
.patient-count-tooltip-line4 {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-neutral-secondary);
  color: var(--text-neutral-tertiary);
  font-size: var(--font-size-body-xs);
}

.patient-count-tooltip-trigger {
  cursor: help;
}

body.page-schedule-calendar .calendar-controls.flexura-toolbar-grid {
  grid-template-columns:
    minmax(180px, 1.2fr)
    minmax(180px, 1.4fr)
    auto;
}

body.page-schedule-calendar .calendar-toolbar-spacer {
  min-width: 0;
}

body.page-schedule-calendar .calendar-view-toggle-wrap .view-toggle {
  width: 100%;
  max-width: max-content;
}

body.page-schedule-calendar .calendar-month-field {
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
}

body.page-schedule-calendar .calendar-month-field select#monthSelect,
body.page-schedule-calendar .calendar-month-range-label {
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  line-height: var(--line-height-normal);
  padding: 10px var(--space-lg);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--space-sm);
  background: var(--bg-neutral-primary);
}

body.page-schedule-calendar .calendar-month-stepper {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

body.page-schedule-calendar .calendar-month-center {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

body.page-schedule-calendar .calendar-month-center label {
  margin-bottom: var(--space-sm);
}

body.page-schedule-calendar .calendar-month-value-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

body.page-schedule-calendar .calendar-month-range-label {
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-schedule-calendar .calendar-month-range-label:not([hidden]) {
  display: flex;
}

body.page-schedule-calendar .calendar-chevron-btn {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--space-sm);
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-secondary);
  transition: border-color 0.2s, background-color 0.2s;
}

body.page-schedule-calendar .calendar-chevron-btn:hover {
  background: var(--bg-neutral-hover);
}

body.page-schedule-calendar .calendar-chevron-btn:focus {
  outline: none;
}

body.page-schedule-calendar .calendar-chevron-btn:focus-visible {
  border-color: var(--border-brand-primary);
}

body.page-schedule-calendar .calendar-controls .view-toggle-btn {
  min-height: 44px;
  box-sizing: border-box;
}

body.page-schedule-calendar .calendar-controls > .capacity-summary-bar {
  grid-column: 1 / -1;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-top: 0;
}

.capacity-summary-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  background: var(--bg-neutral-tertiary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.capacity-summary-bar .summary-period {
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.capacity-summary-bar .summary-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.view-toggle {
  display: inline-flex;
  gap: 0;
  flex: 0 0 auto;
}

.view-toggle-btn {
  border-radius: 0;
  font-size: var(--font-size-body-sm);
  padding: 4px 10px;
  flex: 1 1 0;
  min-width: 6.25rem;
  max-width: 12rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.view-toggle-btn:first-child {
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.view-toggle-btn:last-child {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.view-toggle-btn.active {
  background: var(--bg-brand-primary);
  color: var(--bg-neutral-primary);
  border-color: var(--border-brand-primary);
}

.calendar-grid.two-week .calendar-day-cell {
  min-height: 120px;
  font-size: var(--font-size-caption);
}

.calendar-grid.two-week .calendar-day-cell .day-num {
  margin-bottom: 8px;
}

body.page-schedule-calendar .calendar-grid.two-week .visit-summary {
  width: 100%;
  box-sizing: border-box;
}

/* Available Dentists card (Schedule Calendar) */
.available-dentists-card {
  margin-top: var(--space-lg);
}

.available-dentists-controls {
  --control-height: 44px;
}

body.page-schedule-calendar .available-dentists-controls.flexura-toolbar-grid {
  grid-template-columns:
    minmax(180px, 1.2fr)
    minmax(180px, 1.4fr)
    auto
    auto;
}

/* MMP-849: on phones the toolbar stacks and the seven day columns may shrink below their content. */
@media (max-width: 600px) {
  body.page-schedule-calendar .available-dentists-controls.flexura-toolbar-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-schedule-calendar .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  body.page-schedule-calendar .calendar-day-header,
  body.page-schedule-calendar .calendar-day-cell {
    min-width: 0;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    overflow-wrap: anywhere;
  }
}

body.page-schedule-calendar .available-dentists-controls .calendar-month-range-label {
  display: flex;
}

body.page-schedule-calendar .available-dentists-controls .view-toggle-btn {
  min-height: 44px;
  box-sizing: border-box;
}

.available-dentists-controls .form-group {
  margin-bottom: 0;
}

.available-dentists-export-btn {
  height: var(--control-height);
  min-height: var(--control-height);
  width: 70px;
  padding: 0 var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-neutral-primary);
  box-sizing: border-box;
}

.available-dentists-controls .form-group.available-dentists-export-wrap .btn {
  width: 70px;
  min-width: 70px;
  padding: 0 var(--space-sm);
}

#availableDentistsStatus {
  margin-top: var(--space-md);
}

.available-dentist-entry {
  margin-top: var(--space-xs);
  font-size: var(--font-size-meta);
  line-height: 1.3;
}

.available-dentist-name {
  display: block;
  font-weight: 600;
}

.available-dentist-name--colored {
  color: var(--dds-color);
}

.available-dentist-detail {
  display: block;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-meta);
  margin-top: 2px;
}

.available-dentists-disabled {
  opacity: 0.65;
}

.available-dentists-card.available-dentists-disabled .calendar-chevron-btn,
.available-dentists-card.available-dentists-disabled .view-toggle-btn,
.available-dentists-card.available-dentists-disabled .available-dentists-export-btn {
  cursor: not-allowed;
}

.calendar-day-cell .capacity-block {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-neutral-secondary);
}

.calendar-day-cell .capacity-names {
  margin-top: 6px;
  font-size: var(--font-size-meta);
  color: var(--text-neutral-secondary);
}

.calendar-day-cell .capacity-names .dds-list,
.calendar-day-cell .capacity-names .tl-list {
  margin-top: 4px;
}

.calendar-day-cell .capacity-names .label {
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.calendar-day-cell .visit-summaries {
  margin-top: 6px;
  font-size: var(--font-size-meta);
  color: var(--text-neutral-secondary);
}

.calendar-day-cell .visit-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid var(--border-neutral-secondary);
}

.calendar-day-cell .visit-summary .visit-summary-text {
  flex: 1;
  min-width: 0;
}

.calendar-day-cell .visit-summary:last-child {
  border-bottom: none;
}

.readiness-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--font-size-meta);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 6px;
  border: 1px solid transparent;
}

.readiness-green {
  color: var(--text-success-primary);
  background: var(--bg-success-subtle);
  border-color: var(--border-success-tint);
  min-width: 10px;
  min-height: 10px;
  padding: 0;
}

.readiness-yellow {
  color: var(--text-warning-primary);
  background: var(--bg-warning-subtle);
  border-color: var(--border-warning-tint);
  min-width: 10px;
  min-height: 10px;
  padding: 0;
}

.readiness-red {
  color: var(--text-error-primary);
  background: var(--bg-error-subtle);
  border-color: var(--border-error-tint);
  min-width: 10px;
  min-height: 10px;
  padding: 0;
}

/* =========================================================================
   Staffing Schedule page
   ========================================================================= */

.staffing-controls {
  --control-height: 44px;
}

.staffing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-md);
  margin-top: 0;
  margin-bottom: var(--space-md);
  width: 100%;
  box-sizing: border-box;
}

.staffing-toolbar-date {
  flex: 1 1 auto;
  min-width: 240px;
}

.staffing-toolbar .staffing-toolbar-view {
  margin-left: auto;
}

.staffing-status-block {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.staffing-export-btn {
  height: var(--control-height);
  min-height: var(--control-height);
  width: 70px;
  padding: 0 var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-neutral-primary);
  box-sizing: border-box;
}

.staffing-controls .form-group.staffing-export-wrap .btn {
  width: 70px;
  min-width: 70px;
  padding: 0 var(--space-sm);
}

.staffing-controls .form-group {
  margin-bottom: 0;
}

.staffing-controls input[type="date"],
.staffing-controls select {
  height: var(--control-height);
  min-height: var(--control-height);
  min-width: 100%;
  box-sizing: border-box;
}

.staffing-controls input[type="date"] {
  min-width: 165px;
  box-sizing: border-box;
}

/* --- Date Picker --- */

.staffing-date-picker-wrap {
  position: relative;
}

.staffing-date-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.staffing-date-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--control-height, 44px);
  min-height: var(--control-height, 44px);
  width: var(--control-height, 44px);
  padding: 0;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-secondary);
  cursor: pointer;
  box-sizing: border-box;
}

.staffing-date-step-btn:hover {
  border-color: var(--text-neutral-tertiary);
  color: var(--text-neutral-primary);
}

.staffing-date-step-btn:focus-visible {
  outline: 2px solid var(--border-brand-primary, var(--text-neutral-primary));
  outline-offset: 1px;
}

.staffing-date-picker-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--control-height, 44px);
  min-height: var(--control-height, 44px);
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--space-sm);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  background: var(--bg-neutral-primary);
  color: var(--text-neutral-primary);
  font-size: var(--font-size-body-sm);
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
}

.staffing-date-picker-btn:hover {
  border-color: var(--text-neutral-tertiary);
}

.staffing-date-picker-btn svg {
  flex-shrink: 0;
  color: var(--text-neutral-tertiary);
}

/* Date picker: match the shared market control sizing */
body.page-staffing-schedule .staffing-controls .staffing-date-picker-btn {
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  line-height: var(--line-height-normal);
  padding: 10px var(--space-lg);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--space-sm);
  justify-content: space-between;
}

body.page-staffing-schedule .staffing-controls .staffing-date-picker-btn:hover {
  border-color: var(--border-neutral-primary);
  background: var(--bg-neutral-primary);
}

body.page-staffing-schedule .staffing-controls .staffing-date-picker-btn:focus {
  outline: none;
}

body.page-staffing-schedule .staffing-controls .staffing-date-picker-btn:focus-visible {
  border-color: var(--border-brand-primary);
}

body.page-staffing-schedule .staffing-controls .staffing-date-picker-btn svg {
  color: var(--text-neutral-secondary);
}

body.page-staffing-schedule .staffing-controls #datePickerLabel {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.staffing-date-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  width: 280px;
  padding: var(--space-sm);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.cal-nav-title {
  font-weight: 600;
  font-size: var(--font-size-body-sm);
}

.cal-nav button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  color: var(--text-neutral-primary);
  font-size: 1rem;
  line-height: 1;
}

.cal-nav button:hover {
  background: var(--bg-neutral-secondary);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--font-size-caption);
  color: var(--text-neutral-tertiary);
  margin-bottom: 2px;
  font-weight: 600;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-cell {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 0;
  font-size: var(--font-size-body-sm);
  font-family: inherit;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  color: var(--text-neutral-primary);
  box-sizing: border-box;
}

.cal-cell:hover {
  background: var(--bg-neutral-secondary);
}

.cal-cell.other-month {
  color: var(--text-neutral-tertiary);
  opacity: 0.5;
}

.cal-cell.today {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cal-cell.past-date {
  opacity: 0.4;
}

td.past-date,
th.past-date {
  opacity: 0.55;
  background: var(--bg-neutral-tertiary);
}

td.past-date .assignment-row {
  cursor: default;
}

.day-card.past-date .btn {
  opacity: 0.35;
  pointer-events: none;
}

.day-card.past-date .assignment-row {
  cursor: default;
}

.cal-cell.selected {
  background: var(--bg-accent-primary, #0070d2);
  color: #fff;
  font-weight: 600;
}

.cal-cell.week-hover {
  background: var(--bg-accent-primary, #0070d2);
  color: #fff;
  opacity: 0.7;
  border-radius: 0;
}

.cal-cell.week-hover:first-child,
.cal-cell.week-hover.week-start {
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.cal-cell.week-hover:last-child,
.cal-cell.week-hover.week-end {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.cal-cell.selected.week-hover {
  opacity: 1;
}

.staffing-optimizer-btn {
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-neutral-primary);
  box-sizing: border-box;
}

.staffing-controls .form-group.staffing-optimizer-wrap .btn {
  width: 100%;
  min-width: var(--control-height);
}

.staffing-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.staffing-toolbar {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.optimizer-latest-run-rail {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) 0;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--text-neutral-secondary);
}

.optimizer-latest-run-rail[hidden] {
  display: none;
}

.optimizer-rail__state,
.optimizer-rail__time,
.optimizer-rail__warning-text {
  display: inline;
}

.optimizer-rail__time.optimizer-rail__has-value::before,
.optimizer-rail__warning-text.optimizer-rail__has-value::before,
.optimizer-rail__warnings-link.optimizer-rail__has-value::before {
  content: "\00b7";
  margin: 0 0.4em;
}

.optimizer-latest-run-rail--failed .optimizer-rail__state {
  color: var(--text-warning-primary);
  font-weight: 600;
}

.optimizer-rail__warnings-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 var(--space-xs);
  margin: 0;
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.optimizer-rail__warnings-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

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

.optimizer-result-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--drawer-z, 1100) - 1);
  transition: opacity 0.2s ease;
}

.optimizer-result-backdrop[hidden] {
  display: none;
}

.drawer.drawer--optimizer-result {
  width: min(480px, 40vw);
  z-index: var(--drawer-z, 1100);
  transition: transform 0.2s ease;
  overflow: hidden;
}

.drawer.drawer--optimizer-result .drawer__close {
  min-width: 44px;
  min-height: 44px;
}

.drawer.drawer--optimizer-result .drawer__close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.optimizer-result__header {
  flex-shrink: 0;
}

.optimizer-result__summary {
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-sm, 8px) var(--space-lg, 16px);
  font-size: var(--font-size-body-sm, 14px);
  color: var(--text-neutral-secondary, #666);
}

.optimizer-result__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-sm, 8px) var(--space-lg, 16px);
}

.optimizer-result__error,
.optimizer-result__download-error {
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-sm, 8px) var(--space-lg, 16px);
  color: var(--text-warning-primary);
  border-left: 3px solid var(--border-warning-primary);
}

.optimizer-result__state-label {
  font-weight: 600;
}

.optimizer-result__state-label::after {
  content: ":";
}

.optimizer-result__error[hidden],
.optimizer-result__download-error[hidden] {
  display: none;
}

.optimizer-result__footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
  justify-content: flex-end;
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-top: 1px solid var(--border-neutral-secondary, #e5e5e5);
  background: var(--bg-neutral-secondary, #fafafa);
}

.optimizer-result__footer .btn {
  min-width: 44px;
  min-height: 44px;
}

.optimizer-result__footer [hidden] {
  display: none !important;
}

.optimizer-result__school-group {
  margin-bottom: var(--space-lg, 16px);
}

.optimizer-result__school-heading {
  margin: 0 0 var(--space-sm, 8px) 0;
  font-size: var(--font-size-body-sm, 14px);
  font-weight: 600;
}

.optimizer-result__warning {
  margin: 0 0 var(--space-md, 12px) 0;
}

.optimizer-result__warning-message {
  margin: 0 0 var(--space-xs, 4px) 0;
}

.optimizer-result__warning-meta {
  margin: 0;
  font-size: var(--font-size-caption, 13px);
  color: var(--text-neutral-secondary, #666);
}

.optimizer-result__warning-meta div {
  display: flex;
  gap: var(--space-xs, 4px);
}

.optimizer-result__warning-meta dt {
  font-weight: 600;
}

.optimizer-result__warning-meta dt::after {
  content: ":";
}

.optimizer-result__empty {
  margin: 0;
}

@media (max-width: 1000px) {
  .drawer.drawer--optimizer-result {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer.drawer--optimizer-result,
  .optimizer-result-backdrop {
    transition: none;
  }
}

.staffing-main {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  position: relative;
}

.staffing-side {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
}

.staffing-main,
.staffing-side {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background: var(--bg-neutral-primary);
}

.staffing-view-toggle {
  display: flex;
  gap: 0;
  height: var(--control-height);
  align-items: stretch;
}

.staffing-view-btn {
  border-radius: 0;
  font-size: var(--font-size-body-sm);
  padding: 0 var(--space-lg);
  height: var(--control-height);
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.staffing-view-btn:first-child {
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.staffing-view-btn:last-child {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.staffing-view-btn.active {
  background: var(--bg-brand-primary);
  color: var(--bg-neutral-primary);
  border-color: var(--border-brand-primary);
}

.week-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--font-size-caption);
  margin-top: var(--space-sm);
}

.week-grid thead th:first-child,
.week-grid tbody th:first-child {
  width: 150px;
}

.week-grid th,
.week-grid td {
  border: 1px solid var(--border-neutral-secondary);
  padding: 6px;
  vertical-align: top;
  text-align: left;
}

.week-grid th {
  background: var(--bg-neutral-tertiary);
  font-weight: 600;
}

.visit-chip {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-xs);
  padding: 4px;
  margin-bottom: 4px;
  background: var(--bg-neutral-secondary);
}

.visit-sequence-label {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--text-neutral-secondary);
  margin-bottom: 2px;
}

.visit-chip-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
}

.visit-chip-stack .visit-chip {
  margin-bottom: 0;
}

.visit-chip-meta {
  margin-bottom: 2px;
}

.visit-provenance-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 4px);
  margin-bottom: 4px;
}

.provenance-badge {
  display: inline-block;
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.2;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-neutral-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-secondary);
}

.provenance-badge--manual,
.provenance-badge--aux,
.provenance-badge--daysheet {
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-secondary);
  border-color: var(--border-neutral-secondary);
  font-weight: 500;
}

.provenance-badge--secondary {
  color: var(--text-error-primary);
  background: var(--bg-error-tint, rgba(240, 67, 81, 0.08));
  border-color: var(--border-error-tint);
  font-weight: 600;
}

.provenance-badge--daysheet {
  margin-left: auto;
}

/* MMP-168/MMP-524: RV visit badge - same provenance-badge grammar (spec decision 3). */
.provenance-badge--rv {
  color: var(--text-brand-primary);
  background: var(--bg-brand-subtle);
  border-color: var(--border-brand-primary);
  font-weight: 600;
}

button.provenance-badge--attendance.attendance-marker {
  font: inherit;
  cursor: pointer;
  color: var(--text-neutral-primary);
  background: var(--bg-neutral-secondary);
  border-color: var(--border-neutral-secondary);
  font-weight: 600;
}

/* MMP-122: flag visits missing a DDS and/or TL */
.staffing-gap-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 4px);
  margin-bottom: 4px;
}

.staffing-gap-badge {
  display: inline-block;
  font-size: var(--font-size-caption);
  font-weight: 600;
  line-height: 1.2;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-error-tint);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-error-primary);
  background: var(--bg-error-tint, rgba(240, 67, 81, 0.08));
}

.assignment-row--unstaffed {
  color: var(--text-warning-primary);
}

.visit-chip-context-menu {
  position: fixed;
  left: var(--ctx-menu-left, 0);
  top: var(--ctx-menu-top, 0);
  z-index: 9000;
  min-width: 150px;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: var(--space-xs) 0;
  display: flex;
  flex-direction: column;
}

.visit-chip-context-menu.hidden {
  display: none !important;
}

.context-menu-item {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-body);
  color: var(--text-neutral-primary);
  cursor: pointer;
  text-align: left;
}

.context-menu-item:hover {
  background: var(--bg-neutral-secondary);
}

.context-menu-item:disabled {
  color: var(--text-neutral-tertiary);
  cursor: default;
}

.context-menu-item:disabled:hover {
  background: transparent;
}

.context-menu-item--checked {
  font-weight: 600;
  color: var(--text-brand-primary);
}

.context-menu-item-danger {
  color: var(--surface-negative);
}

.context-menu-item-danger:hover {
  background: color-mix(in srgb, var(--surface-negative) 8%, var(--bg-neutral-primary));
}

.context-menu-submenu {
  position: relative;
  display: flex;
  flex-direction: column;
}

.context-menu-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.context-menu-submenu-chevron,
.context-menu-submenu-trigger:not(:has(.context-menu-submenu-chevron))::after {
  font-size: 0.875em;
  line-height: 1;
  opacity: 0.65;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.context-menu-submenu-trigger:not(:has(.context-menu-submenu-chevron))::after {
  content: '\25B8';
}

.context-menu-submenu-panel {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: var(--space-xs) 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.context-menu-submenu-panel.hidden {
  display: none !important;
}

.context-menu-submenu-nested .context-menu-submenu-panel {
  max-height: 240px;
  overflow-y: auto;
}

.context-menu-sent-loading,
.context-menu-sent-empty {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-body);
  color: var(--text-neutral-tertiary);
  cursor: default;
}

.context-menu-item.context-menu-open {
  background: var(--bg-neutral-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .context-menu-submenu:hover > .context-menu-submenu-panel:not(.hidden),
  .context-menu-submenu.context-menu-open > .context-menu-submenu-panel:not(.hidden) {
    display: flex;
  }
}

.modal-content--pdf {
  padding: 0;
  min-height: 70vh;
}

.day-sheet-archived-view {
  width: 100%;
  height: 70vh;
  background: var(--bg-neutral-secondary);
}

.day-sheet-pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.visit-chip-title {
  font-weight: 600;
  margin-bottom: 3px;
}

.visit-chip-school {
  font-weight: 600;
  font-size: var(--font-size-meta);
  margin-bottom: 2px;
}

.school-district-line {
  display: block;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-meta);
  font-weight: 500;
  line-height: 1.2;
}

.assignments-line {
  color: var(--text-neutral-secondary);
}

.patient-counts {
  font-size: var(--font-size-caption);
  color: var(--text-accent-primary);
  font-weight: 600;
  padding: 2px 0;
  cursor: default;
}

.day-card {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  background: var(--bg-neutral-secondary);
}

.day-card-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.assignment-row {
  font-size: var(--font-size-caption);
  margin-bottom: 2px;
}

.day-team-lead-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.day-team-lead-group {
  min-width: 0;
}

.day-team-lead-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-body);
  font-weight: 600;
}

.day-team-lead-cards {
  min-width: 0;
}

/* MMP-137: partnered visit continuity collapse (Week By School + Day View). */
.partnered-school-names {
  display: flex;
  flex-wrap: wrap;
}

.partnered-school-name-sep {
  color: var(--text-neutral-secondary);
}

.visit-chip--partnered {
  border-color: var(--border-brand-primary, var(--border-neutral-secondary));
}

.visit-chip--partner-conflict {
  border-color: var(--border-error-tint);
  background: var(--bg-error-tint, rgba(240, 67, 81, 0.05));
}

.partnered-visit-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.partnered-visit-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
  max-width: 100%;
}

.partnered-visit-meta-school {
  font-weight: 600;
  overflow-wrap: break-word;
  min-width: 0;
}

/* MMP-821: a partnered visit that stays in its own Week By School row (Locked decision 20). */
.partnered-with-meta {
  margin-top: var(--space-xs);
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
  overflow-wrap: break-word;
  min-width: 0;
}

.partnered-staff-conflict {
  font-weight: 600;
  color: var(--text-error-primary);
  font-size: var(--font-size-caption);
  margin-bottom: 2px;
}

.partnered-conflict-helper {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
  margin-bottom: 6px;
}

.partnered-conflict-school {
  border-top: 1px solid var(--border-neutral-secondary);
  padding-top: 4px;
  margin-top: 4px;
}

.partnered-conflict-school-name {
  font-weight: 600;
  font-size: var(--font-size-meta);
  margin-bottom: 2px;
}

.day-card--partnered {
  border-color: var(--border-brand-primary, var(--border-neutral-secondary));
}

.day-card-body {
  margin-top: 6px;
}

.unscheduled-list {
  margin-top: var(--space-sm);
  max-height: calc(100vh - 280px);
  overflow: auto;
}

.unscheduled-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-neutral-secondary);
  padding: 6px 0;
  font-size: var(--font-size-caption);
}

.unscheduled-item-capped {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.badge-capped {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: var(--fill-neutral-tertiary, #e2e8f0);
  color: var(--text-neutral-secondary, #64748b);
  margin-right: 6px;
  white-space: nowrap;
}

.staffing-status-loading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  text-align: left;
}

.staffing-status-loading.hidden {
  display: none !important;
}

.staffing-status-spinner {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-neutral-secondary);
  border-top-color: var(--border-brand-primary);
  border-radius: 50%;
  animation: staffing-spin 0.7s linear infinite;
}

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

.staffing-status-loading-copy {
  flex: 1;
  min-width: 0;
}

.staffing-status-loading-title {
  display: block;
  font-size: var(--font-size-body);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--text-neutral-primary);
}

.staffing-status-loading-detail {
  display: block;
  font-size: var(--font-size-body-sm);
  line-height: 1.45;
  color: var(--text-neutral-secondary);
}

.staffing-status-loading-elapsed {
  display: block;
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--text-neutral-secondary);
  margin-top: 6px;
}

/* MMP-583 (Chunk 2): single cold-open overlay, anchored to the stable
   .staffing-main panel (position: relative set on the rule above) rather than
   #weekGridWrap / #dayCardsWrap themselves — those get replaced wholesale on
   every render, so anchoring there would destroy the overlay node the instant
   data paints. .staffing-main already carries non-loading-state siblings
   (status block, view headers), so it never collapses to zero height while
   the grid is empty. */
.staffing-view-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--bg-neutral-primary);
  z-index: 5;
  border-radius: var(--radius-sm);
}

.staffing-view-loading.hidden {
  display: none !important;
}

.staffing-view-loading-title {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-neutral-primary);
}

.status.staffing-status-longrun {
  text-align: left;
  max-height: none;
}

.panel-title {
  margin: 0;
}

.payload-preview {
  font-size: var(--font-size-caption);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: var(--space-sm);
  background: var(--bg-neutral-tertiary);
  border-radius: var(--radius-xs);
}

.day-sheet-content {
  min-height: 300px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-md);
}

.day-sheet-placeholder {
  color: var(--text-secondary);
  text-align: center;
  margin: var(--space-xl) 0;
  padding: var(--space-xl);
}

.day-sheet-preview {
  font-family: var(--font-family-base);
  line-height: 1.5;
}

.day-sheet-preview h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-xs);
  color: var(--text-primary);
}

.day-sheet-preview h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-xs);
  color: var(--text-primary);
}

.day-sheet-preview p {
  margin: var(--space-xs) 0;
  color: var(--text-primary);
}

.day-sheet-reminder {
  background: var(--bg-neutral-secondary);
  border-left: 4px solid var(--text-secondary);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  font-style: italic;
  color: var(--text-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.day-sheet-providers {
  margin: var(--space-md) 0;
}

.day-sheet-provider {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-light);
}

.day-sheet-provider:last-child {
  border-bottom: none;
}

.day-sheet-school {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.day-sheet-meta {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Loading spinner for day sheet */
.day-sheet-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-light);
  border-top: 4px solid var(--accent-primary);
  border-radius: 50%;
  animation: day-sheet-spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

@keyframes day-sheet-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error state for day sheet */
.day-sheet-error {
  text-align: center;
  padding: var(--space-xl);
  color: var(--error);
}

.day-sheet-error-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.day-sheet-error-message {
  font-size: 1rem;
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

.provider-credential {
  color: var(--text-secondary);
  margin-left: var(--space-xs);
}

.team-lead-badge {
  background: var(--accent-primary);
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  margin-left: var(--space-xs);
}

.market-badge {
  display: inline-block;
  background: var(--bg-neutral-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.visit-date {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.school-address,
.school-location,
.school-county,
.school-district {
  margin: var(--space-xs) 0;
  color: var(--text-secondary);
}

/* Email Sending Modal Styles */
.email-sending-content {
  text-align: center;
  padding: var(--space-xl);
}

.email-sending-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-light);
  border-top: 4px solid var(--accent-primary);
  border-radius: 50%;
  animation: email-spin 1s linear infinite;
  margin: 0 auto var(--space-lg);
}

@keyframes email-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.email-sending-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-md) 0;
}

.email-sending-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: var(--space-md);
  line-height: 1.5;
}

.email-sending-details {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  text-align: left;
}

.email-sending-details.hidden {
  display: none;
}

.email-sending-success {
  color: var(--success);
}

.email-sending-error {
  color: var(--error);
}

.modal-container-wide {
  max-width: 800px;
}

body.page-staffing-schedule .content-wrapper,
body.page-schools .content-wrapper,
body.page-schedule-calendar .content-wrapper,
body.page-visit-schedule .content-wrapper {
  max-width: 1600px;
}

body.page-staffing-schedule .card,
body.page-schools .card,
body.page-schedule-calendar .card,
body.page-visit-schedule .card {
  max-width: none;
  width: 100%;
}

body.page-staffing-schedule .staffing-layout {
  grid-template-columns: 4fr 1fr;
  margin-top: 0;
}

/* =========================================================================
   Schools page
   ========================================================================= */

/* Schools toolbar is district + search + Add (no market track). District names
   (e.g. "San Joaquin County Office Of Education") need ~2× the shared 192px
   first-track width; search keeps a flexible middle; Add stays auto. */
body.page-schools .schools-controls.flexura-toolbar-grid {
  grid-template-columns:
    minmax(360px, 2.4fr)
    minmax(180px, 1.4fr)
    auto;
}

body.page-schools .schools-controls select,
body.page-schools .schools-controls input[type="text"] {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  width: 100%;
}

body.page-schools .schools-controls select {
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  line-height: var(--line-height-normal);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* MMP-347: District select while /api/schools/districts is loading - class-based
   loading/disabled state so the control never presents a settled "All Districts"
   choice while the real district list is still in flight. */
body.page-schools .schools-controls select.district-select-loading {
  color: var(--text-neutral-tertiary);
  cursor: wait;
  opacity: 0.7;
}

body.page-schools .schools-add-wrap .btn {
  height: 44px;
  min-height: 44px;
  white-space: nowrap;
}

body.page-schools .schools-table {
  width: 100%;
  /* MMP-849: below this width the fixed columns overlap; the wrapper scrolls instead. */
  min-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-sm, 14px);
}

body.page-schools .schools-table thead th {
  text-align: left;
  font-size: 12px;
  color: var(--text-neutral-secondary);
  font-weight: 600;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
  background: var(--bg-neutral-secondary);
  white-space: nowrap;
}

body.page-schools .schools-table thead th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

body.page-schools .schools-table thead th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

body.page-schools .schools-table tbody td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
  vertical-align: middle;
}

body.page-schools .schools-table tbody tr:last-child td {
  border-bottom: none;
}

body.page-schools .schools-table tbody tr:nth-child(even) {
  background: var(--bg-neutral-secondary);
}

body.page-schools .schools-table tbody tr:hover,
body.page-schools .schools-table tbody tr:focus-within {
  background: var(--bg-brand-ghost-subtle, rgba(0, 112, 210, 0.04));
}

body.page-schools .col-name { width: 22%; }
body.page-schools .col-district { width: 15%; }
body.page-schools .col-county { width: 15%; }
body.page-schools .col-nces { width: 13%; }
body.page-schools .col-grade { width: 9%; }
body.page-schools .col-visit { width: 9%; }
body.page-schools .col-chairs { width: 7%; }

body.page-schools .school-name-cell {
  font-weight: 600;
  color: var(--text-neutral-primary);
}

body.page-schools .school-name-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

body.page-schools .school-name-link::after {
  content: "→";
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  color: var(--text-brand-primary);
  font-weight: 600;
}

body.page-schools .schools-table tbody tr:hover .school-name-link::after,
body.page-schools .schools-table tbody tr:focus-within .school-name-link::after,
body.page-schools .school-name-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

body.page-schools .school-name-link:focus-visible {
  outline: 2px solid var(--border-brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

body.page-schools .btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-xs);
}

body.page-schools .schools-status {
  display: none;
  margin-top: var(--space-md);
}

body.page-schools .schools-table-wrap {
  margin-top: var(--space-md);
  overflow-x: auto;
}

body.page-schools .details-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
}

body.page-schools .details-section-header .details-section-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* MMP-539: Act ID input + Fetch from Act button, used on both create and detail forms. */
body.page-schools .detail-input-with-action {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

body.page-schools .detail-input-with-action .detail-input {
  flex: 1 1 auto;
  min-width: 0;
}

body.page-schools .fetch-act-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  width: auto !important;
}

/* MMP-836: on touch the Act ID input is 44 px; the paired button matches it. */
@media (pointer: coarse) {
  body.page-schools .detail-input-with-action .fetch-act-btn {
    min-height: 44px;
  }
}

body.page-schools .school-act-id-item {
  margin-bottom: var(--space-lg);
}

body.page-schools .school-detail-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-neutral-secondary);
}

body.page-schools .school-detail-form-actions-right {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-left: auto;
}

body.page-schools .btn-danger {
  background: var(--surface-negative, #c0392b);
  color: #fff;
}

body.page-schools .schools-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border-neutral-subtle, #e5e7eb);
  font-size: var(--font-size-meta, 0.8125rem);
}

body.page-schools .pagination-info {
  color: var(--text-neutral-secondary, #6b7280);
}

body.page-schools .pagination-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
}

body.page-schools .pagination-current {
  padding: 0 var(--space-sm);
  color: var(--text-neutral-secondary, #6b7280);
}

body.page-schools .pagination-buttons button {
  min-width: 32px;
  text-align: center;
}

body.page-schools .pagination-buttons button:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 768px) {
  body.page-schools .schools-controls.flexura-toolbar-grid,
  body.page-staffing-schedule .staffing-controls.flexura-toolbar-grid,
  body.page-schedule-calendar .calendar-controls.flexura-toolbar-grid {
    grid-template-columns: 1fr;
  }

  body.page-staffing-schedule .staffing-controls.flexura-toolbar-grid .staffing-optimizer-wrap {
    grid-column: auto;
  }

  body.page-schedule-calendar .calendar-controls > .capacity-summary-bar {
    grid-column: 1 / -1;
  }

  body.page-schools .schools-pagination {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* Fixed Assignments — lock/unlock visual states */
.assignment-row[data-assignment-id] {
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 1px 4px;
  transition: border-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* --- MMP-53: Drag and Drop Staff (before locked state so pointer can override grab) --- */
.unscheduled-item[draggable="true"] {
  cursor: grab;
}
.assignment-row[draggable="true"] {
  cursor: grab;
}

.assignment-locked,
.assignment-row[data-is-locked="true"] {
  border-color: var(--green-500, #22c55e);
  cursor: pointer;
}

.assignment-hover-lockable {
  border-color: var(--green-400, #4ade80);
  border-style: dashed;
  cursor: pointer;
}
.dragging {
  opacity: 0.4;
}
.week-grid tbody td.drag-over-valid,
.week-grid .visit-chip.drag-over-valid,
.day-card.drag-over-valid {
  background-color: rgba(37, 99, 235, 0.10);
  outline: 2px dashed var(--blue-400, #60a5fa);
  outline-offset: -2px;
  transition: background-color 0.12s, outline-color 0.12s;
}
.unscheduled-list-drop-active {
  background-color: rgba(37, 99, 235, 0.08);
  outline: 2px dashed var(--blue-400, #60a5fa);
  outline-offset: -2px;
  border-radius: 6px;
  transition: background-color 0.12s, outline-color 0.12s;
}

/* Unscheduled drag: only the sidebar-selected day accepts drops; other week columns dimmed */
.staffing-unsched-drag-active .staffing-col-unsched-dim {
  opacity: 0.4;
  filter: grayscale(0.2);
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.staffing-unsched-drag-active .staffing-col-unsched-match {
  transition: opacity 0.15s ease;
}

/* --- MMP-58: Day selection in week view --- */
.week-grid thead th[data-date] {
  cursor: pointer;
  transition: background-color 0.15s;
}
.week-grid thead th[data-date]:hover {
  background-color: rgba(37, 99, 235, 0.08);
}
.week-grid thead th.week-col-selected {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}
.unscheduled-day-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--font-size-caption);
}
.unsched-nav-btn {
  background: none;
  border: 1px solid var(--border-neutral-subtle, #d1d5db);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-neutral-primary, #111827);
}
.unsched-nav-btn:hover {
  background-color: var(--bg-neutral-subtle, #f3f4f6);
}

@media (max-width: 768px) {
  .staffing-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .staffing-toolbar .staffing-toolbar-view {
    margin-left: 0;
  }

  .staffing-toolbar-date {
    min-width: 0;
    width: 100%;
  }
}

/* Sticky Unscheduled Staff panel in two-column layout (MMP-111). Stacked
   layout (@media max-width: 1000px) is intentionally untouched. */
@media (min-width: 1001px) {
  .staffing-side {
    position: sticky;
    top: 0;
    align-self: start;          /* restated; already present on the base rule */
    max-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .staffing-side .unscheduled-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;           /* supersedes calc(100vh - 280px) in two-column */
    overflow: auto;
  }
}

@media (max-width: 1000px) {
  body.page-staffing-schedule .staffing-controls.flexura-toolbar-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.page-staffing-schedule .staffing-controls.flexura-toolbar-grid .staffing-optimizer-wrap {
    grid-column: 1 / -1;
  }

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

  .staffing-toolbar .staffing-toolbar-view {
    margin-left: 0;
  }

  .staffing-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .staffing-toolbar {
    grid-column: 1;
    grid-row: 1;
  }

  .optimizer-latest-run-rail {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .staffing-main {
    grid-column: 1;
    grid-row: 3;
  }

  .staffing-side {
    grid-column: 1;
    grid-row: 4;
  }
}

/* =========================================================================
   County Colors page
   ========================================================================= */

.county-subtitle {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
  margin: 0 0 var(--space-xl) 0;
  line-height: 1.5;
}

/* --- Controls (matches schools page pattern) ---------------------------- */

.county-controls {
  display: grid;
  grid-template-columns: minmax(80px, 0.5fr) minmax(180px, 2fr);
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-lg);
}

/* Variant used after the legacy State picker was retired in favor of the
   global Market Switcher. Only the County select remains, so collapse to
   a single column at the same width as the County control on the
   two-column layout. */
.county-controls.county-controls-market-only {
  grid-template-columns: minmax(180px, 2fr);
}

.county-controls .form-group {
  margin-bottom: 0;
}

.county-controls select {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  line-height: var(--line-height-normal);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- Color assignment panel --------------------------------------------- */

.county-color-panel {
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.county-color-current {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.county-current-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12);
}

.county-current-swatch-empty {
  background: var(--bg-neutral-tertiary);
  border: 2px dashed var(--border-neutral-primary);
  box-shadow: none;
}

.county-current-hex {
  font-size: var(--font-size-body-sm);
  font-family: var(--font-family-mono);
  color: var(--text-neutral-secondary);
}

.county-color-presets-label,
.county-color-custom-label {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--text-neutral-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.county-palette-grid {
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 8px;
}

.county-palette-empty {
  grid-column: 1 / -1;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.county-palette-swatch {
  all: unset;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s, border-color 0.12s;
  box-sizing: border-box;
}

.county-palette-swatch:hover {
  transform: scale(1.15);
}

.county-palette-swatch::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  background: var(--bg-neutral-tertiary);
  color: var(--text-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  font-size: var(--font-size-caption);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-in;
  z-index: 20;
  box-shadow: var(--shadow-sm);
}

.county-palette-swatch:hover::after,
.county-palette-swatch:focus-visible::after {
  opacity: 1;
}

.county-palette-swatch:focus-visible {
  outline: 2px solid var(--border-brand-primary);
  outline-offset: 2px;
}

.county-palette-swatch.selected {
  border-color: var(--text-neutral-primary);
  box-shadow: 0 0 0 2px var(--bg-neutral-primary);
}

.county-color-custom-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.county-color-custom-row input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  cursor: pointer;
  background: var(--bg-neutral-primary);
}

.county-apply-btn {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-body-sm);
}

.county-clear-btn {
  all: unset;
  cursor: pointer;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-xs);
  transition: color 0.12s, border-color 0.12s, background-color 0.12s;
  align-self: flex-start;
}

.county-clear-btn:hover {
  color: var(--text-error-primary, #c0392b);
  border-color: var(--border-error-primary, #c0392b);
  background-color: var(--bg-error-subtle, #fef2f2);
}

/* --- Stats -------------------------------------------------------------- */

.county-stats {
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-neutral-secondary);
  letter-spacing: 0.02em;
}

/* --- County list -------------------------------------------------------- */

.county-list {
  display: flex;
  flex-direction: column;
}

.county-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--border-neutral-secondary);
  transition: background-color 0.12s;
  cursor: pointer;
}

.county-row:last-child {
  border-bottom: none;
}

.county-row:hover {
  background-color: var(--bg-neutral-secondary);
}

.county-row-active {
  background-color: var(--bg-brand-ghost-subtle, rgba(0, 112, 210, 0.04));
}

.county-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-neutral-primary);
  background: var(--bg-neutral-tertiary);
  flex-shrink: 0;
  transition: transform 0.12s;
}

.county-swatch.has-color {
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.county-row:hover .county-swatch {
  transform: scale(1.15);
}

.county-row-name {
  font-weight: 500;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-primary);
  flex: 1;
  min-width: 0;
}

.county-row-count {
  font-size: var(--font-size-caption);
  color: var(--text-neutral-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.county-empty {
  padding: var(--space-3xl);
  text-align: center;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

/* Provider form — hotel willingness + travel priority (MMP-113) */
.travel-priority-group .provider-form-label {
  margin-bottom: 0;
}

.travel-control-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

/* Title row only; hint sits below so slider spacing matches hotel vs travel */
.hotel-willingness-group .travel-control-header,
.travel-priority-group .travel-control-header {
  align-items: baseline;
  margin-bottom: 0;
}

.hotel-willingness-group > .travel-control-description,
.travel-priority-group > .travel-control-description {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
  max-width: 32rem;
  font-size: var(--font-size-body-sm);
  line-height: 1.5;
  color: var(--text-neutral-secondary);
}

.travel-control-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.travel-inline-action {
  padding: 0 var(--space-xs);
  font-size: var(--font-size-body-sm);
}

.travel-slider-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 34rem;
}

input[type="range"].travel-slider {
  width: 100%;
  /* Keep both travel sliders on the same visual baseline. */
  height: 5px;
}

.travel-slider-scale {
  display: grid;
  gap: var(--space-sm);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  color: var(--text-neutral-secondary);
}

.travel-slider-scale-triplet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.travel-slider-stop:nth-child(2) {
  text-align: center;
}

.travel-slider-stop:last-child {
  text-align: right;
}

.travel-slider-stop.is-active {
  color: var(--text-neutral-primary);
  font-weight: 600;
}

.travel-priority-default-state {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.travel-priority-slider-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Match hotel: range sits on the top edge of the control row; centering made the track sit lower when the value column is taller */
  align-items: start;
  gap: var(--space-md);
}

.travel-priority-group.is-using-default .travel-priority-slider-shell {
  opacity: 0.72;
}

/* --flexura-range-fill set in JS for WebKit; Firefox uses ::-moz-range-progress */
.flexura-slider {
  --flexura-range-fill: 0%;
  accent-color: var(--bg-brand-primary);
}

.flexura-slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(
    to right,
    var(--bg-brand-primary) 0%,
    var(--bg-brand-primary) var(--flexura-range-fill),
    var(--border-neutral-secondary) var(--flexura-range-fill),
    var(--border-neutral-secondary) 100%
  );
}

.flexura-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  border: none;
  background: var(--border-neutral-secondary);
}

.flexura-slider::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  border: none;
  background: var(--bg-brand-primary);
}

.flexura-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-brand-primary) 10%, transparent);
}

.flexura-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-brand-primary) 10%, transparent);
}

.flexura-slider:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.flexura-slider-value {
  flex: 0 0 auto;
  min-width: 2.25rem;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-neutral-primary);
  text-align: right;
}

.flexura-slider-value-muted {
  color: var(--text-neutral-secondary);
  font-weight: 500;
}

/* Hotel willingness: three-way preset (0 / 0.5 / 1) */
.hotel-willingness-group,
.travel-priority-group {
  max-width: 36rem;
}

.hotel-willingness-group + .travel-priority-group {
  margin-top: var(--space-2xl);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 768px) {
  .travel-control-header {
    flex-direction: column;
    align-items: stretch;
  }

  .hotel-willingness-group .travel-control-header,
  .travel-priority-group .travel-control-header {
    align-items: stretch;
  }

  .travel-control-actions {
    justify-content: flex-start;
  }

  .travel-priority-slider-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .flexura-slider-value {
    text-align: left;
  }

  .county-controls {
    grid-template-columns: 1fr;
  }

  .config-color-preset-table {
    display: block;
    overflow-x: auto;
  }

  .county-color-preset-add-grid {
    grid-template-columns: 1fr 1fr;
  }

  .county-color-preset-add-separator {
    display: none;
  }

  .county-palette-grid {
    grid-template-columns: repeat(4, 32px);
  }
}

/* MMP-869: on touch, colour preset swatches stay round at 44 x 44 px (the touch floor makes
   buttons 44 px tall, which left these 32 px wide ovals), and "Clear color" is 44 px tall
   (all: unset resets box-sizing, so the floor applied to its content and padding made it
   54-62 px). The .county-color-panel ancestor gives these rules the specificity to win over
   the 768 px palette rule above and over zone.css, which loads after this file. */
@media (pointer: coarse) {
  .county-color-panel .county-palette-grid {
    grid-template-columns: repeat(auto-fill, 44px);
  }
  .county-color-panel .county-palette-swatch {
    width: 44px;
    height: 44px;
  }
  .county-color-panel .county-clear-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
}

/* --- Partner Schools ---------------------------------------------------- */

.partner-modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

.partner-instructions {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-neutral-secondary);
  border-radius: var(--space-sm);
  font-size: var(--font-size-body-sm);
}

.partner-instructions p {
  margin: 0 0 var(--space-sm) 0;
}

.partner-instructions p:last-child {
  margin-bottom: 0;
}

.partner-schools-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.partner-group {
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--space-sm);
  overflow: hidden;
}

.partner-group-header {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-neutral-secondary);
  font-weight: 600;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.partner-unpartnered-group {
  background: var(--bg-neutral-primary);
}

.partner-primary,
.partner-secondary,
.partner-school {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-neutral-primary);
  cursor: grab;
  transition: background-color 0.15s ease;
}

.partner-primary:last-child,
.partner-secondary:last-child,
.partner-school:last-child {
  border-bottom: none;
}

.partner-primary {
  background: color-mix(in srgb, var(--bg-brand-primary) 8%, var(--bg-neutral-primary));
  font-weight: 600;
}

.partner-primary:hover,
.partner-school:hover {
  background: var(--bg-neutral-secondary);
}

.partner-secondary {
  padding-left: calc(var(--space-md) + var(--space-lg));
  background: var(--bg-neutral-primary);
}

.partner-secondary:hover {
  background: color-mix(in srgb, var(--bg-brand-primary) 4%, var(--bg-neutral-primary));
}

.partner-unpartnered {
  background: var(--bg-neutral-primary);
}

.partner-icon {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--text-neutral-secondary);
}

.partner-primary .partner-icon {
  color: var(--text-brand-primary);
}

.partner-name {
  flex: 1 1 auto;
  font-size: var(--font-size-body);
}

.partner-district {
  flex: 0 0 auto;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.partner-role-label {
  flex: 0 0 auto;
  font-size: var(--font-size-caption);
  color: var(--text-brand-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.partner-unlink-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-neutral-tertiary);
  cursor: pointer;
  border-radius: var(--space-xs);
  font-size: 12px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-unlink-btn:hover {
  color: var(--text-error-primary);
}

/* Shared campus toggle */
.partner-shared-campus {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md) var(--space-xs) calc(var(--space-md) + 20px);
  cursor: pointer;
  user-select: none;
}

.partner-shared-campus-input {
  accent-color: var(--bg-brand-primary);
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
}

.partner-shared-campus-label {
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
}

/* Drop target highlight (MMP-821: the drop-zone and unpartner-zone rules are removed) */
.partner-drop-visible {
  display: block;
}

.partner-drop-over,
.partner-primary.partner-drop-over,
.partner-school.partner-drop-over {
  background: color-mix(in srgb, var(--bg-brand-primary) 16%, var(--bg-neutral-primary)) !important;
  border: 2px dashed var(--bg-brand-primary);
}

/* Dragging state */
.partner-dragging {
  opacity: 0.6;
  cursor: grabbing;
}

/* Loading and empty states */
.partner-loading,
.partner-empty,
.partner-error {
  padding: var(--space-xl);
  text-align: center;
  font-size: var(--font-size-body);
  color: var(--text-neutral-secondary);
}

.partner-error {
  color: var(--surface-negative);
}

/* Tooltip */
.partner-tooltip {
  position: fixed;
  z-index: 10000;
  padding: var(--space-sm) var(--space-md);
  background: var(--text-neutral-primary);
  color: var(--bg-neutral-primary);
  font-size: var(--font-size-body-sm);
  border-radius: var(--space-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  max-width: 300px;
}

.partner-tooltip-visible {
  opacity: 1;
}

/* --- Partner Schools by visit day (MMP-821) -------------------------------
   Rows, groups, and the shared-campus toggle reuse the .partner-* rules above.
   New rules use shipped Signum tokens only (sap-design-system.css). */

.partner-range {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-neutral-secondary);
}

.partner-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.partner-day-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-neutral-primary);
}

.partner-day-heading:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

.partner-readonly-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-sm);
  border: var(--stroke-sm) solid var(--border-neutral-primary);
  border-radius: var(--radius-full);
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.partner-day .partner-school {
  flex-wrap: wrap;
  row-gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
}

.partner-day .partner-secondary {
  padding-left: calc(var(--space-md) + var(--space-lg));
}

.partner-day .partner-school[draggable="false"] {
  cursor: default;
}

.partner-day .partner-school:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

.partner-day .partner-name {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.partner-day .partner-id-label {
  white-space: nowrap;
}

.partner-day .partner-shared-campus {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: var(--stroke-sm) solid var(--border-neutral-primary);
}

.partner-day .partner-shared-campus:last-child {
  border-bottom: none;
}

.partner-day .partner-shared-campus-input:disabled,
.partner-day .partner-shared-campus-input:disabled + .partner-shared-campus-label {
  cursor: not-allowed;
}

.partner-day-visit-label,
.partner-row-note {
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
  white-space: nowrap;
}

.partner-row-note {
  font-style: italic;
}

/* .btn sets display, which would override the hidden attribute while the picker is open. */
.partner-day .partner-with-btn[hidden] {
  display: none;
}

.partner-day-row-actions {
  display: inline-flex;
  gap: var(--space-xs);
  margin-left: auto;
}

/* The legacy icon-only .partner-unlink-btn is a 24px square; the day list uses a text button. */
.partner-day .partner-unlink-btn {
  width: auto;
  height: auto;
  display: inline-flex;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-caption);
  line-height: 1.4;
  border-radius: var(--radius-xs);
  color: var(--text-error-primary);
}

.partner-day .partner-unlink-btn:hover:not(:disabled) {
  background: var(--bg-error-tint);
  color: var(--text-error-primary);
}

.partner-day .partner-school.partner-drop-visible {
  display: flex;
  outline: var(--stroke-sm) dashed var(--border-brand-primary);
  outline-offset: calc(var(--stroke-sm) * -1);
}

.partner-with-picker {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

.partner-with-picker-label,
.partner-with-picker-empty {
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.partner-with-picker .partner-with-select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-body-sm);
  border-radius: var(--radius-xs);
  color: var(--text-neutral-primary);
}

.partner-with-picker-actions {
  display: inline-flex;
  gap: var(--space-xs);
}

.partner-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-sm) var(--space-lg);
  border-top: var(--stroke-sm) solid var(--border-neutral-primary);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.partner-status:empty,
.partner-status[hidden] {
  display: none;
}

.partner-status--error {
  background: var(--bg-error-tint);
  border-top-color: var(--border-error-tint);
  color: var(--text-error-primary);
}

.partner-day-loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
  text-align: left;
}

.partner-day-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--stroke-sm) solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
}

.partner-day-skeleton-bar {
  display: block;
  height: var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--bg-neutral-tertiary);
  animation: partner-day-skeleton-fade 1.4s ease-in-out infinite;
}

.partner-day-skeleton-bar--name {
  width: 40%;
}

.partner-day-skeleton-bar--meta {
  width: 24%;
}

@keyframes partner-day-skeleton-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-day-skeleton-bar {
    animation: none;
  }
}

.partner-day-skeleton-label {
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.partner-day-empty-title {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-neutral-primary);
}

.partner-day-empty-body {
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

.partner-day-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-error-primary);
}

.partner-day-load-error-text {
  margin: 0;
}

.partner-later-days {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-primary);
  cursor: pointer;
}

/* ----- Visit Details drawer (MMP-121) ----- */

:root {
  --drawer-width: min(440px, 95vw);
  --drawer-z: 1100;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--drawer-width);
  background: var(--bg-neutral-primary, #fff);
  color: var(--text-neutral-primary, #222);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  z-index: var(--drawer-z);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  overflow: hidden;
}

.drawer--right {
  right: 0;
}

.drawer[hidden] {
  display: none;
}

.drawer--open {
  transform: translateX(0);
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-bottom: 1px solid var(--border-neutral-secondary, #e5e5e5);
  background: var(--bg-neutral-secondary, #fafafa);
}

.drawer__title {
  margin: 0;
  font-size: var(--font-size-body, 16px);
  font-weight: 600;
}

.drawer__close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-neutral-secondary, #666);
  padding: 4px 8px;
  border-radius: 4px;
}

.drawer__close:hover,
.drawer__close:focus-visible {
  background: var(--bg-neutral-tertiary, #efefef);
  color: var(--text-neutral-primary, #222);
  outline: none;
}

.drawer__body {
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  overflow-y: auto;
  flex: 1 1 auto;
}

.drawer__subtitle {
  margin: 0 0 var(--space-md, 12px) 0;
  font-size: var(--font-size-caption, 13px);
  color: var(--text-neutral-secondary, #666);
  min-height: 1em;
}

.drawer__section {
  margin-bottom: var(--space-xl, 20px);
}

.drawer__section-title {
  margin: 0 0 4px 0;
  font-size: var(--font-size-body-sm, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-neutral-secondary, #666);
}

.drawer__section-hint {
  margin: 0 0 var(--space-md, 12px) 0;
  font-size: var(--font-size-caption, 13px);
  color: var(--text-neutral-secondary, #666);
}

.drawer__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-sm, 8px);
}

.drawer__field label {
  font-size: var(--font-size-caption, 13px);
  font-weight: 500;
  color: var(--text-neutral-primary, #222);
}

.drawer__field input[type="text"],
.drawer__field input[type="time"],
.drawer__field textarea {
  font: inherit;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-neutral-primary, #ccc);
  border-radius: 4px;
  background: var(--bg-neutral-primary, #fff);
  color: inherit;
  box-sizing: border-box;
}

.drawer__field input:disabled,
.drawer__field textarea:disabled {
  background: var(--bg-neutral-tertiary, #f5f5f5);
  color: var(--text-neutral-secondary, #888);
  cursor: progress;
}

.drawer__field input:focus-visible,
.drawer__field textarea:focus-visible {
  outline: 2px solid var(--border-brand-primary, #3366cc);
  outline-offset: 1px;
}

.drawer__field--error input[type="text"],
.drawer__field--error textarea {
  border-color: var(--border-danger);
  color: var(--text-error-primary);
}

.drawer__field-error {
  margin: 0;
  font-size: var(--font-size-caption, 13px);
  color: var(--text-error-primary);
}

.drawer__preview {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.drawer__field--readonly {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
  font-size: var(--font-size-caption, 13px);
}

.drawer__field--readonly dt {
  flex: 0 0 38%;
  color: var(--text-neutral-secondary, #666);
  font-weight: 500;
}

.drawer__field--readonly dd {
  margin: 0;
  flex: 1 1 62%;
  color: var(--text-neutral-primary, #222);
  word-break: break-word;
}

/* MMP-784: notes keep the scheduler's line breaks in the Merged preview. */
.drawer__preview dd[data-preview="schoolNotes"],
.drawer__preview dd[data-preview="visitNotes"] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* =============================================================================
   MMP-123: School Overrides Section Styles
   ========================================================================== */

.details-section-collapsible {
  border: 1px solid var(--border-neutral-primary, #d0d0d0);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-neutral-primary, #fff);
  margin-top: var(--space-md, 16px);
}

.details-section-header-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm, 12px) var(--space-md, 16px);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--text-neutral-primary, #222);
  text-align: left;
}

.details-section-header-toggle:hover {
  background: var(--bg-neutral-secondary, #f5f5f5);
}

.details-section-header-toggle .details-section-title {
  margin: 0;
  font-size: var(--font-size-heading-sm, 16px);
  font-weight: 600;
}

.details-section-chevron {
  transition: transform 0.2s ease;
  color: var(--text-neutral-secondary, #666);
}

.details-section-header-toggle[aria-expanded="true"] .details-section-chevron {
  transform: rotate(180deg);
}

.details-section-header-toggle.expanded .details-section-chevron {
  transform: rotate(180deg);
}

.details-section-body {
  padding: 0 var(--space-md, 16px) var(--space-md, 16px);
}

.details-section-body.hidden {
  display: none;
}

.school-overrides-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-sm, 14px);
}

.school-overrides-table th,
.school-overrides-table td {
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  text-align: left;
  border-bottom: 1px solid var(--border-neutral-secondary, #e0e0e0);
}

.school-overrides-table th {
  font-weight: 600;
  color: var(--text-neutral-secondary, #666);
  background: var(--bg-neutral-secondary, #f9f9f9);
}

.school-overrides-table tr:hover {
  background: var(--bg-neutral-secondary, #f9f9f9);
}

.school-override-label {
  width: 25%;
}

.school-override-src {
  width: 25%;
  color: var(--text-neutral-secondary, #666);
  font-style: italic;
}

.school-override-input-cell {
  width: 30%;
}

.school-override-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border-neutral-primary, #ccc);
  border-radius: 4px;
  font: inherit;
  font-size: var(--font-size-body-sm, 14px);
}

.school-override-input:focus-visible {
  outline: 2px solid var(--border-brand-primary, #3366cc);
  outline-offset: 1px;
}

/* MMP-784: ACT changed School Notes under an override (warning, not an error). */
.school-notes-act-changed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs, 4px) var(--space-sm, 8px);
  margin-top: var(--space-sm, 8px);
  padding: var(--space-sm, 8px);
  border: 1px solid var(--border-warning-tint);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-warning-subtle);
  color: var(--text-warning-primary);
  font-size: var(--font-size-caption, 12px);
  font-style: normal;
}

.school-notes-act-changed span {
  flex: 1 1 12rem;
}

.school-override-effective {
  width: 20%;
  color: var(--text-neutral-primary, #222);
}

.school-overrides-status {
  margin-top: var(--space-sm, 12px);
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-caption, 13px);
}

.school-overrides-status.hidden {
  display: none;
}
/* ===== Market Switcher (MMP-173) =====
   Workspace anchor + popover + theming + dirty-state undo toast.
   See wwwroot/market-switcher.js for the controller.
   ====================================== */

:root {
  --market-accent: #6E695F;
}

/* Top accent border on the chrome — sits above the sidebar for tab disambiguation. */
body.has-market-accent::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--market-accent, #6E695F);
  z-index: 1000;
  pointer-events: none;
}

/* Anchor host slot: lives inside .sidebar before .sidebar-header so it is
   the top-left chrome element. */
.market-switcher-anchor-host {
  display: flex;
  align-items: center;
  padding: 10px 12px 8px 12px;
  border-bottom: 1px solid var(--border-neutral-secondary, rgba(0,0,0,0.08));
}

.market-switcher-anchor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  padding: 4px 8px 4px 4px;
  cursor: pointer;
  color: var(--text-neutral-primary, #1f2330);
  font: inherit;
  line-height: 1;
  min-height: 32px;
  --anchor-accent: #6E695F;
}

.market-switcher-anchor:hover,
.market-switcher-anchor:focus-visible {
  background: var(--bg-neutral-tertiary, rgba(0,0,0,0.04));
  border-color: var(--border-neutral-primary, rgba(0,0,0,0.12));
  outline: none;
}

.market-switcher-anchor-static {
  cursor: default;
}

.market-switcher-anchor-static:hover {
  background: transparent;
  border-color: transparent;
}

.market-switcher-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--anchor-accent, #6E695F);
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2px;
}

.market-switcher-code {
  font-weight: 600;
  font-size: 13px;
  color: inherit;
}

.market-switcher-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--text-neutral-tertiary, rgba(0,0,0,0.55));
}

/* Popover */
.market-switcher-popover {
  position: fixed;
  top: var(--popover-top, 56px);
  left: var(--popover-left, 12px);
  min-width: 240px;
  max-width: 320px;
  background: var(--bg-neutral-primary, #ffffff);
  border: 1px solid var(--border-neutral-primary, rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 6px;
  z-index: 2000;
}

.market-switcher-popover.hidden {
  display: none;
}

.market-switcher-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-neutral-primary, #1f2330);
  font: inherit;
  text-align: left;
  --row-accent: #6E695F;
}

.market-switcher-row:hover,
.market-switcher-row:focus-visible {
  background: var(--bg-neutral-tertiary, rgba(0,0,0,0.04));
  border-color: var(--border-neutral-primary, rgba(0,0,0,0.10));
  outline: none;
}

.market-switcher-row[aria-checked="true"] {
  background: var(--bg-neutral-tertiary, rgba(0,0,0,0.05));
}

.market-switcher-row-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--row-accent, #6E695F);
  color: #ffffff;
  font-weight: 700;
  font-size: 9px;
  flex: 0 0 auto;
}

.market-switcher-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.market-switcher-row-code {
  font-weight: 600;
  font-size: 12px;
}

.market-switcher-row-name {
  font-size: 12px;
  color: var(--text-neutral-secondary, rgba(0,0,0,0.65));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-switcher-row-check {
  font-size: 13px;
  color: var(--text-brand-primary, #0E5DAA);
  width: 14px;
  text-align: right;
}

.market-switcher-popover-footer {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-neutral-secondary, rgba(0,0,0,0.08));
  display: flex;
  justify-content: stretch;
}

.market-switcher-set-default {
  flex: 1;
  background: transparent;
  border: 1px dashed var(--border-neutral-secondary, rgba(0,0,0,0.12));
  border-radius: var(--radius-sm, 6px);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--text-neutral-secondary, rgba(0,0,0,0.65));
  cursor: pointer;
}

.market-switcher-set-default:hover {
  color: var(--text-neutral-primary, #1f2330);
  border-style: solid;
}

.market-switcher-set-default:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Live region: visually hidden, screen-reader visible. */
.market-switcher-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Toast (dirty-state undo) */
.market-switcher-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  min-width: 280px;
  max-width: 480px;
  background: var(--bg-neutral-inverse, #1f2330);
  color: var(--text-neutral-inverse, #ffffff);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 3000;
  font-size: 13px;
}

.market-switcher-toast.hidden {
  display: none;
}

.market-switcher-toast-undo {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: inherit;
  border-radius: var(--radius-sm, 6px);
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.market-switcher-toast-undo:hover {
  background: rgba(255,255,255,0.12);
}

/* Empty state and first-load picker */
.market-switcher-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--bg-neutral-secondary, #f6f7f9);
}

.market-switcher-empty-card {
  max-width: 480px;
  background: var(--bg-neutral-primary, #ffffff);
  border-radius: var(--radius-md, 10px);
  padding: 28px 32px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.market-switcher-empty-card h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
}

.market-switcher-empty-card p {
  margin: 0;
  color: var(--text-neutral-secondary, rgba(0,0,0,0.65));
  font-size: 14px;
  line-height: 1.5;
}

.market-switcher-first-load {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 28, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
}

.market-switcher-first-load-card {
  background: var(--bg-neutral-primary, #ffffff);
  border-radius: var(--radius-md, 10px);
  padding: 24px 24px 18px 24px;
  width: min(420px, 90vw);
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.market-switcher-first-load-card h2 {
  margin: 0 0 6px 0;
  font-size: 18px;
}

.market-switcher-first-load-card p {
  margin: 0 0 14px 0;
  color: var(--text-neutral-secondary, rgba(0,0,0,0.65));
  font-size: 13px;
}

.market-switcher-first-load-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.market-switcher-first-load-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-neutral-secondary, rgba(0,0,0,0.10));
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  color: var(--text-neutral-primary, #1f2330);
  font: inherit;
  text-align: left;
  --row-accent: #6E695F;
}

.market-switcher-first-load-row:hover {
  background: var(--bg-neutral-tertiary, rgba(0,0,0,0.04));
}

/* Active sidebar nav uses the market accent for the indicator. */
.has-market-accent .sidebar-nav-item.active {
  border-left-color: var(--market-accent, #6E695F);
  box-shadow: inset 2px 0 0 0 var(--market-accent, #6E695F);
}

/* ---------------------------------------------------------------------------
   Markets page (Chunk 7 / MMP-201)
   --------------------------------------------------------------------------- */
.markets-subtitle {
  color: var(--text-neutral-secondary, rgba(0,0,0,0.6));
  margin: 0 0 12px 0;
}

.markets-list {
  margin-top: 8px;
}

.markets-empty {
  color: var(--text-neutral-secondary, rgba(0,0,0,0.6));
  font-style: italic;
}

/* MMP-849: a wide table scrolls inside its card instead of widening the page. The scroll box
   starts a new formatting context, so a wrapped lookup table's top margin moves to the wrapper,
   where it still collapses with its neighbours exactly as before. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.table-scroll:has(> .lookup-table) {
  margin-top: var(--space-lg);
}

.table-scroll > .lookup-table {
  margin-top: 0;
}

.markets-table {
  width: 100%;
  border-collapse: collapse;
}

.markets-table th,
.markets-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-neutral-secondary, rgba(0,0,0,0.10));
  font-size: var(--font-size-body-sm, 13px);
}

.markets-table th {
  font-weight: 600;
  color: var(--text-neutral-primary, #1f2330);
  background: var(--bg-neutral-tertiary, rgba(0,0,0,0.04));
}

.markets-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.markets-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.markets-step {
  border: 1px solid var(--border-neutral-secondary, rgba(0,0,0,0.10));
  border-radius: var(--radius-sm, 6px);
  padding: 10px 12px;
  background: var(--bg-neutral-secondary, #ffffff);
}

.markets-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.markets-step-title {
  font-weight: 600;
  color: var(--text-neutral-primary, #1f2330);
}

.markets-step-status {
  margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   Markets page - Startup presets verify panel (Chunk 8 / MMP-202)
   --------------------------------------------------------------------------- */
.markets-presets-toolbar {
  margin-bottom: 12px;
}

.markets-presets-toolbar .form-group {
  max-width: 320px;
}

.markets-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.markets-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-size-body-sm, 13px);
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
}

.markets-pill-ok {
  background: rgba(34, 139, 34, 0.10);
  color: #1e6b2a;
  border-color: rgba(34, 139, 34, 0.30);
}

.markets-pill-missing {
  background: rgba(192, 32, 32, 0.10);
  color: #a01818;
  border-color: rgba(192, 32, 32, 0.35);
}

.markets-pill-loading {
  background: var(--bg-neutral-tertiary, rgba(0, 0, 0, 0.04));
  color: var(--text-neutral-secondary, rgba(0, 0, 0, 0.6));
  border-color: var(--border-neutral-secondary, rgba(0, 0, 0, 0.10));
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Markets page - First-run UX pass (Chunk 11 / MMP-203)
   View-layer-only presentation classes. No logic; no contract change.
   --------------------------------------------------------------------------- */

/* Lead-in / orientation card. Rendered above any control. */
.markets-leadin {
  background: var(--bg-neutral-tertiary, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-neutral-secondary, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-sm, 6px);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.markets-leadin-title {
  font-weight: 600;
  font-size: var(--font-size-body, 14px);
  color: var(--text-neutral-primary, #1f2330);
  margin: 0 0 6px 0;
}

.markets-leadin p {
  margin: 0 0 8px 0;
  color: var(--text-neutral-secondary, rgba(0, 0, 0, 0.7));
  font-size: var(--font-size-body-sm, 13px);
  line-height: 1.5;
}

.markets-leadin-steps,
.markets-leadin-input-list {
  margin: 6px 0 0 18px;
  padding: 0;
  color: var(--text-neutral-secondary, rgba(0, 0, 0, 0.7));
  font-size: var(--font-size-body-sm, 13px);
  line-height: 1.5;
}

.markets-leadin-steps li,
.markets-leadin-input-list li {
  margin: 2px 0;
}

.markets-leadin-subhead {
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 2px;
  color: var(--text-neutral-primary, #1f2330);
  font-size: var(--font-size-body-sm, 13px);
}

/* You-are-here step timeline. One row, four steps. */
.markets-timeline {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  margin: 10px 0 14px 0;
  padding: 8px;
  border: 1px solid var(--border-neutral-secondary, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-neutral-secondary, #ffffff);
  flex-wrap: wrap;
}

.markets-timeline-step {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent;
  background: var(--bg-neutral-tertiary, rgba(0, 0, 0, 0.03));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.markets-timeline-step .markets-timeline-step-marker {
  font-size: var(--font-size-body-sm, 13px);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.markets-timeline-step .markets-timeline-step-marker::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.30);
}

.markets-timeline-step .markets-timeline-step-label {
  font-size: var(--font-size-body-sm, 13px);
  color: var(--text-neutral-primary, #1f2330);
}

.markets-timeline-step .markets-timeline-step-caption {
  font-size: 12px;
  color: var(--text-neutral-secondary, rgba(0, 0, 0, 0.6));
}

.markets-timeline-step[data-state="not-started"] {
  border-color: var(--border-neutral-secondary, rgba(0, 0, 0, 0.10));
}
.markets-timeline-step[data-state="running"] {
  border-color: rgba(20, 88, 168, 0.40);
  background: rgba(20, 88, 168, 0.06);
}
.markets-timeline-step[data-state="running"] .markets-timeline-step-marker::before {
  background: #1458a8;
  animation: markets-timeline-pulse 1.2s ease-in-out infinite;
}
.markets-timeline-step[data-state="done"] {
  border-color: rgba(34, 139, 34, 0.40);
  background: rgba(34, 139, 34, 0.06);
}
.markets-timeline-step[data-state="done"] .markets-timeline-step-marker::before {
  background: #1e6b2a;
}
.markets-timeline-step[data-state="no-change"] {
  border-color: rgba(102, 102, 102, 0.40);
  background: rgba(102, 102, 102, 0.06);
}
.markets-timeline-step[data-state="no-change"] .markets-timeline-step-marker::before {
  background: #555555;
}
.markets-timeline-step[data-state="error"] {
  border-color: rgba(192, 32, 32, 0.45);
  background: rgba(192, 32, 32, 0.06);
}
.markets-timeline-step[data-state="error"] .markets-timeline-step-marker::before {
  background: #a01818;
}

@keyframes markets-timeline-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Locked step card: predecessor not satisfied. */
.markets-step.is-locked {
  opacity: 0.65;
}
.markets-step.is-locked .markets-step-title::after {
  content: " (locked)";
  font-weight: 400;
  color: var(--text-neutral-secondary, rgba(0, 0, 0, 0.55));
  font-size: 12px;
}
.markets-step.is-locked button[disabled] {
  cursor: not-allowed;
}

/* Recoverable summary block inside a step status. */
.markets-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.markets-summary-headline {
  font-weight: 600;
  color: var(--text-neutral-primary, #1f2330);
  font-size: var(--font-size-body-sm, 13px);
}

.markets-summary-list {
  margin: 2px 0 0 18px;
  padding: 0;
  color: var(--text-neutral-secondary, rgba(0, 0, 0, 0.7));
  font-size: 12px;
  line-height: 1.5;
}

.markets-summary-list li {
  margin: 1px 0;
}

.markets-summary-recoverable {
  font-size: 12px;
  color: var(--text-neutral-secondary, rgba(0, 0, 0, 0.7));
  font-style: italic;
}

.markets-step-rerun-hint {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 88, 168, 0.08);
  color: #1458a8;
  font-size: 12px;
  border: 1px solid rgba(20, 88, 168, 0.30);
}

.markets-step-rerun-hint::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1458a8;
}

/* Fixed-dimension County FIPS textarea: full row, scroll on overflow,
   non-resizable so the form layout stays predictable. */
.markets-fips-input {
  width: 100%;
  height: 7.5rem;
  resize: none;
  overflow-y: auto;
}

/* ===== Zone page (Chunk 4 / MMP-321) ===== */
.page-zone .zone-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-2xl);
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-primary);
}

.page-zone .zone-row .zone-cell-actions {
  visibility: hidden;
  display: flex;
  gap: 0.5rem;
}

.page-zone .zone-row:hover .zone-cell-actions,
.page-zone .zone-row.is-active .zone-cell-actions {
  visibility: visible;
}

.page-zone .zone-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border-color, #d0d7de);
  background: var(--surface-color, #ffffff);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary, #57606a);
}

.page-zone .zone-row-action:hover {
  color: var(--text-primary, #1f2328);
  background: var(--surface-hover, #f6f8fa);
}

.page-zone .zone-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color, #d0d7de);
  border-radius: 3px;
  margin-right: 0.5rem;
  vertical-align: middle;
  background-color: var(--zone-swatch-color, transparent);
}

.page-zone .zone-builder-section {
  margin-bottom: 1.5rem;
}

.page-zone .zone-builder-section h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.page-zone .zone-county-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-zone .zone-county-search,
.page-zone .zone-provider-search {
  max-width: 24rem;
}

.page-zone .zone-provider-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.5rem;
  min-height: 0;
}

.page-zone .zone-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.35rem 0.15rem 0.5rem;
  border: 1px solid var(--border-color, #d0d7de);
  border-radius: 4px;
  background: var(--surface-muted, #f6f8fa);
  font-size: 0.875rem;
}

.page-zone .zone-provider-chip-label {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-zone .zone-provider-chip-remove {
  border: none;
  background: transparent;
  color: var(--text-muted, #57606a);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.2rem;
}

.page-zone .zone-provider-chip-remove:hover {
  color: var(--text-primary, #1f2328);
}

.page-zone .zone-county-pick,
.page-zone .zone-leads-pick,
.page-zone .zone-provider-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.25rem 1rem;
}

.page-zone .zone-color-presets {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.page-zone .zone-color-preset {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-color, #d0d7de);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  background-color: var(--zone-swatch-color, transparent);
}

.page-zone .zone-subtitle {
  color: var(--text-secondary, #57606a);
  margin-top: 0;
}

.page-zone .zone-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.page-zone .zone-table {
  width: 100%;
  border-collapse: collapse;
}

.page-zone .zone-table th,
.page-zone .zone-table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-color, #d0d7de);
}

@media (max-width: 768px) {
  .page-zone .zone-row .zone-cell-actions {
    visibility: hidden;
  }

  .page-zone .zone-row.is-active .zone-cell-actions {
    visibility: visible;
  }
}

/* ---------------------------------------------------------------------------
   Admin page - NCES import review (MMP-459)
   Presentation only. Base card, grid, table, upload-area, status and button
   vocabulary is reused from the shared classes above; only the deltas this
   surface actually needs are declared here.
   --------------------------------------------------------------------------- */

.page-admin .admin-drop-zone {
  margin-bottom: var(--space-md);
}

.admin-import-tabs {
  margin-bottom: var(--space-lg);
}

.admin-dual-drop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.admin-dual-drop-grid .admin-drop-zone {
  margin-bottom: 0;
}

.admin-pss-stage-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-lg);
}

/* MMP-861: seven PSS tiles read as two rows - what apply will do (add, resolve, fill
   location, restore) and what needs attention (inactive, ambiguous, invalid). */
.admin-pss-verdict-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* A label that wraps ("Would fill location" on a phone) must not push its number below the
   numbers beside it: label at the top, number on the card's bottom edge. */
.admin-pss-verdict-grid > .admin-verdict-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.admin-contract-note {
  margin: 0;
  color: var(--text-neutral-tertiary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
}

.admin-identity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xl);
  margin: var(--space-lg) 0 var(--space-2xl) 0;
}

.admin-identity-item dt {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.admin-identity-item dd {
  margin: 0;
  color: var(--text-neutral-primary);
  font-size: var(--font-size-body-sm);
}

/* Missing is the only bucket that can quietly retire a school, so it is the
   only number rendered as a warning and the only one that is interactive. */
.admin-verdict-card-warning {
  background: var(--bg-warning-subtle);
  border-color: var(--border-warning-tint);
}

.admin-verdict-card-warning .admin-verdict-label,
.admin-verdict-card-warning .admin-verdict-value {
  color: var(--text-warning-primary);
}

.admin-verdict-card-interactive {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-verdict-card-interactive:hover {
  border-color: var(--border-warning-primary);
}

.admin-verdict-card-interactive:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.admin-section {
  margin-bottom: var(--space-2xl);
}

.admin-section-title {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-neutral-primary);
}

.admin-scroll-list {
  max-height: 20rem;
  overflow-y: auto;
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-md);
}

.admin-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.admin-row:last-child {
  border-bottom: none;
}

.admin-row-id {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  color: var(--text-neutral-secondary);
}

.admin-row-name {
  color: var(--text-neutral-primary);
}

.admin-row-detail {
  color: var(--text-neutral-secondary);
}

.admin-field-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-field-row {
  display: grid;
  grid-template-columns: 12rem 5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  font-size: var(--font-size-body-sm);
}

.admin-field-name {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  color: var(--text-neutral-primary);
}

.admin-field-count {
  font-weight: var(--font-weight-semibold);
  color: var(--text-neutral-primary);
}

.admin-field-sample {
  color: var(--text-neutral-secondary);
  overflow-wrap: anywhere;
}

.admin-warning-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding-left: var(--space-xl);
  color: var(--text-warning-primary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-neutral-secondary);
}

.admin-actions-note {
  color: var(--text-neutral-tertiary);
  font-size: var(--font-size-caption);
}

/* The app's global disabled rule only changes the cursor, so a disabled button still reads
   as actionable. Apply is deliberately unavailable in this release, and it must look it. */
.admin-actions .btn:disabled {
  color: var(--text-neutral-disabled);
  border-color: var(--border-neutral-secondary);
  background: var(--bg-neutral-disabled);
}

.admin-runs-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.admin-runs-table thead th.admin-runs-count {
  text-align: right;
  white-space: normal;
  line-height: var(--line-height-tight, 1.25);
}

.admin-runs-missing {
  color: var(--text-warning-primary);
  font-weight: var(--font-weight-semibold);
}

/* A refused run has no counts to show; the dash must read as absent, not as zero. */
.admin-runs-nocount {
  color: var(--text-neutral-tertiary);
}

.admin-runs-when {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .admin-verdict-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* MMP-861: an odd tile out spans the row instead of sitting alone at half width. */
  .admin-pss-verdict-grid > .admin-verdict-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .admin-dual-drop-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-pss-stage-actions {
    justify-content: stretch;
  }

  .admin-pss-stage-actions .btn {
    width: 100%;
  }

  .admin-row,
  .admin-field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .admin-identity {
    gap: var(--space-xl);
  }
}

/* ---------------------------------------------------------------------------
 * Market Boundary Map (MMP-508/MMP-510, Chunk 2: read-only view)
 * --------------------------------------------------------------------------- */

.market-boundaries-subtitle {
  color: var(--text-neutral-secondary);
  margin: 0 0 var(--space-lg);
}

.market-boundaries-admin-gate {
  background: var(--bg-danger-subtle);
  color: var(--text-danger-primary);
  border: 1px solid var(--border-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  font-weight: var(--font-weight-semibold);
}

.market-boundaries-controls {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  max-width: 320px;
}

.market-boundaries-map-wrap {
  position: relative;
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-primary);
  margin-bottom: var(--space-lg);
}

.market-boundaries-svg {
  display: block;
  width: 100%;
  height: auto;
}

.market-boundaries-county {
  stroke: var(--bg-neutral-primary);
  stroke-width: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease, stroke-width 0.15s ease;
}

.market-boundaries-county:hover {
  opacity: 0.85;
  stroke-width: 1.5;
}

.market-boundaries-county-warning {
  stroke: var(--border-danger);
  stroke-width: 1.5;
}

.market-boundaries-hatch-unassigned-bg {
  fill: var(--bg-neutral-tertiary);
}

.market-boundaries-hatch-unassigned-line {
  stroke: var(--border-neutral-primary);
  stroke-width: 2;
}

.market-boundaries-hatch-warning-bg {
  fill: var(--bg-danger-subtle);
}

.market-boundaries-hatch-warning-line {
  stroke: var(--border-danger);
  stroke-width: 2;
}

.market-boundaries-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
  background: var(--bg-neutral-primary);
}

.market-boundaries-hover-card {
  position: absolute;
  left: var(--mb-hover-left, 0px);
  top: var(--mb-hover-top, 0px);
  z-index: 5;
  min-width: 180px;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
  pointer-events: none;
  font-size: var(--font-size-body-sm);
}

.market-boundaries-hover-name {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

.market-boundaries-hover-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--text-neutral-secondary);
}

.market-boundaries-hover-row span:last-child {
  color: var(--text-neutral-primary);
}

.market-boundaries-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.market-boundaries-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-body-sm);
}

.market-boundaries-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-neutral-primary);
}

.market-boundaries-legend-swatch-unassigned {
  background: var(--bg-neutral-tertiary);
  background-image: repeating-linear-gradient(45deg, var(--border-neutral-primary) 0, var(--border-neutral-primary) 1px, transparent 1px, transparent 4px);
}

.market-boundaries-legend-swatch-warning {
  background: var(--bg-danger-subtle);
  background-image: repeating-linear-gradient(45deg, var(--border-danger) 0, var(--border-danger) 1px, transparent 1px, transparent 4px);
  border-color: var(--border-danger);
}

.market-boundaries-anomalies {
  border: 1px solid var(--border-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  background: var(--bg-danger-subtle);
}

.market-boundaries-anomalies h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-body-lg);
  color: var(--text-danger-primary);
}

.market-boundaries-anomalies-helper {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
  margin: 0 0 var(--space-sm);
}

.market-boundaries-anomalies-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-body-sm);
}

/* MMP-508/MMP-511 (Chunk 3): move flow - brush, staging overlay, diff panel */

.market-boundaries-brush {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}

.market-boundaries-brush-label {
  font-weight: var(--font-weight-semibold);
  margin-right: var(--space-sm);
}

.market-boundaries-brush-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.market-boundaries-brush-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-primary);
  cursor: pointer;
  font-size: var(--font-size-body-sm);
}

.market-boundaries-brush-option.selected {
  border-color: var(--border-brand-primary, var(--border-neutral-primary));
  background: var(--bg-brand-subtle, var(--bg-neutral-secondary));
  font-weight: var(--font-weight-semibold);
}

.market-boundaries-brush-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--border-neutral-secondary);
}

.market-boundaries-brush-swatch-unassigned {
  background: var(--bg-neutral-tertiary);
  background-image: repeating-linear-gradient(45deg, var(--border-neutral-primary) 0, var(--border-neutral-primary) 1px, transparent 1px, transparent 4px);
}

.market-boundaries-brush-help {
  margin: var(--space-sm) 0 0;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.market-boundaries-county-staged {
  stroke: var(--border-warning-primary);
  stroke-width: 2.5;
  stroke-dasharray: 4 2;
}

.market-boundaries-diff-panel {
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  margin-top: var(--space-md);
}

.market-boundaries-diff-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.market-boundaries-diff-header h3 {
  margin: 0;
  font-size: var(--font-size-body-lg);
}

.market-boundaries-diff-count {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.market-boundaries-diff-list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.market-boundaries-diff-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-neutral-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-sm);
}

.market-boundaries-diff-route {
  font-weight: var(--font-weight-semibold);
}

.market-boundaries-diff-meta {
  color: var(--text-neutral-secondary);
}

.market-boundaries-conflicts {
  border: 1px solid var(--border-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.market-boundaries-conflicts h4 {
  margin: 0 0 var(--space-xs);
  color: var(--text-danger-primary);
  font-size: var(--font-size-body);
}

.market-boundaries-conflicts-helper {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
  margin: 0 0 var(--space-sm);
}

.market-boundaries-conflicts-list {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-body-sm);
}

.market-boundaries-diff-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* MMP-508/MMP-512 (Chunk 4): undo, conflict resolution actions, anomaly keep-only actions */

.market-boundaries-conflicts-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.market-boundaries-undo-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border: 1px solid var(--border-neutral-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  background: var(--bg-neutral-secondary);
}

.market-boundaries-undo-help {
  margin: 0;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.market-boundaries-anomaly-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}

.market-boundaries-anomaly-label {
  flex: 1 1 auto;
}

.market-boundaries-anomaly-actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.admin-ux-link-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* Market Profile (MMP-168/MMP-521): reuses config-section/toggle/status primitives. */
.market-profile-subtitle {
  color: var(--text-neutral-secondary);
  margin: 0 0 var(--space-lg);
}

.admin-gate,
.market-admin-admin-gate,
.nces-audit-admin-gate,
.market-profile-admin-gate {
  background: var(--bg-danger-subtle);
  color: var(--text-danger-primary);
  border: 1px solid var(--border-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  font-weight: var(--font-weight-semibold);
}

.market-profile-picker {
  margin-bottom: var(--space-lg);
  max-width: 420px;
}

.market-profile-empty {
  color: var(--text-neutral-secondary);
  padding: var(--space-xl) 0;
}

.market-profile-card {
  margin-top: var(--space-md);
}

.market-profile-static-value {
  font-weight: 500;
  color: var(--text-neutral-primary);
}

.market-profile-snapshot {
  margin: 0;
}

.market-profile-snapshot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xl);
  padding: var(--space-md) var(--space-2xl);
  border-top: 1px solid var(--border-neutral-secondary);
}

.market-profile-snapshot-row:first-child {
  border-top: none;
}

.market-profile-snapshot-row dt {
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.market-profile-snapshot-row dd {
  margin: 0;
  font-weight: 500;
  color: var(--text-neutral-primary);
}

.market-profile-actions {
  margin-top: var(--space-xl);
}

.market-profile-links-card {
  margin-top: var(--space-lg);
}

.market-profile-links {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.market-profile-links a {
  text-decoration: none;
}

/* Shared page-header component (promoted from zone.css; tokenized) */
.page-header {
  background: var(--bg-canvas);
  border-bottom: var(--stroke-sm) solid var(--border-neutral-low);
  padding: var(--space-md) var(--space-2xl);
}
.page-header__breadcrumbs { margin-bottom: var(--space-xs); }
.page-header__breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-xs);
  font-size: var(--text-caption-size); color: var(--text-neutral-secondary);
}
.page-header__breadcrumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--text-neutral-tertiary); }
.page-header__breadcrumbs a { color: var(--text-neutral-secondary); text-decoration: none; }
.page-header__breadcrumbs a:hover { color: var(--text-brand-primary); text-decoration: underline; }
.page-header__breadcrumbs [aria-current="page"] { color: var(--text-neutral-primary); }
.page-header__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); min-height: var(--space-3xl);
}
.page-header__title-group { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.page-header__title {
  margin: 0;
  font-size: var(--text-heading-lg-size);
  font-weight: var(--text-heading-lg-weight);
  line-height: var(--line-height-tight);
  color: var(--text-neutral-primary);
  font-family: var(--font-family-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-header__subtitle {
  margin: 0; font-size: var(--text-caption-size); color: var(--text-neutral-secondary);
}
.page-header__actions { display: flex; align-items: center; gap: var(--space-sm); }
.page-header__tabs {
  display: flex; gap: var(--space-lg);
  margin-top: var(--space-md);
  margin-bottom: calc(var(--space-md) * -1);
  border-bottom: var(--stroke-sm) solid var(--border-neutral-low);
}
.page-header__tabs[hidden] { display: none; }
.page-header__breadcrumbs[hidden] { display: none; }

/* MMP-612 Chunk 2 / MMP-625: standalone Provider Record pinned frame */
.page-provider-record {
  --record-header-height: 64px;
}
.page-provider-record .provider-record-shell {
  display: block;
}
.page-provider-record .provider-record-body {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-xl);
}
.page-provider-record .provider-record-gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  max-width: 40rem;
}
.page-provider-record .provider-record-gate.hidden { display: none; }
.page-provider-record .provider-record-page-header {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-neutral-primary);
  border: var(--stroke-sm) solid var(--border-neutral-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
  .page-provider-record .provider-record-page-header {
    position: sticky;
    top: 0;
    z-index: 60;
  }
}
.page-provider-record .provider-record-page-header .page-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}
.page-provider-record .provider-record-header-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--provider-color, var(--color-neutral-30));
  flex-shrink: 0;
}
.page-provider-record .provider-record-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  border-left: var(--stroke-sm) solid var(--border-neutral-primary);
  padding-left: var(--space-md);
  margin-left: var(--space-md);
}
/* MMP-869: on phones and small tablets the record header stacks the title above its actions,
   and the actions wrap, as on Teams and Zones; one row of actions forced the page 555-574 px wide. */
@media (max-width: 768px) {
  .page-provider-record .provider-record-page-header .page-header__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .page-provider-record .provider-record-page-header .page-header__actions {
    flex-wrap: wrap;
  }
  .page-provider-record .provider-record-user-info {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  /* Header buttons keep their own width (the phone rule .btn { width: 100% } would put
     "Open schedule" on a line of its own). */
  .page-provider-record .provider-record-page-header .page-header__actions .btn {
    width: auto;
  }
  /* The delete explanation gets the full width; the button sits below it. */
  .page-provider-record .provider-record-danger-zone {
    flex-direction: column;
    align-items: flex-start;
  }
}
.page-provider-record #providerNavigatorMount:empty {
  display: none;
}
.page-provider-record .provider-navigator {
  --control-height: 32px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 18rem;
}
.page-provider-record .provider-navigator .staffing-date-step-btn:disabled {
  color: var(--text-neutral-disabled);
  border-color: var(--border-neutral-secondary);
  background: var(--bg-neutral-disabled);
  cursor: default;
  pointer-events: none;
}
.page-provider-record .provider-navigator-dropdown {
  max-height: min(40vh, 20rem);
  overflow-y: auto;
  width: 100%;
  min-width: 14rem;
  box-sizing: border-box;
}
.page-provider-record .provider-navigator-option {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-neutral-primary);
  font-size: var(--font-size-body-sm);
}
.page-provider-record .provider-navigator-option:hover,
.page-provider-record .provider-navigator-option-active {
  background: var(--bg-neutral-hover);
}
.page-provider-record .provider-navigator-option-current {
  font-weight: var(--font-weight-semibold);
}
.page-provider-record .provider-navigator-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-provider-record .provider-record-rail {
  grid-column: 1;
  align-self: start;
  position: sticky;
  top: calc(var(--record-header-height) + var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.page-provider-record .provider-record-rail a {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.page-provider-record .provider-record-rail a:hover {
  background: var(--bg-neutral-hover);
  color: var(--text-neutral-primary);
}
.page-provider-record .provider-record-rail a.active {
  color: var(--text-brand-primary);
  border-left-color: var(--border-brand-primary);
  font-weight: var(--font-weight-semibold);
}
.page-provider-record .provider-record-main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  /* Trailing space so the last section can clear the pinned header on rail jumps (AC7). */
  padding-bottom: calc(100vh - var(--record-header-height) - var(--space-md));
}
.page-provider-record .provider-record-section-card {
  background: var(--bg-neutral-primary);
  border: var(--stroke-sm) solid var(--border-neutral-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  scroll-margin-top: calc(var(--record-header-height) + var(--space-md));
}
.page-provider-record .provider-record-section-card.provider-section {
  padding: var(--space-lg);
  border-bottom: none;
}
.page-provider-record .provider-record-actions-spacer { flex: 1; }
.page-provider-record .save-button-container {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-neutral-primary);
  border: var(--stroke-sm) solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  margin-top: 0;
}
.page-provider-record #recordDirtyState {
  font-size: var(--font-size-body-sm);
  color: var(--text-warning-primary);
  font-weight: var(--font-weight-semibold);
}
.page-provider-record .provider-record-danger-zone {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: var(--stroke-sm) solid var(--border-danger-primary, var(--border-neutral-primary));
  border-radius: var(--radius-sm);
  background: var(--bg-danger-subtle, var(--bg-neutral-secondary));
}
.page-provider-record .provider-record-danger-zone p {
  margin: 0;
  flex: 1;
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}
@media (max-width: 899px) {
  .page-provider-record .provider-record-body {
    grid-template-columns: 1fr;
  }
  .page-provider-record .provider-record-rail,
  .page-provider-record .provider-record-main {
    grid-column: 1;
  }
  .page-provider-record .provider-record-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
  }
  .page-provider-record .provider-record-rail a {
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-xs);
  }
  .page-provider-record .provider-record-rail a.active {
    border-left-color: transparent;
    border-bottom-color: var(--border-brand-primary);
  }
}

/* MMP-612 / MMP-614 Chunk 5: Reachout-derived Provider Number (read-only) */
.page-provider-record .derived-pill {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-full);
  vertical-align: middle;
  white-space: nowrap;
}

.page-provider-record .derived-field {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
  min-height: 40px;
  padding: var(--space-sm) var(--space-lg);
  border: 1px dashed var(--border-neutral-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-neutral-secondary);
}

.page-provider-record .derived-value {
  font-size: var(--font-size-body);
  font-weight: 600;
  font-family: var(--font-family-mono);
  color: var(--text-neutral-primary);
}

.page-provider-record .derived-field.is-nomatch .derived-value,
.page-provider-record .derived-field.is-ambiguous .derived-value,
.page-provider-record .derived-field.is-checking .derived-value,
.page-provider-record .derived-field.is-unavailable .derived-value {
  color: var(--text-neutral-tertiary);
  font-weight: 400;
}

.page-provider-record .derived-state {
  font-size: var(--font-size-body-sm);
  font-weight: 400;
  color: var(--text-neutral-secondary);
  line-height: 1.35;
}

.page-provider-record .derived-field.is-ambiguous .derived-state {
  color: var(--text-warning-primary, var(--text-neutral-secondary));
}

/* MMP-612 Chunk 3: Providers roster */
body.page-providers .providers-count {
  font-size: var(--font-size-body-sm);
  color: var(--text-neutral-secondary);
}

body.page-providers #newProviderLink {
  margin-left: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Keep New Provider + user-info grouped on the right (link already has margin-left: auto) */
body.page-providers .header.header--standalone .user-info {
  margin-left: 0;
}

body.page-providers .providers-toolbar {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

body.page-providers .providers-search {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  height: 40px;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-body-sm);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-input, var(--bg-neutral-primary));
  color: var(--text-neutral-primary);
}

body.page-providers .providers-search:focus {
  outline: 2px solid var(--border-brand-ring);
  outline-offset: 1px;
}

body.page-providers .providers-type-filter {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

body.page-providers .providers-type-filter button {
  height: 40px;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

body.page-providers .providers-type-filter button:hover {
  background: var(--bg-neutral-hover);
}

body.page-providers .providers-type-filter button[aria-pressed="true"] {
  color: var(--text-brand-primary);
  border-color: var(--border-brand-primary);
  background: var(--bg-brand-subtle, var(--bg-neutral-secondary));
}

body.page-providers .providers-status {
  margin-bottom: var(--space-md);
  min-height: 1.25em;
}

body.page-providers .providers-roster-list {
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

body.page-providers .provider-roster-head,
body.page-providers .provider-roster-row,
body.page-providers .provider-roster-skeleton {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) 88px minmax(72px, 0.7fr) 96px 110px minmax(180px, 1.8fr) minmax(88px, 0.8fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

/* Every grid cell must be free to shrink below its content's natural width -
   grid items default to min-width: auto, which silently defeats the
   ellipsis truncation on any cell whose content is wider than its track. */
body.page-providers .provider-roster-head > *,
body.page-providers .provider-roster-row > *,
body.page-providers .provider-roster-skeleton > * {
  min-width: 0;
}

body.page-providers .provider-roster-head:last-child,
body.page-providers .provider-roster-row:last-child,
body.page-providers .provider-roster-skeleton:last-child {
  border-bottom: none;
}

body.page-providers .provider-roster-head {
  background: var(--bg-table-header, var(--bg-neutral-secondary));
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-neutral-secondary);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

body.page-providers .provider-roster-row {
  text-decoration: none;
  color: inherit;
  background: var(--bg-neutral-primary);
  cursor: pointer;
}

body.page-providers .provider-roster-row:hover {
  background: var(--bg-neutral-hover);
}

body.page-providers .provider-roster-row:focus-visible {
  outline: 2px solid var(--border-brand-ring);
  outline-offset: -2px;
}

body.page-providers .provider-roster-skeleton > div {
  height: 14px;
  border-radius: var(--radius-xs);
  background: var(--bg-neutral-secondary);
}

body.page-providers .providers-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  min-width: 0;
}

body.page-providers .providers-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-providers .provider-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--border-neutral-primary);
  background: var(--provider-color, var(--color-neutral-30));
}

body.page-providers .providers-tl-badge {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-brand-primary);
  border: 1px solid var(--border-brand-primary);
  border-radius: var(--radius-full);
  padding: 0 5px;
}

body.page-providers .providers-cell-muted {
  display: block;
  color: var(--text-neutral-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-providers .providers-cred-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 0 6px;
  margin-right: 4px;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-full);
  background: var(--bg-neutral-secondary);
  color: var(--text-neutral-secondary);
}

body.page-providers .providers-empty-state {
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  color: var(--text-neutral-secondary);
  background: var(--bg-neutral-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

body.page-providers .providers-empty-state p {
  margin: 0;
}

body.page-providers .providers-empty-state a,
body.page-providers .providers-empty-state button {
  font-size: var(--font-size-body-sm);
}

/* MMP-869: the list picks its columns from its own width, not the screen's, because the
   sidebar takes a different share of the screen at each size. Seven columns need 826 px
   (track minimums 754 + six 8 px gaps + 24 px padding); below that the list keeps Name, Type,
   Phone and Email, then Name, Type and Phone, and under 390 px each row becomes a two-line
   card (SAP Signum data list: rows reflow as cards on small screens). */
body.page-providers .providers-roster-list {
  container: provider-roster / inline-size;
}

@container provider-roster (width < 826px) {
  body.page-providers .provider-roster-head,
  body.page-providers .provider-roster-row,
  body.page-providers .provider-roster-skeleton {
    grid-template-columns: minmax(150px, 1.5fr) 90px 110px minmax(180px, 1.8fr);
  }

  /* Keep Name / Type / Phone / Email; hide Credentials, Provider Number, Team */
  body.page-providers .provider-roster-head > :is(:nth-child(3), :nth-child(4), :nth-child(7)),
  body.page-providers .provider-roster-row > :is(:nth-child(3), :nth-child(4), :nth-child(7)),
  body.page-providers .provider-roster-skeleton > :is(:nth-child(3), :nth-child(4), :nth-child(7)) {
    display: none;
  }
}

@container provider-roster (width < 578px) {
  body.page-providers .provider-roster-head,
  body.page-providers .provider-roster-row,
  body.page-providers .provider-roster-skeleton {
    grid-template-columns: minmax(150px, 1.5fr) 90px 110px;
  }

  /* Keep Name / Type / Phone; also hide Email */
  body.page-providers .provider-roster-head > :nth-child(6),
  body.page-providers .provider-roster-row > :nth-child(6),
  body.page-providers .provider-roster-skeleton > :nth-child(6) {
    display: none;
  }
}

@container provider-roster (width < 390px) {
  /* Two-line cards: the name on the first line, type and phone on the second. The column
     header has nothing to label, so it is hidden; type and phone read on their own. */
  body.page-providers .provider-roster-head {
    display: none;
  }

  body.page-providers .provider-roster-row,
  body.page-providers .provider-roster-skeleton {
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
    grid-template-areas:
      "name name"
      "type phone";
    row-gap: var(--space-xxs);
  }

  body.page-providers .provider-roster-row > :nth-child(1),
  body.page-providers .provider-roster-skeleton > :nth-child(1) {
    grid-area: name;
  }

  body.page-providers .provider-roster-row > :nth-child(2),
  body.page-providers .provider-roster-skeleton > :nth-child(2) {
    grid-area: type;
  }

  body.page-providers .provider-roster-row > :nth-child(5),
  body.page-providers .provider-roster-skeleton > :nth-child(5) {
    grid-area: phone;
    justify-self: end;
  }
}

/* MMP-612 Phase 3 — Modern Provider Schedule */
.save-button-spacer {
  flex: 1;
}

.page-provider-schedule-modern .schedule-header-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row;
}

.page-provider-schedule-modern .schedule-header-card #addProviderBtn {
  align-self: center;
}

.page-provider-schedule-modern .typeahead-wrap {
  position: relative;
  min-width: 280px;
  flex: 1 1 280px;
}

.page-provider-schedule-modern .typeahead-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-body-sm);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-input, var(--bg-neutral-primary));
  color: var(--text-neutral-primary);
}

.page-provider-schedule-modern .typeahead-input:focus {
  outline: 2px solid var(--border-brand-ring);
  outline-offset: 1px;
}

.page-provider-schedule-modern .typeahead-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--bg-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.page-provider-schedule-modern .typeahead-list.hidden {
  display: none;
}

.page-provider-schedule-modern .typeahead-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-body-sm);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-neutral-primary);
}

.page-provider-schedule-modern .typeahead-list li.typeahead-empty {
  cursor: default;
  color: var(--text-neutral-secondary);
}

.page-provider-schedule-modern .typeahead-list li:hover:not(.typeahead-empty),
.page-provider-schedule-modern .typeahead-list li.hover:not(.typeahead-empty) {
  background: var(--bg-neutral-hover);
}

.page-provider-schedule-modern .typeahead-type {
  margin-left: auto;
  color: var(--text-neutral-tertiary);
  font-size: 12px;
}

.page-provider-schedule-modern .provider-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--bg-neutral-secondary);
  border: 1px solid var(--border-neutral-secondary);
}

.page-provider-schedule-modern .provider-color-dot.has-color {
  background: var(--provider-dot-color);
  border-color: transparent;
}

.page-provider-schedule-modern .schedule-no-provider-message {
  margin: var(--space-md) 0 0;
  color: var(--text-neutral-secondary);
  font-size: var(--font-size-body-sm);
}

.page-provider-schedule-modern .schedule-context-strip {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  font-size: var(--font-size-body-sm);
}

.page-provider-schedule-modern .schedule-context-strip .context-name {
  font-weight: 600;
  font-size: var(--font-size-body);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-neutral-primary);
}

.page-provider-schedule-modern .schedule-context-strip .context-fact {
  color: var(--text-neutral-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-provider-schedule-modern .schedule-context-strip .context-fact-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-neutral-tertiary);
}

.page-provider-schedule-modern .schedule-context-spacer {
  flex: 1;
}

.page-provider-schedule-modern .schedule-open-record {
  color: var(--text-brand-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-size-body-sm);
}

.page-provider-schedule-modern .schedule-open-record:hover {
  text-decoration: underline;
}

.page-provider-schedule-modern .schedule-open-record.is-disabled {
  pointer-events: none;
  color: var(--text-neutral-tertiary);
  text-decoration: none;
}

.page-provider-schedule-modern .pattern-region {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.page-provider-schedule-modern .pattern-region-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-neutral-secondary);
}

.page-provider-schedule-modern .weekly-cap-selector {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-body-sm);
}

.page-provider-schedule-modern .weekly-cap-selector label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-neutral-secondary);
  white-space: nowrap;
}

.page-provider-schedule-modern .weekly-cap-selector select {
  padding: 4px 8px;
  font-size: var(--font-size-body-sm);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-canvas);
  color: var(--text-neutral-primary);
}

/* =============================================================================
   MMP-672 / MMP-46: inert Record Attendance drawer (layout refinements only)
   ========================================================================== */

.attendance-backdrop,
.attendance-scope-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--drawer-z, 1100) - 1);
  transition: opacity 0.22s ease;
}

.attendance-scope-backdrop {
  z-index: calc(var(--drawer-z, 1100) + 2);
}

.attendance-backdrop[hidden],
.attendance-scope-backdrop[hidden],
.attendance-scope-modal[hidden] {
  display: none;
}

.drawer.drawer--attendance {
  width: min(480px, 40vw);
  z-index: var(--drawer-z, 1100);
  transition: transform 0.22s ease;
}

.drawer.drawer--attendance .drawer__close {
  min-width: 44px;
  min-height: 44px;
}

.drawer.drawer--attendance .drawer__close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.attendance-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.attendance-section + .attendance-section {
  margin-top: var(--space-xl, 20px);
  padding-top: var(--space-lg, 16px);
  border-top: 1px solid var(--border-neutral-secondary, #e5e5e5);
}

.attendance-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-sm, 8px);
}

.attendance-section-meta {
  font-size: var(--font-size-caption, 13px);
  color: var(--text-neutral-secondary, #666);
}

.attendance-planned,
.attendance-attended {
  display: grid;
  gap: 6px;
}

.attendance-planned-row,
.attendance-attended-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-neutral-secondary, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-neutral-secondary, #fafafa);
}

.attendance-attended-row {
  grid-template-columns: minmax(0, 1fr) 105px 42px 38px;
}

.attendance-person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.attendance-person-meta {
  color: var(--text-neutral-secondary, #666);
  font-size: var(--font-size-caption, 13px);
}

.attendance-lead-marker,
.attendance-inactive-marker {
  font-size: var(--font-size-caption, 13px);
  font-weight: 600;
  color: var(--text-brand-primary);
}

.attendance-inactive-marker {
  color: var(--text-neutral-secondary, #666);
}

.attendance-role-select {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  font: inherit;
  color: inherit;
  background: var(--bg-neutral-primary, #fff);
  border: 1px solid var(--border-neutral-primary, #ccc);
  border-radius: var(--radius-md, 6px);
}

.attendance-lead-toggle,
.attendance-remove {
  width: 38px;
  min-width: 38px;
  height: 36px;
  border: 1px solid var(--border-neutral-primary, #ccc);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-neutral-primary, #fff);
  color: inherit;
  cursor: pointer;
  font-weight: 700;
}

.attendance-lead-toggle[aria-pressed="true"] {
  color: var(--text-on-brand, #fff);
  background: var(--bg-brand-primary);
  border-color: var(--bg-brand-primary);
}

.attendance-remove {
  color: var(--text-error-primary, #a32020);
  font-size: 18px;
}

.attendance-empty {
  padding: 14px;
  border: 1px dashed var(--border-neutral-primary, #ccc);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-neutral-secondary, #fafafa);
}

.attendance-empty strong {
  display: block;
}

.attendance-empty p {
  margin: 2px 0 0;
  color: var(--text-neutral-secondary, #666);
}

.attendance-provider-adder {
  margin-top: 12px;
}

.attendance-provider-search-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-caption, 13px);
  color: var(--text-neutral-secondary, #666);
}

.attendance-provider-search {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  font: inherit;
  color: inherit;
  background: var(--bg-neutral-secondary, #fafafa);
  border: 1px solid var(--border-neutral-primary, #ccc);
  border-radius: var(--radius-md, 6px);
  box-sizing: border-box;
}

.attendance-provider-groups {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--border-neutral-secondary, #e5e5e5);
  border-radius: var(--radius-md, 6px);
}

.attendance-provider-group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 6px 10px;
  background: var(--bg-neutral-tertiary, #efefef);
  color: var(--text-neutral-secondary, #666);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.attendance-provider-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid var(--border-neutral-secondary, #e5e5e5);
  cursor: pointer;
}

.attendance-provider-option:hover {
  background: var(--bg-neutral-secondary, #fafafa);
}

.attendance-provider-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

.attendance-provider-option span {
  flex: 1 1 auto;
}

.attendance-provider-option small {
  color: var(--text-neutral-secondary, #666);
}

.attendance-status:empty {
  display: none;
}

.attendance-alert {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--border-error-primary, #c0392b);
  background: var(--bg-neutral-secondary, #fafafa);
}

.attendance-alert p {
  margin: 0 0 8px;
}

.attendance-alert p:last-child {
  margin-bottom: 0;
}

.attendance-skeleton-row {
  height: 48px;
  border-radius: var(--radius-md, 6px);
  background: var(--bg-neutral-tertiary, #efefef);
}

.attendance-drawer__footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border-top: 1px solid var(--border-neutral-secondary, #e5e5e5);
  background: var(--bg-neutral-secondary, #fafafa);
}

.attendance-footer-spacer {
  flex: 1 1 auto;
}

.attendance-drawer__footer .btn {
  min-width: 44px;
  min-height: 44px;
}

.attendance-drawer__footer [hidden] {
  display: none !important;
}

.btn-danger-quiet {
  background: transparent;
  color: var(--text-error-primary, #a32020);
  border-color: transparent;
}

.btn-danger-quiet:hover:not(:disabled) {
  background: var(--bg-neutral-tertiary, #efefef);
}

.attendance-scope-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--drawer-z, 1100) + 3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.attendance-radio-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border-neutral-primary, #ccc);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
}

.attendance-radio-option:has(input:checked) {
  border-color: var(--border-brand-primary);
  background: var(--bg-brand-subtle);
}

.attendance-radio-option input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.attendance-radio-option strong,
.attendance-radio-option small {
  display: block;
}

.attendance-radio-option small {
  color: var(--text-neutral-secondary, #666);
}

body.attendance-open {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .drawer.drawer--attendance {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
  }

  .attendance-attended-row {
    grid-template-columns: minmax(0, 1fr) 92px 38px 36px;
    padding: 6px;
    gap: 5px;
  }

  .attendance-drawer__footer {
    flex-wrap: wrap;
  }

  .attendance-footer-spacer {
    order: 1;
    flex-basis: 100%;
    height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer.drawer--attendance,
  .attendance-backdrop,
  .attendance-scope-backdrop,
  .attendance-scope-modal {
    transition: none;
  }
}

/* MMP-679: Config page loading overlay (content area only; sidebar stays interactive) */
body.page-config .app-container {
  position: relative;
}

.config-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 900; /* above page content, below sidebar (999+) and modals (2000) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 32vh;
  gap: 16px;
  background: rgba(250, 251, 252, 0.7);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.config-loading-overlay.hidden {
  display: none;
}

.config-loading-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.config-loading-progress-container.hidden {
  display: none;
}

.config-loading-timeout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  text-align: center;
  padding: 0 16px;
}

.config-loading-timeout-container.hidden {
  display: none;
}

.config-loading-error-message {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-danger, #d9383a);
  line-height: 1.4;
}

.config-loading-retry-btn {
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.config-loading-ring {
  transform: rotate(-90deg);
}

.config-loading-ring-track {
  fill: none;
  stroke: var(--border-neutral, #d8dfe8);
  stroke-width: 5;
}

.config-loading-ring-fill {
  fill: none;
  stroke: var(--brand-primary, #0f6f68);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}

.config-loading-message {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-neutral-primary, #1f2430);
}

.config-loading-detail {
  font-size: 12.5px;
  color: var(--text-neutral-secondary, #5a6472);
}

@media (prefers-reduced-motion: reduce) {
  .config-loading-ring-fill {
    transition: none;
  }
}

/* MMP-766 Retro Space Combat Arcade Modal */
.arcade-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 6, 15, 0.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  box-sizing: border-box;
  backdrop-filter: blur(4px);
}

.arcade-cabinet-container {
  display: flex;
  flex-direction: column;
  background: #0f131d;
  border: 3px solid #22293a;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.2);
  max-width: 520px;
  width: 100%;
  max-height: 96vh;
  overflow: hidden;
}

.arcade-bezel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #181f2f;
  border-bottom: 2px solid #28334b;
  gap: 8px;
  flex-wrap: wrap;
}

.arcade-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arcade-marquee-icon {
  color: #ffd700;
  font-size: 14px;
}

.arcade-marquee-text {
  font-family: monospace;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #00e5ff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

.arcade-controls-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arcade-bezel-btn {
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.arcade-bezel-btn.btn-sound-off {
  background: #2b3548;
  color: #ff8a80;
  border-color: #ff5252;
}

.arcade-bezel-btn.btn-sound-on {
  background: #1b5e20;
  color: #b9f6ca;
  border-color: #00e676;
}

.arcade-bezel-btn.btn-start {
  background: #006064;
  color: #84ffff;
  border-color: #00e5ff;
}

.arcade-bezel-btn.btn-start:hover {
  background: #00838f;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.arcade-bezel-btn.btn-exit {
  background: #37474f;
  color: #cfd8dc;
  border-color: #546e7a;
}

.arcade-bezel-btn.btn-exit:hover {
  background: #d32f2f;
  color: #fff;
  border-color: #f44336;
}

.arcade-screen-frame {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #101520;
}

#stardriveCanvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 3 / 4;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #060814;
  outline: none;
}

.arcade-crt-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
}

.arcade-touch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #141a27;
  border-top: 2px solid #28334b;
}

.touch-dpad {
  display: flex;
  gap: 10px;
}

.touch-btn {
  font-family: monospace;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #37474f;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  min-width: 54px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.touch-btn:active {
  transform: scale(0.94);
}

.touch-left,
.touch-right {
  background: #263238;
  color: #eceff1;
}

.touch-fire {
  background: #c62828;
  color: #ffffff;
  border-color: #e53935;
  padding: 0 20px;
  font-size: 14px;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .arcade-modal-overlay {
    padding: 0;
  }
  .arcade-cabinet-container {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
}

/* Day Sheet Send Confirmation Panel (MMP-779 / MMP-781) */
.day-sheet-send-confirmation-panel {
  padding: 1rem 0;
}

.daysheet-recipient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  min-height: 42px;
  background: var(--bg-neutral-subtle, #f8f9fa);
  border: 1px solid var(--border-neutral-subtle, #e2e8f0);
  border-radius: 4px;
  align-items: center;
}

.daysheet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #1e293b;
}

.daysheet-chip-to {
  background: #e2e8f0;
  border-color: #cbd5e1;
  font-weight: 500;
}

.daysheet-chip-manual {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.daysheet-badge-manual {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #e2e8f0;
  color: #475569;
  border-radius: 3px;
  line-height: 1.2;
}

.daysheet-reset-link {
  font-size: 0.8rem;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  color: var(--color-primary, #0066cc);
}

.daysheet-reset-link:hover {
  text-decoration: underline;
}

.daysheet-missing-email-notice {
  margin-top: 0.375rem;
  font-size: 0.825rem;
  font-style: italic;
  color: #64748b;
}

.daysheet-validation-alert {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0;
  border-radius: 4px;
}

.daysheet-chip-cc {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.daysheet-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
}

.daysheet-chip-remove:hover {
  background: #fee2e2;
  color: #ef4444;
}

.daysheet-chip-remove:focus {
  outline: 2px solid var(--color-primary, #0066cc);
  outline-offset: 1px;
}