/**
 * Design System Component Styles
 * These are the actual component styles to be previewed
 */

/* ========================================
 * Buttons
 * ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

/* Restore border-color for Bootstrap outline variants (.btn sets transparent above) */
.btn[class*="btn-outline-"] {
  border-color: var(--bs-btn-border-color);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----------------------------------------
 * Button loading / saved states
 * Usage on a primary action:
 *   .btn.btn-primary.is-loading[disabled]  → saving (spinner, full opacity)
 *   .btn.btn-primary.is-saved[disabled]    → saved confirmation (green)
 * ---------------------------------------- */
.btn-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

/* Saving: keep the button bold (not the dimmed default :disabled look),
   and stop the label swap from resizing the button. Force Bootstrap's
   disabled CSS vars back to the active fill so it doesn't wash out. */
.btn.is-loading {
  opacity: 1 !important;
  cursor: progress;
  min-width: 110px;
}

.btn-primary.is-loading:disabled,
.btn-primary.is-loading {
  --bs-btn-disabled-bg: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-opacity: 1;
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
}

.btn.is-loading .btn-spinner {
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
}

/* Saved: success confirmation — wins over Bootstrap's disabled vars. */
.btn-primary.is-saved,
.btn-primary.is-saved:disabled {
  opacity: 1 !important;
  min-width: 110px;
  --bs-btn-disabled-bg: var(--status-success);
  --bs-btn-disabled-border-color: var(--status-success);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-opacity: 1;
  background-color: var(--status-success) !important;
  border-color: var(--status-success) !important;
  color: #fff !important;
}

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

/* Secondary Button - uses Bootstrap default .btn-secondary */

/* Outline Button */
.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--surface-2);
  border-color: var(--cta-secondary);
  color: var(--cta-secondary);
}

/* Outline Secondary Button — overrides Bootstrap's full-fill hover */
.btn-outline-secondary {
  --bs-btn-color: var(--text-secondary, #4B5563);
  --bs-btn-border-color: var(--border-default, #D1D5DB);
  --bs-btn-hover-color: var(--text-primary, #1F2937);
  --bs-btn-hover-bg: var(--surface-3, #F3F4F6);
  --bs-btn-hover-border-color: var(--border-emphasis, #9CA3AF);
  --bs-btn-active-color: var(--text-primary, #1F2937);
  --bs-btn-active-bg: var(--surface-3, #F3F4F6);
  --bs-btn-active-border-color: var(--border-emphasis, #9CA3AF);
  --bs-btn-disabled-color: var(--text-muted, #9CA3AF);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--border-subtle, #E5E7EB);
  --bs-gradient: none;
  background-color: transparent;
  border: 1px solid var(--border-default, #D1D5DB);
  color: var(--text-secondary, #4B5563);
}

.btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--surface-3, #F3F4F6);
  border-color: var(--border-emphasis, #9CA3AF);
  color: var(--text-primary, #1F2937);
}

.btn-outline-secondary:active:not(:disabled) {
  background-color: var(--surface-3, #F3F4F6);
  border-color: var(--border-emphasis, #9CA3AF);
  color: var(--text-primary, #1F2937);
}

/* Dark mode */
[data-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--text-secondary, #8B949E);
  --bs-btn-border-color: var(--border-default, rgba(48, 54, 61, 1));
  --bs-btn-hover-color: var(--text-primary, #E6EDF3);
  --bs-btn-hover-bg: var(--surface-3, #21262D);
  --bs-btn-hover-border-color: var(--border-emphasis, rgba(139, 148, 158, 0.4));
  border-color: var(--border-default, rgba(48, 54, 61, 1)) !important;
  color: var(--text-secondary, #8B949E);
}

[data-theme="dark"] .btn-outline-secondary:hover:not(:disabled),
[data-bs-theme="dark"] .btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--surface-3, #21262D);
  border-color: var(--border-emphasis, rgba(139, 148, 158, 0.4));
  color: var(--text-primary, #E6EDF3);
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--surface-3);
  color: var(--text-primary);
}

/* Danger Button */
.btn-danger {
  background-color: var(--status-error);
  color: white;
  border-color: var(--status-error);
}

.btn-danger:hover:not(:disabled) {
  background-color: #B91C1C;
  border-color: #B91C1C;
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

/* Icon Button */
.btn-icon {
  padding: var(--space-2);
  width: 32px;
  height: 32px;
}

.btn-icon i {
  font-size: 16px;
}

/* Compact Add Button — icon-only "+", for use in table rows */
.btn-add-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--cta-primary);
  color: #fff;
  font-size: 14px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-add-compact:hover {
  background: var(--cta-primary-hover);
}

.btn-add-compact:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

[data-theme="dark"] .btn-add-compact,
[data-bs-theme="dark"] .btn-add-compact {
  background: var(--cta-primary);
  color: #fff;
}

[data-theme="dark"] .btn-add-compact:hover,
[data-bs-theme="dark"] .btn-add-compact:hover {
  background: var(--cta-primary-hover);
}

/* ========================================
 * Dropdowns
 * Standard for all dropdown menus (body-mounted via container="body").
 * No internal padding gaps — hover extends to absolute edges.
 * ======================================== */

/* Hide Bootstrap caret on dropdown toggles */
.dropdown-toggle::after {
  display: none !important;
}

/* Chevron inside dropdown-toggle: thin, inset, rotates when open */
.dropdown-toggle > .bi-chevron-down {
  font-size: 9px;
  transition: transform 0.15s ease;
}
.dropdown-toggle > .bi-chevron-down.rotate-180 {
  transform: rotate(180deg);
}

/* Canonical popover / menu / dropdown surface (Impeccable v2 — 2026-05-24)
 *
 * EVERY in-product popover (action menu, status picker, role picker, column
 * options, filter dropdown) must inherit this exact surface:
 *   - 1px subtle border
 *   - 4px radius (matches table corners)
 *   - menu-popover shadow (shadow-md)
 *   - surface-2 background (white light / panel dark)
 *   - viewport-aware: clamped to viewport, body-mounted via container="body"
 *   - 1px subtle row border between adjacent menu items (auto, no manual <hr>)
 *
 * Reference pages: /dashboard/plans, /dashboard/plans/students, /dashboard/auditor
 */
.dropdown-menu {
  padding: 0 !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  background-color: var(--surface-2);
  overflow: hidden; /* clips hover bg to border-radius — full-bleed first/last */
  /* Viewport-aware sizing guards — popover never exceeds viewport on small screens
     or in awkward placements. Combined with container="body" + Popper flip, this
     guarantees the menu always lands in the visible area. */
  max-width: calc(100vw - var(--space-4));
  max-height: calc(100vh - var(--space-4));
  overflow-y: auto;
}

.dropdown-item {
  padding: var(--space-2) var(--space-3) !important;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

/* Auto-divider between adjacent menu items — every item after the first gets
   a 1px top border, so authors never need <hr class="dropdown-divider"> for the
   normal case. Manual .dropdown-divider still works for explicit section breaks. */
.dropdown-menu > li + li > .dropdown-item,
.dropdown-menu > .dropdown-item + .dropdown-item {
  border-top: 1px solid var(--border-subtle);
}

/* Suppress the auto-border when an explicit divider is already present. */
.dropdown-menu > li.dropdown-divider + li > .dropdown-item,
.dropdown-menu > .dropdown-divider + .dropdown-item {
  border-top: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--selection-bg);
  color: var(--text-primary);
}

/* Dropdown danger items (e.g., Delete User, Deactivate) */
.dropdown-item.text-warning {
  color: var(--status-warning) !important;
}
.dropdown-item.text-warning:hover {
  background-color: rgba(202, 138, 4, 0.08);
}
.dropdown-item.text-success {
  color: var(--status-success) !important;
}
.dropdown-item.text-success:hover {
  background-color: rgba(22, 163, 74, 0.08);
}
.dropdown-item.text-danger,
.dropdown-item-danger {
  color: var(--status-error) !important;
  font-weight: var(--font-weight-medium);
}
.dropdown-item.text-danger:hover,
.dropdown-item-danger:hover {
  background-color: rgba(220, 38, 38, 0.08) !important;
}

/* Dropdown divider — zero margin, sits flush against adjacent items */
.dropdown-divider {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  border-top: 1px solid var(--border-subtle);
  background-color: transparent !important;
  opacity: 1;
}

/* Dropdown list items — no default padding/margin */
.dropdown-menu > li {
  margin: 0;
  padding: 0;
}

/* Danger zone section — no extra padding, hover fills to divider edges */
.dropdown-danger-zone {
  padding: 0 !important;
}
.dropdown-danger-zone .dropdown-danger-label {
  display: block;
  padding: var(--space-1) var(--space-3);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  cursor: default;
}
.dropdown-danger-zone .dropdown-item {
  cursor: pointer;
}

/* Scrollable dropdown popovers (body-mounted — component CSS can't reach these)
 * Used for role pickers, status changers, and similar inline table dropdowns.
 * Must be global because container="body" moves them outside Angular component DOM. */
.role-popover,
.status-popover {
  overflow-y: auto !important;
  overflow-x: hidden;
}
.role-popover {
  min-width: 200px;
  max-height: 300px;
}
.status-popover {
  min-width: 180px;
}
.role-popover .dropdown-item,
.status-popover .dropdown-item {
  font-size: var(--font-size-sm);
  padding: 6px var(--space-3) !important;
}
.role-popover .form-check-input {
  width: 14px;
  height: 14px;
  margin-top: 0;
}

/* Grade mismatch popover (body-mounted via ngx-bootstrap popover) */
.grade-mismatch-popover {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  max-width: 300px;
}

.grade-mismatch-popover .popover-title-row {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--status-info, #0d6efd);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
}

[data-bs-theme="dark"] .grade-mismatch-popover .popover-title-row {
  color: var(--status-info, #58a6ff);
}

/* Dark mode dropdown — bg matches table, hover matches row hover */
[data-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--surface-1, #0D1117) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-secondary, #8B949E);
}
[data-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: var(--surface-2, #161B22) !important;
  color: var(--text-primary, #E6EDF3);
}
[data-theme="dark"] .dropdown-item.text-warning:hover,
[data-bs-theme="dark"] .dropdown-item.text-warning:hover {
  background-color: rgba(210, 153, 34, 0.12);
}
[data-theme="dark"] .dropdown-item.text-success:hover,
[data-bs-theme="dark"] .dropdown-item.text-success:hover {
  background-color: rgba(63, 185, 80, 0.12);
}
[data-theme="dark"] .dropdown-item.text-danger:hover,
[data-bs-theme="dark"] .dropdown-item.text-danger:hover,
[data-theme="dark"] .dropdown-item-danger:hover,
[data-bs-theme="dark"] .dropdown-item-danger:hover {
  background-color: rgba(248, 81, 73, 0.12) !important;
}

/* ========================================
 * Dark Mode Scrollbars
 * Visible thumb on dark surfaces (dropdowns, popovers, panels)
 * ======================================== */
[data-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .dropdown-menu {
  scrollbar-color: rgba(139, 148, 158, 0.3) var(--surface-1, #0D1117);
  scrollbar-width: thin;
}
[data-theme="dark"] .dropdown-menu::-webkit-scrollbar,
[data-bs-theme="dark"] .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
[data-theme="dark"] .dropdown-menu::-webkit-scrollbar-track,
[data-bs-theme="dark"] .dropdown-menu::-webkit-scrollbar-track {
  background: var(--surface-1, #0D1117);
}
[data-theme="dark"] .dropdown-menu::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .dropdown-menu::-webkit-scrollbar-thumb {
  background-color: rgba(139, 148, 158, 0.3);
  border-radius: 3px;
}
[data-theme="dark"] .dropdown-menu::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(139, 148, 158, 0.5);
}

/* ========================================
 * Bulk Action Bar Buttons
 * Normalize button heights in selection action bars.
 * ======================================== */
.bulk-action-bar .btn {
  padding: 4px var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* ========================================
 * Table Row Action Buttons
 * 3-dot menus in table rows: bordered by default,
 * matching the Evidence button style in table-action-group.
 * ======================================== */

/* Action button — bordered, standalone 3-dot buttons (NOT inside table-action-group) */
.table td .btn.dropdown-toggle:not(.table-action-more),
.admin-table td .btn.dropdown-toggle:not(.table-action-more) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default, #D1D5DB) !important;
  background: transparent !important;
  color: var(--text-secondary, #4B5563);
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm, 4px);
  box-shadow: none !important;
  transition: all var(--transition-fast);
}

.table td .btn.dropdown-toggle:not(.table-action-more)::after,
.admin-table td .btn.dropdown-toggle:not(.table-action-more)::after {
  display: none; /* hide Bootstrap caret */
}

.table td .btn.dropdown-toggle:not(.table-action-more):hover,
.admin-table td .btn.dropdown-toggle:not(.table-action-more):hover {
  color: var(--text-primary, #1F2937);
  background: var(--surface-3, #F3F4F6) !important;
  border-color: var(--border-emphasis, #9CA3AF) !important;
}

/* Dropdown open state — standalone */
.table td .btn.dropdown-toggle:not(.table-action-more)[aria-expanded="true"],
.admin-table td .btn.dropdown-toggle:not(.table-action-more)[aria-expanded="true"] {
  border-color: var(--border-emphasis, #9CA3AF) !important;
  background: var(--surface-2, #F9FAFB) !important;
  color: var(--text-primary, #1F2937);
}

/* Dark mode — standalone dropdown toggles */
[data-theme="dark"] .table td .btn.dropdown-toggle:not(.table-action-more),
[data-bs-theme="dark"] .table td .btn.dropdown-toggle:not(.table-action-more),
[data-theme="dark"] .admin-table td .btn.dropdown-toggle:not(.table-action-more),
[data-bs-theme="dark"] .admin-table td .btn.dropdown-toggle:not(.table-action-more) {
  border-color: var(--border-default, rgba(48, 54, 61, 1)) !important;
  color: var(--text-secondary, #8B949E);
}

[data-theme="dark"] .table td .btn.dropdown-toggle:not(.table-action-more):hover,
[data-bs-theme="dark"] .table td .btn.dropdown-toggle:not(.table-action-more):hover,
[data-theme="dark"] .admin-table td .btn.dropdown-toggle:not(.table-action-more):hover,
[data-bs-theme="dark"] .admin-table td .btn.dropdown-toggle:not(.table-action-more):hover {
  background: var(--surface-3, #21262D) !important;
  border-color: var(--border-emphasis, rgba(139, 148, 158, 0.4)) !important;
  color: var(--text-primary, #E6EDF3);
}

[data-theme="dark"] .table td .btn.dropdown-toggle:not(.table-action-more)[aria-expanded="true"],
[data-bs-theme="dark"] .table td .btn.dropdown-toggle:not(.table-action-more)[aria-expanded="true"],
[data-theme="dark"] .admin-table td .btn.dropdown-toggle:not(.table-action-more)[aria-expanded="true"],
[data-bs-theme="dark"] .admin-table td .btn.dropdown-toggle:not(.table-action-more)[aria-expanded="true"] {
  border-color: var(--border-emphasis, rgba(139, 148, 158, 0.4)) !important;
  background: var(--surface-2, #161B22) !important;
  color: var(--text-primary, #E6EDF3);
}

/* Z-index: lift cells above adjacent rows when dropdown is open */
.table td:has(> .btn.dropdown-toggle[aria-expanded="true"]),
.admin-table td:has(> .btn.dropdown-toggle[aria-expanded="true"]),
.table td:has(.table-action-group .dropdown-toggle[aria-expanded="true"]),
.admin-table td:has(.table-action-group .dropdown-toggle[aria-expanded="true"]) {
  position: relative;
  z-index: 10;
}

/* ========================================
 * Table Row Action Menu (Native <details>)
 * Lightweight kebab menu using native HTML disclosure.
 * No JS needed — click to open, click away to close.
 * ======================================== */

.table-row-action {
  position: relative;
  display: inline-block;
}

.table-row-action > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  list-style: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.table-row-action > summary:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.table-row-action > summary::-webkit-details-marker {
  display: none;
}

.table-row-action > summary::marker {
  display: none;
  content: "";
  font-size: 0;
}

.table-row-action-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-1);
  min-width: 160px;
  margin-block: 0;
  padding: 0;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  overflow: hidden;
}

.table-row-action-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.table-row-action-dropdown a,
.table-row-action-dropdown button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: background-color var(--transition-fast);
}

.table-row-action-dropdown a:hover,
.table-row-action-dropdown button:hover {
  background: var(--selection-bg);
  color: var(--text-primary);
  text-decoration: none;
}

.table-row-action-dropdown i {
  width: 1rem;
  opacity: 0.7;
}

.table-row-action-dropdown .disabled,
.table-row-action-dropdown [disabled] {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.5;
}

.table-row-action-dropdown .disabled:hover,
.table-row-action-dropdown [disabled]:hover {
  background: transparent;
}

/* ========================================
 * Evidence Actions Kebab Toggle
 * Used by every list that surfaces evidence records (auditor, school admin,
 * teacher activity). Pairs with ngx-bootstrap [dropdown] container="body" so
 * the menu mounts outside the table cell and isn't clipped.
 * ======================================== */
.evidence-actions-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.evidence-actions-toggle:hover,
.evidence-actions-toggle:focus-visible {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  outline: none;
}

.evidence-actions-toggle[aria-expanded="true"] {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.evidence-actions-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.evidence-actions-toggle .bi {
  font-size: 14px;
  line-height: 1;
}

/* ========================================
 * Evidence Deletion Confirm Modal
 * Body-mounted via ngx-bootstrap modal — styles must live in design-system.
 * ======================================== */
.evidence-deletion-modal-wrapper .modal-content {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
}

.evidence-deletion-modal {
  font-size: var(--font-size-sm);
}

.evidence-deletion-modal .modal-header {
  border-bottom: 1px solid var(--border-subtle);
}

.evidence-deletion-modal .modal-title {
  font-size: var(--font-size-md);
}

.evidence-deletion-modal .evidence-context-summary {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evidence-deletion-modal .evidence-context-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-3);
  align-items: start;
  text-align: left;
}

.evidence-deletion-modal .evidence-context-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.evidence-deletion-modal .evidence-audit-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(202, 138, 4, 0.08);
  border: 1px solid rgba(202, 138, 4, 0.25);
  color: var(--status-warning, #ca8a04);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

[data-bs-theme="dark"] .evidence-deletion-modal .evidence-audit-notice {
  background: rgba(250, 204, 21, 0.08);
  border-color: rgba(250, 204, 21, 0.3);
  color: #facc15;
}

.evidence-deletion-modal textarea.form-control {
  resize: vertical;
  min-height: 72px;
}

/* Auth-provider badges — match badge sizing standard (29px tall like .badge) */
.auth-provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0.35em 0.65em;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 20px;
}

.auth-provider-badge i {
  font-size: var(--font-size-xs);
}

/* ============================================
   Info Box — compact data display boxes
   Used in student journal header, profile pages
   ============================================ */
.info-box {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs, 2px);
    padding: var(--space-2);
    box-shadow: var(--shadow-sm);
}

.info-box-heading {
    font-size: var(--font-size-xs, 10px);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-box-value {
    font-size: var(--font-size-sm, 11px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
    margin-bottom: 0;
}

[data-bs-theme="dark"] .info-box {
    border-color: var(--border-subtle);
    box-shadow: none;
}

/* ========================================
 * Form Elements
 * ======================================== */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.form-hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Text Input */
.form-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--surface-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:hover:not(:disabled) {
  border-color: var(--border-emphasis);
}

.form-input:focus {
  outline: none;
  border-color: var(--cta-secondary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-input:disabled {
  background-color: var(--surface-2);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Input States */
.form-input.is-error {
  border-color: var(--status-error);
}

.form-input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.form-error {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--status-error);
}

/* Select */
.form-select {
  width: 100%;
  height: 32px;
  padding: var(--space-2) 32px var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--surface-0);
  /* Light mode chevron - #6E7681 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236E7681' d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  appearance: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* Dark mode chevron - #8B949E for visibility on dark backgrounds */
[data-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238B949E' d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
}

.form-select:hover:not(:disabled) {
  border-color: var(--border-emphasis);
}

.form-select:focus {
  outline: none;
  border-color: var(--cta-secondary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-select:disabled {
  background-color: var(--surface-2);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ----------------------------------------
 * `.ds-select` — global utility that pins down chevron position so it never
 * gets misaligned by component-level `.form-select` overrides. Use this on
 * any <select> that needs the standard small-form chevron from the design
 * system (matches the look used on /orgs/features). Apply alongside
 * `form-select form-select-sm`.
 * ---------------------------------------- */
.ds-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Chevron painted by the global form-select rules above. The padding-right
   * here guarantees the chevron has space, even if a parent overrides
   * font-size or other paddings. */
  padding-right: 28px !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
}
.ds-select:focus {
  outline: none;
}


/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.form-check-input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  margin-top: 2px;          /* align with first line of text */
  cursor: pointer;
  accent-color: var(--cta-secondary);
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* ----------------------------------------
 * Split Export Button (standard)
 * btn-group with primary action + chevron-down trigger
 * Usage:
 *   .btn-group
 *     button.btn.btn-outline-secondary.btn-sm  (primary action)
 *     button.btn.btn-outline-secondary.btn-sm.btn-split-trigger
 *       i.bi.bi-chevron-down
 * ---------------------------------------- */
.btn-split-trigger {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

.btn-split-trigger .bi-chevron-down {
  font-size: 10px;
}

/* ----------------------------------------
 * Filter Bar Switch
 * A compact toggle for use inside filter bars alongside
 * btn-group grade selectors and dropdown filter buttons.
 * Matches 30px control height (padding:6px 10px, font-size:11px, line-height:1.5).
 *
 * Usage:
 *   .filter-group
 *     label.form-label  (e.g. "Enrolment")
 *     .form-check.form-switch.filter-bar-switch
 *       input.form-check-input[type=checkbox][role=switch]
 * ---------------------------------------- */
.filter-bar-switch {
  margin: 0;
  padding: 0;
  padding-left: 0 !important;   /* override .form-switch padding-left: 2.5em */
  min-height: unset;
  display: flex;
  align-items: center;
  height: 30px;
}

.filter-bar-switch .form-check-input {
  width: 2em !important;
  height: 1em !important;
  margin: 0 !important;         /* override .form-switch margin-left: -2.5em */
  border-radius: 2em;
  cursor: pointer;
}

/* ----------------------------------------
 * Filter Bar Controls
 * Reusable 30px-height filter bar pattern for search inputs,
 * button groups, and standalone filter buttons.
 * All colours via tokens — dark mode works automatically.
 *
 * Usage:
 *   .filter-bar-group          (flex column: label on top, control below)
 *     .filter-bar-label        (10px uppercase label)
 *     .filter-bar-control      (input/select at 30px)
 *     — or —
 *     .btn-group.filter-bar-btn-group
 *       button.btn.filter-bar-btn
 *     — or —
 *     button.btn.filter-bar-btn  (standalone: plan dropdown, export)
 * ---------------------------------------- */
.filter-bar-group {
  min-width: fit-content;
  display: flex;
  flex-direction: column;
}

.filter-bar-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-1);
}

.filter-bar-control {
  font-size: var(--font-size-sm);
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  line-height: 1;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-0);
  color: var(--text-primary);
  transition: border-color var(--transition-fast);
}

.filter-bar-control:focus {
  outline: none;
  border-color: var(--cta-secondary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.filter-bar-control::placeholder {
  color: var(--text-muted);
}

/* Button group variant — all children at 30px */
.filter-bar-btn-group .btn {
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  line-height: 1;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

/* Use :first-of-type / :last-of-type so a sibling <ul.dropdown-menu> inside
   the group (Bootstrap's standard structure for split-button popovers) does
   not disqualify the trailing button from the right-rounded rule.
   !important is needed because Bootstrap's
   `.btn-group > .btn:not(:last-child):not(.dropdown-toggle)` selector
   (specificity 0,4,0) zero-out border-top-right/border-bottom-right radius
   for any .btn followed by a sibling — which an inline <ul.dropdown-menu>
   makes the trailing button qualify for. */
.filter-bar-btn-group .btn:first-of-type {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

.filter-bar-btn-group .btn:last-of-type {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  border-left-width: 1px;
}

.filter-bar-btn-group .btn:first-of-type:last-of-type {
  border-radius: var(--radius-sm) !important;
}

.filter-bar-btn-group .btn:not(:last-of-type) {
  border-right: none;
}

.filter-bar-btn-group .btn:hover {
  background-color: var(--hover-bg);
  border-color: var(--border-default);
  color: var(--text-primary);
  z-index: 1;
}

.filter-bar-btn-group .btn.active {
  background-color: var(--border-emphasis);
  border-color: var(--border-emphasis);
  color: #FFFFFF;
  font-weight: var(--font-weight-medium);
  z-index: 1;
}

/* Standalone filter button (plan dropdown, export).
   Border colour is set on all four sides — overrides Bootstrap .btn-outline-secondary
   which leaks mixed per-side colours when composed (border-top mismatch on hover etc). */
.filter-bar-btn {
  font-size: var(--font-size-sm);
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  line-height: 1;
  border: 1px solid var(--border-subtle);
  border-color: var(--border-subtle) !important; /* break Bootstrap per-side override */
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.filter-bar-btn:hover,
.filter-bar-btn:focus {
  border-color: var(--border-default) !important;
}

.filter-bar-btn:hover {
  background-color: var(--hover-bg);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.filter-bar-btn.active {
  background-color: var(--border-emphasis);
  border-color: var(--border-emphasis);
  color: #FFFFFF;
  font-weight: var(--font-weight-medium);
}

/* ----------------------------------------
 * Date Range Bar
 * Preset date range selector for report filter bars.
 * Pill buttons for common ranges (7d, 14d, 21d, 30d,
 * Prev Month) plus optional custom date inputs.
 *
 * HTML:
 *   <div class="date-range-bar">
 *     <button class="date-range-btn" type="button">7d</button>
 *     <button class="date-range-btn active" type="button">21d</button>
 *     <button class="date-range-btn" type="button">Custom</button>
 *     <div class="date-range-custom">
 *       <input type="date" class="date-range-input" />
 *       <span class="date-range-separator">to</span>
 *       <input type="date" class="date-range-input" />
 *     </div>
 *   </div>
 * ---------------------------------------- */

.date-range-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.date-range-btn {
  font-size: var(--font-size-sm);
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  line-height: 1;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.date-range-btn:hover {
  background: var(--hover-bg);
  border-color: var(--border-default);
}

.date-range-btn.active {
  background: var(--border-emphasis);
  border-color: var(--border-emphasis);
  color: #fff;
  font-weight: var(--font-weight-medium);
}

.date-range-custom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.date-range-input {
  font-size: var(--font-size-sm);
  height: var(--control-height-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  background: transparent;
  color: var(--text-primary);
  line-height: 1;
  transition: border-color var(--transition-fast);
}

.date-range-input:focus {
  outline: none;
  border-color: var(--cta-secondary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.date-range-separator {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  padding: 0 var(--space-1);
}

/* Dark mode */
[data-bs-theme="dark"] .date-range-btn {
  color: var(--text-secondary);
}

[data-bs-theme="dark"] .date-range-btn:hover {
  color: #FF6B35;
  background: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.2);
}

[data-bs-theme="dark"] .date-range-btn.active {
  background: rgba(255, 107, 53, 0.15);
  border-color: rgba(255, 107, 53, 0.3);
  color: var(--cta-primary);
}

[data-bs-theme="dark"] .date-range-input {
  background: var(--surface-1);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* Textarea */
.form-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-3);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--surface-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: all var(--transition-fast);
}

.form-textarea:focus {
  outline: none;
  border-color: var(--cta-secondary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ========================================
 * Cards
 * ======================================== */
.card {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.card-hover:hover {
  border-color: var(--border-emphasis);
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.card-body {
  padding: var(--space-4);
}

.card-footer {
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
}

/* Dark mode card overrides — subtle borders */
[data-bs-theme="dark"] .card {
  background-color: var(--card-bg, #161B22);
  border-color: var(--card-border, rgba(48, 54, 61, 0.2));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background: var(--surface-2, #21262D);
  border-color: var(--card-border, rgba(48, 54, 61, 0.2));
}

/* ========================================
 * Page Headings
 * .page-title  — main page heading (group name, page name)
 * h2           — section heading ("Students", "Case Notes")
 * .section-title — compact subsection label (16px)
 * ======================================== */
.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #1F2937);
  margin: 0 0 4px;
  line-height: 1.3;
}

h2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary, #1F2937);
  margin: 0 0 12px;
  line-height: 1.3;
}

[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] h2 {
  color: var(--text-primary, #E6EDF3);
}

/* Compact subsection label (~70% of h2) */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1F2937);
  margin-bottom: 0;
  line-height: 1.3;
}

.section-description {
  font-size: var(--font-size-sm, 11px);
  color: var(--text-secondary, #6B7280);
  margin-bottom: 6px;
  line-height: 1.5;
}

.section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #6B7280);
  margin-bottom: 8px;
}

[data-bs-theme="dark"] .section-title {
  color: var(--text-primary, #E6EDF3);
}

[data-bs-theme="dark"] .section-description {
  color: #6B7280;
}

[data-bs-theme="dark"] .section-label {
  color: #8B949E;
}

/* Metric Card */
.metric-card {
  padding: var(--space-4);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

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

.metric-card-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-card-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

/* Snapshot Card Heading — reusable label for compact dashboard cards */
.snapshot-heading {
  font-size: var(--font-size-xs, 0.65rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0;
}

/* Snapshot Card — shared container for chart/cadence/stats cards */
.snapshot-card {
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.metric-card-value.success { color: var(--status-success); }
.metric-card-value.warning { color: var(--status-warning); }
.metric-card-value.error { color: var(--status-error); }

.metric-card-subtext {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Metric Badge — inline stat value in compact summary cards */
.metric-badge {
  font-size: var(--font-size-lg, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary);
}

/* ========================================
 * Tables
 * ======================================== */
/* Table Container — wrap any .table in this for rounded corners */
.table-container {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table th,
.table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
}

.table th {
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-default);
}

.table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}

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

.table tbody tr:hover {
  background-color: var(--surface-2);
}

.table-striped tbody tr:nth-child(even) {
  background-color: var(--surface-1);
}

/* Compact table variant */
.table-compact th,
.table-compact td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
}

.table-compact th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Action column — right-aligned, top-aligned, snug padding */
.action-column {
  text-align: right;
  vertical-align: top;
  padding-right: var(--space-2);
  white-space: nowrap;
  width: 1%; /* shrink to content */
}

/* Compact action button group inside .action-column
   USAGE:
     <td class="action-column">
       <div class="action-cell-controls btn-group btn-group-sm">
         <button class="btn btn-outline-secondary action-view-button action-view-button--single">View</button>
       </div>
     </td>
   Or with a chevron menu beside it:
     <div class="action-cell-controls btn-group btn-group-sm">
       <button class="btn btn-outline-secondary action-view-button action-view-button--with-menu">View</button>
       <button class="btn btn-outline-secondary student-actions-dropdown"><i class="bi bi-three-dots"></i></button>
     </div>
*/
.action-cell-controls {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.action-column .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 24px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 1;
}

.action-column .action-view-button--with-menu {
  border-right-color: var(--border-subtle);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.action-column .action-view-button--single {
  border: 1px solid var(--border-subtle);
}

.action-column .student-actions-dropdown {
  margin-left: 0 !important;
  border-left-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: 24px;
  padding-left: 4px;
  padding-right: 4px;
}

.action-column .action-view-button--with-menu:focus,
.action-column .action-view-button--with-menu:hover {
  border-right-color: var(--border-subtle);
}

.action-column .student-actions-dropdown:focus,
.action-column .student-actions-dropdown:hover {
  border-left-color: var(--border-subtle);
}

.action-cell-controls:has(.student-actions-dropdown:hover) .action-view-button--with-menu {
  border-right-color: transparent;
}

/* ========================================
 * Alerts
 * ======================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.alert-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.alert-success {
  background-color: rgba(22, 163, 74, 0.1);
  color: var(--status-success);
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.alert-warning {
  background-color: rgba(202, 138, 4, 0.1);
  color: var(--status-warning);
  border: 1px solid rgba(202, 138, 4, 0.3);
}

.alert-error {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--status-error);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.alert-info {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--status-info);
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.alert-brand {
  background-color: rgba(255, 104, 19, 0.08);
  color: var(--brand-orange);
  border: 1px solid rgba(255, 104, 19, 0.25);
}

[data-theme="dark"],
[data-bs-theme="dark"] .alert-success {
  background-color: rgba(63, 185, 80, 0.1);
  border-color: rgba(63, 185, 80, 0.3);
}

[data-theme="dark"],
[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(210, 153, 34, 0.1);
  border-color: rgba(210, 153, 34, 0.3);
}

[data-theme="dark"],
[data-bs-theme="dark"] .alert-error {
  background-color: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
}

[data-theme="dark"],
[data-bs-theme="dark"] .alert-info {
  background-color: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.3);
}

[data-theme="dark"],
[data-bs-theme="dark"] .alert-brand {
  background-color: rgba(255, 138, 70, 0.1);
  border-color: rgba(255, 138, 70, 0.25);
}

/* ========================================
 * Table Filter Bar
 * Standardized toolbar above admin tables
 * for filters, search, and action buttons
 * ======================================== */
.table-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.table-filter-bar .filter-group {
  display: flex;
  flex-direction: column;
}

.table-filter-bar .filter-group--search {
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 360px;
}

/* Top-level .filter-label — works anywhere, not just inside .table-filter-bar.
   Per DESIGN.md: 10px, 500 weight, uppercase, 0.03em letter-spacing. */
.filter-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}

.table-filter-bar .filter-group label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}

.table-filter-bar select,
.table-filter-bar .form-select,
.table-filter-bar input[type="text"],
.table-filter-bar input[type="search"],
.table-filter-bar .form-control {
  height: 32px;
  min-height: 32px;
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

.table-filter-bar select,
.table-filter-bar .form-select {
  padding-right: 28px;
  background-size: 12px 12px;
}

.table-filter-bar .filter-actions {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.table-filter-bar .filter-actions .btn {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  white-space: nowrap;
}

.table-filter-bar .filter-summary {
  display: inline-flex;
  align-items: center;
  height: 32px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.table-filter-bar .filter-clear-btn {
  color: var(--text-secondary);
}

.filter-status-tabs {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
}

.filter-status-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 var(--space-3);
  border: 0;
  border-right: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.filter-status-tab:last-child {
  border-right: 0;
}

.filter-status-tab:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.filter-status-tab.active {
  background: var(--selection-bg);
  color: var(--selection-color);
}

.filter-view-toggle {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
}

.filter-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  border: 0;
  border-right: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.filter-view-toggle-btn:last-child {
  border-right: 0;
}

.filter-view-toggle-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.filter-view-toggle-btn.active {
  background: var(--selection-bg);
  color: var(--selection-color);
}

.filter-view-toggle-btn i {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 768px) {
  .table-filter-bar {
    align-items: stretch;
  }

  .table-filter-bar .filter-group,
  .table-filter-bar .filter-group--search,
  .table-filter-bar .filter-actions {
    flex: 1 1 100%;
    max-width: none;
  }

  .table-filter-bar .filter-actions {
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* ========================================
 * Column Options Dropdown
 * Popover for toggling table column visibility.
 * Sits in .filter-actions, left of action buttons.
 * ======================================== */
.col-options {
  position: relative;
}

.col-options-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-height-sm);
  padding: 0 10px;                /* match .filter-bar-btn padding */
  font-size: var(--font-size-sm);
  color: var(--text-primary);     /* match .filter-bar-btn — was --text-secondary, caused mismatched grey vs Export */
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.col-options-toggle:hover {
  color: var(--text-primary);
  background-color: var(--hover-bg);  /* match .filter-bar-btn:hover */
  border-color: var(--border-default);
}

.col-options-toggle i {
  font-size: 14px;
}

.col-options-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 100;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-2) 0;
  background-color: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.col-options-dropdown.open {
  display: block;
}

.col-options-dropdown .col-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.col-options-dropdown .col-option:hover {
  background-color: var(--surface-2);
}

.col-options-dropdown .col-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--cta-secondary);
}

.col-options-dropdown .col-option-label {
  flex: 1;
  user-select: none;
}

.col-options-dropdown .col-options-divider {
  height: 1px;
  margin: var(--space-1) 0;
  background-color: var(--border-subtle);
}

/* ========================================
 * Table Toolbar (Impeccable v2 — 2026-05-24)
 *
 * Single canonical row sitting directly above an .admin-table.
 *
 *   <div class="table-toolbar">
 *     <div class="table-toolbar__filters"> ...filter controls... </div>
 *     <div class="table-toolbar__display"> ...column toggle, view, export... </div>
 *     <div class="table-toolbar__action">   ...primary page action button...   </div>
 *   </div>
 *
 * Rules:
 *   - Filters always on the LEFT.
 *   - Display preferences always on the RIGHT (column options, view toggle, export).
 *   - Primary action (Add, New, Create) sits in the FAR-RIGHT slot — separated
 *     from display preferences by a narrow gap so it remains visually distinct.
 *   - Single 12px vertical gap between toolbar and the table below.
 *   - All controls are 32px tall (var(--control-height-md)) for vertical alignment.
 * ======================================== */
.table-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  flex-wrap: wrap;
}

.table-toolbar__filters {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0; /* allow children to shrink */
}

.table-toolbar__display {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.table-toolbar__action {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-left: var(--space-3); /* visual gap from display group */
  --toolbar-button-bg: var(--cta-primary);
  --toolbar-button-border: var(--cta-primary);
  --toolbar-button-color: #fff;
  --toolbar-button-hover-bg: var(--cta-primary-hover);
  --toolbar-button-hover-border: var(--cta-primary-hover);
  --toolbar-button-hover-color: #fff;
}

/* Canonical normalisation for EVERY button living inside the table toolbar.
   Regardless of legacy classes (btn-outline, btn-outline-secondary, btn-sm, etc.)
   the toolbar enforces a single visual baseline so Columns, Export, Filter,
   Wizard, and any other action buttons line up identically — same height,
   same radius, same border, same colour, same font, same icon-text gap.
   Applies to both the v2 .table-toolbar AND the legacy .table-filter-bar's
   .filter-actions slot so existing pages get the same look automatically. */
.table-toolbar .btn,
.table-toolbar button:not(.btn-link):not(.btn-close):not(.dropdown-item):not([class*="filter-status-tab"]):not([class*="filter-view-toggle-btn"]),
.table-filter-bar .filter-actions .btn,
.table-filter-bar .filter-actions button:not(.btn-link):not(.btn-close):not(.dropdown-item) {
  height: var(--control-height-sm);
  min-height: var(--control-height-sm);
  padding: 0 10px !important;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--toolbar-button-color, var(--text-primary)) !important;
  background-color: var(--toolbar-button-bg, transparent) !important;
  border: 1px solid var(--toolbar-button-border, var(--border-subtle)) !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  line-height: 1;
  white-space: nowrap;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.table-toolbar .btn:hover,
.table-toolbar button:not(.btn-link):not(.btn-close):not(.dropdown-item):not([class*="filter-status-tab"]):not([class*="filter-view-toggle-btn"]):hover,
.table-filter-bar .filter-actions .btn:hover,
.table-filter-bar .filter-actions button:not(.btn-link):not(.btn-close):not(.dropdown-item):hover {
  background-color: var(--toolbar-button-hover-bg, var(--hover-bg)) !important;
  border-color: var(--toolbar-button-hover-border, var(--border-default)) !important;
  color: var(--toolbar-button-hover-color, var(--text-primary)) !important;
}

.table-toolbar .btn[disabled],
.table-toolbar button[disabled],
.table-filter-bar .filter-actions .btn[disabled],
.table-filter-bar .filter-actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Split-button groups inside the toolbar: first child keeps left-rounded,
   last child keeps right-rounded, middle squared. Override the universal
   `border-radius: 4px !important` above so the group still looks attached. */
.table-toolbar .btn-group .btn:not(:first-child):not(:last-child),
.table-filter-bar .filter-actions .btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}
.table-toolbar .btn-group .btn:first-child:not(:last-child),
.table-filter-bar .filter-actions .btn-group .btn:first-child:not(:last-child) {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  border-right-width: 0 !important;
}
.table-toolbar .btn-group .btn:last-child:not(:first-child),
.table-filter-bar .filter-actions .btn-group .btn:last-child:not(:first-child) {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* Inside the toolbar, Bootstrap button icon utility margins (.me-1 / .me-2)
   are neutralised because we use flex gap. */
.table-toolbar .btn > i.me-1,
.table-toolbar .btn > i.me-2,
.table-toolbar button > i.me-1,
.table-toolbar button > i.me-2 {
  margin-right: 0 !important;
}

/* Form controls (search inputs, filter selects) inside a toolbar pick up the
   same 30px height, 4px radius, --border-subtle border, --text-primary text,
   and 11px font as the toolbar buttons. Forces Bootstrap .form-control-sm /
   .form-select-sm to obey the design-system baseline regardless of which
   class the template uses. */
.table-toolbar input[type="text"],
.table-toolbar input[type="search"],
.table-toolbar input[type="number"],
.table-toolbar input[type="date"],
.table-toolbar input:not([type]),
.table-toolbar select,
.table-toolbar .form-control,
.table-toolbar .form-select,
.table-filter-bar input[type="text"],
.table-filter-bar input[type="search"],
.table-filter-bar input[type="number"],
.table-filter-bar input[type="date"],
.table-filter-bar input:not([type]),
.table-filter-bar select,
.table-filter-bar .form-control,
.table-filter-bar .form-select {
  height: var(--control-height-sm) !important;
  min-height: var(--control-height-sm) !important;
  padding: 0 10px !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.2 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  background-color: var(--surface-0) !important;
  transition: border-color var(--transition-fast) !important;
}

.table-toolbar .form-select,
.table-filter-bar .form-select,
.table-toolbar select,
.table-filter-bar select {
  padding-right: 28px !important;
  background-size: 12px 12px !important;
}

.table-toolbar input::placeholder,
.table-filter-bar input::placeholder,
.table-toolbar .form-control::placeholder,
.table-filter-bar .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.table-toolbar input:focus,
.table-toolbar select:focus,
.table-toolbar .form-control:focus,
.table-toolbar .form-select:focus,
.table-filter-bar input:focus,
.table-filter-bar select:focus,
.table-filter-bar .form-control:focus,
.table-filter-bar .form-select:focus {
  outline: none !important;
  border-color: var(--cta-secondary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* Compact-mode tightening — bring controls closer when many filters present. */
.table-toolbar.table-toolbar--dense {
  gap: var(--space-2);
}

.table-toolbar.table-toolbar--dense .table-toolbar__filters {
  gap: var(--space-2);
}

@media (max-width: 768px) {
  .table-toolbar {
    align-items: stretch;
  }
  .table-toolbar__filters,
  .table-toolbar__display,
  .table-toolbar__action {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* ========================================
 * Resizable Columns (Impeccable v2 — 2026-05-24)
 *
 * Opt-in via the [junipa-resizable-column] directive on a th, which adds
 * the .resizable class. The directive owns localStorage persistence per
 * route (key: `junipa.table-col-widths.<route>.<column-key>`).
 *
 * The handle is a 6px-wide strip on the th's right edge — invisible at
 * rest, becomes a subtle cyan vertical bar on hover, and shows a
 * grabber cursor.
 * ======================================== */
.admin-table th.resizable {
  position: relative;
  overflow: hidden;
  min-width: 60px;
}

.admin-table th.resizable .col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 2;
  background: transparent;
  transition: background-color var(--transition-fast);
}

.admin-table th.resizable:hover .col-resize-handle,
.admin-table th.resizable .col-resize-handle:hover,
.admin-table th.resizable .col-resize-handle.is-dragging {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 2px,
    var(--text-secondary) 2px,
    var(--text-secondary) 4px,
    transparent 4px
  );
}

/* When dragging, lock the cursor so it doesn't flicker. */
body.col-resizing,
body.col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ========================================
 * Admin Dashboard Tables
 * Comprehensive table styling for admin interfaces
 * ======================================== */

/* Admin Table Container */
.admin-table-container {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

/* No internal scrolling — the browser/page scroll is canonical.
   Override Bootstrap .table-responsive only when it actually wraps an .admin-table.
   `.table-sticky-actions` is the documented exception: it opts INTO horizontal
   scroll (see its own block below), and without this carve-out the blanket
   `overflow: visible !important` silently cancelled that opt-in, leaving wide
   admin tables overflowing with no scrollbar at all. */
.table-responsive:has(.admin-table):not(.table-sticky-actions),
.table-responsive--with-top-scroll:has(.admin-table):not(.table-sticky-actions) {
  overflow: visible !important;
}

/* Tables that opt into horizontal scroll do so explicitly via .admin-table-scroll
   (kept available below for the rare exception). Default is page scroll. */

/* Admin Table Base */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base); /* 12px */
  line-height: var(--line-height-normal); /* 1.5 */
}

/* Consistent TD/TH Padding - CRITICAL for admin tables */
.admin-table th,
.admin-table td {
  padding: var(--space-2) var(--space-3); /* 8px 12px - standardized */
  text-align: left;
  vertical-align: top; /* top-align: multi-line content (IDs, wrapped text) stays readable */
  font-size: var(--font-size-base); /* 12px */
  line-height: var(--line-height-normal); /* 1.5 */
}

/* Header Styling */
.admin-table th {
  font-size: var(--font-size-xs); /* 10px */
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  /* Header row carries the grey (surface-1 / table-header-bg); the card body
     itself is white. This is the only grey on a light-mode setting-card. */
  background-color: var(--table-header-bg, var(--surface-1));
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

/* ----------------------------------------
 * Sortable Header (Impeccable v2 — 2026-05-24)
 *
 * Rules:
 *   - Sort icon sits in the FAR RIGHT of every sortable th, vertically centred.
 *   - Sort icon is INVISIBLE at rest. Revealed only on th:hover.
 *   - When a column IS the active sort, the entire th changes background AND
 *     text colour, and the icon (now chevron-up / -down) is always visible.
 *   - Active-sort visual uses cyan focus token (--cta-secondary), not orange:
 *     orange is reserved for create / save actions.
 *   - Reserves --space-6 of padding-right on sortable th so the icon never
 *     collides with the label, even on a narrow column.
 * ---------------------------------------- */
.admin-table th.sortable {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 28px; /* reserves room for 10px icon at right:8px (icon ends at 18px) plus 10px breathing gap to label */
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.admin-table th.sortable:hover {
  color: var(--text-primary);
  background-color: var(--surface-3);
}

/* Active-sort th — full state change, neutral palette.
   Uses .sortable.sorted (specificity 0,3,1) to beat .sortable:hover.
   Signal is: high-contrast text + persistent hover-bg + 2px neutral underline
   AND 1px neutral side edges so the sorted column reads as a discrete vertical
   slab — critical for grouped-header tables (rowspan=2) where adjacent row-2
   ths could otherwise visually merge with the sorted column. */
.admin-table th.sortable.sorted,
.admin-table th.sortable.sorted:hover {
  color: var(--text-primary);
  background-color: var(--surface-3);
  box-shadow:
    inset  1px 0 0 0 var(--border-default),
    inset -1px 0 0 0 var(--border-default),
    inset 0 -2px 0 0 var(--text-secondary);
}

[data-theme="dark"] .admin-table th.sortable.sorted,
[data-bs-theme="dark"] .admin-table th.sortable.sorted,
[data-theme="dark"] .admin-table th.sortable.sorted:hover,
[data-bs-theme="dark"] .admin-table th.sortable.sorted:hover {
  color: var(--text-primary);
  background-color: var(--surface-3);
  box-shadow:
    inset  1px 0 0 0 var(--border-default),
    inset -1px 0 0 0 var(--border-default),
    inset 0 -2px 0 0 var(--text-secondary);
}

/* Sort icon — absolutely positioned to the right edge, hidden at rest.
   Sits 8px from the edge with a 10px glyph so it occupies right 8-18px;
   label right edge needs to clear ~20px to avoid overlap (numeric column
   rules below reserve 28px gutter for a comfortable gap). */
.admin-table th.sortable .sort-icon {
  position: absolute;
  right: var(--space-2);                  /* 8px from right edge */
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;                   /* override legacy ms-1 / margin-left utility */
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  pointer-events: none;
}

/* Default-chevron-down fallback — if a template doesn't bind any chevron class
   while the column is unsorted (e.g. it only binds bi-chevron-up / bi-chevron-down
   conditionally), draw a chevron-down via pseudo-element so the hover-reveal
   affordance is never blank. */
.admin-table th.sortable .sort-icon:not(.bi-chevron-up):not(.bi-chevron-down):not(.bi-chevron-expand)::before {
  content: "\f282"; /* bi-chevron-down */
  font-family: "bootstrap-icons" !important;
}

/* If the icon sits inside a flex .header-cell, take it out of flow — it's now
   the th's responsibility to position, not the flex row's. */
.admin-table th.sortable .header-cell .sort-icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
}

.admin-table th.sortable:hover .sort-icon {
  opacity: 0.55;
}

/* When sorted, icon is always visible and uses neutral text colour.
   .sortable.sorted .sort-icon has specificity 0,3,1, beats .sortable:hover .sort-icon. */
.admin-table th.sortable.sorted .sort-icon,
.admin-table th.sortable.sorted:hover .sort-icon {
  opacity: 1;
  color: var(--text-primary);
}

[data-theme="dark"] .admin-table th.sortable.sorted .sort-icon,
[data-bs-theme="dark"] .admin-table th.sortable.sorted .sort-icon {
  color: var(--text-primary);
}

/* Reduced motion — skip the opacity fade. */
@media (prefers-reduced-motion: reduce) {
  .admin-table th.sortable,
  .admin-table th.sortable .sort-icon {
    transition: none;
  }
}

/* Cell Styling */
.admin-table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}

/* Optional first-row top padding — use only when the first row contains badges
   or controls that optically collide with the header edge. Dense tables keep
   the same deliberately cramped padding on every row by default. */
.admin-table.admin-table-first-row-spaced tbody tr:first-child td {
  padding-top: var(--space-3); /* 12px instead of the default 8px (or 4px compact) */
}
.admin-table.admin-table-compact.admin-table-first-row-spaced tbody tr:first-child td {
  padding-top: var(--space-2); /* 8px instead of 4px compact default */
}

/* Links inside table cells — inherit cell color, no underline by default */
.admin-table td a {
  color: inherit;
  text-decoration: none;
}

.admin-table td a:hover {
  text-decoration: underline;
}

/* ----------------------------------------
 * Grouped Headers (2-row thead)
 * Parent group spans child columns via colspan/rowspan.
 * Example: "NCCD Evidence" → Assessment | Consultation | Provided | Monitored
 * ---------------------------------------- */

/* Flex container for header text + sort icon (same row) + optional subtitle (own row). */
.admin-table .header-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Subtitle inside .header-cell forces own line below the label/icon row. */
.admin-table .header-cell .header-subtitle {
  flex-basis: 100%;
}

/* Group heading — parent header spanning child columns */
.admin-table th.group-heading {
  vertical-align: middle; /* group labels centre against their row */
}

/* Subtitle text below group label (e.g. "Counts by category") */
.admin-table .header-subtitle {
  display: block;
  font-size: 9px;
  font-weight: var(--font-weight-normal);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Column group borders — delineate a related set of columns */
.admin-table .td-group-start,
.admin-table th.td-group-start {
  border-left: 1px solid var(--border-subtle);
}

.admin-table .td-group-end,
.admin-table th.td-group-end {
  border-right: 1px solid var(--border-subtle);
}

/* Row Hover */
.admin-table tbody tr {
  transition: background-color var(--transition-fast);
}

.admin-table tbody tr:hover {
  background-color: var(--surface-3);
}

/* Selected Row State */
.admin-table tbody tr.selected {
  background-color: rgba(2, 132, 199, 0.08); /* Light blue tint */
}

[data-theme="dark"],
[data-bs-theme="dark"] .admin-table tbody tr.selected {
  background-color: rgba(56, 189, 248, 0.1);
}

/* ----------------------------------------
 * Column Type: Checkbox
 * ---------------------------------------- */
.admin-table .td-checkbox,
.admin-table .th-checkbox {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.admin-table .td-checkbox input[type="checkbox"],
.admin-table .th-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cta-secondary);
  vertical-align: middle;
}

/* Indeterminate state visual */
.admin-table .th-checkbox input[type="checkbox"]:indeterminate {
  opacity: 0.7;
}

/* ----------------------------------------
 * Column Type: Avatar/Name
 * ---------------------------------------- */
.admin-table .td-name {
  padding: var(--space-2) var(--space-3);
}

.admin-table .name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-table .avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

/* Clickable name cells — any td with a click handler that navigates to a profile */
.clickable-name {
  cursor: pointer;
}

.admin-table .avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.admin-table .name-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0; /* Allow text truncation */
}

.admin-table .name-primary {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-table .name-secondary {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------
 * Column Type: Status Badge
 * ---------------------------------------- */
.admin-table .td-status {
  padding: var(--space-2) var(--space-3);
}

.admin-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs); /* 10px */
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Status Badge with dot indicator */
.admin-table .status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Status variants
   Border rule: HALF-STRENGTH — same hue as text at ~20% opacity.
   Scale: background 10% → border 20% → text 100%
   This gives badges definition without the border competing with text. */
.admin-table .status-badge.status-success {
  background-color: rgba(22, 163, 74, 0.1);
  color: var(--status-success);
  border-color: rgba(22, 163, 74, 0.32);
}
.admin-table .status-badge.status-success .status-dot {
  background-color: var(--status-success);
}

.admin-table .status-badge.status-warning {
  background-color: rgba(202, 138, 4, 0.1);
  color: var(--status-warning);
  border-color: rgba(202, 138, 4, 0.32);
}
.admin-table .status-badge.status-warning .status-dot {
  background-color: var(--status-warning);
}

.admin-table .status-badge.status-error {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--status-error);
  border-color: rgba(220, 38, 38, 0.32);
}
.admin-table .status-badge.status-error .status-dot {
  background-color: var(--status-error);
}

.admin-table .status-badge.status-info {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--status-info);
  border-color: rgba(37, 99, 235, 0.32);
}
.admin-table .status-badge.status-info .status-dot {
  background-color: var(--status-info);
}

.admin-table .status-badge.status-neutral {
  background-color: var(--surface-3);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* Legacy variant class names (without status- prefix) — match the same opacities
   so apps that have not migrated yet still get the v2 border darkness.
   New code should use status-success / status-warning / status-error / status-info / status-neutral. */
.admin-table .status-badge.on-track {
  background-color: rgba(22, 163, 74, 0.1);
  color: var(--status-success);
  border-color: rgba(22, 163, 74, 0.32);
}
.admin-table .status-badge.warning {
  background-color: rgba(202, 138, 4, 0.1);
  color: var(--status-warning);
  border-color: rgba(202, 138, 4, 0.32);
}
.admin-table .status-badge.needs-attention {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--status-error);
  border-color: rgba(220, 38, 38, 0.32);
}
.admin-table .status-badge.monitor {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--status-info);
  border-color: rgba(37, 99, 235, 0.32);
}
.admin-table .status-badge.neutral {
  background-color: var(--surface-3);
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.admin-table .status-badge.status-neutral .status-dot {
  background-color: var(--text-muted);
}

/* Dark mode status badge overrides
   Dark border slightly higher opacity (25%) for visibility on dark surfaces */
[data-theme="dark"],
[data-bs-theme="dark"] .admin-table .status-badge.status-success {
  background-color: rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.25);
}
[data-theme="dark"],
[data-bs-theme="dark"] .admin-table .status-badge.status-warning {
  background-color: rgba(210, 153, 34, 0.15);
  border-color: rgba(210, 153, 34, 0.25);
}
[data-theme="dark"],
[data-bs-theme="dark"] .admin-table .status-badge.status-error {
  background-color: rgba(248, 81, 73, 0.15);
  border-color: rgba(248, 81, 73, 0.25);
}
[data-theme="dark"],
[data-bs-theme="dark"] .admin-table .status-badge.status-info {
  background-color: rgba(88, 166, 255, 0.15);
  border-color: rgba(88, 166, 255, 0.25);
}

/* ========================================
 * Bootstrap Badge Overrides
 * Applies the translucent palette + half-strength borders to standard
 * Bootstrap .badge.bg-* classes so templates can use plain Bootstrap HTML.
 *
 * HALF-STRENGTH BORDER RULE:
 *   background 10% → border 20% → text 100%
 *   Dark mode: background 15% → border 25% → text 100%
 *
 * !important required to override Bootstrap's own !important on .bg-* and
 * Angular ViewEncapsulation scoped selectors.
 * ======================================== */

.badge {
  border: 1px solid transparent;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

/* Success (Active, etc.) */
.badge.bg-success {
  background-color: rgba(22, 163, 74, 0.1) !important;
  color: var(--status-success) !important;
  border-color: rgba(22, 163, 74, 0.2);
}

/* Danger (Inactive, Rejected, etc.) */
.badge.bg-danger {
  background-color: rgba(220, 38, 38, 0.1) !important;
  color: var(--status-error) !important;
  border-color: rgba(220, 38, 38, 0.2);
}

/* Warning (Pending, Account Requested, etc.) */
.badge.bg-warning {
  background-color: rgba(202, 138, 4, 0.1) !important;
  color: var(--status-warning) !important;
  border-color: rgba(202, 138, 4, 0.2);
}
/* Override .text-dark on warning badges — translucent palette text wins */
.badge.bg-warning.text-dark {
  color: var(--status-warning) !important;
}

/* Info (Invited, Accepted, etc.) */
.badge.bg-info {
  background-color: rgba(37, 99, 235, 0.1) !important;
  color: var(--status-info) !important;
  border-color: rgba(37, 99, 235, 0.2);
}

/* Secondary (Roles, Disabled, etc.) */
.badge.bg-secondary {
  background-color: var(--surface-3) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle);
}

/* Dark (Deleted) */
.badge.bg-dark {
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(0, 0, 0, 0.15);
}

/* Primary */
.badge.bg-primary {
  background-color: rgba(13, 110, 253, 0.1) !important;
  color: var(--cta-secondary) !important;
  border-color: rgba(13, 110, 253, 0.2);
}

/* Light (Auth providers, etc.) — keep subtle appearance */
.badge.bg-light {
  background-color: var(--surface-1) !important;
  border-color: var(--border-subtle);
}
.badge.bg-light.text-dark {
  color: var(--text-primary) !important;
}
.badge.bg-light.text-muted {
  color: var(--text-muted) !important;
}

/* Dark mode — bump bg to 15%, borders to 25% */
[data-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-success {
  background-color: rgba(63, 185, 80, 0.15) !important;
  border-color: rgba(63, 185, 80, 0.25);
}
[data-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-danger {
  background-color: rgba(248, 81, 73, 0.15) !important;
  border-color: rgba(248, 81, 73, 0.25);
}
[data-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning {
  background-color: rgba(210, 153, 34, 0.15) !important;
  border-color: rgba(210, 153, 34, 0.25);
}
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-warning.text-dark {
  color: var(--status-warning) !important;
}
[data-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-info {
  background-color: rgba(88, 166, 255, 0.15) !important;
  border-color: rgba(88, 166, 255, 0.25);
}
[data-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: var(--surface-3) !important;
  border-color: rgba(48, 54, 61, 0.4);
}
[data-theme="dark"] .badge.bg-dark,
[data-bs-theme="dark"] .badge.bg-dark {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-primary {
  background-color: rgba(255, 107, 53, 0.15) !important;
  color: var(--cta-secondary) !important;
  border-color: rgba(255, 107, 53, 0.25);
}
[data-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--surface-1) !important;
  border-color: var(--border-subtle);
}
[data-theme="dark"] .badge.bg-light.text-dark,
[data-bs-theme="dark"] .badge.bg-light.text-dark {
  color: var(--text-primary) !important;
}

/* ----------------------------------------
 * Clickable Table Cells
 * For cells where clicking anywhere should trigger
 * an inline popover/dropdown (roles, status, etc.)
 * ---------------------------------------- */
.td-clickable {
  position: relative;
  cursor: pointer;
}

/* ----------------------------------------
 * Clickable Badges (inline popovers)
 * Generic hover for any badge that opens a
 * popover/dropdown on click (roles, status, invites, etc.)
 * ---------------------------------------- */
.badge-clickable {
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.badge-clickable:hover {
  opacity: 0.85;
}

/* ----------------------------------------
 * Column Type: Date
 * ---------------------------------------- */
.admin-table .td-date {
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.admin-table .date-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-table .date-primary {
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary);
}

.admin-table .date-secondary {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ----------------------------------------
 * Column Type: Numeric (Impeccable v2 — 2026-05-24)
 *
 * Rule: any column whose value is just a number is right-aligned in BOTH
 * th and td, AND reserves a fixed right-side gutter so the sort icon (when
 * present) sits clear of the label. The same gutter is reserved on
 * NON-sortable numeric columns too, so unsorted numeric headers vertically
 * align with sorted ones across the table — and the right edge of every
 * numeric label and value lines up.
 *
 * The gutter equals --space-6 (24px) on default tables, --space-5 (20px)
 * on .admin-table-compact. The sort icon sits at right: var(--space-3)
 * inside this gutter.
 *
 * Use .th-numeric / .td-numeric OR plain Bootstrap .text-end — both work.
 * Action columns (.th-actions / .td-actions) opt out via :not().
 * ---------------------------------------- */
.admin-table .th-numeric,
.admin-table th.text-end:not(.th-actions),
.admin-table .td-numeric,
.admin-table td.text-end:not(.td-actions) {
  text-align: right;
  padding-right: 28px; /* matches th.sortable's gutter — keeps label/value right-edges aligned + icon clearance */
}

.admin-table .td-numeric,
.admin-table td.text-end:not(.td-actions) {
  font-variant-numeric: tabular-nums;
}

/* Compact tables — match the same 28px gutter so the chevron never overlaps
   the label even when the th padding shorthand would otherwise drop to 8px. */
.admin-table.admin-table-compact .th-numeric,
.admin-table.admin-table-compact th.text-end:not(.th-actions),
.admin-table.admin-table-compact .td-numeric,
.admin-table.admin-table-compact td.text-end:not(.td-actions) {
  padding-right: 28px;
}

.admin-table.admin-table-compact th.sortable {
  padding-right: 28px; /* override base compact padding for sortable th — icon clearance */
}

/* ----------------------------------------
 * Column Type: Actions
 * ---------------------------------------- */
.admin-table .td-actions,
.admin-table .th-actions {
  width: 1%; /* Shrink to minimum required */
  padding: var(--space-2) var(--space-3);
  text-align: right;
  white-space: nowrap;
}

.admin-table .actions-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.admin-table .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-table .btn-action i {
  font-size: 14px;
}

.admin-table .btn-action:hover {
  background-color: var(--surface-3);
  color: var(--text-primary);
}

.admin-table .btn-action:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Action button variants */
.admin-table .btn-action.btn-action-edit:hover {
  color: var(--cta-secondary);
}

.admin-table .btn-action.btn-action-danger {
  color: var(--status-error);
}

.admin-table .btn-action.btn-action-danger:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

[data-theme="dark"],
[data-bs-theme="dark"] .admin-table .btn-action.btn-action-danger:hover {
  background-color: rgba(248, 81, 73, 0.15);
}

/* ----------------------------------------
 * Table Action Btn-Group (Primary + 3-dot)
 * Joined button group for in-table row actions.
 * First button: text label (e.g. "Evidence").
 * Second button: 3-dot overflow menu.
 * ---------------------------------------- */
.table-action-group {
  display: inline-flex;
}

.table-action-group .btn {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.table-action-group .table-action-primary {
  padding: 2px 10px;
  white-space: nowrap;
  border: 1px solid var(--border-default, #D1D5DB);
  background: transparent;
  color: var(--text-secondary, #6c757d);
  font-weight: 400;
}

.table-action-group .table-action-primary:hover {
  background-color: var(--surface-3, #F3F4F6);
  border-color: var(--border-emphasis, #9CA3AF);
}

.table-action-group .table-action-more {
  padding: 2px 6px;
  font-size: 14px;
  border: 1px solid var(--border-default, #D1D5DB);
  border-left: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary, #6c757d);
  line-height: 1;
}

.table-action-group .table-action-more::after {
  display: none; /* hide Bootstrap caret */
}

.table-action-group .table-action-more:hover {
  background-color: var(--surface-3, #F3F4F6);
  border-color: var(--border-emphasis, #9CA3AF);
  border-left: 1px solid var(--border-emphasis, #9CA3AF);
  color: var(--text-primary, #1F2937);
}

/* Border radius: rounded left on primary, rounded right on more */
.table-action-group .table-action-primary {
  border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px);
}

.table-action-group .table-action-more {
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

/* Dark mode */
[data-theme="dark"] .table-action-group .table-action-primary,
[data-bs-theme="dark"] .table-action-group .table-action-primary {
  border-color: var(--border-default, rgba(48, 54, 61, 1));
  color: var(--text-secondary, #8B949E);
}

[data-theme="dark"] .table-action-group .table-action-primary:hover,
[data-bs-theme="dark"] .table-action-group .table-action-primary:hover {
  background-color: var(--surface-3, #21262D);
  border-color: var(--border-emphasis, rgba(139, 148, 158, 0.4));
}

[data-theme="dark"] .table-action-group .table-action-more,
[data-bs-theme="dark"] .table-action-group .table-action-more {
  border-color: var(--border-default, rgba(48, 54, 61, 1));
  border-left: 1px solid transparent;
  color: var(--text-secondary, #8B949E);
}

[data-theme="dark"] .table-action-group .table-action-more:hover,
[data-bs-theme="dark"] .table-action-group .table-action-more:hover {
  background-color: var(--surface-3, #21262D);
  border-color: var(--border-emphasis, rgba(139, 148, 158, 0.4));
  border-left: 1px solid var(--border-emphasis, rgba(139, 148, 158, 0.4));
  color: var(--text-primary, #E6EDF3);
}

/* ----------------------------------------
 * Expandable Rows
 * ---------------------------------------- */
.admin-table .td-expand {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.admin-table .btn-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-table .btn-expand i {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.admin-table .btn-expand:hover {
  background-color: var(--surface-3);
  color: var(--text-primary);
}

.admin-table .btn-expand.expanded i {
  transform: rotate(90deg);
}

/* Expanded row content */
.admin-table tr.row-expanded {
  background-color: var(--surface-2);
}

.admin-table tr.row-expanded:hover {
  background-color: var(--surface-2);
}

.admin-table .expanded-content {
  padding: var(--space-4);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-table .expanded-content-inner {
  padding: var(--space-3);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* ----------------------------------------
 * Empty State
 * ---------------------------------------- */
.admin-table .empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
}

.admin-table .empty-state-icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.admin-table .empty-state-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.admin-table .empty-state-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ----------------------------------------
 * Table Filter Empty State
 * Reusable "no results" pattern for filtered tables.
 * Use inside a <td colspan="..."> when a filter returns 0 rows.
 *
 * HTML:
 *   <td colspan="99">
 *     <div class="table-empty-state">
 *       <i class="bi bi-funnel table-empty-state-icon"></i>
 *       <div class="table-empty-state-title">No results found</div>
 *       <div class="table-empty-state-description">
 *         Try a different filter.
 *       </div>
 *     </div>
 *   </td>
 * ---------------------------------------- */
.table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.table-empty-state-icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.table-empty-state-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.table-empty-state-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  max-width: 300px;
}

.table-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

[data-bs-theme="dark"] .table-empty-state-icon {
  color: var(--text-muted);
}

[data-bs-theme="dark"] .table-empty-state-title {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .table-empty-state-description {
  color: var(--text-secondary);
}

/* ----------------------------------------
 * Inline Empty State
 * ----------------------------------------
 * Simple subdued text for sections with no data.
 * No icon, no card — just a quiet message.
 *
 * Usage:
 *   <p class="empty-inline">No adjustments recorded</p>
 * ---------------------------------------- */
.empty-inline {
  text-align: center;
  padding: var(--space-4, 16px) var(--space-3, 12px);
  color: var(--text-muted, #9CA3AF);
  font-size: var(--font-size-sm, 11px);
  margin: 0;
}

/* ----------------------------------------
 * Empty State Box
 * ----------------------------------------
 * Bordered dashed box for empty tab/section states.
 * Icon above, message below. Subtle and non-intrusive.
 *
 * Usage:
 *   <div class="empty-state-box">
 *     <i class="bi bi-inbox"></i>
 *     <p>No messages yet</p>
 *   </div>
 * ---------------------------------------- */
.empty-state-box {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--border-subtle, #E5E7EB);
  border-radius: 4px;
  color: var(--text-muted, #9CA3AF);
  font-size: 11px;
}

.empty-state-box .bi {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}

.empty-state-box p {
  margin: 0;
}

[data-bs-theme="dark"] .empty-state-box {
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

/* ----------------------------------------
 * Loading State
 * ---------------------------------------- */
.admin-table .loading-row td {
  padding: var(--space-2) var(--space-3);
}

.admin-table .skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-xs);
  height: 16px;
}

.admin-table .skeleton-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
}

.admin-table .skeleton-text {
  width: 100%;
  max-width: 120px;
}

.admin-table .skeleton-text-short {
  width: 60px;
}

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

/* ----------------------------------------
 * Compact Variant
 * ---------------------------------------- */
.admin-table.admin-table-compact th,
.admin-table.admin-table-compact td {
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  font-size: var(--font-size-sm); /* 11px */
}

/* Compact + sortable — superseded by the unified 28px sortable gutter
   defined alongside .admin-table th.sortable above. Kept as no-op for
   clarity; padding-right is now 28px in both compact and default. */

.admin-table.admin-table-compact .avatar,
.admin-table.admin-table-compact .avatar-placeholder {
  width: 24px;
  height: 24px;
}

.admin-table.admin-table-compact .btn-action {
  width: 24px;
  height: 24px;
}

/* ----------------------------------------
 * Grid Variant — visible column rules
 *
 * Opt-in for dense reference tables (address books, matrices) where every
 * cell boundary must read as a discrete grid. Row rules come from the base
 * td border-bottom; this adds the vertical rules between columns using the
 * same subtle border token, so light/dark theming is automatic. The outer
 * frame stays owned by .admin-table-container — no doubled outer edges.
 * ---------------------------------------- */
.admin-table.admin-table-grid th + th,
.admin-table.admin-table-grid td + td {
  border-left: 1px solid var(--border-subtle);
}

.admin-table.admin-table-grid th {
  border-bottom: 1px solid var(--border-default);
}

.admin-table.admin-table-compact .btn-action i {
  font-size: 12px;
}

/* ----------------------------------------
 * Compact Data Summary
 * ----------------------------------------
 * A small, semantic table for the attributes or counts of one record.
 * This is deliberately not a metric-card row: labels form a header and values
 * form one compact data row. The wrapper sizes to its content and scrolls at
 * narrow widths instead of wrapping into a stack of cards.
 */
.data-summary-table-wrap {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
}

.data-summary-table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--text-primary);
}

.data-summary-table th,
.data-summary-table td {
  padding: var(--space-1) var(--space-2);
  border-right: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.data-summary-table th:last-child,
.data-summary-table td:last-child {
  border-right: 0;
}

.data-summary-table th {
  padding-bottom: 2px;
  background-color: var(--table-header-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-summary-table td {
  padding-top: 2px;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-normal);
}

/* ----------------------------------------
 * Bordered Variant
 * ---------------------------------------- */
.admin-table.admin-table-bordered th,
.admin-table.admin-table-bordered td {
  border: 1px solid var(--border-subtle);
}

.admin-table.admin-table-bordered th {
  border-bottom-color: var(--border-default);
}

/* ----------------------------------------
 * Wrapped-Header Variant
 *
 * Base .admin-table th forces nowrap, so a long header ("Total attachments
 * (for week 5)") dictates the whole column's width. Opt in with
 * .admin-table-wrap-headers on tables whose header labels are longer than
 * their data: headers wrap to multiple lines and columns stay sized to
 * their content. Pairs with .admin-table-bordered and resizable columns.
 * ---------------------------------------- */
.admin-table.admin-table-wrap-headers th {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ----------------------------------------
 * Striped Variant
 * ---------------------------------------- */
.admin-table.admin-table-striped tbody tr:nth-child(even) {
  background-color: var(--surface-2);
}

.admin-table.admin-table-striped tbody tr:nth-child(even):hover {
  background-color: var(--surface-3);
}

/* ----------------------------------------
 * Table Footer Disclaimer
 * Subdued footer that visually attaches to
 * the bottom of an admin-table-container
 * ---------------------------------------- */
.admin-table-footer {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background-color: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
}

/* ----------------------------------------
 * Sticky Header
 * ---------------------------------------- */
.admin-table-container.admin-table-sticky {
  max-height: 500px;
  overflow-y: auto;
}

.admin-table-container.admin-table-sticky .admin-table th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: 0 1px 0 var(--border-default);
}

/* ----------------------------------------
 * Responsive Table Scroll  (<= 1024 px)
 *
 * Wrapping pattern for tables that overflow
 * on narrow viewports. Provides:
 *   - horizontal scroll with visible scrollbar
 *   - fade-shadow gradient showing more cols
 *   - sticky left name columns (first + last)
 *   - sticky right actions column
 *
 * Markup:
 *   <div class="admin-table-scroll" [class.show-gradient]="…">
 *     <div class="admin-table-container" (scroll)="…">
 *       <table class="admin-table">
 *         <th class="col-sticky-left col-sticky-first">First</th>
 *         <th class="col-sticky-left col-sticky-second">Last</th>
 *         ...
 *         <th class="col-sticky-right">Actions</th>
 * ---------------------------------------- */
.admin-table-scroll {
  position: relative;
}

.admin-table-scroll.show-gradient::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1));
  pointer-events: none;
  z-index: 2;
}

[data-bs-theme="dark"] .admin-table-scroll.show-gradient::after {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.4));
}

@media (max-width: 1024px) {
  .admin-table-scroll .admin-table-container {
    overflow-x: scroll;
    overflow-y: auto;
    max-height: 70vh;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) var(--surface-1);
  }

  .admin-table-scroll .admin-table-container::-webkit-scrollbar {
    height: 8px;
    width: 6px;
  }

  .admin-table-scroll .admin-table-container::-webkit-scrollbar-track {
    background: var(--surface-1);
    border-radius: 4px;
  }

  .admin-table-scroll .admin-table-container::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
  }

  .admin-table-scroll .admin-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }

  /* Offset gradient so it doesn't cover sticky actions col */
  .admin-table-scroll.show-gradient::after {
    right: 60px;
  }

  /* Sticky table header — keeps header visible when scrolling vertically */
  .admin-table-scroll .admin-table-container thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: var(--surface-1);
  }

  /* Sticky columns — left name pair + right actions */
  .col-sticky-left,
  .col-sticky-right {
    position: sticky;
    z-index: 3;
  }

  /* Corner cells (header + sticky col) need highest z-index */
  thead .col-sticky-left,
  thead .col-sticky-right {
    z-index: 5;
  }

  .col-sticky-first {
    left: 0;
    min-width: 80px;
  }

  .col-sticky-second {
    left: 80px;
    min-width: 90px;
  }

  .col-sticky-right {
    right: 0;
  }

  /* Solid backgrounds so content doesn't bleed through */
  thead .col-sticky-left,
  thead .col-sticky-right {
    background-color: var(--surface-1);
  }

  tbody .col-sticky-left,
  tbody .col-sticky-right {
    background-color: var(--surface-2);
  }

  /* Hide sub-pixel seam between sticky cols and scrollable content.
     Uses a solid-color shadow matching the cell bg — always on,
     not just when scrolled, so the border line never appears. */
  thead .col-sticky-right {
    box-shadow: -1px 0 0 0 var(--surface-1);
  }

  tbody .col-sticky-right {
    box-shadow: -1px 0 0 0 var(--surface-2);
  }

  thead .col-sticky-second {
    box-shadow: 1px 0 0 0 var(--surface-1);
  }

  tbody .col-sticky-second {
    box-shadow: 1px 0 0 0 var(--surface-2);
  }

  /* When actions dropdown is open, lift this row's sticky cell
     above sibling rows so the menu isn't clipped by other
     sticky cells' stacking contexts (z-index: 3). */
  .col-sticky-right:has(.dropdown-menu.show) {
    z-index: 100;
  }
}

/* ----------------------------------------
 * Sticky Actions Column — viewport-independent
 *
 * Keeps the rightmost actions/edit column pinned to the
 * right edge while the rest of the table scrolls
 * horizontally, at ANY viewport width — unlike the
 * responsive .admin-table-scroll pattern above, which only
 * engages <= 1024px. Use on wide multi-column admin tables
 * where the action menu must always stay reachable.
 *
 * Markup:
 *   <div class="table-responsive table-sticky-actions">
 *     <table>
 *       <th class="text-end col-sticky-right">Actions</th>
 *       ...
 *       <td class="text-end col-sticky-right"> ...menu... </td>
 *
 * When the table fits its container the column simply sits at
 * the right edge (no-op); the pin only engages on overflow.
 * ---------------------------------------- */
.table-sticky-actions {
  overflow-x: auto;
}

.table-sticky-actions .col-sticky-right {
  position: sticky;
  right: 0;
  z-index: 3;
  /* Subtle surface-matched seam-hider instead of a floating drop shadow —
     the heavy shadow read as a visual artefact. Matches the seam treatment
     used by the .col-sticky-right name columns elsewhere. */
  box-shadow: -1px 0 0 0 var(--surface-1);
}

/* Opaque backgrounds so scrolled cells don't bleed through.
   Header + body match the card surface; hover + open-menu rows
   are handled by each table's existing row-state rules. */
.table-sticky-actions thead .col-sticky-right {
  z-index: 5;
  background-color: var(--surface-1);
}

.table-sticky-actions tbody .col-sticky-right {
  background-color: var(--surface-1);
}

.table-sticky-actions tbody tr:hover .col-sticky-right {
  background-color: var(--surface-2);
}

/* Lift the sticky cell above sibling rows when its dropdown is
   open (only relevant for in-cell menus; body-mounted menus
   already float above everything). */
.table-sticky-actions .col-sticky-right:has(.dropdown-menu.show) {
  z-index: 100;
}

/* ========================================
 * Table Pagination
 * Standardised pagination for any table.
 * Uses transparent bg so it inherits the
 * page/card background in both light & dark.
 * ======================================== */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
}

.table-pagination .pagination-info {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.table-pagination .pagination {
  margin: 0;
}

.table-pagination .pagination .page-link {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  background-color: transparent;
}

.table-pagination .pagination .page-link:hover {
  background-color: var(--hover-bg);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.table-pagination .pagination .page-item.active .page-link {
  background-color: var(--surface-3);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.table-pagination .pagination .page-item.disabled .page-link {
  color: var(--text-muted);
  background-color: transparent;
  border-color: var(--border-subtle);
}

/* ========================================
 * Skeleton Loaders
 * ======================================== */

/* Base Skeleton Styles */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-base) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
  border-radius: var(--radius-xs);
}

/* Light mode skeleton colors */
:root {
  --skeleton-base: #E5E7EB;
  --skeleton-highlight: #F3F4F6;
}

/* Dark mode skeleton colors */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --skeleton-base: #21262D;
  --skeleton-highlight: #30363D;
}

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

/* ----------------------------------------
 * Text Skeletons
 * ---------------------------------------- */
.skeleton-text {
  height: 12px;
  width: 100%;
}

.skeleton-text-sm {
  height: 10px;
  width: 100%;
}

.skeleton-text-lg {
  height: 16px;
  width: 100%;
}

/* Width modifiers */
.skeleton-w-60 { width: 60%; }
.skeleton-w-80 { width: 80%; }

/* Paragraph skeleton container */
.skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ----------------------------------------
 * Avatar/Image Skeletons
 * ---------------------------------------- */
.skeleton-avatar-xs {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar-xl {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-image {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
}

.skeleton-image-sm {
  width: 48px;
  height: 36px;
  border-radius: var(--radius-sm);
}

.skeleton-icon {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

/* Student / profile photo skeleton — square, configurable via custom property */
.skeleton-photo {
  width: var(--skeleton-photo-size, 256px);
  height: var(--skeleton-photo-size, 256px);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ----------------------------------------
 * Button Skeletons
 * ---------------------------------------- */
.skeleton-btn-sm {
  height: 24px;
  width: 52px;
  border-radius: var(--radius-sm);
}

.skeleton-btn {
  height: 28px;
  width: 72px;
  border-radius: var(--radius-sm);
}

.skeleton-btn-lg {
  height: 36px;
  width: 96px;
  border-radius: var(--radius-sm);
}

.skeleton-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ----------------------------------------
 * Form Field Skeletons
 * ---------------------------------------- */
.skeleton-label {
  height: 11px;
  width: 80px;
}

.skeleton-input {
  height: 32px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.skeleton-select {
  height: 32px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.skeleton-textarea {
  height: 100px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.skeleton-checkbox {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.skeleton-hint {
  height: 10px;
  width: 140px;
}

.skeleton-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.skeleton-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ----------------------------------------
 * Badge Skeletons
 * ---------------------------------------- */
.skeleton-badge-sm {
  height: 16px;
  width: 40px;
  border-radius: var(--radius-sm);
}

.skeleton-badge {
  height: 20px;
  width: 56px;
  border-radius: var(--radius-sm);
}

.skeleton-badge-lg {
  height: 24px;
  width: 72px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------
 * Card Skeletons
 * ---------------------------------------- */
.skeleton-card {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.skeleton-card-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.skeleton-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.skeleton-card-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-card-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* Stat Card Skeleton */
.skeleton-stat-card {
  padding: var(--space-4);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-stat-value {
  height: 24px;
  width: 80px;
  border-radius: var(--radius-xs);
}

.skeleton-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
}

/* ----------------------------------------
 * Table Cell Skeletons
 * ---------------------------------------- */
.skeleton-cell-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-cell-name-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.skeleton-cell-actions {
  display: flex;
  gap: var(--space-1);
}

/* Activity-log time cell skeleton — mirrors the two-line "Activity / Logged"
   label + date + time layout so the loading state matches the real rows. */
.activity-skeleton__time-label {
  display: inline-block;
  width: 38px;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.activity-skeleton__time-date {
  display: inline-block;
  width: 64px;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.activity-skeleton__time-clock {
  display: inline-block;
  width: 40px;
  vertical-align: middle;
}

/* Stacked variant — the "Recent Activity" widget renders date label/value on
   their own lines (Activity date over Logged) rather than inline. */
.activity-skeleton__date-label {
  width: 64px;
}

.activity-skeleton__date-value {
  width: 84px;
}

/* ----------------------------------------
 * Table Row Skeletons
 * ---------------------------------------- */
.skeleton-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.skeleton-table th,
.skeleton-table td {
  padding: var(--space-3);
  text-align: left;
}

.skeleton-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-default);
}

.skeleton-table td {
  border-bottom: 1px solid var(--border-subtle);
}

.skeleton-table-row:hover {
  background-color: var(--surface-2);
}

/* ----------------------------------------
 * List Skeletons
 * ---------------------------------------- */
.skeleton-list {
  display: flex;
  flex-direction: column;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.skeleton-list-item:last-child {
  border-bottom: none;
}

.skeleton-list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ----------------------------------------
 * Demo Styles (for documentation page)
 * ---------------------------------------- */
.skeleton-demo-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.skeleton-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-end;
}

.skeleton-demo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.demo-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
}

/* ========================================
 * Compact Toggle Filter Bar
 * Inline pill-button filters for compact data tables.
 * Use INSTEAD OF .table-filter-bar when filters are
 * toggle buttons (not dropdowns).
 *
 * HTML:
 *   <div class="compact-filter-bar">
 *     <div class="compact-filter-group">
 *       <button class="compact-filter-btn active">All</button>
 *       <button class="compact-filter-btn">Supplementary</button>
 *       <button class="compact-filter-btn">Substantial</button>
 *     </div>
 *     <div class="compact-filter-actions">
 *       <button class="compact-filter-btn">Group by category</button>
 *     </div>
 *   </div>
 * ======================================== */

.compact-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2, #f8f9fa);
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
}

.compact-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

.compact-filter-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #495057);
  font-size: var(--font-size-sm, 0.6875rem);
  font-weight: var(--font-weight-medium, 500);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  line-height: 1.4;
  transition: all var(--transition-fast, 100ms ease);
}

.compact-filter-btn:hover {
  color: var(--cta-secondary, #0d6efd);
  background: rgba(0, 123, 255, 0.05);
}

.compact-filter-btn.active {
  color: var(--cta-secondary, #0056b3);
  background: rgba(0, 123, 255, 0.1);
  border-color: rgba(0, 123, 255, 0.15);
}

.compact-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

/* Dark mode */
[data-bs-theme="dark"] .compact-filter-bar {
  background: var(--surface-2, #2b3035);
  border-color: var(--border-default, #495057);
}

[data-bs-theme="dark"] .compact-filter-btn {
  color: var(--text-secondary, #adb5bd);
}

[data-bs-theme="dark"] .compact-filter-btn:hover {
  color: #FF6B35;
  background: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.2);
}

[data-bs-theme="dark"] .compact-filter-btn.active {
  color: #FF6B35;
  background: rgba(255, 107, 53, 0.15);
  border-color: rgba(255, 107, 53, 0.3);
}

/* ----------------------------------------
 * Bootstrap btn-group-sm Normalization
 * Fix: .btn-primary and .btn-outline-primary have different
 * computed font-size and padding in btn-group-sm, causing
 * visible size jump when toggling active state.
 * ---------------------------------------- */
.btn-group-sm > .btn {
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-width: 1px !important;
  line-height: 1.5;
}

/* ========================================
 * In-Page Navigation (Pill Button Style)
 * ========================================
 * Horizontal nav used inside page headers (e.g. student journal).
 * Active item renders as a filled pill matching the Add button height.
 * Canonical reference — student-journal.component.css mirrors these.
 */

.in-page-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-1, 4px);
}

.in-page-nav .nav-link {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 var(--space-3);
  font-size: calc(var(--font-size-sm) * 1.1);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast, 100ms ease);
  white-space: nowrap;
}

.in-page-nav .nav-link:hover {
  color: var(--text-primary, #1F2937);
  background: var(--surface-1, #F6F8FA);
  text-decoration: none;
}

.in-page-nav .nav-link.active {
  color: var(--surface-0, #FFFFFF);
  background: var(--bs-secondary, #6c757d);
  font-weight: var(--font-weight-medium);
}

.in-page-nav .nav-link:focus {
  outline: none;
  box-shadow: none;
}

/* Responsive compression */
@media (max-width: 1600px) {
  .in-page-nav .nav-link {
    padding: 0 var(--space-2, 0.5rem);
  }

  .in-page-nav {
    gap: 2px;
  }
}

@media (max-width: 1024px) {
  .in-page-nav .nav-link {
    padding: 0 var(--space-1, 0.25rem);
  }
}

/* Dark mode */
[data-bs-theme="dark"] .in-page-nav .nav-link {
  color: var(--text-secondary, #8B949E);
}

[data-bs-theme="dark"] .in-page-nav .nav-link:hover {
  color: var(--text-primary, #E6EDF3);
  background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .in-page-nav .nav-link.active {
  color: var(--surface-0, #FFFFFF);
  background: var(--bs-secondary, #6c757d);
}

/* A VERTICAL rail modifier lived here for My Junipa's section menu. It was
 * removed: that menu is always the horizontal row at the top of the page, and
 * nothing else consumed the modifier. Leaving it in place would invite the
 * rail to be rebuilt. */

/* ----------------------------------------
 * In-page nav — horizontal SCROLLER modifier
 * ----------------------------------------
 * The responsive counterpart to the vertical rail: below the rail's breakpoint
 * the same items become one horizontally scrollable row. The scrollbar itself
 * is hidden (the row's overflowing content is the affordance) and items never
 * shrink, so a long label scrolls rather than crushing its neighbours.
 */
.in-page-nav--scroller {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.in-page-nav--scroller::-webkit-scrollbar {
  display: none;
}

.in-page-nav--scroller .nav-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ========================================
 * Primary Button
 * The blue primary action button with a restrained depth effect.
 *
 * The primary button is BLUE (--bs-primary / #0d6efd), not orange. Orange
 * (--cta-primary) is a brand accent used by specific affordances (upload
 * progress, journal document CTAs, group membership highlights); it is NOT
 * the app-wide primary button colour. This rule lands after Bootstrap's own
 * .btn-primary in the cascade, so it must restate the blue explicitly.
 *
 * Usage: class="btn btn-primary"
 * Replaces: .save-action-btn, .group-action-btn
 * ======================================== */

.btn-primary {
  --bs-btn-bg: var(--bs-primary, #0d6efd);
  --bs-btn-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-hover-bg: var(--btn-primary-hover-bg, #0b5ed7);
  --bs-btn-hover-border-color: var(--btn-primary-hover-bg, #0b5ed7);
  --bs-btn-active-bg: var(--btn-primary-active-bg, #0a58ca);
  --bs-btn-active-border-color: var(--btn-primary-active-bg, #0a58ca);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-disabled-bg: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-color: #FFFFFF;
  padding: calc(var(--space-2) * 1.12) calc(var(--space-3) * 1.12);
  font-size: calc(var(--font-size-sm) * 1.12);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-xs);
  background-color: var(--bs-primary, #0d6efd);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  color: #FFFFFF;
  text-shadow: none;
  transition: background var(--transition-fast);
  line-height: 1.5;
}

.btn.btn-sm {
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.btn.btn-sm .bi {
  font-size: 1em;
  line-height: 1;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-primary-hover-bg, #0b5ed7);
  border-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--focus-ring, rgba(13, 110, 253, 0.5));
  outline-offset: 1px;
}

.btn-primary:active,
.btn-primary:active:focus {
  background-color: var(--btn-primary-active-bg, #0a58ca);
  border-color: rgba(0, 0, 0, 0.2);
  border-bottom-width: 1px;
  color: #FFFFFF;
  transform: translateY(1px);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--bs-primary, #0d6efd);
  border-color: rgba(0, 0, 0, 0.15);
  color: #FFFFFF;
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

/* Dark mode — stays BLUE. Only the depth treatment changes (light hairlines
   instead of dark ones); the fill lifts to a brighter blue for contrast
   against dark surfaces. Never --cta-primary here. */
[data-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--bs-primary, #0d6efd);
  --bs-btn-border-color: var(--bs-primary, #0d6efd);
  --bs-btn-hover-bg: var(--btn-primary-hover-bg, #3D8BFD);
  --bs-btn-hover-border-color: var(--btn-primary-hover-bg, #3D8BFD);
  --bs-btn-active-bg: var(--btn-primary-active-bg, #5A9DFE);
  --bs-btn-active-border-color: var(--btn-primary-active-bg, #5A9DFE);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-disabled-bg: var(--bs-primary, #0d6efd);
  --bs-btn-disabled-color: #FFFFFF;
  background-color: var(--bs-primary, #0d6efd);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  text-shadow: none;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
  background-color: var(--btn-primary-hover-bg, #3D8BFD);
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

[data-theme="dark"] .btn-primary:active,
[data-bs-theme="dark"] .btn-primary:active {
  background-color: var(--btn-primary-active-bg, #5A9DFE);
  border-bottom-width: 1px;
  color: #FFFFFF;
}

[data-theme="dark"] .btn-primary:disabled,
[data-theme="dark"] .btn-primary.disabled,
[data-bs-theme="dark"] .btn-primary:disabled,
[data-bs-theme="dark"] .btn-primary.disabled {
  background-color: var(--bs-primary, #0d6efd);
  border-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  opacity: 0.5;
}

/* ========================================
 * Progress Indicators
 * ======================================== */

/* --- Snake Spinner --- */
.ds-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
}

.ds-spinner-seg {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--ds-accent, #18181b);
  border-radius: 0;
}

.ds-spinner-seg:nth-child(1) {
  animation: ds-snake-move 1.2s linear infinite;
  opacity: 1;
}

.ds-spinner-seg:nth-child(2) {
  animation: ds-snake-move 1.2s linear infinite -0.4s;
  opacity: 0.5;
}

.ds-spinner-seg:nth-child(3) {
  animation: ds-snake-move 1.2s linear infinite -0.8s;
  opacity: 0.2;
}

@keyframes ds-snake-move {
  0%     { top: 0;    left: 0; }
  25%    { top: 0;    left: 12px; }
  50%    { top: 12px; left: 12px; }
  75%    { top: 12px; left: 0; }
  100%   { top: 0;    left: 0; }
}

/* Small variant (12px) */
.ds-spinner.ds-spinner-sm {
  width: 12px;
  height: 12px;
}

.ds-spinner.ds-spinner-sm .ds-spinner-seg {
  width: 3px;
  height: 3px;
}

.ds-spinner.ds-spinner-sm .ds-spinner-seg:nth-child(1) {
  animation: ds-snake-move-sm 1.2s linear infinite;
}

.ds-spinner.ds-spinner-sm .ds-spinner-seg:nth-child(2) {
  animation: ds-snake-move-sm 1.2s linear infinite -0.4s;
}

.ds-spinner.ds-spinner-sm .ds-spinner-seg:nth-child(3) {
  animation: ds-snake-move-sm 1.2s linear infinite -0.8s;
}

@keyframes ds-snake-move-sm {
  0%     { top: 0;   left: 0; }
  25%    { top: 0;   left: 9px; }
  50%    { top: 9px; left: 9px; }
  75%    { top: 9px; left: 0; }
  100%   { top: 0;   left: 0; }
}

/* Dark mode spinner */
[data-theme="dark"] .ds-spinner-seg,
[data-bs-theme="dark"] .ds-spinner-seg {
  background: var(--ds-accent, #fafafa);
}

/* --- Loading Progress Bar --- */
.ds-loading-progress {
  background: var(--ds-bg-secondary, #f4f4f5);
  border: 1px solid var(--ds-border, #e4e4e7);
  border-radius: 6px;
  padding: 1rem;
}

.ds-progress-steps {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ds-progress-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--ds-text-muted, #a1a1aa);
}

.ds-progress-step.loading {
  color: var(--ds-accent, #18181b);
}

.ds-progress-step.done {
  color: var(--ds-success, #22c55e);
}

.ds-progress-step.error {
  color: var(--ds-danger, #ef4444);
}

.ds-step-indicator {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
}

.ds-step-dot {
  width: 6px;
  height: 6px;
  background: var(--ds-text-muted, #a1a1aa);
  border-radius: 0;
  opacity: 0.5;
}

/* --- Inline Loading Status --- */
.ds-loading-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ds-loading-text {
  font-size: 0.75rem;
  color: var(--ds-text-muted, #a1a1aa);
}

/* ================================================================
   ENHANCED JOURNAL (EJ)
   Scheduled adjustments, acknowledgement tables, coverage indicators,
   Support Canopy visualisation, compliance dashboard.
   ================================================================ */

/* --- EJ Section (Student Journal) --- */
.ej-section {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, #FFFFFF);
  overflow: hidden;
}

.ej-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
}

.ej-section-header:hover {
  background: var(--surface-3, #F3F4F6);
}

.ej-section-title {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-primary, #1F2937);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.ej-section-body {
  padding: var(--space-4, 16px);
}

/* --- EJ Notice Banner --- */
.ej-notice {
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm, 11px);
  line-height: var(--line-height-normal, 1.5);
  color: var(--text-secondary, #4B5563);
}

.ej-notice-info {
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.ej-notice-warning {
  background: rgba(202, 138, 4, 0.06);
  border: 1px solid rgba(202, 138, 4, 0.12);
}

.ej-notice-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

/* --- Coverage Status Indicators --- */
.ej-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
}

.ej-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  flex-shrink: 0;
}

.ej-status-current .ej-status-dot { background: var(--status-success, #16A34A); }
.ej-status-current { color: var(--status-success, #16A34A); }

.ej-status-due-soon .ej-status-dot { background: var(--status-warning, #CA8A04); }
.ej-status-due-soon { color: var(--status-warning, #CA8A04); }

.ej-status-overdue .ej-status-dot { background: var(--status-error, #DC2626); }
.ej-status-overdue { color: var(--status-error, #DC2626); }

.ej-status-not-configured .ej-status-dot { background: var(--text-muted, #9CA3AF); }
.ej-status-not-configured { color: var(--text-muted, #9CA3AF); }

/* --- EJ Meta Row --- */
.ej-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 16px) var(--space-6, 24px);
  font-size: var(--font-size-sm, 11px);
}

.ej-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ej-meta-label {
  font-size: 10px;
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #9CA3AF);
}

.ej-meta-value {
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary, #1F2937);
}

/* --- Revision History Timeline --- */
.ej-revision-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ej-revision-item {
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
  font-size: var(--font-size-sm, 11px);
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
}

.ej-revision-item:last-child {
  border-bottom: none;
}

.ej-revision-date {
  flex-shrink: 0;
  width: 64px;
  color: var(--text-muted, #9CA3AF);
  font-variant-numeric: tabular-nums;
}

.ej-revision-author {
  flex-shrink: 0;
  width: 100px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary, #1F2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ej-revision-change {
  color: var(--text-secondary, #4B5563);
}

/* --- Scheduled Adjustment Card --- */
.sched-card {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-2, #FFFFFF);
}

.sched-card + .sched-card {
  margin-top: var(--space-3, 12px);
}

.sched-card-title {
  font-size: var(--font-size-base, 12px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
  margin: 0 0 var(--space-1, 4px) 0;
}

.sched-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px) var(--space-4, 16px);
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
}

.sched-card-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

/* --- Frequency Badge --- */
.freq-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  font-size: 10px;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.freq-badge-daily {
  background: rgba(37, 99, 235, 0.08);
  color: var(--status-info, #2563EB);
}

.freq-badge-weekly {
  background: rgba(22, 163, 74, 0.08);
  color: var(--status-success, #16A34A);
}

.freq-badge-fortnightly {
  background: rgba(202, 138, 4, 0.08);
  color: var(--status-warning, #CA8A04);
}

.freq-badge-termly {
  background: rgba(139, 92, 246, 0.08);
  color: #7C3AED;
}

/* --- Acknowledgement Table --- */
.ack-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 11px);
}

.ack-table th {
  font-size: 10px;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #9CA3AF);
  text-align: left;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--border-default, #D1D5DB);
  background: var(--surface-1, #F6F8FA);
}

.ack-table td {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  color: var(--text-primary, #1F2937);
  vertical-align: middle;
}

.ack-table tr:last-child td {
  border-bottom: none;
}

.ack-table .ack-pending {
  color: var(--status-warning, #CA8A04);
  font-weight: var(--font-weight-medium, 500);
  font-style: italic;
}

.ack-table .ack-overdue {
  color: var(--status-error, #DC2626);
  font-weight: var(--font-weight-medium, 500);
}

.ack-table .ack-absence {
  color: var(--text-muted, #9CA3AF);
  font-size: 10px;
}

/* --- Inline Acknowledge (My Junipa Digest) --- */
.ack-digest-card {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, #FFFFFF);
  overflow: hidden;
}

.ack-digest-header {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-primary, #1F2937);
}

.ack-digest-item {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
}

.ack-digest-item:last-child {
  border-bottom: none;
}

.ack-digest-student {
  font-size: var(--font-size-base, 12px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
}

.ack-digest-adjustment {
  font-size: var(--font-size-sm, 11px);
  color: var(--text-secondary, #4B5563);
}

.ack-digest-detail {
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
  margin-top: 2px;
}

.ack-digest-overdue {
  color: var(--status-error, #DC2626);
  font-size: 10px;
  font-weight: var(--font-weight-medium, 500);
}

.ack-digest-form {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  background: var(--surface-1, #F6F8FA);
  border-radius: var(--radius-sm, 4px);
}

.ack-digest-form .form-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  font-size: 10px;
}

.ack-digest-form .form-select {
  width: auto;
  min-width: 80px;
  height: 28px;
  font-size: 10px;
}

.ack-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 4px 12px;
  border: none;
  border-radius: var(--radius-sm, 4px);
  font-size: 10px;
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  white-space: nowrap;
  background: var(--cta-secondary, #0284C7);
  color: #FFFFFF;
}

.ack-btn:hover {
  background: var(--cta-secondary-hover, #0EA5E9);
}

/* --- Compliance Notice --- */
.ej-compliance-notice {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-size: 10px;
  line-height: var(--line-height-normal, 1.5);
  color: var(--text-muted, #9CA3AF);
  background: var(--surface-1, #F6F8FA);
  border-radius: var(--radius-sm, 4px);
}

/* --- Support Canopy Visualisation --- */
.canopy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.canopy-row {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

.canopy-label {
  flex-shrink: 0;
  width: 80px;
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
  text-align: right;
  padding-right: var(--space-2, 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canopy-cells {
  display: flex;
  gap: 2px;
  flex: 1;
}

.canopy-cell {
  flex: 1;
  height: 14px;
  border-radius: 2px;
  min-width: 0;
  position: relative;
}

/* Coverage levels */
.canopy-cell-0 { background: var(--surface-3, #F3F4F6); }
.canopy-cell-1 { background: rgba(37, 99, 235, 0.15); }
.canopy-cell-2 { background: rgba(37, 99, 235, 0.30); }
.canopy-cell-3 { background: rgba(37, 99, 235, 0.50); }
.canopy-cell-4 { background: rgba(37, 99, 235, 0.70); }

/* Category colours (used as segments within cells) */
.canopy-cat-consultation { background: rgba(37, 99, 235, 0.60); }
.canopy-cat-provided { background: rgba(22, 163, 74, 0.60); }
.canopy-cat-monitored { background: rgba(234, 88, 12, 0.60); }
.canopy-cat-assessed { background: rgba(139, 92, 246, 0.60); }
.canopy-cell-holiday { background: var(--surface-1, #F6F8FA); opacity: 0.5; }

/* Week labels */
.canopy-week-labels {
  display: flex;
  gap: 2px;
  margin-left: 84px;
}

.canopy-week-label {
  flex: 1;
  font-size: 9px;
  color: var(--text-muted, #9CA3AF);
  text-align: center;
  min-width: 0;
}

/* 10-week threshold marker */
.canopy-threshold {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  padding-left: 84px;
}

.canopy-threshold-bar {
  flex: 1;
  height: 3px;
  background: var(--border-subtle, #E5E7EB);
  border-radius: 2px;
  position: relative;
}

.canopy-threshold-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--status-success, #16A34A);
}

.canopy-threshold-label {
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
  white-space: nowrap;
}

/* Canopy legend */
.canopy-legend {
  display: flex;
  gap: var(--space-4, 16px);
  padding-left: 84px;
  margin-top: var(--space-2, 8px);
}

.canopy-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
}

.canopy-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* --- Compliance Dashboard Metrics --- */
.ej-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3, 12px);
}

.ej-metric-card {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-2, #FFFFFF);
}

.ej-metric-value {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #1F2937);
  font-variant-numeric: tabular-nums;
}

.ej-metric-label {
  font-size: 10px;
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #9CA3AF);
  margin-top: 2px;
}

.ej-metric-card.ej-metric-danger {
  border-color: rgba(220, 38, 38, 0.2);
}

.ej-metric-card.ej-metric-danger .ej-metric-value {
  color: var(--status-error, #DC2626);
}

/* --- Dark mode overrides for EJ --- */
[data-theme="dark"] .ej-notice-info,
[data-bs-theme="dark"] .ej-notice-info {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .ej-notice-warning,
[data-bs-theme="dark"] .ej-notice-warning {
  background: rgba(202, 138, 4, 0.06);
  border-color: rgba(202, 138, 4, 0.15);
}

[data-theme="dark"] .ack-digest-form,
[data-bs-theme="dark"] .ack-digest-form {
  background: var(--surface-3, #21262D);
}

[data-theme="dark"] .ej-compliance-notice,
[data-bs-theme="dark"] .ej-compliance-notice {
  background: var(--surface-3, #21262D);
}

[data-theme="dark"] .canopy-cell-0,
[data-bs-theme="dark"] .canopy-cell-0 {
  background: var(--surface-3, #21262D);
}

[data-theme="dark"] .canopy-cell-1,
[data-bs-theme="dark"] .canopy-cell-1 { background: rgba(56, 189, 248, 0.15); }
[data-theme="dark"] .canopy-cell-2,
[data-bs-theme="dark"] .canopy-cell-2 { background: rgba(56, 189, 248, 0.30); }
[data-theme="dark"] .canopy-cell-3,
[data-bs-theme="dark"] .canopy-cell-3 { background: rgba(56, 189, 248, 0.50); }
[data-theme="dark"] .canopy-cell-4,
[data-bs-theme="dark"] .canopy-cell-4 { background: rgba(56, 189, 248, 0.70); }

[data-theme="dark"] .canopy-cat-consultation,
[data-bs-theme="dark"] .canopy-cat-consultation { background: rgba(56, 189, 248, 0.60); }
[data-theme="dark"] .canopy-cat-provided,
[data-bs-theme="dark"] .canopy-cat-provided { background: rgba(52, 211, 153, 0.60); }
[data-theme="dark"] .canopy-cat-monitored,
[data-bs-theme="dark"] .canopy-cat-monitored { background: rgba(251, 146, 60, 0.60); }
[data-theme="dark"] .canopy-cat-assessed,
[data-bs-theme="dark"] .canopy-cat-assessed { background: rgba(167, 139, 250, 0.60); }

[data-theme="dark"] .freq-badge-daily,
[data-bs-theme="dark"] .freq-badge-daily {
  background: rgba(56, 189, 248, 0.10);
  color: #38BDF8;
}

[data-theme="dark"] .freq-badge-weekly,
[data-bs-theme="dark"] .freq-badge-weekly {
  background: rgba(52, 211, 153, 0.10);
  color: #34D399;
}

[data-theme="dark"] .freq-badge-fortnightly,
[data-bs-theme="dark"] .freq-badge-fortnightly {
  background: rgba(251, 191, 36, 0.10);
  color: #FBBF24;
}

[data-theme="dark"] .freq-badge-termly,
[data-bs-theme="dark"] .freq-badge-termly {
  background: rgba(167, 139, 250, 0.10);
  color: #A78BFA;
}

/* --- EJ Full Profile Page --- */

/* Journal ↔ EJ Toggle */
.ej-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default, #D1D5DB);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  background: var(--surface-1, #F6F8FA);
}

.ej-view-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 5px 12px;
  border: none;
  background: none;
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-muted, #9CA3AF);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ej-view-toggle-btn:hover {
  color: var(--text-secondary, #4B5563);
  background: var(--surface-3, #F3F4F6);
}

.ej-view-toggle-btn.active {
  background: var(--surface-2, #FFFFFF);
  color: var(--text-primary, #1F2937);
  font-weight: var(--font-weight-semibold, 600);
  box-shadow: var(--shadow-sm);
}

/* Horizontal NCCD Category Dots */
.ej-category-dots {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-1, #F6F8FA);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  overflow-x: auto;
}

.ej-category-dot-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

.ej-category-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 9999px);
  flex-shrink: 0;
}

.ej-category-dot-cognitive { background: rgba(37, 99, 235, 0.7); }
.ej-category-dot-social { background: rgba(22, 163, 74, 0.7); }
.ej-category-dot-sensory { background: rgba(234, 88, 12, 0.7); }
.ej-category-dot-physical { background: rgba(139, 92, 246, 0.7); }

.ej-category-dot-label {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary, #4B5563);
  white-space: nowrap;
}

.ej-category-dot-count {
  font-size: 9px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-muted, #9CA3AF);
  background: var(--surface-3, #F3F4F6);
  padding: 1px 6px;
  border-radius: var(--radius-full, 9999px);
}

/* Stakeholder Contact Cards */
.ej-stakeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3, 12px);
}

.ej-stakeholder-card {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-2, #FFFFFF);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.ej-stakeholder-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.ej-stakeholder-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: #FFFFFF;
  flex-shrink: 0;
}

.ej-stakeholder-avatar-junipa {
  background: var(--cta-secondary, #0284C7);
}

.ej-stakeholder-avatar-external {
  background: var(--text-muted, #9CA3AF);
}

.ej-stakeholder-name {
  font-size: var(--font-size-base, 12px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
  line-height: var(--line-height-tight, 1.25);
}

.ej-stakeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: var(--font-weight-medium, 500);
  padding: 1px 6px;
  border-radius: var(--radius-full, 9999px);
}

.ej-stakeholder-tag-junipa {
  background: rgba(2, 132, 199, 0.08);
  color: var(--cta-secondary, #0284C7);
}

.ej-stakeholder-tag-external {
  background: var(--surface-3, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
}

.ej-stakeholder-role {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #4B5563);
  font-weight: var(--font-weight-medium, 500);
}

.ej-stakeholder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
}

.ej-stakeholder-meta-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Plan-Mapped Timeline (with review period crossover) */
.ej-plan-timeline {
  position: relative;
  padding-left: 20px;
}

.ej-plan-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle, #E5E7EB);
}

.ej-plan-timeline-node {
  position: relative;
  padding-bottom: var(--space-4, 16px);
  padding-left: var(--space-3, 12px);
}

.ej-plan-timeline-node::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 9999px);
  border: 2px solid var(--border-default, #D1D5DB);
  background: var(--surface-2, #FFFFFF);
  z-index: 1;
}

.ej-plan-timeline-node.node-active::before {
  border-color: var(--status-success, #16A34A);
  background: var(--status-success, #16A34A);
}

.ej-plan-timeline-node.node-review::before {
  border-color: var(--status-warning, #CA8A04);
  background: var(--status-warning, #CA8A04);
}

.ej-plan-timeline-node.node-carried::before {
  border-color: var(--cta-secondary, #0284C7);
  background: var(--cta-secondary, #0284C7);
}

.ej-plan-timeline-node.node-changed::before {
  border-color: var(--cta-primary, #EA580C);
  background: var(--cta-primary, #EA580C);
}

.ej-plan-timeline-node.node-ended::before {
  border-color: var(--text-muted, #9CA3AF);
  background: var(--text-muted, #9CA3AF);
}

.ej-plan-timeline-date {
  font-size: 10px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-muted, #9CA3AF);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.ej-plan-timeline-title {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
  margin-bottom: 2px;
}

.ej-plan-timeline-desc {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #4B5563);
  line-height: var(--line-height-normal, 1.5);
}

.ej-plan-timeline-adjustments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-2, 8px);
}

.ej-plan-adj-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-subtle, #E5E7EB);
  background: var(--surface-1, #F6F8FA);
  color: var(--text-secondary, #4B5563);
}

.ej-plan-adj-chip-added {
  border-color: rgba(22, 163, 74, 0.3);
  background: rgba(22, 163, 74, 0.06);
  color: var(--status-success, #16A34A);
}

.ej-plan-adj-chip-removed {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.06);
  color: var(--status-error, #DC2626);
  text-decoration: line-through;
}

.ej-plan-adj-chip-carried {
  border-color: rgba(2, 132, 199, 0.3);
  background: rgba(2, 132, 199, 0.06);
  color: var(--cta-secondary, #0284C7);
}

.ej-plan-adj-chip-changed {
  border-color: rgba(234, 88, 12, 0.3);
  background: rgba(234, 88, 12, 0.06);
  color: var(--cta-primary, #EA580C);
}

/* Review period banner within timeline */
.ej-review-period-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-xs, 2px);
  font-size: 10px;
  font-weight: var(--font-weight-medium, 500);
  margin-top: var(--space-2, 8px);
}

.ej-review-period-bar-active {
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(22, 163, 74, 0.15);
  color: var(--status-success, #16A34A);
}

.ej-review-period-bar-transition {
  background: rgba(202, 138, 4, 0.06);
  border: 1px dashed rgba(202, 138, 4, 0.3);
  color: var(--status-warning, #CA8A04);
}

/* Dark mode: EJ Full Profile additions */
[data-theme="dark"] .ej-view-toggle,
[data-bs-theme="dark"] .ej-view-toggle {
  border-color: var(--border-default, rgba(48, 54, 61, 1));
  background: var(--surface-3, #21262D);
}

[data-theme="dark"] .ej-view-toggle-btn.active,
[data-bs-theme="dark"] .ej-view-toggle-btn.active {
  background: var(--surface-2, #161B22);
  color: var(--text-primary, #E6EDF3);
}

[data-theme="dark"] .ej-category-dots,
[data-bs-theme="dark"] .ej-category-dots {
  background: var(--surface-3, #21262D);
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .ej-category-dot-count,
[data-bs-theme="dark"] .ej-category-dot-count {
  background: var(--surface-2, #161B22);
}

[data-theme="dark"] .ej-category-dot-cognitive,
[data-bs-theme="dark"] .ej-category-dot-cognitive { background: rgba(56, 189, 248, 0.7); }
[data-theme="dark"] .ej-category-dot-social,
[data-bs-theme="dark"] .ej-category-dot-social { background: rgba(52, 211, 153, 0.7); }
[data-theme="dark"] .ej-category-dot-sensory,
[data-bs-theme="dark"] .ej-category-dot-sensory { background: rgba(251, 146, 60, 0.7); }
[data-theme="dark"] .ej-category-dot-physical,
[data-bs-theme="dark"] .ej-category-dot-physical { background: rgba(167, 139, 250, 0.7); }

[data-theme="dark"] .ej-stakeholder-card,
[data-bs-theme="dark"] .ej-stakeholder-card {
  background: var(--surface-2, #161B22);
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .ej-stakeholder-tag-junipa,
[data-bs-theme="dark"] .ej-stakeholder-tag-junipa {
  background: rgba(56, 189, 248, 0.10);
  color: var(--cta-secondary, #38BDF8);
}

[data-theme="dark"] .ej-stakeholder-tag-external,
[data-bs-theme="dark"] .ej-stakeholder-tag-external {
  background: var(--surface-3, #21262D);
  color: var(--text-muted, #6E7681);
}

[data-theme="dark"] .ej-plan-timeline::before,
[data-bs-theme="dark"] .ej-plan-timeline::before {
  background: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .ej-plan-timeline-node::before,
[data-bs-theme="dark"] .ej-plan-timeline-node::before {
  border-color: var(--border-default, rgba(48, 54, 61, 1));
  background: var(--surface-2, #161B22);
}

[data-theme="dark"] .ej-plan-adj-chip,
[data-bs-theme="dark"] .ej-plan-adj-chip {
  background: var(--surface-3, #21262D);
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
  color: var(--text-secondary, #8B949E);
}

/* ========================================
 * Plan Log Timeline
 * Columnar accordion timeline for plan change history.
 * 4-column grid: icon | date | content | person + chevron
 *
 * Usage:
 *   .plan-log-timeline
 *     .plan-log-node.plan-log-node-{added|removed|updated|restored|status|upgraded}
 *       .plan-log-node-marker > .plan-log-node-icon > i.bi
 *       .plan-log-date-col > .plan-log-date + .plan-log-time
 *       .plan-log-content-col > .plan-log-action + .plan-log-desc
 *       .plan-log-meta-col > .plan-log-by + .plan-log-chevron
 *       .plan-log-details (expanded, spans col 2–end)
 * ======================================== */
.plan-log-timeline {
  position: relative;
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, #FFFFFF);
  overflow: hidden;
}

/* Vertical line — runs through the icon column, offset for padding */
.plan-log-timeline::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle, #E5E7EB);
}

.plan-log-node {
  display: grid;
  grid-template-columns: 20px 88px 1fr auto;
  gap: 0 12px;
  align-items: start;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  position: relative;
}

.plan-log-node:last-child {
  border-bottom: none;
}

.plan-log-node:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

/* Column 1: Timeline marker */
.plan-log-node-marker {
  display: flex;
  justify-content: center;
  padding-top: 1px;
}

.plan-log-node-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full, 9999px);
  border: 2px solid var(--border-default, #D1D5DB);
  background: var(--surface-2, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  z-index: 1;
  color: var(--text-muted, #9CA3AF);
  flex-shrink: 0;
}

/* Node type colors */
.plan-log-node-added .plan-log-node-icon {
  border-color: var(--status-success, #16A34A);
  color: var(--status-success, #16A34A);
}

.plan-log-node-removed .plan-log-node-icon {
  border-color: var(--status-warning, #CA8A04);
  color: var(--status-warning, #CA8A04);
}

.plan-log-node-updated .plan-log-node-icon {
  border-color: var(--cta-secondary, #0284C7);
  color: var(--cta-secondary, #0284C7);
}

.plan-log-node-restored .plan-log-node-icon {
  border-color: #0891B2;
  color: #0891B2;
}

.plan-log-node-status .plan-log-node-icon {
  border-color: var(--text-secondary, #4B5563);
  color: var(--text-secondary, #4B5563);
}

.plan-log-node-upgraded .plan-log-node-icon {
  border-color: #7C3AED;
  color: #7C3AED;
}

/* Column 2: Date */
.plan-log-date-col {
  padding-top: 1px;
}

.plan-log-date {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-secondary, #4B5563);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-log-time {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-normal, 400);
  color: var(--text-muted, #9CA3AF);
  display: block;
}

/* Column 3: Content — action + plan name + description */
.plan-log-content-col {
  min-width: 0;
}

.plan-log-action {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: 2px;
}

.plan-log-action-label {
  font-size: 9px;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--radius-xs, 2px);
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-log-action-plan-added {
  background: rgba(22, 163, 74, 0.08);
  color: var(--status-success, #16A34A);
}

.plan-log-action-plan-removed {
  background: rgba(202, 138, 4, 0.08);
  color: var(--status-warning, #CA8A04);
}

.plan-log-action-plan-updated {
  background: rgba(2, 132, 199, 0.08);
  color: var(--cta-secondary, #0284C7);
}

.plan-log-action-plan-restored {
  background: rgba(13, 202, 240, 0.08);
  color: #0891B2;
}

.plan-log-action-plan-status-changed {
  background: rgba(107, 114, 128, 0.08);
  color: var(--text-secondary, #4B5563);
}

.plan-log-action-plan-template-upgraded {
  background: rgba(124, 58, 237, 0.08);
  color: #7C3AED;
}

.plan-log-plan-name {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
}

.plan-log-desc {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #4B5563);
  line-height: var(--line-height-normal, 1.5);
}

/* Column 4: Meta — person + chevron */
.plan-log-meta-col {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding-top: 2px;
  white-space: nowrap;
}

.plan-log-by {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #9CA3AF);
}

.plan-log-chevron {
  font-size: 10px;
  color: var(--text-muted, #9CA3AF);
  transition: transform 0.15s ease;
}

.plan-log-node.expanded .plan-log-chevron {
  transform: rotate(180deg);
}

/* Expanded details — spans columns 2 through end */
.plan-log-details {
  grid-column: 2 / -1;
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-1, #F6F8FA);
  border-radius: var(--radius-xs, 2px);
  border: 1px solid var(--border-subtle, #E5E7EB);
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #4B5563);
}

.plan-log-detail-row {
  margin-bottom: 4px;
}

.plan-log-detail-row:last-child {
  margin-bottom: 0;
}

.plan-log-detail-label {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-muted, #9CA3AF);
}

.plan-log-count {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #9CA3AF);
  margin-left: auto;
}

/* Dark mode */
[data-theme="dark"] .plan-log-timeline,
[data-bs-theme="dark"] .plan-log-timeline {
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
  background: var(--surface-2, #161B22);
}

[data-theme="dark"] .plan-log-timeline::before,
[data-bs-theme="dark"] .plan-log-timeline::before {
  background: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .plan-log-node,
[data-bs-theme="dark"] .plan-log-node {
  border-bottom-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .plan-log-node:hover,
[data-bs-theme="dark"] .plan-log-node:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.02));
}

[data-theme="dark"] .plan-log-node-icon,
[data-bs-theme="dark"] .plan-log-node-icon {
  border-color: var(--border-default, rgba(48, 54, 61, 1));
  background: var(--surface-2, #161B22);
  color: var(--text-muted, #6E7681);
}

[data-theme="dark"] .plan-log-node-added .plan-log-node-icon,
[data-bs-theme="dark"] .plan-log-node-added .plan-log-node-icon {
  border-color: var(--status-success, #3FB950);
  color: var(--status-success, #3FB950);
}

[data-theme="dark"] .plan-log-node-removed .plan-log-node-icon,
[data-bs-theme="dark"] .plan-log-node-removed .plan-log-node-icon {
  border-color: var(--status-warning, #D29922);
  color: var(--status-warning, #D29922);
}

[data-theme="dark"] .plan-log-node-updated .plan-log-node-icon,
[data-bs-theme="dark"] .plan-log-node-updated .plan-log-node-icon {
  border-color: var(--cta-secondary, #38BDF8);
  color: var(--cta-secondary, #38BDF8);
}

[data-theme="dark"] .plan-log-node-restored .plan-log-node-icon,
[data-bs-theme="dark"] .plan-log-node-restored .plan-log-node-icon {
  border-color: #22D3EE;
  color: #22D3EE;
}

[data-theme="dark"] .plan-log-node-status .plan-log-node-icon,
[data-bs-theme="dark"] .plan-log-node-status .plan-log-node-icon {
  border-color: var(--text-secondary, #8B949E);
  color: var(--text-secondary, #8B949E);
}

[data-theme="dark"] .plan-log-node-upgraded .plan-log-node-icon,
[data-bs-theme="dark"] .plan-log-node-upgraded .plan-log-node-icon {
  border-color: #A78BFA;
  color: #A78BFA;
}

[data-theme="dark"] .plan-log-details,
[data-bs-theme="dark"] .plan-log-details {
  background: var(--surface-3, #21262D);
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

/* ========================================
 * Horizontal Adjustment Timeline
 * Scrollable Gantt-style timeline for EJ profiles.
 * Tracks coloured by NCCD category, with review/absence markers.
 * Usage: .ej-timeline-container > .ej-timeline > .ej-timeline-track
 * ======================================== */
.ej-timeline-container {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, #FFFFFF);
  padding: var(--space-4, 16px);
  overflow-x: auto;
}
.ej-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 12px);
}
.ej-timeline-title {
  font-size: var(--font-size-base, 12px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.ej-timeline {
  position: relative;
  min-width: 700px;
}
.ej-timeline-months {
  display: flex;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  padding-bottom: var(--space-1, 4px);
  margin-bottom: var(--space-3, 12px);
  margin-left: 140px;
}
.ej-timeline-month {
  flex: 1;
  font-size: 9px;
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #9CA3AF);
  text-align: center;
}
.ej-timeline-track {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
  position: relative;
}
.ej-timeline-track-label {
  width: 140px;
  flex-shrink: 0;
  padding-right: var(--space-3, 12px);
}
.ej-timeline-track-name {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary, #1F2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ej-timeline-track-freq {
  font-size: 9px;
  color: var(--text-muted, #9CA3AF);
}
.ej-timeline-track-bar-area {
  flex: 1;
  height: 24px;
  position: relative;
  background: var(--surface-3, #F3F4F6);
  border-radius: 2px;
}
.ej-timeline-bar {
  position: absolute;
  top: 4px;
  height: 16px;
  border-radius: 2px;
  opacity: 0.85;
}
.ej-timeline-bar-cognitive { background: rgba(37, 99, 235, 0.6); }
.ej-timeline-bar-social { background: rgba(22, 163, 74, 0.6); }
.ej-timeline-bar-sensory { background: rgba(234, 88, 12, 0.6); }
.ej-timeline-bar-physical { background: rgba(139, 92, 246, 0.6); }

/* Review markers */
.ej-timeline-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.ej-timeline-marker-scheduled {
  width: 10px;
  height: 10px;
  border: 2px solid var(--status-info, #2563EB);
  background: var(--surface-2, #FFFFFF);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ej-timeline-marker-completed {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 9999px);
  background: var(--status-success, #16A34A);
  border: 2px solid var(--status-success, #16A34A);
}
.ej-timeline-marker-overdue {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  border: 2px solid var(--status-error, #DC2626);
}

/* Absence markers */
.ej-timeline-absence {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  border: 2px solid var(--text-muted, #9CA3AF);
  background: transparent;
  z-index: 1;
}

/* Now line */
.ej-timeline-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cta-primary, #EA580C);
  z-index: 3;
  opacity: 0.7;
}
.ej-timeline-now::before {
  content: 'NOW';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--cta-primary, #EA580C);
  letter-spacing: 0.5px;
}
.ej-timeline-now-dashed {
  border-left: 2px dashed var(--cta-primary, #EA580C);
  background: none;
}

/* Legend */
.ej-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--border-subtle, #E5E7EB);
}
.ej-timeline-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: 9px;
  color: var(--text-muted, #9CA3AF);
}
.ej-timeline-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.ej-timeline-legend-marker {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* Dark mode: Horizontal timeline */
[data-theme="dark"] .ej-timeline-container,
[data-bs-theme="dark"] .ej-timeline-container {
  background: var(--surface-2, #161B22);
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}
[data-theme="dark"] .ej-timeline-track-bar-area,
[data-bs-theme="dark"] .ej-timeline-track-bar-area {
  background: var(--surface-3, #21262D);
}
[data-theme="dark"] .ej-timeline-bar-cognitive,
[data-bs-theme="dark"] .ej-timeline-bar-cognitive { background: rgba(56, 189, 248, 0.6); }
[data-theme="dark"] .ej-timeline-bar-social,
[data-bs-theme="dark"] .ej-timeline-bar-social { background: rgba(52, 211, 153, 0.6); }
[data-theme="dark"] .ej-timeline-bar-sensory,
[data-bs-theme="dark"] .ej-timeline-bar-sensory { background: rgba(251, 146, 60, 0.6); }
[data-theme="dark"] .ej-timeline-bar-physical,
[data-bs-theme="dark"] .ej-timeline-bar-physical { background: rgba(167, 139, 250, 0.6); }
[data-theme="dark"] .ej-timeline-marker-scheduled,
[data-bs-theme="dark"] .ej-timeline-marker-scheduled {
  border-color: var(--status-info, #58A6FF);
  background: var(--surface-2, #161B22);
}
[data-theme="dark"] .ej-timeline-marker-completed,
[data-bs-theme="dark"] .ej-timeline-marker-completed {
  background: var(--status-success, #3FB950);
  border-color: var(--status-success, #3FB950);
}
[data-theme="dark"] .ej-timeline-marker-overdue,
[data-bs-theme="dark"] .ej-timeline-marker-overdue {
  border-color: var(--status-error, #F85149);
}
[data-theme="dark"] .ej-timeline-absence,
[data-bs-theme="dark"] .ej-timeline-absence {
  border-color: var(--text-muted, #6E7681);
}
[data-theme="dark"] .ej-timeline-now,
[data-bs-theme="dark"] .ej-timeline-now {
  background: var(--cta-primary, #FF6B35);
}
[data-theme="dark"] .ej-timeline-now::before,
[data-bs-theme="dark"] .ej-timeline-now::before {
  color: var(--cta-primary, #FF6B35);
}
[data-theme="dark"] .ej-timeline-months,
[data-bs-theme="dark"] .ej-timeline-months {
  border-bottom-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}
[data-theme="dark"] .ej-timeline-legend,
[data-bs-theme="dark"] .ej-timeline-legend {
  border-top-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}
[data-theme="dark"] .ej-timeline-track-name,
[data-bs-theme="dark"] .ej-timeline-track-name {
  color: var(--text-primary, #E6EDF3);
}
[data-theme="dark"] .ej-timeline-title,
[data-bs-theme="dark"] .ej-timeline-title {
  color: var(--text-primary, #E6EDF3);
}

/* ========================================
 * Admin Utility List
 * Navigational list used on admin home/settings pages.
 * Text goes bold on hover, chevron slides in 12px.
 * Usage: ul.admin-util-list > li > a.admin-util-link
 * ======================================== */
.admin-util-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-util-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-normal, 400);
  color: var(--text-secondary, #6B7280);
  background: var(--surface-0, #FFFFFF);
  text-decoration: none;
  transition: font-weight var(--transition-fast, 100ms ease),
              color var(--transition-fast, 100ms ease);
  cursor: pointer;
}

.admin-util-link .admin-util-chevron {
  transition: transform var(--transition-fast, 100ms ease);
  color: var(--text-muted, #9CA3AF);
  font-size: var(--font-size-xs, 10px);
}

.admin-util-link:hover {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
  text-decoration: none;
}

.admin-util-link:hover .admin-util-chevron {
  transform: translateX(-12px);
  color: var(--text-primary, #1F2937);
}

.admin-util-link.active {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
  background: var(--surface-1, #F9FAFB);
}

/* Borders between items */
.admin-util-list li + li {
  border-top: 1px solid var(--border-default, #E5E7EB);
}

/* Dark mode */
[data-bs-theme="dark"] .admin-util-link {
  color: var(--text-secondary, #8B949E);
  background: var(--surface-inset, #141414);
}

[data-bs-theme="dark"] .admin-util-link:hover {
  color: var(--text-primary, #E6EDF3);
}

[data-bs-theme="dark"] .admin-util-link:hover .admin-util-chevron {
  color: var(--text-primary, #E6EDF3);
}

[data-bs-theme="dark"] .admin-util-link.active {
  color: var(--text-primary, #E6EDF3);
  background: var(--surface-2, #21262D);
}

[data-bs-theme="dark"] .admin-util-list li + li {
  border-top-color: rgba(48, 54, 61, 0.2);
}

/* ========================================
 * EJ Integration - Coverage Map
 * ======================================== */
.ej-coverage-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-x: auto;
}

.ej-coverage-cell {
  width: 18px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ej-coverage-cell--covered {
  background: var(--status-success, #16A34A);
}

.ej-coverage-cell--partial {
  background: var(--status-warning, #CA8A04);
}

.ej-coverage-cell--empty {
  background: var(--surface-1, #F6F8FA);
}

.ej-coverage-cell--current {
  outline: 1px solid var(--cta-secondary, #0284C7);
  outline-offset: 1px;
}

/* ========================================
 * EJ Integration - Gap Alerts
 * ======================================== */
.ej-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
}

.ej-alert--error {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.15);
  color: var(--status-error, #DC2626);
}

.ej-alert--warning {
  background: rgba(202, 138, 4, 0.06);
  border: 1px solid rgba(202, 138, 4, 0.15);
  color: var(--status-warning, #CA8A04);
}

.ej-alert--info {
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: var(--status-info, #2563EB);
}

/* ========================================
 * EJ Integration - Staff Interactions
 * ======================================== */
.ej-interaction-entry {
  padding: var(--space-2, 8px) 0;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  font-size: var(--font-size-sm, 11px);
}

.ej-interaction-entry:last-child {
  border-bottom: none;
}

.ej-interaction-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 2px);
  font-size: 10px;
  font-weight: var(--font-weight-semibold, 600);
}

.ej-interaction-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-sm, 4px);
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
  font-size: 10px;
  color: var(--status-info, #2563EB);
}

/* ========================================
 * EJ Integration - Plan Currency
 * ======================================== */
.ej-plan-item {
  padding: var(--space-2, 8px) 0;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
}

.ej-plan-item:last-child {
  border-bottom: none;
}

.ej-plan-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: 10px;
  font-weight: var(--font-weight-medium, 500);
}

.ej-plan-status--current { color: var(--status-success, #16A34A); }
.ej-plan-status--due-soon { color: var(--status-warning, #CA8A04); }
.ej-plan-status--overdue { color: var(--status-error, #DC2626); }
.ej-plan-status--expired { color: var(--text-muted, #9CA3AF); }

/* ========================================
 * EJ Integration - Consent Workflow
 * ======================================== */
.ej-consent-timeline {
  position: relative;
  padding-left: 20px;
}

.ej-consent-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle, #E5E7EB);
}

.ej-consent-node {
  position: relative;
  padding: var(--space-2, 8px) 0 var(--space-2, 8px) var(--space-3, 12px);
}

.ej-consent-progress {
  padding: var(--space-3, 12px) 0;
}

/* ========================================
 * EJ Integration - SSG Meetings
 * ======================================== */
.ej-ssg-card {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-2, #FFFFFF);
}

.ej-ssg-attendee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 2px);
  font-size: 10px;
  border: 1px solid var(--border-subtle, #E5E7EB);
  background: var(--surface-1, #F6F8FA);
  color: var(--text-secondary, #4B5563);
}

.ej-ssg-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0;
  font-size: var(--font-size-sm, 11px);
}

/* ========================================
 * EJ Integration - Traffic Lights (Report)
 * ======================================== */
.ej-traffic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.ej-traffic--green {
  background: var(--status-success, #16A34A);
}

.ej-traffic--amber {
  background: var(--status-warning, #CA8A04);
}

.ej-traffic--red {
  background: var(--status-error, #DC2626);
}

/* ========================================
 * EJ Inline Form (shared pattern)
 * ======================================== */
.ej-inline-form {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-1, #F6F8FA);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
}

/* Dark mode: EJ Integration additions */
[data-theme="dark"] .ej-alert--error,
[data-bs-theme="dark"] .ej-alert--error {
  background: rgba(248, 81, 73, 0.08);
  border-color: rgba(248, 81, 73, 0.2);
  color: #F85149;
}

[data-theme="dark"] .ej-alert--warning,
[data-bs-theme="dark"] .ej-alert--warning {
  background: rgba(210, 153, 34, 0.08);
  border-color: rgba(210, 153, 34, 0.2);
  color: #D29922;
}

[data-theme="dark"] .ej-alert--info,
[data-bs-theme="dark"] .ej-alert--info {
  background: rgba(88, 166, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.15);
  color: #58A6FF;
}

[data-theme="dark"] .ej-coverage-cell--empty,
[data-bs-theme="dark"] .ej-coverage-cell--empty {
  background: var(--surface-3, #21262D);
}

[data-theme="dark"] .ej-ssg-card,
[data-bs-theme="dark"] .ej-ssg-card {
  background: var(--surface-2, #161B22);
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .ej-inline-form,
[data-bs-theme="dark"] .ej-inline-form {
  background: var(--surface-3, #21262D);
  border-color: var(--border-default, rgba(48, 54, 61, 1));
}

[data-theme="dark"] .ej-interaction-entry,
[data-bs-theme="dark"] .ej-interaction-entry {
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .ej-plan-item,
[data-bs-theme="dark"] .ej-plan-item {
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .ej-consent-timeline::before,
[data-bs-theme="dark"] .ej-consent-timeline::before {
  background: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

[data-theme="dark"] .ej-interaction-cluster,
[data-bs-theme="dark"] .ej-interaction-cluster {
  background: rgba(88, 166, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.15);
  color: #58A6FF;
}

[data-theme="dark"] .ej-ssg-attendee,
[data-bs-theme="dark"] .ej-ssg-attendee {
  background: var(--surface-3, #21262D);
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.8));
}

/* ============================================
 * SETTING TOGGLE
 * ============================================
 *
 * A compact switch-toggle + label row used for boolean settings.
 * Toggle aligns with the FIRST LINE of the label (flex-start),
 * not vertically centred. No "Enabled/Disabled" badge needed;
 * the switch state itself communicates on/off.
 *
 * Structure:
 *   .setting-toggle
 *     .setting-toggle-switch  (Bootstrap form-switch wrapper)
 *       input.form-check-input[type=checkbox][role=switch]
 *     .setting-toggle-content
 *       .setting-toggle-label
 *       .setting-toggle-desc   (optional)
 *
 * Modifier:  .setting-toggle.toggle-on  — records the active state without
 * adding decorative row colour.
 * ============================================ */

.setting-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-radius: var(--radius-sm, 4px);
  transition: background-color 0.15s ease;
}

.setting-toggle:hover {
  background-color: transparent;
}

.setting-toggle.toggle-on {
  background-color: transparent;
}

.setting-toggle-switch {
  flex-shrink: 0;
  margin-top: 1px;
  padding-left: 0;
}

.setting-toggle-switch .form-check-input {
  width: 2.75em;
  height: 1.375em;
  margin: 0;
  cursor: pointer;
  background-color: #e9ecef;
  border: none;
  transition: background-color 0.15s ease;
}

.setting-toggle-switch .form-check-input:checked {
  background-color: var(--accent-orange, var(--brand-orange, #FF6813)) !important;
  border-color: var(--accent-orange, var(--brand-orange, #FF6813)) !important;
}

.setting-toggle-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.setting-toggle-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.setting-toggle-label {
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary, #212529);
  line-height: 1.35;
}

.setting-toggle-desc {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #6c757d);
  line-height: 1.3;
}

/* ─── Setting Toggle: Dark Mode ─── */

[data-theme="dark"] .setting-toggle:hover,
[data-bs-theme="dark"] .setting-toggle:hover {
  background-color: transparent;
}

[data-theme="dark"] .setting-toggle.toggle-on,
[data-bs-theme="dark"] .setting-toggle.toggle-on {
  background-color: transparent;
}

[data-theme="dark"] .setting-toggle-switch .form-check-input,
[data-bs-theme="dark"] .setting-toggle-switch .form-check-input {
  background-color: var(--surface-3, #30363D);
}

[data-theme="dark"] .setting-toggle-switch .form-check-input:checked,
[data-bs-theme="dark"] .setting-toggle-switch .form-check-input:checked {
  background-color: var(--accent-orange, var(--brand-orange, #FF6813)) !important;
  border-color: var(--accent-orange, var(--brand-orange, #FF6813)) !important;
}

/* ============================================
 * SETTING TOGGLE LIST
 * ============================================
 *
 * A vertical stack of .setting-toggle items with optional
 * section label. Used in drawers, settings panels, modals.
 *
 * Structure:
 *   .setting-toggle-list
 *     .setting-toggle-list-label  (optional section header)
 *     .setting-toggle
 *     .setting-toggle
 * ============================================ */

.setting-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setting-toggle-list-label {
  font-size: var(--font-size-xs, 10px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #6c757d);
  padding: 0 0 6px;
}

/* ============================================
 * AUDIT PERIOD BAR
 * ============================================
 *
 * A two-segment bar showing that the audit/census period spans
 * two calendar years. The left (prior) segment uses a soft amber
 * tint; the right (current) segment is neutral. Clicking either
 * segment or the pill buttons below toggles the view.
 *
 * Structure:
 *   .audit-period-bar
 *     .audit-period-segment.prior   (amber tint, left)
 *     .audit-period-segment.current (neutral, right)
 *   .audit-period-controls
 *     .audit-period-pill             (toggle buttons)
 *     .audit-period-summary          (student count)
 * ============================================ */

.audit-period-bar {
  display: inline-flex;
  border: 1px solid var(--border-default, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}

.audit-period-segment {
  padding: 8px 12px;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.audit-period-segment:hover {
  background-color: var(--surface-2, #f9fafb);
}

.audit-period-segment + .audit-period-segment {
  border-left: 1px solid var(--border-default, #dee2e6);
}

.audit-period-segment.active {
  box-shadow: inset 0 -2px 0 var(--text-primary, #212529);
}

.audit-period-segment.dimmed {
  opacity: 0.35;
}

.audit-period-segment.dimmed .audit-period-heading,
.audit-period-segment.dimmed .audit-period-dates {
  text-decoration: line-through;
}

.audit-period-heading {
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary, #212529);
  margin-bottom: 1px;
  line-height: 1.3;
}

.audit-period-dates {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #6c757d);
  line-height: 1.3;
}

.audit-period-note {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #9ca3af);
  margin-top: 2px;
  line-height: 1.3;
}

.audit-period-summary {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #9ca3af);
}

/* ─── Audit Period Bar: Dark Mode ─── */

[data-theme="dark"] .audit-period-segment:hover,
[data-bs-theme="dark"] .audit-period-segment:hover {
  background-color: var(--surface-3, #21262d);
}

/* ============================================
 * NCCD Adjustment Level Chips
 * Colour-coded badges for QDTP, Supplementary,
 * Substantial, Extensive, and No Level.
 * ============================================ */

.ld-level-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
  white-space: nowrap;
  background-color: var(--surface-3, #F3F4F6);
  color: var(--text-secondary, #4B5563);
  border: 1px solid var(--border-subtle, #E5E7EB);
}

.ld-level-chip[data-level="QDTP"] {
  background-color: rgba(99, 102, 241, 0.08);
  color: #6366f1;
  border-color: rgba(99, 102, 241, 0.2);
}

.ld-level-chip[data-level="Supplementary"] {
  background-color: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
  border-color: rgba(139, 92, 246, 0.2);
}

.ld-level-chip[data-level="Substantial"] {
  background-color: rgba(236, 72, 153, 0.08);
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.2);
}

.ld-level-chip[data-level="Extensive"] {
  background-color: rgba(249, 115, 22, 0.08);
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.2);
}

.ld-level-chip[data-level="No Level"],
.ld-level-chip[data-level="None Identified"] {
  background-color: var(--surface-3, #f3f4f6);
  color: var(--text-muted, #9ca3af);
  border-color: var(--border-subtle, #e5e7eb);
  font-style: italic;
}

/* ─── Audit Period: Count Explainer Popover ─── */

.count-explainer-icon {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  font-style: normal;
  margin-left: 3px;
  vertical-align: middle;
}

.count-explainer-icon:hover {
  color: var(--text-secondary, #6c757d);
}

.count-explainer {
  position: fixed;
  z-index: 10000;
  min-width: 280px;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border-default, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: var(--font-size-sm, 12px);
  color: var(--text-primary, #212529);
  line-height: 1.5;
}

.count-explainer-title {
  font-weight: var(--font-weight-semibold, 600);
  margin-bottom: 8px;
  font-size: var(--font-size-sm, 12px);
}

.count-explainer table {
  width: 100%;
  border-collapse: collapse;
}

.count-explainer th,
.count-explainer td {
  padding: 3px 0;
  font-size: var(--font-size-xs, 10px);
  vertical-align: top;
}

.count-explainer th {
  text-align: left;
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary, #6c757d);
}

.count-explainer td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.count-explainer tr.explainer-result th,
.count-explainer tr.explainer-result td {
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #212529);
}

.count-explainer-note {
  margin-top: 8px;
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #9ca3af);
  line-height: 1.4;
}

/* Count Explainer: Dark Mode */
[data-theme="dark"] .count-explainer,
[data-bs-theme="dark"] .count-explainer {
  background: var(--surface-2, #161b22);
  border-color: var(--border-default, #30363d);
  color: var(--text-primary, #e6edf3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .count-explainer tr.explainer-result th,
[data-bs-theme="dark"] .count-explainer tr.explainer-result th,
[data-theme="dark"] .count-explainer tr.explainer-result td,
[data-bs-theme="dark"] .count-explainer tr.explainer-result td {
  border-top-color: var(--border-default, #30363d);
  color: var(--text-primary, #e6edf3);
}

/* ============================================
   SETTINGS SECTIONS
   Card-based layout for settings and detail pages
   ============================================ */

.settings-section {
    margin-bottom: 2rem;
    /* Deep links land ON the section, not with it jammed under the sticky
       page header. Pairs with router anchorScrolling + scrollIntoView. */
    scroll-margin-top: var(--space-4, 16px);
}

/* ----------------------------------------
 * .just-opened — "you have arrived here"
 *
 * Transient arrival highlight for a section a deep link has just scrolled
 * to (e.g. the student page kebab's "Enrolment" item → #enrolment-section).
 * Promoted from the bulk-import moderation anchor, which established this
 * name and its fade-out behaviour; retokenised so it reads correctly in
 * both light and dark. Applied for ~2s then removed by the component.
 * ---------------------------------------- */
.settings-section.just-opened {
    border-radius: var(--radius-md, 6px);
    /* Tint derived from --status-info, which is themed (light #2563EB /
       dark #58A6FF), so the wash stays legible on both surfaces instead of
       hardcoding a light-theme blue that muddies in dark. */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-info) 10%, transparent);
    background-color: color-mix(in srgb, var(--status-info) 10%, transparent);
    animation: section-just-opened-fade 2.2s ease-out forwards;
}

@keyframes section-just-opened-fade {
    0% {
        background-color: color-mix(in srgb, var(--status-info) 20%, transparent);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 4px transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-section.just-opened {
        animation: none;
    }
}

.section-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.section-header h2,
.section-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ============================================
 * SETTING CARDS (Admin Pages)
 * ============================================
 *
 * Card containers for admin settings pages.
 * Used on: General Settings, System Settings, Student Admin.
 *
 * Classes: .setting-card, .setting-header, .setting-title,
 *          .setting-description, .setting-content, .settings-section,
 *          .setting-card-padded
 * ============================================ */

.setting-page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1F2937);
}

[data-theme="dark"] .setting-page-title,
[data-bs-theme="dark"] .setting-page-title {
  color: var(--text-secondary, #8B949E);
}

.setting-card {
  /* Cards are white (surface-2), not the grey surface-1 — in light mode the
     section box should read as a clean white panel with only the table header
     row carrying the grey. The grey now lives on .admin-table th below. */
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 150ms ease;
}

.setting-card-padded {
  padding: 1rem 1.25rem;
}

.setting-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--surface-1, #F6F8FA);
}

.setting-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1F2937);
  margin: 0 0 2px 0;
}

.setting-description {
  font-size: 11px;
  color: var(--text-secondary, #6B7280);
  line-height: 1.4;
  margin: 0;
}

.setting-content {
  padding: 8px 12px;
}

/* ============================================
 * SETTING FIELDS
 * ============================================
 *
 * Form field rows inside .setting-content.
 * Each .setting-field is a labelled input/select/toggle row
 * separated by a subtle divider.
 *
 * Structure:
 *   .setting-content
 *     .setting-field
 *       .setting-field-label
 *       input / select / .btn-group
 *       .setting-field-hint  (optional)
 *     .setting-field
 * ============================================ */

.setting-field {
  padding: 4px 0;
}

.setting-field + .setting-field {
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.setting-field-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary, #212529);
  margin-bottom: 4px;
}

.setting-field-hint {
  display: block;
  font-size: 10px;
  color: var(--text-muted, #6c757d);
  margin-top: 2px;
}

.setting-field .form-control,
.setting-field .form-select {
  font-size: 12px;
  border-radius: var(--radius-sm, 4px);
}

[data-theme="dark"] .setting-field + .setting-field,
[data-bs-theme="dark"] .setting-field + .setting-field {
  border-top-color: rgba(48, 54, 61, 0.3);
}

[data-theme="dark"] .setting-field-label,
[data-bs-theme="dark"] .setting-field-label {
  color: var(--text-secondary, #8B949E);
}

[data-theme="dark"] .setting-field-hint,
[data-bs-theme="dark"] .setting-field-hint {
  color: var(--text-muted, #484F58);
}

/* ============================================
 * DARK MODE: TABLE PAGES
 * ============================================
 *
 * Subdued dark mode for admin table pages.
 * Canonical source — junipa.css should NOT duplicate these.
 *
 * Applies to: /dashboard/admin/* pages using .setting-card + .table
 * ============================================ */

/* Page heading + section headings */
[data-theme="dark"] .container-fluid > .mb-3 h1,
[data-bs-theme="dark"] .container-fluid > .mb-3 h1,
[data-theme="dark"] .settings-section h1,
[data-bs-theme="dark"] .settings-section h1,
[data-theme="dark"] .settings-section .h2,
[data-bs-theme="dark"] .settings-section .h2,
[data-theme="dark"] .settings-section h2,
[data-bs-theme="dark"] .settings-section h2 {
  color: var(--text-secondary, #8B949E);
}

/* Section header divider */
[data-theme="dark"] .settings-section .section-header,
[data-bs-theme="dark"] .settings-section .section-header {
  border-bottom-color: rgba(48, 54, 61, 0.5);
}

/* Setting card */
[data-theme="dark"] .setting-card,
[data-bs-theme="dark"] .setting-card {
  background-color: var(--surface-1, #0D1117) !important;
  border-color: rgba(48, 54, 61, 0.4) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .setting-header,
[data-bs-theme="dark"] .setting-header {
  border-bottom-color: rgba(48, 54, 61, 0.3);
}

[data-theme="dark"] .setting-title,
[data-bs-theme="dark"] .setting-title {
  color: var(--text-primary, #E6EDF3);
}

[data-theme="dark"] .setting-description,
[data-bs-theme="dark"] .setting-description {
  color: var(--text-secondary, #8B949E);
}

/* Table — transparent bg, neutral hover, no Bootstrap accent overlay */
[data-theme="dark"] .setting-card .table,
[data-bs-theme="dark"] .setting-card .table {
  --bs-table-bg: transparent !important;
  --bs-table-hover-bg: var(--surface-2, #161B22) !important;
  --table-border-color: rgba(48, 54, 61, 0.25) !important;
  background-color: transparent !important;
  border-color: rgba(48, 54, 61, 0.25) !important;
}

/* Table header */
[data-theme="dark"] .setting-card .table th,
[data-bs-theme="dark"] .setting-card .table th {
  border-color: rgba(48, 54, 61, 0.4) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Table cells — subdued text, ultra-subtle borders, no box-shadow overlay */
[data-theme="dark"] .setting-card .table td,
[data-bs-theme="dark"] .setting-card .table td {
  color: var(--text-secondary, #8B949E);
  border-color: rgba(48, 54, 61, 0.2) !important;
  box-shadow: none !important;
}

/* Bootstrap .table-light header — transparent in dark mode */
[data-theme="dark"] .setting-card .table .table-light,
[data-bs-theme="dark"] .setting-card .table .table-light {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(48, 54, 61, 0.4);
}

/* Row hover — neutral grey, no orange */
[data-theme="dark"] .setting-card .table-hover > tbody > tr:hover > *,
[data-bs-theme="dark"] .setting-card .table-hover > tbody > tr:hover > * {
  background-color: var(--surface-2, #161B22) !important;
  --bs-table-accent-bg: transparent !important;
  box-shadow: none !important;
}

/* admin-table inside setting-card — match background */
.setting-card .admin-table-container {
  background: transparent;
}

.setting-card .admin-table {
  background: transparent;
}

[data-theme="dark"] .setting-card .admin-table,
[data-bs-theme="dark"] .setting-card .admin-table {
  --bs-table-bg: transparent !important;
  background-color: transparent !important;
}

[data-theme="dark"] .setting-card .admin-table thead,
[data-bs-theme="dark"] .setting-card .admin-table thead {
  background-color: transparent !important;
}

[data-theme="dark"] .setting-card .admin-table th,
[data-bs-theme="dark"] .setting-card .admin-table th {
  border-color: rgba(48, 54, 61, 0.4) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .setting-card .admin-table td,
[data-bs-theme="dark"] .setting-card .admin-table td {
  color: var(--text-secondary, #8B949E);
  border-color: rgba(48, 54, 61, 0.2) !important;
}

/* User filter link active */
[data-theme="dark"] .user-filter-link.active,
[data-bs-theme="dark"] .user-filter-link.active {
  background-color: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.25);
  color: var(--cta-primary, #FF6B35);
}

/* Dashboard toggle .btn.active */
[data-theme="dark"] .dashboard-toggle .btn.active,
[data-bs-theme="dark"] .dashboard-toggle .btn.active {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #E6EDF3);
}

/* ============================================================
   EJ Timeline Palette
   Pastel colours for the activity density timeline.
   ============================================================ */
:root {
  --ej-scheduled: #67B8D6;
  --ej-confirmed: #4CAF82;
  --ej-partial: #F0A858;
  --ej-declined: #D4817A;
  --ej-adhoc: #5CB88A;
  --ej-communication: #9B8EC4;
  --ej-plan-milestone: #E8A94E;
  --ej-confirmation-line: #3D9970;
  --ej-frequency-bar: rgba(103, 184, 214, 0.15);
}

[data-bs-theme="dark"] {
  --ej-scheduled: #7CCBE8;
  --ej-confirmed: #5FD49A;
  --ej-partial: #F5BC72;
  --ej-declined: #E09990;
  --ej-adhoc: #6FCC9E;
  --ej-communication: #B0A4D8;
  --ej-plan-milestone: #F0BB62;
  --ej-confirmation-line: #4DB882;
  --ej-frequency-bar: rgba(124, 203, 232, 0.2);
}

/* ============================================================
   EJ Timeline v2 — Day Column Dot Grid
   ============================================================ */

/* Container — clean, no outer border */
.ej-timeline-v2 {
  background: var(--bs-body-bg, #ffffff);
  margin-bottom: 0.75rem;
}

/* Header bar */
.ej-timeline-v2-header {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 8px;
}

/* Segmented control (1M / 3M toggle) */
.ej-timeline-segmented {
  display: inline-flex;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 2px;
  overflow: hidden;
}

.ej-timeline-segmented button {
  background: transparent;
  border: none;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}

.ej-timeline-segmented button:not(:last-child) {
  border-right: 1px solid var(--bs-border-color, #dee2e6);
}

.ej-timeline-segmented button.active {
  background: var(--bs-primary, #0d6efd);
  color: #ffffff;
}

.ej-timeline-segmented button:hover:not(.active) {
  background: var(--bs-tertiary-bg, #edf0f3);
}

/* Window nav buttons */
.ej-timeline-nav-btn {
  padding: 0 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--bs-secondary-color, #6c757d);
  background: transparent;
  border: none;
  cursor: pointer;
}

.ej-timeline-nav-btn:hover {
  color: var(--bs-body-color, #212529);
}

/* Date range label */
.ej-timeline-date-range {
  font-size: 10px;
  font-weight: 500;
  color: var(--bs-body-color, #212529);
  white-space: nowrap;
  min-width: 100px;
  text-align: center;
}

/* Plan duration bands — stacked above the dot area */
.ej-plan-bands {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
  position: relative;
}

.ej-plan-band {
  position: relative;
  height: 20px;
  border-radius: 2px;
  opacity: 0.85;
  display: flex;
  align-items: center;
}

.ej-plan-band-label {
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  flex: 1;
  min-width: 0;
}

/* "Prepare new plan" hover button at the right end of the band */
.ej-plan-band-action {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 2px;
  background: var(--bs-body-bg, #fff);
  font-size: 9px;
  font-weight: 500;
  color: var(--bs-body-color, #212529);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  z-index: 10;
}

.ej-plan-band-action i {
  font-size: 9px;
}

.ej-plan-band:hover .ej-plan-band-action {
  opacity: 1;
}

.ej-plan-band-action:hover {
  border-color: var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
}

/* Plan band popover menu (Edit / Repeat) */
.ej-plan-band-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  background: var(--bs-body-bg, #ffffff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 3px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  min-width: 120px;
  padding: 4px 0;
}

[data-bs-theme="dark"] .ej-plan-band-action {
  background: var(--bs-dark, #343a40);
  border-color: var(--bs-border-color, #495057);
  color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .ej-plan-band-menu {
  background: var(--bs-dark, #2b3035);
  border-color: var(--bs-border-color, #495057);
}

/* Adjustment swim lanes — one row per scheduled adjustment */
.ej-adj-lanes {
  border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.06));
  padding: 2px 0 0;
}

.ej-adj-lane {
  display: flex;
  align-items: center;
  height: 24px;
}

.ej-adj-lane-label {
  flex-shrink: 0;
  width: 140px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
  overflow: hidden;
}

.ej-adj-lane-name {
  font-size: 10px;
  font-weight: 500;
  color: var(--bs-body-color, #212529);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.ej-adj-lane-freq {
  font-size: 8px;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ej-adj-lane-track {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.ej-adj-lane-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

/* Spine line continuation through lanes */
.ej-adj-lane-spine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.5px;
  height: 100%;
  background: rgba(0,0,0,0.04);
  pointer-events: none;
}

.ej-adj-lane-cell--today .ej-adj-lane-spine {
  width: 1.5px;
  background: var(--ej-overdue, #F87171);
}

/* Lane dots — the actual status indicators per day */
.ej-lane-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 1;
  flex-shrink: 0;
}

.ej-lane-dot--confirmed {
  background: var(--ej-confirmed, #4C9A8D);
}

.ej-lane-dot--overdue {
  background: transparent;
  border: 1.5px solid var(--ej-overdue, #F87171);
}

.ej-lane-dot--scheduled {
  background: transparent;
  border: 1.5px solid var(--ej-scheduled, #60A5FA);
}

.ej-lane-dot--declined {
  background: var(--ej-declined, #FDA4AF);
}

/* Bigger lane dots at 1W zoom */
.ej-timeline-v2--1W .ej-lane-dot {
  width: 10px;
  height: 10px;
}

/* Smaller lane dots at 3M zoom */
.ej-timeline-v2--3M .ej-lane-dot {
  width: 5px;
  height: 5px;
}

/* Hover: highlight the lane row */
.ej-adj-lane:hover {
  background: var(--bs-tertiary-bg, rgba(0,0,0,0.02));
}

/* Dark mode adjustments for lanes */
[data-bs-theme="dark"] .ej-adj-lanes {
  border-top-color: var(--bs-border-color, rgba(255,255,255,0.08));
}

[data-bs-theme="dark"] .ej-adj-lane-spine {
  background: rgba(255,255,255,0.04);
}

[data-bs-theme="dark"] .ej-adj-lane:hover {
  background: rgba(255,255,255,0.02);
}

/* Timeline body — fills container, no scroll. Grab to pan, wheel to zoom. */
.ej-timeline-v2-body {
  width: 100%;
  cursor: grab;
  user-select: none;
}

.ej-timeline-v2-body.ej-timeline-dragging {
  cursor: grabbing;
}

/* Week gap spacer — visual breathing room between weeks */
.ej-week-gap {
  width: 8px;
  flex-shrink: 0;
}

/* Day columns container — the main dot area */
.ej-timeline-v2-days {
  display: flex;
  min-height: 320px;
  align-items: flex-end;
  position: relative;
}

/* Individual day column — clean, no borders, no background */
.ej-day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  position: relative;
  height: 100%;
  padding-bottom: 4px;
  flex-shrink: 0;
}

/* Vertical spine line — hairline from baseline up through dots */
.ej-day-spine {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.5px;
  height: 100%;
  background: rgba(0,0,0,0.04);
  pointer-events: none;
}

/* Hover add hint — sits just above the dot stack, easy to reach */
.ej-day-add-hint {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bs-tertiary-bg, rgba(0,0,0,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  cursor: pointer;
  z-index: 3;
  margin-bottom: 2px;
  flex-shrink: 0;
}

.ej-day-add-hint i {
  font-size: 10px;
  color: var(--bs-secondary-color, #9ca3af);
}

.ej-day-col:hover .ej-day-add-hint {
  opacity: 1;
}

.ej-day-add-hint:hover {
  background: var(--bs-primary, #0d6efd);
}

.ej-day-add-hint:hover i {
  color: #ffffff;
}

.ej-timeline-v2--1W .ej-day-add-hint {
  width: 24px;
  height: 24px;
}

.ej-timeline-v2--1W .ej-day-add-hint i {
  font-size: 12px;
}

/* Dots area — stacks upward from bottom */
.ej-day-dots {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
  z-index: 2;
  padding-bottom: 2px;
}

.ej-timeline-v2--1W .ej-day-dots {
  gap: 3px;
  align-items: flex-start;
}

/* Pills — 1W zoomed-in view shows adjustment name as a horizontal pill */
.ej-day-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 4px;
  border-radius: 3px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.06));
  white-space: nowrap;
  cursor: default;
  transition: box-shadow 0.15s;
  min-width: 0;
}

.ej-day-pill:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ej-day-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ej-day-pill-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--bs-body-color, #212529);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Pill dot colours — match the dot state colours */
.ej-day-pill--confirmed .ej-day-pill-dot { background: rgba(56, 142, 128, 0.8); }
.ej-day-pill--scheduled .ej-day-pill-dot { background: rgba(100, 140, 210, 0.7); }
.ej-day-pill--overdue .ej-day-pill-dot { background: rgba(217, 119, 6, 0.75); }
.ej-day-pill--adhoc .ej-day-pill-dot { background: rgba(56, 165, 115, 0.75); border-radius: 1px; transform: rotate(45deg); }
.ej-day-pill--communication .ej-day-pill-dot { background: rgba(140, 125, 190, 0.75); }
.ej-day-pill--declined .ej-day-pill-dot { background: rgba(210, 100, 110, 0.7); }

/* Pill border tints by type */
.ej-day-pill--confirmed { border-color: rgba(56, 142, 128, 0.2); }
.ej-day-pill--overdue { border-color: rgba(217, 119, 6, 0.2); }
.ej-day-pill--declined { border-color: rgba(210, 100, 110, 0.2); }

/* Dark mode pills */
[data-bs-theme="dark"] .ej-day-pill {
  background: var(--bs-dark, #343a40);
  border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .ej-day-pill-label {
  color: var(--bs-body-color, #dee2e6);
}

/* Date labels row at bottom */
.ej-timeline-v2-dates {
  display: flex;
  border-top: 0.5px solid rgba(0,0,0,0.04);
  padding-top: 4px;
  padding-bottom: 2px;
}

.ej-date-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.ej-date-label-num {
  font-size: 10px;
  font-weight: 500;
  color: var(--bs-secondary-color, #9ca3af);
  line-height: 1;
}

.ej-timeline-v2--1W .ej-date-label-num,
.ej-timeline-v2--2W .ej-date-label-num {
  font-size: 12px;
  font-weight: 600;
}

.ej-timeline-v2--1M .ej-date-label-num {
  font-size: 11px;
}

.ej-date-label-name {
  font-size: 8px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bs-tertiary-color, #adb5bd);
  line-height: 1;
}

.ej-timeline-v2--1W .ej-date-label-name,
.ej-timeline-v2--2W .ej-date-label-name {
  font-size: 10px;
}

.ej-timeline-v2--1M .ej-date-label-name {
  font-size: 9px;
}

.ej-date-label--today .ej-date-label-num {
  color: var(--bs-primary, #0d6efd);
  font-weight: 600;
}

.ej-date-label--today .ej-date-label-name {
  color: rgba(13, 110, 253, 0.6);
}

/* Month label at bottom (only appears on first day of month) */
.ej-date-label-month {
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-tertiary-color, #adb5bd);
  margin-top: 2px;
}

/* EJ section heading — matches page h2 style */
.ej-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  margin: 0 0 8px;
  padding: 0;
}

/* Individual dot */
.ej-day-dot {
  display: block;
  border-radius: 50%;
}

/* Dot sizes per view mode */
.ej-timeline-v2--1W .ej-day-dot {
  width: 14px;
  height: 14px;
}

.ej-timeline-v2--2W .ej-day-dot {
  width: 12px;
  height: 12px;
}

.ej-timeline-v2--1M .ej-day-dot {
  width: 9px;
  height: 9px;
}

.ej-timeline-v2--3M .ej-day-dot {
  width: 6px;
  height: 6px;
}

/* Dot state colours — visible pastels, always filled (never transparent middle) */
.ej-day-dot--confirmed {
  background: rgba(56, 142, 128, 0.8);
}

.ej-day-dot--scheduled {
  background: rgba(100, 140, 210, 0.7);
}

.ej-day-dot--overdue {
  background: rgba(217, 119, 6, 0.75);
}

.ej-day-dot--adhoc {
  background: rgba(56, 165, 115, 0.75);
  border-radius: 1px;
  transform: rotate(45deg);
}

.ej-timeline-v2--1W .ej-day-dot--adhoc {
  width: 11px;
  height: 11px;
}

.ej-timeline-v2--2W .ej-day-dot--adhoc {
  width: 10px;
  height: 10px;
}

.ej-timeline-v2--1M .ej-day-dot--adhoc {
  width: 7px;
  height: 7px;
}

.ej-timeline-v2--3M .ej-day-dot--adhoc {
  width: 5px;
  height: 5px;
}

.ej-day-dot--communication {
  background: rgba(140, 125, 190, 0.75);
}

.ej-day-dot--declined {
  background: rgba(210, 100, 110, 0.7);
}

/* Today spine — recolor the existing spine line on today's column */
.ej-day-col--today .ej-day-spine {
  width: 1.5px;
  background: rgba(244, 114, 114, 0.45);
}

.ej-day-col--today .ej-day-spine::before {
  content: 'Today';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 500;
  color: rgba(220, 100, 100, 0.6);
  white-space: nowrap;
}

/* Day action menu — contextual list to the right of the + button */
.ej-day-action-menu {
  position: absolute;
  left: calc(50% + 14px);
  bottom: 4px;
  z-index: 30;
  background: var(--bs-body-bg, #ffffff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 3px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  min-width: 180px;
  padding: 4px 0;
  font-size: 11px;
  white-space: nowrap;
}

/* When dots are few / low position, open upward from the bottom */
.ej-day-action-menu--above {
  bottom: auto;
  top: auto;
  bottom: 24px;
}

.ej-day-action-menu-date {
  font-size: 9px;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  padding: 4px 10px 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ej-day-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--bs-body-color, #212529);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.ej-day-action-item:hover {
  background: var(--bs-tertiary-bg, #f0f2f5);
}

.ej-day-action-item i {
  font-size: 12px;
  color: var(--bs-secondary-color, #6c757d);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* ---- Confidence Score (compact) ---- */
.ej-confidence-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ej-confidence-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ej-confidence-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.ej-confidence-label-text {
  font-size: 10px;
  color: var(--bs-secondary-color, #6c757d);
}

.ej-confidence-bar {
  height: 4px;
  background: var(--bs-tertiary-bg, #e9ecef);
  border-radius: 2px;
  overflow: hidden;
}

.ej-confidence-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.ej-confidence-breakdown-row {
  display: flex;
  gap: 16px;
}

.ej-confidence-metric {
  display: flex;
  flex-direction: column;
}

.ej-confidence-metric-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
}

.ej-confidence-metric-label {
  font-size: 9px;
  color: var(--bs-secondary-color, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .ej-timeline-v2 {
  background: var(--bs-body-bg, #212529);
}

[data-bs-theme="dark"] .ej-timeline-segmented {
  border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .ej-timeline-segmented button {
  color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .ej-timeline-segmented button:not(:last-child) {
  border-right-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .ej-timeline-segmented button:hover:not(.active) {
  background: var(--bs-tertiary-bg, #2b3035);
}

[data-bs-theme="dark"] .ej-timeline-nav-btn {
  color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .ej-timeline-nav-btn:hover {
  color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .ej-timeline-date-range {
  color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .ej-day-spine {
  background: rgba(255,255,255,0.04);
}

[data-bs-theme="dark"] .ej-timeline-v2-dates {
  border-top-color: rgba(255,255,255,0.04);
}

[data-bs-theme="dark"] .ej-date-label-num {
  color: var(--bs-secondary-color, #6c757d);
}

[data-bs-theme="dark"] .ej-date-label-name,
[data-bs-theme="dark"] .ej-date-label-month {
  color: var(--bs-tertiary-color, #495057);
}

[data-bs-theme="dark"] .ej-day-add-hint {
  background: rgba(255,255,255,0.06);
}

[data-bs-theme="dark"] .ej-day-add-hint i {
  color: var(--bs-secondary-color, #6c757d);
}

[data-bs-theme="dark"] .ej-timeline-v2-dates {
  border-top-color: var(--bs-border-color-translucent, rgba(255,255,255,0.08));
}

[data-bs-theme="dark"] .ej-date-label-month {
  color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .ej-section-heading {
  color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .ej-date-label-num {
  color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .ej-date-label-name {
  color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .ej-day-action-menu {
  background: var(--bs-body-bg, #212529);
  border-color: var(--bs-border-color, #495057);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

[data-bs-theme="dark"] .ej-day-action-menu-date {
  color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .ej-day-action-item {
  color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .ej-day-action-item:hover {
  background: var(--bs-tertiary-bg, #2b3035);
}

[data-bs-theme="dark"] .ej-day-action-item i {
  color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .ej-confidence-bar {
  background: var(--bs-tertiary-bg, #343a40);
}

[data-bs-theme="dark"] .ej-confidence-metric-val {
  color: var(--bs-body-color, #dee2e6);
}

.ej-day-dot--sm {
  width: 5px !important;
  height: 5px !important;
}

/* Dot overflow indicator (3M mode) */
.ej-day-dot-overflow {
  font-size: 7px;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
}

/* Compact day number (3M mode) */
.ej-day-col-num--compact {
  font-size: 8px;
  margin: 1px 0 2px;
}

[data-bs-theme="dark"] .ej-day-popover-detail {
  color: var(--bs-secondary-color, #adb5bd);
}

/* ============================================
   UPDATES NOTIFICATION — sidebar popover
   ============================================ */

/* Updates sidebar link — stands out from regular nav items.
   Target via .bi-megaphone (always present) since .updates-dot disappears after viewing. */
.sidebar-footer-nav .nav-item:has(.bi-megaphone) .nav-link {
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s;
  border-radius: 4px;
}
.sidebar-footer-nav .nav-item:has(.bi-megaphone) .nav-link:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}
[data-bs-theme="dark"] .sidebar-footer-nav .nav-item:has(.bi-megaphone) .nav-link:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.04));
}

/* New-update dot indicator — positioned on megaphone icon top-right */
.updates-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cta-primary, #ea580c);
}

[data-bs-theme="dark"] .updates-dot {
  background: var(--cta-primary, #ff6b35);
}


/* Updates backdrop — dismisses panel on click */
.updates-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1079;
}

/* Updates panel — centered modal, 80-90% width */
.updates-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(85vw, 640px);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  z-index: 1080;
  font-size: 0.8125rem;
}

.updates-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.updates-popover-close {
  background: none;
  border: none;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.875rem;
  line-height: 1;
}

.updates-popover-close:hover {
  color: var(--text-primary, #1f2937);
}

.updates-popover-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
}

.updates-popover-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  margin-bottom: 0.75rem;
}
.updates-popover-date {
  font-weight: 400;
  color: var(--text-muted, #6b7280);
}

.updates-popover-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.updates-popover-item {
  display: flex;
  gap: 0.375rem;
  line-height: 1.4;
  padding-left: 0.25rem;
}

.updates-popover-item > i {
  color: var(--text-muted, #6b7280);
  font-size: 0.75rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.updates-popover-item > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.updates-popover-item strong {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}

.updates-popover-item span {
  font-size: 0.625rem;
  color: var(--text-muted, #6b7280);
}

.updates-popover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-default, #e5e7eb);
}

.updates-popover-link {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-primary, #1f2937);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.updates-popover-link:hover {
  color: #3b82f6;
}

.updates-popover-dismiss {
  font-size: 0.6875rem;
  color: var(--text-muted, #6b7280);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.updates-popover-dismiss:hover {
  color: var(--text-primary, #1f2937);
}

/* Dark mode */
[data-bs-theme="dark"] .updates-popover {
  background: var(--card-bg, #1e1e1e);
  border-color: var(--card-border, #333);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .updates-popover-label {
  color: var(--text-muted, #9ca3af);
}

/* Small viewports: tighter padding, full width minus margins */
@media (max-width: 768px) {
  .updates-popover {
    width: calc(100vw - 2rem);
    max-width: none;
    padding: 1rem;
  }
}

/* ========================================
 * Toasts (junipa-toast)
 * Refined notification toasts using Bootstrap Toast component.
 * Applied via ToastService convenience methods (success, error, warning, info).
 * ======================================== */
.junipa-toast {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  box-shadow: var(--shadow-md);
  min-width: 280px;
  max-width: 420px;
  --bs-toast-bg: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1 !important;
}

.junipa-toast .toast-body {
  padding: 10px 14px;
}

.junipa-toast .btn-close {
  filter: none;
  opacity: 0.5;
  font-size: 10px;
}

.junipa-toast .btn-close:hover {
  opacity: 0.8;
}

.junipa-toast-icon {
  font-size: 14px;
  margin-right: 6px;
  vertical-align: -1px;
}

/* Success toast */
.junipa-toast-success {
  background-color: #ECFDF5;
  border-color: #BBF7D0;
  color: var(--status-success);
}

/* Error toast */
.junipa-toast-error {
  background-color: #FEF2F2;
  border-color: #FECACA;
  color: var(--status-error);
}

/* Warning toast */
.junipa-toast-warning {
  background-color: #FEFCE8;
  border-color: #FEF08A;
  color: var(--status-warning);
}

/* Info toast */
.junipa-toast-info {
  background-color: #EFF6FF;
  border-color: #BFDBFE;
  color: #1D4ED8;
}

/* Dark mode */
[data-theme="dark"] .junipa-toast,
[data-bs-theme="dark"] .junipa-toast {
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .junipa-toast .btn-close,
[data-bs-theme="dark"] .junipa-toast .btn-close {
  filter: invert(1);
}

[data-theme="dark"] .junipa-toast-success,
[data-bs-theme="dark"] .junipa-toast-success {
  background-color: #0A2618;
  border-color: #14532D;
  color: var(--status-success);
}

[data-theme="dark"] .junipa-toast-error,
[data-bs-theme="dark"] .junipa-toast-error {
  background-color: #2A0F0F;
  border-color: #450A0A;
  color: var(--status-error);
}

[data-theme="dark"] .junipa-toast-warning,
[data-bs-theme="dark"] .junipa-toast-warning {
  background-color: #271E0A;
  border-color: #422006;
  color: var(--status-warning);
}

[data-theme="dark"] .junipa-toast-info,
[data-bs-theme="dark"] .junipa-toast-info {
  background-color: #0C1929;
  border-color: #1E3A5F;
  color: var(--status-info);
}

/* ========================================
 * Inline Multi-Select Dropdown (checkbox style)
 * Used in spreadsheet-style edit mode for medical conditions, etc.
 * ======================================== */
.mc-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

.mc-dropdown-menu .dropdown-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--cta-primary);
  cursor: pointer;
}

.mc-dropdown-menu .dropdown-item span {
  flex: 1;
  min-width: 0;
}

/* ========================================
 * Update Walkthrough Modal
 * Full-screen modal walkthrough for announcing new features.
 * Two-column layout: left text + nav, right media (image/video).
 * Edge-style numbered step progress bar at bottom.
 * ======================================== */

/* Backdrop overlay */
.wt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal container — scales with viewport, no pixel caps */
.wt-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90vw;
  height: 80vh;
  background: var(--surface-2, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-family);
}

/* Close button — top-right of modal */
.wt-close {
  position: absolute;
  top: var(--space-2, 8px);
  right: var(--space-2, 8px);
  z-index: 2;
  background: none;
  border: none;
  color: var(--text-muted, #9CA3AF);
  font-size: 16px;
  line-height: 1;
  padding: var(--space-1, 4px);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: color var(--transition-fast, 100ms ease),
              background var(--transition-fast, 100ms ease);
}

.wt-close:hover {
  color: var(--text-primary, #1F2937);
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

/* Two-column body — left 30% text, right 70% media */
.wt-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Left column — text content */
.wt-text {
  width: 30%;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--space-6, 24px);
  padding-right: var(--space-5, 20px);
}

.wt-version {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3, 12px);
}

.wt-title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1F2937);
  margin: 0 0 var(--space-2, 8px) 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.wt-desc {
  font-size: var(--font-size-base, 12px);
  color: var(--text-secondary, #4B5563);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* Navigation buttons — bottom of left column */
.wt-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-5, 20px);
}

.wt-nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #4B5563);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast, 100ms ease);
  flex-shrink: 0;
}

.wt-nav-back:hover {
  border-color: var(--border-default, #D1D5DB);
  color: var(--text-primary, #1F2937);
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.wt-nav-back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.wt-nav-next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--cta-primary, #EA580C);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-family);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease);
}

.wt-nav-next:hover {
  background: var(--cta-primary-hover, #F97316);
}

/* Right column — media (image or video) */
.wt-media {
  width: 70%;
  flex-shrink: 0;
  background: var(--surface-1, #F6F8FA);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  padding: var(--space-6, 24px);
  box-sizing: border-box;
  position: relative;
}

.wt-media:not(.wt-media-empty):not(.wt-media-loading) {
  cursor: zoom-in;
}

.wt-media:focus-visible {
  outline: 2px solid var(--focus-ring, #0284C7);
  outline-offset: -2px;
}

.wt-media img,
.wt-media video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.wt-media-empty,
.wt-media-loading {
  cursor: default;
}

/* Media status and fallback states */
.wt-media-placeholder,
.wt-media-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  width: 100%;
  height: 100%;
  font-size: var(--font-size-sm, 11px);
  color: var(--text-muted, #9CA3AF);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.02em;
  text-align: center;
}

.wt-media-status {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wt-media-placeholder i {
  font-size: var(--font-size-xl, 20px);
  opacity: 0.3;
}

/* Bottom footer — progress + learn more */
.wt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  border-top: 1px solid var(--border-subtle, #E5E7EB);
  background: var(--surface-2, #fff);
  flex-shrink: 0;
}

.wt-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wt-learn-more {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-muted, #9CA3AF);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  transition: color var(--transition-fast, 100ms ease);
  flex-shrink: 0;
}

.wt-learn-more:hover {
  color: var(--text-secondary, #4B5563);
}

.wt-learn-more i {
  font-size: 9px;
}

.wt-progress-track {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Step dot */
.wt-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-1, #F6F8FA);
  border: 1px solid var(--border-subtle, #E5E7EB);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-muted, #9CA3AF);
  cursor: pointer;
  transition: all var(--transition-fast, 100ms ease);
  flex-shrink: 0;
  position: relative;
}

.wt-step:hover:not(.active) {
  border-color: var(--border-default, #D1D5DB);
  color: var(--text-secondary, #4B5563);
}

/* Active step — expanded with label */
.wt-step.active {
  width: auto;
  border-radius: var(--radius-sm, 4px);
  background: var(--cta-primary, #EA580C);
  border-color: var(--cta-primary, #EA580C);
  color: #fff;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  gap: var(--space-1, 4px);
  cursor: default;
}

.wt-step-label {
  display: none;
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
}

.wt-step.active .wt-step-label {
  display: inline;
}

/* Connector line between steps */
.wt-step-line {
  width: 24px;
  height: 1px;
  background: var(--border-subtle, #E5E7EB);
  flex-shrink: 0;
}

/* Visited steps (before active) */
.wt-step.visited {
  background: var(--surface-2, #fff);
  border-color: var(--cta-primary, #EA580C);
  color: var(--cta-primary, #EA580C);
}

.wt-step-line.visited {
  background: var(--cta-primary, #EA580C);
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .wt-modal {
  background: var(--surface-2, #161B22);
  border-color: var(--border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .wt-close:hover {
  color: var(--text-primary, #E6EDF3);
  background: var(--hover-bg, rgba(255, 255, 255, 0.04));
}

[data-bs-theme="dark"] .wt-media {
  background: var(--surface-1, #0D1117);
}

[data-bs-theme="dark"] .wt-footer {
  background: var(--surface-2, #161B22);
  border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .wt-learn-more {
  color: var(--text-muted, #484F58);
}

[data-bs-theme="dark"] .wt-learn-more:hover {
  color: var(--text-secondary, #8B949E);
}

[data-bs-theme="dark"] .wt-step {
  background: var(--surface-1, #0D1117);
  border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .wt-step.visited {
  background: var(--surface-2, #161B22);
  border-color: var(--cta-primary, #FF6B35);
  color: var(--cta-primary, #FF6B35);
}

[data-bs-theme="dark"] .wt-step.active {
  background: var(--cta-primary, #FF6B35);
  border-color: var(--cta-primary, #FF6B35);
}

[data-bs-theme="dark"] .wt-nav-back {
  border-color: var(--border-subtle);
  color: var(--text-secondary, #8B949E);
}

[data-bs-theme="dark"] .wt-nav-back:hover {
  border-color: var(--border-default);
  color: var(--text-primary, #E6EDF3);
  background: var(--hover-bg, rgba(255, 255, 255, 0.04));
}

[data-bs-theme="dark"] .wt-nav-next {
  background: var(--cta-primary, #FF6B35);
}

[data-bs-theme="dark"] .wt-nav-next:hover {
  background: var(--cta-primary-hover, #FF8A5B);
}

/* ---- Tablet: wider text column ---- */
@media (max-width: 1024px) {
  .wt-text {
    width: 38%;
  }
  .wt-media {
    width: 62%;
  }
}

/* ---- Mobile: stack vertically, media on top ---- */
@media (max-width: 768px) {
  .wt-modal {
    width: calc(100vw - 16px);
    height: calc(100vh - 32px);
    max-height: none;
  }

  .wt-body {
    flex-direction: column-reverse;
    overflow-y: auto;
  }

  .wt-text {
    width: 100%;
    padding: var(--space-4, 16px);
    flex-shrink: 0;
  }

  .wt-media {
    width: 100%;
    min-height: 40vh;
    flex-shrink: 0;
    padding: var(--space-3, 12px);
  }

  .wt-progress {
    padding: var(--space-2, 8px) var(--space-4, 16px);
  }

  .wt-step-label {
    font-size: 9px;
  }
}

/* Media expand — tap to fullscreen on mobile */
.wt-media.expanded {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1090;
  background: #000;
  cursor: zoom-out;
  min-height: unset;
  padding: var(--space-6, 24px);
}

.wt-media.expanded img,
.wt-media.expanded video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ========================================
 * Search Progress Indicator
 * Pulse-bubble animation for search states.
 * Used in student search modal and similar search UIs.
 * ======================================== */
.search-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  gap: 14px;
}

.search-progress-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.search-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--evidence, #305EA8);
}

.search-progress-dot-1 {
  animation: search-pulse 0.4s ease 0s infinite alternate;
}

.search-progress-dot-2 {
  animation: search-pulse 0.4s ease 0.2s infinite alternate;
}

.search-progress-dot-3 {
  animation: search-pulse 0.4s ease 0.4s infinite alternate;
}

@keyframes search-pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.25;
    transform: scale(0.75);
  }
}

.search-progress-text {
  font-size: 0.8rem;
  color: var(--text-secondary, #6c757d);
  text-align: center;
  line-height: 1.4;
}

[data-bs-theme="dark"] .search-progress-dot {
  background-color: var(--evidence, #6B9BDE);
}

[data-bs-theme="dark"] .search-progress-text {
  color: var(--text-secondary, #9ca3af);
}

/* ============================================================
   EVIDENCE WORKBENCH PATTERNS
   Reusable across workbench, compliance reports, student detail
   ============================================================ */

/* --- NCCD Adjustment Level Badges --- */
.nccd-level-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: var(--radius-sm, 4px);
  font-weight: 600;
  line-height: 1.4;
}

.nccd-level-badge--extensive {
  background: rgba(220, 38, 38, 0.12);
  color: var(--status-error);
  border: 1px solid rgba(220, 38, 38, 0.24);
}

.nccd-level-badge--substantial {
  background: rgba(202, 138, 4, 0.12);
  color: var(--status-warning);
  border: 1px solid rgba(202, 138, 4, 0.24);
}

.nccd-level-badge--supplementary {
  background: rgba(202, 138, 4, 0.08);
  color: var(--status-warning);
  border: 1px solid rgba(202, 138, 4, 0.16);
}

.nccd-level-badge--qdtp {
  background: rgba(37, 99, 235, 0.1);
  color: var(--status-info);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.nccd-level-badge--none {
  color: var(--text-muted);
}

/* --- Readiness Badges --- */
.readiness-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-sm, 4px);
  font-weight: 600;
  line-height: 1.4;
}

.readiness-badge--ready {
  background: rgba(22, 163, 74, 0.12);
  color: var(--status-success);
  border: 1px solid rgba(22, 163, 74, 0.24);
}

.readiness-badge--partial {
  background: rgba(202, 138, 4, 0.12);
  color: var(--status-warning);
  border: 1px solid rgba(202, 138, 4, 0.24);
}

.readiness-badge--not-ready {
  background: rgba(220, 38, 38, 0.12);
  color: var(--status-error);
  border: 1px solid rgba(220, 38, 38, 0.24);
}

/* --- Diagnosis Tags --- */
.diagnosis-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: var(--radius-sm, 4px);
  font-weight: 500;
  line-height: 1.4;
}

.diagnosis-tag--diagnosed {
  background: rgba(37, 99, 235, 0.1);
  color: var(--status-info);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.diagnosis-tag--imputed {
  background: rgba(202, 138, 4, 0.1);
  color: var(--status-warning);
  border: 1px solid rgba(202, 138, 4, 0.2);
}

/* --- Condition Chips --- */
.condition-chip {
  display: inline-block;
  font-size: 10px;
  padding: 0 4px;
  margin: 1px 2px 1px 0;
  background: var(--surface-3);
  border-radius: 2px;
  color: var(--text-secondary, #4B5563);
}

/* --- Inline Tag / Medical Condition Chip --- */
/* Matches the chip used by <junipa-inline-tags> on the plan-edit page so that
   chips look the same everywhere (admin enrolment form, plan editor, etc.). */
.mc-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  background-color: rgba(108, 117, 125, 0.1);
  color: #6c757d;
  border: 1px solid rgba(108, 117, 125, 0.2);
}

.mc-chip--ghost {
  opacity: 0.55;
  border: 1px dashed var(--bs-border-color, #dee2e6) !important;
  background: transparent !important;
  cursor: pointer;
}

.mc-chip--ghost:hover { opacity: 0.9; }

[data-bs-theme="dark"] .mc-chip {
  background-color: rgba(108, 117, 125, 0.2);
  color: #9ca3af;
  border-color: rgba(108, 117, 125, 0.3);
}

/* --- Requirement Cell Indicators --- */
.req-cell-met {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--status-success);
  background: rgba(22, 163, 74, 0.08);
}

.req-cell-unmet {
  text-align: center;
  color: var(--status-error);
  background: rgba(220, 38, 38, 0.08);
  cursor: pointer;
}

.req-cell-unmet:hover {
  background: rgba(220, 38, 38, 0.15);
}

/* --- Summary Stat Pills --- */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  color: var(--text-secondary, #4B5563);
}

.stat-pill-value {
  font-weight: 600;
  color: var(--text-primary);
}

.stat-pill--success .stat-pill-value { color: var(--status-success); }
.stat-pill--warning .stat-pill-value { color: var(--status-warning); }
.stat-pill--error .stat-pill-value { color: var(--status-error); }

/* ========================================
 * Icon Fixes — Bootstrap Icons subpixel rendering
 * bi-plus horizontal stroke renders too thick at small sizes.
 * ======================================== */
.btn-sm .bi-plus {
  font-size: 1em;
}

/* ========================================
 * Integration Sync Schedule
 * Shared Distillery + (potentially) org-portal schedule config UI.
 * Covers: schedule-form, day-picker pills, campus-override cards,
 * user-picker, run-history-table, admin-alerts-panel.
 * All border-radius ≤ 4px, font 10-12px, 4px grid. Dark mode supported.
 * ======================================== */

.schedule-subsection {
  padding: var(--space-3, 12px) 0;
  border-top: 1px solid var(--border-subtle, #e9ecef);
}
.schedule-subsection:first-of-type {
  border-top: none;
  padding-top: 0;
}

.schedule-subsection-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}
.schedule-subsection-header h3 {
  margin: 0;
  font-size: var(--font-size-md, 13px);
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  display: flex;
  align-items: center;
}
.schedule-subsection-hint {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #6c757d);
}

.schedule-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) 0;
}

.schedule-form-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--space-2, 8px);
}
.schedule-form-row-stack {
  align-items: flex-start;
}
.schedule-form-row .form-label {
  margin: 0;
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #495057);
  font-weight: 500;
}

.schedule-enabled-group {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.day-picker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px);
  background: var(--surface-2, #f8f9fa);
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  width: max-content;
}
.day-picker .day-pill {
  min-width: 40px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.schedule-time-input {
  max-width: 120px;
  font-size: var(--font-size-sm, 11px);
}
.schedule-role-input {
  max-width: 220px;
  font-size: var(--font-size-sm, 11px);
}

.schedule-warning {
  margin-top: var(--space-2, 8px);
}

.schedule-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

.schedule-inline-message {
  font-size: var(--font-size-xs, 10px);
}

/* Inline warning that mirrors `alert-warning` but sits compactly under the
   one-off datetime input. We override only the layout — colours come from
   .alert-warning so dark mode works automatically. */
.schedule-inline-warning {
  margin: 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--font-size-xs, 11px);
  display: inline-flex;
  align-items: center;
}

.schedule-form-note {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #6c757d);
  font-style: italic;
}

/* Per-day schedule entry list (one row per selected day) */
/* Promoted from /features: a min-width filter-style select used wherever a
   dropdown should match the Features Management page styling. */
.feature-filter-select {
  min-width: 160px;
}
.feature-filter-select:disabled {
  opacity: 0.5;
}
.feature-filter-select:focus {
  outline: none;
}

/* Wider variant for dropdowns containing long school/tenant names. */
.target-school-select {
  min-width: 280px;
  max-width: 100%;
}

.day-entry-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  width: 100%;
  max-width: 360px;
}
.day-entry-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1, #fff);
  font-size: var(--font-size-sm, 11px);
}
.day-entry-day {
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  min-width: 80px;
}
.day-entry-sep {
  color: var(--text-muted, #6c757d);
  font-size: var(--font-size-xs, 10px);
}
.day-entry-time {
  color: var(--text-secondary, #495057);
  font-variant-numeric: tabular-nums;
  flex: 1;
}
.day-entry-action {
  background: none;
  border: none;
  padding: 2px 6px;
  color: var(--text-muted, #6c757d);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}
.day-entry-action:hover {
  background: var(--surface-3, #e9ecef);
  color: var(--status-error, #dc3545);
}

[data-bs-theme="dark"] .day-entry-row,
[data-theme="dark"] .day-entry-row {
  background: var(--surface-1, #23272b);
  border-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .day-entry-action:hover,
[data-theme="dark"] .day-entry-action:hover {
  background: var(--surface-3, #495057);
}

/* Per-campus override cards */
.campus-overrides-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.campus-override-card {
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1, #fff);
}
.campus-override-card.expanded {
  border-color: var(--border-default, #adb5bd);
}
.campus-override-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  cursor: pointer;
  gap: var(--space-2, 8px);
  user-select: none;
}
.campus-override-header:hover {
  background: var(--surface-2, #f8f9fa);
}
.campus-override-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-sm, 11px);
}
.campus-override-header-left .bi {
  color: var(--text-muted, #6c757d);
  font-size: 0.85em;
}
.campus-override-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}
.campus-override-badge {
  font-size: 9px;
  background: var(--surface-3, #e9ecef);
  color: var(--text-secondary, #495057);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}
.campus-override-badge-inherit {
  background: transparent;
  border: 1px dashed var(--border-subtle, #dee2e6);
  color: var(--text-muted, #6c757d);
}
.campus-override-body {
  padding: var(--space-3, 12px);
  border-top: 1px solid var(--border-subtle, #dee2e6);
  background: var(--surface-2, #fafbfc);
}

/* User picker */
.user-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  width: 100%;
  max-width: 520px;
}
.user-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  min-height: 28px;
  align-items: center;
}
.user-picker-empty {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #6c757d);
  font-style: italic;
}
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs, 10px);
  background: var(--surface-2, #f0f4f8);
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 4px 2px 6px;
  line-height: 1.4;
}
.user-pill .bi-person {
  font-size: 0.9em;
  color: var(--text-muted, #6c757d);
}
.user-pill-label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-pill-remove {
  background: none;
  border: none;
  padding: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #6c757d);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.user-pill-remove:hover {
  background: var(--surface-3, #e9ecef);
  color: var(--status-error, #dc3545);
}

.user-picker-search,
.user-picker-fallback {
  position: relative;
  max-width: 360px;
}
.user-picker-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface-0, #fff);
  border: 1px solid var(--border-default, #adb5bd);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
}
.user-picker-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xs, 10px);
  border-bottom: 1px solid var(--border-subtle, #f1f3f5);
}
.user-picker-result:last-child {
  border-bottom: none;
}
.user-picker-result:hover {
  background: var(--surface-2, #f8f9fa);
}
.user-picker-result-name {
  font-weight: 500;
  color: var(--text-primary, #1f2937);
}
.user-picker-result-email {
  font-size: 10px;
  color: var(--text-muted, #6c757d);
}

/* Run history */
.schedule-history-block {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--border-subtle, #dee2e6);
}
.schedule-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2, 8px);
}
.schedule-history-header h4 {
  margin: 0;
  font-size: var(--font-size-sm, 11px);
  font-weight: 600;
  color: var(--text-secondary, #495057);
}
.run-history-table td,
.run-history-table th {
  font-size: var(--font-size-xs, 10px);
  vertical-align: top;
}
.trigger-badge {
  font-size: 9px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm, 4px);
}
.trigger-scheduled { background: rgba(13, 110, 253, 0.1); color: var(--cta-secondary, #0d6efd); }
.trigger-test      { background: rgba(255, 193, 7, 0.18); color: #a06c00; }
.trigger-manual    { background: var(--surface-3, #e9ecef); color: var(--text-secondary, #495057); }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs, 10px);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  text-transform: capitalize;
}
.status-chip.status-success { background: rgba(56, 142, 128, 0.12); color: #146b54; }
.status-chip.status-failed  { background: rgba(220, 53, 69, 0.12);  color: #a21d2a; }
.status-chip.status-running { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.status-chip.status-partial { background: rgba(255, 193, 7, 0.15);  color: #a06c00; }
.run-error {
  margin-top: 2px;
  font-size: 9px;
  color: var(--status-error, #dc3545);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-count {
  display: inline-block;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.run-count-muted { color: var(--text-muted, #6c757d); }
.run-count-err   { color: var(--status-error, #dc3545); font-weight: 600; }
.notified-count {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #495057);
}

.loading-state-small {
  padding: var(--space-2, 8px) 0;
  font-size: var(--font-size-xs, 10px);
}

/* Admin alerts panel */
.admin-alerts-panel {
  border-left: 3px solid var(--status-warning, #ffc107);
}
.admin-alerts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.admin-alert-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2, 8px);
  align-items: flex-start;
  padding: var(--space-2, 8px);
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  background: rgba(255, 193, 7, 0.05);
}
.admin-alert-icon {
  color: var(--status-warning, #ffc107);
  font-size: 16px;
  line-height: 1;
  padding-top: 2px;
}
.admin-alert-title {
  font-size: var(--font-size-sm, 11px);
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
.admin-alert-meta {
  font-size: 10px;
  color: var(--text-muted, #6c757d);
  margin-top: 2px;
}
.admin-alert-message {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary, #495057);
  margin-top: 4px;
}
.admin-alert-actions {
  display: flex;
  align-items: center;
}

/* Dark mode — dual selectors so this works in both Junipa (data-bs-theme) and
   Distillery (data-theme). */
[data-bs-theme="dark"] .day-picker,
[data-theme="dark"] .day-picker {
  background: var(--surface-2, #2b3035);
  border-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .campus-override-card,
[data-theme="dark"] .campus-override-card {
  background: var(--surface-1, #23272b);
  border-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .campus-override-header:hover,
[data-theme="dark"] .campus-override-header:hover {
  background: var(--surface-2, #2b3035);
}
[data-bs-theme="dark"] .campus-override-body,
[data-theme="dark"] .campus-override-body {
  background: var(--surface-2, #22272b);
  border-top-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .campus-override-badge,
[data-theme="dark"] .campus-override-badge {
  background: var(--surface-3, #495057);
  color: var(--text-secondary, #adb5bd);
}
[data-bs-theme="dark"] .user-pill,
[data-theme="dark"] .user-pill {
  background: var(--surface-3, #2b3035);
  border-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .user-picker-results,
[data-theme="dark"] .user-picker-results {
  background: var(--surface-1, #23272b);
  border-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .user-picker-result,
[data-theme="dark"] .user-picker-result {
  border-bottom-color: var(--border-default, #343a40);
  color: var(--text-primary, #f8f9fa);
}
[data-bs-theme="dark"] .user-picker-result:hover,
[data-theme="dark"] .user-picker-result:hover {
  background: var(--surface-2, #2b3035);
}
[data-bs-theme="dark"] .trigger-scheduled,
[data-theme="dark"] .trigger-scheduled { background: rgba(13, 110, 253, 0.2); color: #6ea8fe; }
[data-bs-theme="dark"] .trigger-test,
[data-theme="dark"] .trigger-test      { background: rgba(255, 193, 7, 0.2);  color: #ffda6a; }
[data-bs-theme="dark"] .trigger-manual,
[data-theme="dark"] .trigger-manual    { background: var(--surface-3, #495057); color: var(--text-secondary, #ced4da); }
[data-bs-theme="dark"] .status-chip.status-success,
[data-theme="dark"] .status-chip.status-success { background: rgba(56, 142, 128, 0.2); color: #6ed9b7; }
[data-bs-theme="dark"] .status-chip.status-failed,
[data-theme="dark"] .status-chip.status-failed  { background: rgba(220, 53, 69, 0.2);  color: #ff7a86; }
[data-bs-theme="dark"] .status-chip.status-running,
[data-theme="dark"] .status-chip.status-running { background: rgba(13, 110, 253, 0.2); color: #6ea8fe; }
[data-bs-theme="dark"] .status-chip.status-partial,
[data-theme="dark"] .status-chip.status-partial { background: rgba(255, 193, 7, 0.2);  color: #ffda6a; }
[data-bs-theme="dark"] .admin-alert-item,
[data-theme="dark"] .admin-alert-item {
  background: rgba(255, 193, 7, 0.08);
  border-color: var(--border-default, #495057);
}

/* ─────────────────────────────────────────────────────────────────────────
   Admin audit pages (access-log, active-tokens) + per-integration token
   stats panel. Added for vastpuddle-btuk.5 (SA impersonation audit UI).
   ───────────────────────────────────────────────────────────────────── */

/* Page subtitle under the h1 */
.page-subtitle {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #6c757d);
  margin: 2px 0 0 0;
}

/* Inline monospace cell content (project ids, SA emails) */
.mono-cell {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  background: transparent;
  padding: 0;
  color: var(--text-secondary, #495057);
}

/* Generic countdown badge — used for token expiry */
.countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs, 10px);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  font-variant-numeric: tabular-nums;
  background: var(--surface-3, #e9ecef);
  color: var(--text-secondary, #495057);
}
.countdown-active  { background: rgba(56, 142, 128, 0.12); color: #146b54; }
.countdown-warning { background: rgba(255, 193, 7, 0.18);  color: #a06c00; }
.countdown-expired { background: rgba(108, 117, 125, 0.12); color: var(--text-muted, #6c757d); text-decoration: line-through; }

/* Active-tokens count pill in the header */
.active-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs, 11px);
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  background: rgba(56, 142, 128, 0.12);
  color: #146b54;
  font-variant-numeric: tabular-nums;
}

/* Polling indicator (live / offline) */
.poll-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted, #6c757d);
  padding: 0 8px;
}
.poll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #6c757d);
}
.poll-dot-on {
  background: #2e7d57;
  box-shadow: 0 0 0 0 rgba(46, 125, 87, 0.6);
  animation: poll-pulse 2s ease-out infinite;
}
.poll-text {
  text-transform: lowercase;
}
@keyframes poll-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 125, 87, 0.6); }
  70%  { box-shadow: 0 0 0 4px rgba(46, 125, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 125, 87, 0); }
}

/* Loading skeleton row */
.skeleton-row {
  height: 14px;
  border-radius: var(--radius-sm, 4px);
  background: linear-gradient(
    90deg,
    var(--surface-2, #e9ecef) 0%,
    var(--surface-3, #f1f3f5) 50%,
    var(--surface-2, #e9ecef) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pagination bar */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1, #fff);
}
.pagination-info {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #6c757d);
}
.pagination-actions {
  display: flex;
  gap: var(--space-1, 4px);
}

/* Active-tokens row visual states */
.admin-table tr.row-expiring td {
  background: rgba(255, 193, 7, 0.05);
}
.admin-table tr.row-expired td {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

/* Token-stats per-integration panel */
.token-stats-panel .section-header {
  margin-bottom: var(--space-2, 8px);
}
.token-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1, 4px);
}
.token-stat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border: 1px solid var(--border-subtle, #dee2e6);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1, #fff);
}
.token-stat-row.token-stat-failed {
  border-left: 3px solid var(--status-error, #dc3545);
}
.token-stat-campus {
  font-size: var(--font-size-sm, 11px);
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.token-stat-metrics {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: flex-start;
}
.token-stat-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 60px;
}
.token-stat-metric.token-stat-last {
  min-width: 80px;
}
.token-stat-value {
  font-size: var(--font-size-sm, 12px);
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  font-variant-numeric: tabular-nums;
}
.token-stat-value.token-stat-warn {
  color: var(--status-error, #dc3545);
}
.token-stat-label {
  font-size: 9px;
  color: var(--text-muted, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Dark mode adjustments for the audit UI — dual selectors (Junipa + Distillery). */
[data-bs-theme="dark"] .countdown-badge,
[data-theme="dark"] .countdown-badge { background: var(--surface-3, #495057); color: var(--text-secondary, #ced4da); }
[data-bs-theme="dark"] .countdown-active,
[data-theme="dark"] .countdown-active  { background: rgba(56, 142, 128, 0.2); color: #6ed9b7; }
[data-bs-theme="dark"] .countdown-warning,
[data-theme="dark"] .countdown-warning { background: rgba(255, 193, 7, 0.2);  color: #ffda6a; }
[data-bs-theme="dark"] .countdown-expired,
[data-theme="dark"] .countdown-expired { background: rgba(173, 181, 189, 0.15); color: var(--text-muted, #adb5bd); }
[data-bs-theme="dark"] .active-count-pill,
[data-theme="dark"] .active-count-pill { background: rgba(56, 142, 128, 0.2); color: #6ed9b7; }
[data-bs-theme="dark"] .pagination-bar,
[data-theme="dark"] .pagination-bar {
  background: var(--surface-1, #23272b);
  border-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .skeleton-row,
[data-theme="dark"] .skeleton-row {
  background: linear-gradient(
    90deg,
    var(--surface-2, #2b3035) 0%,
    var(--surface-3, #343a40) 50%,
    var(--surface-2, #2b3035) 100%
  );
  background-size: 200% 100%;
}
[data-bs-theme="dark"] .token-stat-row,
[data-theme="dark"] .token-stat-row {
  background: var(--surface-1, #23272b);
  border-color: var(--border-default, #495057);
}
[data-bs-theme="dark"] .admin-table tr.row-expiring td,
[data-theme="dark"] .admin-table tr.row-expiring td {
  background: rgba(255, 193, 7, 0.08);
}

/* ────────────────────────────────────────────────────────────────────────
   Spinner-border subtle on-brand bg
   ────────────────────────────────────────────────────────────────────────
   Bootstrap's `.spinner-border` is a rotating ring with a transparent inner
   area. Against subtle theme backgrounds (cards, panels), the parent's bg
   shows through the gap and creates an unfinished/stark look. Tint the inner
   area with a barely-on-brand surface so the ring reads as a deliberate
   element rather than a hole punched in the card. Light + dark mode use the
   same token; surface-1 sits one step off the page bg in both themes.
   ──────────────────────────────────────────────────────────────────────── */
.spinner-border {
  background: var(--surface-1, transparent);
  background-clip: padding-box;
}

[data-bs-theme="dark"] .spinner-border,
[data-theme="dark"] .spinner-border {
  background: var(--surface-1, transparent);
  background-clip: padding-box;
}

/* ────────────────────────────────────────────────────────────────────────
   PLAN INSTRUCTIONS CALLOUT (instructions field type)
   Designer-facing guidance shown in the form-builder canvas + while staff
   fill out a populated plan. NEVER rendered in the read-only auditor view
   unless the field has defaultVisibility: "always".

   Variants: info (default), note, warning.
   Tokens: --status-info / --status-warning / --text-muted for left border;
   translucent same-hue backgrounds matching the toast/badge HALF-STRENGTH
   convention (10% light → 15% dark).
   ──────────────────────────────────────────────────────────────────────── */
.plan-instructions-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: var(--font-family);
}

.plan-instructions-callout__icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 1px;
  color: var(--status-info);
}

.plan-instructions-callout__content {
  flex: 1 1 auto;
  min-width: 0;
}

.plan-instructions-callout__title {
  font-size: var(--font-size-base, 12px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.3;
  margin: 0 0 var(--space-1, 4px) 0;
  color: var(--text-primary);
}

.plan-instructions-callout__body {
  font-size: var(--font-size-sm, 11px);
  line-height: 1.5;
  color: var(--text-secondary);
}

.plan-instructions-callout__body p:first-child { margin-top: 0; }
.plan-instructions-callout__body p:last-child { margin-bottom: 0; }
.plan-instructions-callout__body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.plan-instructions-callout__body em,
.plan-instructions-callout__body i { color: var(--text-muted); font-style: italic; }
.plan-instructions-callout__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; padding: 1px 4px; background: var(--surface-3); border-radius: var(--radius-xs, 2px); }

/* Designer-only ribbon — surfaced in form-builder + plan editor so
   authors know this content does NOT appear in the auditor view. */
.plan-instructions-callout__ribbon {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: var(--radius-xs, 2px);
  background: var(--surface-3);
  color: var(--text-muted);
  margin-left: var(--space-2, 8px);
  align-self: flex-start;
  white-space: nowrap;
}

/* INFO variant (default) — blue accent, NCCD blurbs */
.plan-instructions-callout--info {
  border-left-color: var(--status-info);
  background: rgba(37, 99, 235, 0.06);
}
.plan-instructions-callout--info .plan-instructions-callout__icon { color: var(--status-info); }

/* NOTE variant — neutral, author-facing reminders */
.plan-instructions-callout--note {
  border-left-color: var(--text-muted);
  background: var(--surface-1);
}
.plan-instructions-callout--note .plan-instructions-callout__icon { color: var(--text-muted); }

/* WARNING variant — amber, audit-critical reminders */
.plan-instructions-callout--warning {
  border-left-color: var(--status-warning);
  background: rgba(202, 138, 4, 0.08);
}
.plan-instructions-callout--warning .plan-instructions-callout__icon { color: var(--status-warning); }

/* Dark mode — bump opacity per HALF-STRENGTH rule (15% bg) */
[data-bs-theme="dark"] .plan-instructions-callout,
[data-theme="dark"] .plan-instructions-callout {
  background: var(--surface-2);
  color: var(--text-primary);
}
[data-bs-theme="dark"] .plan-instructions-callout--info,
[data-theme="dark"] .plan-instructions-callout--info {
  background: rgba(88, 166, 255, 0.10);
}
[data-bs-theme="dark"] .plan-instructions-callout--note,
[data-theme="dark"] .plan-instructions-callout--note {
  background: var(--surface-2);
}
[data-bs-theme="dark"] .plan-instructions-callout--warning,
[data-theme="dark"] .plan-instructions-callout--warning {
  background: rgba(210, 153, 34, 0.12);
}
[data-bs-theme="dark"] .plan-instructions-callout__ribbon,
[data-theme="dark"] .plan-instructions-callout__ribbon {
  background: var(--surface-3);
  color: var(--text-secondary);
}

/* ========================================
 * Feature Spotlight
 * Reusable UX pattern for introducing new features on first visit.
 * Two display variants:
 *   .feature-spotlight--balloon     pulsing tooltip pinned to a UI element
 *   .feature-spotlight--disclaimer  top-of-page banner
 * Both share the .feature-spotlight base.
 * ======================================== */
.feature-spotlight {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.feature-spotlight__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}

.feature-spotlight__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

.feature-spotlight__body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

.feature-spotlight__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  padding: 0;
  cursor: pointer;
  line-height: 1;
  margin-left: var(--space-2);
  flex: 0 0 auto;
}
.feature-spotlight__close:hover { color: var(--text-primary); }
.feature-spotlight__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: var(--radius-xs);
}

.feature-spotlight__icon {
  color: var(--brand-orange);
  font-size: var(--font-size-md);
  line-height: 1;
  margin-top: 1px;
  flex: 0 0 auto;
}

/* DISCLAIMER variant — full-width banner with brand-orange left border */
.feature-spotlight--disclaimer {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-shadow: var(--shadow-sm);
}

/* BALLOON variant — bubble with caret pointing up to anchor; pulses on the dot */
.feature-spotlight--balloon {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
}

.feature-spotlight__pulse {
  position: absolute;
  top: -5px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--brand-orange);
  animation: featureSpotlightPulse 2s infinite;
}

.feature-spotlight__caret {
  position: absolute;
  top: -6px;
  width: 0;
  height: 0;
  transform: translateX(-6px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--surface-2);
  filter: drop-shadow(0 -1px 0 var(--border-default));
}

@keyframes featureSpotlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 104, 19, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 104, 19, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 104, 19, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-spotlight__pulse { animation: none; }
}

/* Dark mode */
[data-bs-theme="dark"] .feature-spotlight--disclaimer,
[data-theme="dark"] .feature-spotlight--disclaimer {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  border-left-color: var(--brand-orange);
}
[data-bs-theme="dark"] .feature-spotlight--balloon,
[data-theme="dark"] .feature-spotlight--balloon {
  background: var(--surface-2);
  border-color: var(--border-default);
}
[data-bs-theme="dark"] .feature-spotlight__caret,
[data-theme="dark"] .feature-spotlight__caret {
  border-bottom-color: var(--surface-2);
}
[data-bs-theme="dark"] .feature-spotlight__title,
[data-theme="dark"] .feature-spotlight__title { color: var(--text-primary); }
[data-bs-theme="dark"] .feature-spotlight__body,
[data-theme="dark"] .feature-spotlight__body { color: var(--text-secondary); }
[data-bs-theme="dark"] .feature-spotlight__pulse,
[data-theme="dark"] .feature-spotlight__pulse {
  background: var(--brand-orange);
}

/* Primary action button (disclaimer variant — e.g. "Tell me more") */
.feature-spotlight__actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.feature-spotlight__primary-action {
  appearance: none;
  background: var(--brand-orange);
  color: #fff;
  border: 0;
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  line-height: 1.4;
}
.feature-spotlight__primary-action:hover {
  filter: brightness(1.05);
}
.feature-spotlight__primary-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* ========================================
 * CAP draft banner
 * Persistent banner shown on the student journal once a draft CAP plan
 * has been created but is not yet active. Replaces the disclaimer once
 * the user opts in via "Switch to CAP mode". Mirrors the disclaimer
 * variant's left-border accent for visual continuity.
 * ======================================== */
.cap-draft-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}
.cap-draft-banner__icon {
  color: var(--brand-orange);
  font-size: var(--font-size-md);
  line-height: 1;
  flex: 0 0 auto;
}
.cap-draft-banner__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cap-draft-banner__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cap-draft-banner__percent {
  font-weight: var(--font-weight-semibold);
  color: var(--brand-orange);
  font-variant-numeric: tabular-nums;
}
.cap-draft-banner__progress {
  height: 4px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
  width: 100%;
  max-width: 240px;
}
.cap-draft-banner__progress-bar {
  height: 100%;
  background: var(--brand-orange);
  border-radius: var(--radius-full);
  transition: width 200ms ease-out;
}
.cap-draft-banner__cta {
  appearance: none;
  background: var(--brand-orange);
  color: #fff;
  border: 0;
  border-radius: var(--radius-xs);
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cap-draft-banner__cta:hover {
  filter: brightness(1.05);
  color: #fff;
  text-decoration: none;
}
.cap-draft-banner__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

[data-bs-theme="dark"] .cap-draft-banner,
[data-theme="dark"] .cap-draft-banner {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  border-left-color: var(--brand-orange);
}
[data-bs-theme="dark"] .cap-draft-banner__progress,
[data-theme="dark"] .cap-draft-banner__progress {
  background: var(--surface-1);
}

/* ========================================
 * CAP "Tell me more" modal — explainer that appears between the
 * disclaimer and the actual draft creation. Lightweight, contained.
 * ======================================== */
.cap-tell-me-more-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-modal-backdrop, 1040);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.cap-tell-me-more-modal {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  padding: var(--space-4);
  z-index: var(--z-modal, 1050);
}
.cap-tell-me-more-modal__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.cap-tell-me-more-modal__body {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-4);
}
.cap-tell-me-more-modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
.cap-tell-me-more-modal__btn {
  appearance: none;
  border-radius: var(--radius-xs);
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--text-primary);
}
.cap-tell-me-more-modal__btn--primary {
  background: var(--brand-orange);
  color: #fff;
  border-color: var(--brand-orange);
}
.cap-tell-me-more-modal__btn--primary:hover {
  filter: brightness(1.05);
}

[data-bs-theme="dark"] .cap-tell-me-more-backdrop,
[data-theme="dark"] .cap-tell-me-more-backdrop {
  background: rgba(0, 0, 0, 0.65);
}
[data-bs-theme="dark"] .cap-tell-me-more-modal,
[data-theme="dark"] .cap-tell-me-more-modal {
  background: var(--surface-2, #161B22);
  border-color: var(--border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .cap-tell-me-more-modal__title,
[data-theme="dark"] .cap-tell-me-more-modal__title {
  color: var(--text-primary, #E6EDF3);
}
[data-bs-theme="dark"] .cap-tell-me-more-modal__body,
[data-theme="dark"] .cap-tell-me-more-modal__body {
  color: var(--text-secondary, #8B949E);
}
[data-bs-theme="dark"] .cap-tell-me-more-modal__btn,
[data-theme="dark"] .cap-tell-me-more-modal__btn {
  background: var(--surface-3, #21262D);
  border-color: var(--border-subtle);
  color: var(--text-primary, #E6EDF3);
}
[data-bs-theme="dark"] .cap-tell-me-more-modal__btn:hover,
[data-theme="dark"] .cap-tell-me-more-modal__btn:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.04));
}
[data-bs-theme="dark"] .cap-tell-me-more-modal__btn--primary,
[data-theme="dark"] .cap-tell-me-more-modal__btn--primary {
  background: var(--brand-orange, #FF8A46);
  border-color: var(--brand-orange, #FF8A46);
  color: #fff;
}
[data-bs-theme="dark"] .cap-tell-me-more-modal__btn--primary:hover,
[data-theme="dark"] .cap-tell-me-more-modal__btn--primary:hover {
  filter: brightness(1.1);
}

/* ========================================
 * CAP weekly schedule grid (cap-schedule field)
 * Calendar-style staff allocation across the school day. Used in three
 * surfaces: read-only student-plans-view, editor (student-plan-editor),
 * and form-builder canvas (designer mode).
 * ======================================== */
.cap-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.cap-schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cap-schedule-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.cap-schedule-header__title i {
  color: var(--brand-orange);
}
.cap-schedule-header__window {
  font-weight: var(--font-weight-normal);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
}
.cap-schedule-header__meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.cap-schedule-week-toggle {
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.cap-schedule-week-toggle__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  color: var(--text-secondary);
}
.cap-schedule-week-toggle__btn:hover {
  background: var(--surface-2);
}
.cap-schedule-week-toggle__btn--active {
  background: var(--brand-orange);
  color: #fff;
}

/* Grid layout: 1 time column + N weekday columns. Auto-rows for segments. */
.cap-schedule-grid {
  display: grid;
  grid-template-columns: 140px repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cap-schedule-grid__corner,
.cap-schedule-grid__day-header {
  background: var(--surface-2);
  padding: 6px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cap-schedule-grid__row-time {
  background: var(--surface-2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cap-schedule-grid__row-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
}
.cap-schedule-grid__row-window {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cap-schedule-grid__empty {
  grid-column: 1 / -1;
  background: var(--surface-1);
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.cap-schedule-cell {
  background: var(--surface-1);
  padding: 6px;
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}
.cap-schedule-cell--editable {
  cursor: pointer;
  transition: background-color 100ms ease-out;
}
.cap-schedule-cell--editable:hover {
  background: var(--surface-2);
}
.cap-schedule-cell--empty {
  background: var(--surface-1);
}
.cap-schedule-cell__empty-hint {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
}
.cap-schedule-cell--designer {
  opacity: 0.7;
}
.cap-schedule-placement-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.cap-schedule-placement-chip[data-coverage='in-class'] {
  background: rgba(34, 116, 210, 0.12);
  border-color: rgba(34, 116, 210, 0.35);
  color: #1f5fa9;
}
.cap-schedule-placement-chip[data-coverage='out-of-class'] {
  background: rgba(255, 104, 19, 0.12);
  border-color: rgba(255, 104, 19, 0.35);
  color: #b94a0c;
}
.cap-schedule-placement-chip[data-coverage='case-manager'] {
  background: rgba(76, 145, 65, 0.12);
  border-color: rgba(76, 145, 65, 0.35);
  color: #34692c;
}
.cap-schedule-placement-chip--placeholder {
  opacity: 0.5;
}
.cap-schedule-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cap-schedule-actions__btn {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cap-schedule-actions__btn:hover {
  background: var(--surface-3);
}

[data-bs-theme="dark"] .cap-schedule-grid,
[data-theme="dark"] .cap-schedule-grid {
  background: var(--border-subtle);
  border-color: var(--border-subtle);
}
[data-bs-theme="dark"] .cap-schedule-grid__corner,
[data-theme="dark"] .cap-schedule-grid__corner,
[data-bs-theme="dark"] .cap-schedule-grid__day-header,
[data-theme="dark"] .cap-schedule-grid__day-header,
[data-bs-theme="dark"] .cap-schedule-grid__row-time,
[data-theme="dark"] .cap-schedule-grid__row-time {
  background: var(--surface-3);
  color: var(--text-secondary);
}
[data-bs-theme="dark"] .cap-schedule-cell,
[data-theme="dark"] .cap-schedule-cell {
  background: var(--surface-2);
}
[data-bs-theme="dark"] .cap-schedule-placement-chip,
[data-theme="dark"] .cap-schedule-placement-chip {
  background: var(--surface-3);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

/* ========================================
 * CAP stakeholders list (cap-stakeholders field)
 * ======================================== */
.cap-stakeholders {
  font-family: var(--font-family);
  color: var(--text-primary);
}
.cap-stakeholders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cap-stakeholder-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}
.cap-stakeholder-row__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  flex: 0 0 auto;
}
.cap-stakeholder-row[data-coverage='case-manager'] .cap-stakeholder-row__avatar {
  background: rgba(76, 145, 65, 0.2);
  color: #34692c;
}
.cap-stakeholder-row[data-coverage='in-class'] .cap-stakeholder-row__avatar {
  background: rgba(34, 116, 210, 0.2);
  color: #1f5fa9;
}
.cap-stakeholder-row[data-coverage='out-of-class'] .cap-stakeholder-row__avatar {
  background: rgba(255, 104, 19, 0.2);
  color: #b94a0c;
}
.cap-stakeholder-row__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cap-stakeholder-row__name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cap-stakeholder-row__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-secondary);
}
.cap-stakeholder-row__role {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.cap-stakeholder-row__signoff {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cap-stakeholder-row__signoff--signed {
  color: #34692c;
}
.cap-stakeholder-row__remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: var(--font-size-base);
  line-height: 1;
}
.cap-stakeholder-row__remove:hover {
  color: var(--state-danger, #b94a0c);
}
.cap-stakeholder-row--placeholder {
  opacity: 0.6;
}
.cap-stakeholder-row--empty {
  color: var(--text-muted);
  font-style: italic;
  justify-content: center;
}
.cap-stakeholders__actions {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.cap-stakeholders__add-btn {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cap-stakeholders__add-btn--primary {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}
.cap-stakeholders__picker-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.cap-stakeholders__add-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}
.cap-stakeholders__input {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  font-size: var(--font-size-sm);
  flex: 1 1 160px;
  background: var(--surface-1);
  color: var(--text-primary);
}
[data-bs-theme="dark"] .cap-stakeholder-row,
[data-theme="dark"] .cap-stakeholder-row {
  background: var(--surface-2);
}
[data-bs-theme="dark"] .cap-stakeholders__input,
[data-theme="dark"] .cap-stakeholders__input {
  background: var(--surface-2);
  border-color: var(--border-subtle);
}

/* ========================================
 * CAP stakeholder sign-off (plan-stakeholder-signoff field)
 * ======================================== */
.cap-signoff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cap-signoff-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}
.cap-signoff-row__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cap-signoff-row__name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.cap-signoff-row__role {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.cap-signoff-row__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.cap-signoff-row__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-secondary);
}
.cap-signoff-row__badge--signed {
  background: rgba(76, 145, 65, 0.18);
  color: #34692c;
}
.cap-signoff-row__badge--pending {
  background: rgba(255, 104, 19, 0.18);
  color: #b94a0c;
}
.cap-signoff-row__actions {
  flex: 0 0 auto;
}
.cap-signoff-row__btn {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cap-signoff-row__btn--primary {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}
.cap-signoff-row--empty {
  color: var(--text-muted);
  font-style: italic;
  justify-content: center;
}

[data-bs-theme="dark"] .cap-signoff-row,
[data-theme="dark"] .cap-signoff-row {
  background: var(--surface-2);
}

/* ========================================
 * CAP form-set selector (multi-form support)
 * Above the plan editor: shows the default CAP form + lets the user
 * append additional NCCD-Specific templates as supplementary sections.
 * ======================================== */
.cap-form-set-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.cap-form-set-selector__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.cap-form-set-selector__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.cap-form-set-selector__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.cap-form-set-selector__chip--default {
  background: rgba(255, 104, 19, 0.12);
  border-color: rgba(255, 104, 19, 0.35);
  color: #b94a0c;
}
.cap-form-set-selector__add-btn {
  appearance: none;
  border: 1px dashed var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cap-form-set-selector__add-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
[data-bs-theme="dark"] .cap-form-set-selector,
[data-theme="dark"] .cap-form-set-selector {
  background: var(--surface-2);
}
[data-bs-theme="dark"] .cap-form-set-selector__chip,
[data-theme="dark"] .cap-form-set-selector__chip {
  background: var(--surface-3);
  border-color: var(--border-subtle);
}

/* ========================================
 * CAP compliance report — status pill + coverage strip + Likert chips
 * Used by: junipa/libs/plans/src/lib/ej/ej-compliance-report.component
 * Tones reuse var(--status-success/warning/error) from tokens.css
 * ======================================== */

/* Status pill — canonical coverage state pill (Current / Gaps / Overdue / None).
 * Extends the .status-badge family; shorter, denser, table-friendly. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid transparent;
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status-pill .status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-pill--success {
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.28);
  color: #15803d;
}
.status-pill--success .status-pill-dot { background: var(--status-success, #16A34A); }
.status-pill--warning {
  background: rgba(202, 138, 4, 0.12);
  border-color: rgba(202, 138, 4, 0.30);
  color: #92580a;
}
.status-pill--warning .status-pill-dot { background: var(--status-warning, #CA8A04); }
.status-pill--error {
  background: rgba(220, 38, 38, 0.10);
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}
.status-pill--error .status-pill-dot { background: var(--status-error, #DC2626); }
.status-pill--neutral {
  background: var(--surface-2, #F3F4F6);
  border-color: var(--border-subtle, #E5E7EB);
  color: var(--text-secondary, #4B5563);
}
.status-pill--neutral .status-pill-dot { background: var(--text-muted, #9CA3AF); }

[data-bs-theme="dark"] .status-pill--success { color: #4ade80; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.30); }
[data-bs-theme="dark"] .status-pill--warning { color: #facc15; background: rgba(250, 204, 21, 0.12); border-color: rgba(250, 204, 21, 0.30); }
[data-bs-theme="dark"] .status-pill--error   { color: #f87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.30); }
[data-bs-theme="dark"] .status-pill--neutral { color: var(--text-secondary); background: var(--surface-3); border-color: var(--border-subtle); }

/* 7-day rolling coverage strip — small dot row (oldest left, today right).
 * Sized to fit in a table cell alongside the % + gap-days meta line. */
.cap-coverage-strip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cap-coverage-strip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.cap-coverage-strip-dot--full    { background: var(--status-success, #16A34A); }
.cap-coverage-strip-dot--partial { background: var(--status-warning, #CA8A04); }
.cap-coverage-strip-dot--none    { background: var(--status-error,   #DC2626); }
.cap-coverage-strip-dot--unknown { background: var(--text-muted,     #9CA3AF); opacity: 0.55; }

.cap-coverage-cell {
  min-width: 160px;
  width: 180px;
}
.cap-coverage-meta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary, #6B7280);
  font-variant-numeric: tabular-nums;
}
.cap-coverage-meta__pct { font-weight: var(--font-weight-semibold, 600); color: var(--text-primary, #1F2937); }
.cap-coverage-meta__sep { opacity: 0.5; }
.cap-coverage-meta__gaps--high { color: var(--status-error, #DC2626); font-weight: var(--font-weight-semibold, 600); }
.cap-coverage-meta--muted { font-style: italic; opacity: 0.75; }

[data-bs-theme="dark"] .cap-coverage-meta { color: var(--text-secondary, #adb5bd); }
[data-bs-theme="dark"] .cap-coverage-meta__pct { color: var(--text-primary, #DEE2E6); }
[data-bs-theme="dark"] .cap-coverage-meta__gaps--high { color: #f87171; }

/* Likert-style condensed chips — one per planned adjustment, coloured by stakeholder scope */
.cap-stakeholder-cell {
  min-width: 140px;
  width: 180px;
}
.cap-likert-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}
.cap-likert-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs, 3px);
  font-size: 9px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  border: 1px solid transparent;
  cursor: default;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.cap-likert-cell--adjustment {
  background: rgba(34, 116, 210, 0.12);
  border-color: rgba(34, 116, 210, 0.35);
  color: #1f5fa9;
}
.cap-likert-cell--whole-day {
  background: rgba(76, 145, 65, 0.14);
  border-color: rgba(76, 145, 65, 0.38);
  color: #34692c;
}
.cap-likert-cell--unassigned {
  background: var(--surface-2, #F3F4F6);
  border-color: var(--border-subtle, #E5E7EB);
  color: var(--text-muted, #9CA3AF);
}
.cap-likert-empty {
  color: var(--text-muted, #9CA3AF);
  font-size: var(--font-size-xs, 11px);
}
[data-bs-theme="dark"] .cap-likert-cell--adjustment { color: #6ea8fe; background: rgba(110, 168, 254, 0.14); border-color: rgba(110, 168, 254, 0.32); }
[data-bs-theme="dark"] .cap-likert-cell--whole-day  { color: #4ade80; background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.32); }
[data-bs-theme="dark"] .cap-likert-cell--unassigned { color: var(--text-muted); background: var(--surface-3); border-color: var(--border-subtle); }

/* ============================================================
   STUDENT SUMMARY BODY
   ============================================================
   Used for free-text body copy inside the student-context-bar
   summary panels (Summary, Evidenced Disability). Reduces from
   the default body size by ~20% to allow more content without
   visual heaviness. Labels (h5) stay at their existing size.
   ============================================================ */
.student-summary-body {
  font-size: 0.8em;
  line-height: 1.5;
}

/* ============================================================
   PLAN ADJUSTMENTS REPORT
   /dashboard/reports/plan-adjustments
   - Report summary line, count badge, plan-link, adjustment chips.
   - All visual styling lives here (per design-rules.yaml css_policy).
   - Plan status rendered with shared .status-pill family.
   ============================================================ */
.report-summary {
  font-size: var(--font-size-base, 12px);
  color: var(--text-secondary, #4B5563);
}

.pa-row:hover {
  background-color: var(--surface-3, #F3F4F6);
}

.pa-table .link-button {
  border: 0;
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  font: inherit;
  font-weight: var(--font-weight-medium, 500);
  text-align: left;
  cursor: pointer;
}

.pa-table .link-button:hover,
.pa-table .plan-link:hover {
  text-decoration: underline;
  color: var(--text-primary);
}

/* Neutral count badge — half-strength border like the canonical badge family */
.pa-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 2px var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-3, #F3F4F6);
  border: 1px solid var(--border-subtle, #E5E7EB);
  color: var(--text-secondary, #4B5563);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
[data-bs-theme="dark"] .pa-count-badge,
[data-theme="dark"] .pa-count-badge {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

.pa-table .plan-entry {
  padding: var(--space-2, 8px) 0;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
}
.pa-table .plan-entry:first-child { padding-top: 0; }
.pa-table .plan-entry:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pa-table .plan-entry-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.pa-table .plan-link {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
}

.pa-table .plan-count {
  color: var(--text-muted, #6B7280);
  font-size: 11px;
}

/* Adjustments under a plan — vertical tree with horizontal connectors.
   Same convention as student-plans-journal adjustments + admin sidebar nesting:
   parent has a left border (the trunk), each child draws a short ::before
   horizontal stub to its label. */
.pa-table .adjustment-list {
  list-style: none;
  margin: var(--space-1, 4px) 0 0 6px;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--border-subtle, #E5E7EB);
}

.pa-table .adjustment-item {
  position: relative;
  padding: 2px 0 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary, #4B5563);
}

.pa-table .adjustment-item::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0.7em;
  width: 10px;
  height: 0;
  border-top: 1px solid var(--border-subtle, #E5E7EB);
}

[data-bs-theme="dark"] .pa-table .adjustment-list,
[data-theme="dark"] .pa-table .adjustment-list {
  border-left-color: var(--border-subtle);
}
[data-bs-theme="dark"] .pa-table .adjustment-item,
[data-theme="dark"] .pa-table .adjustment-item {
  color: var(--text-secondary);
}
[data-bs-theme="dark"] .pa-table .adjustment-item::before,
[data-theme="dark"] .pa-table .adjustment-item::before {
  border-top-color: var(--border-subtle);
}

/* ====================================================
 * Sensitive content section
 * Used to wrap form sections or rows whose attached
 * file is restricted by the SENSITIVE_ADJUSTMENT or
 * SENSITIVE_CASE_NOTES feature.
 * ==================================================== */

:root {
  --border-sensitive: 2px solid var(--border-emphasis);
}

.is-sensitive {
  border: var(--border-sensitive);
  border-radius: 4px;
  padding: 8px;
  position: relative;
}

/* ─────────────────────────────────────────────────────────────
 * Inline field (invisible-input pattern)
 * Read-only and edit views are pixel-identical until you
 * hover/focus. Used by the journal-header inline editors.
 * Toggle parent: [data-edit-mode="on"] | "off"
 * ───────────────────────────────────────────────────────────── */
.inline-field {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: text;
  text-align: inherit;
  display: inline-block;
}

.inline-field::-ms-expand { display: none; }

[data-edit-mode="off"] .inline-field {
  pointer-events: none;
}

[data-edit-mode="on"] .inline-field {
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 80ms ease, outline-color 80ms ease;
}

[data-edit-mode="on"] .inline-field:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
  outline: 1px dashed var(--bs-border-color, #dee2e6);
  outline-offset: 2px;
}

[data-edit-mode="on"] .inline-field:focus,
[data-edit-mode="on"] .inline-field:focus-visible {
  outline: 1px solid var(--bs-primary, #3b82f6);
  outline-offset: 2px;
  background: var(--bs-body-bg, #fff);
}

[data-edit-mode="on"] .inline-field--select:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='%236c757d' d='M0 2l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 12px;
}

.inline-field--text {
  resize: none;
  overflow: hidden;
}

.inline-field-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bs-primary, #3b82f6);
  transform-origin: left;
  animation: inline-field-progress 1.2s infinite linear;
  pointer-events: none;
}

@keyframes inline-field-progress {
  0%   { transform: scaleX(0); opacity: 0.4; }
  50%  { transform: scaleX(0.6); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ============================================================
 * STAKEHOLDER ACTIONS DROPDOWN
 * Body-mounted (container="body") kebab menu used in plan tables.
 * Lives at the global scope because body-mounted dropdowns are
 * outside Angular's ViewEncapsulation and component CSS can't
 * reach them.
 * ============================================================ */
.stakeholder-actions-dropdown {
  background-color: var(--surface-1, #FFFFFF);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  z-index: 1080;
}

.stakeholder-actions-dropdown .dropdown-item {
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
}

.stakeholder-actions-dropdown .dropdown-item:hover,
.stakeholder-actions-dropdown .dropdown-item:focus {
  background-color: var(--surface-2, #F6F8FA);
}

[data-bs-theme="dark"] .stakeholder-actions-dropdown {
  background-color: var(--surface-2, #1F2630);
  border-color: var(--border-subtle, #30363D);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .stakeholder-actions-dropdown .dropdown-item:hover,
[data-bs-theme="dark"] .stakeholder-actions-dropdown .dropdown-item:focus {
  background-color: var(--surface-3, #2A313C);
}

/* ========================================================================
 * Plan Review Sankey (Junipa plans/review-history)
 *
 * Deliberate palette for the longitudinal review Sankey. Outside this block,
 * the plan-review feature uses existing design-system tokens. See:
 * docs/superpowers/specs/2026-05-28-plan-review-preview-and-history-design.md
 * ======================================================================== */

:root {
  /* Link colours encode change kind */
  --sankey-link-kept:          oklch(0.72 0.01 270);
  --sankey-link-modified:      oklch(0.72 0.14 75);
  --sankey-link-added:         oklch(0.65 0.13 145);
  --sankey-link-discontinued:  oklch(0.62 0.14 28);

  /* Node colours encode adjustment category */
  --sankey-node-cognitive:     oklch(0.55 0.17 255);
  --sankey-node-social:        oklch(0.60 0.15 145);
  --sankey-node-sensory:       oklch(0.65 0.17 50);
  --sankey-node-physical:      oklch(0.55 0.18 295);

  /* Opacity tokens used by the wrapper */
  --sankey-link-opacity:       0.55;
  --sankey-link-hover-opacity: 0.85;
}

[data-bs-theme="dark"] {
  --sankey-link-kept:          oklch(0.55 0.01 270);
  --sankey-link-modified:      oklch(0.78 0.12 75);
  --sankey-link-added:         oklch(0.74 0.13 145);
  --sankey-link-discontinued:  oklch(0.72 0.14 28);

  --sankey-node-cognitive:     oklch(0.70 0.15 255);
  --sankey-node-social:        oklch(0.72 0.14 145);
  --sankey-node-sensory:       oklch(0.75 0.16 50);
  --sankey-node-physical:      oklch(0.70 0.17 295);
}

/* ========================================
 * Contextual popover
 * Body-mounted explanation popover built by ContextualPopoverService
 * (.junipa-contextual-popover). Used for "Official NCCD wording" / "What
 * staff saw" help, and any inline ? trigger via data-junipa-contextual-popover.
 * ======================================== */
.junipa-contextual-popover {
  position: fixed;
  z-index: 2000;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  background: var(--surface-0, #ffffff);
  border: 1px solid var(--border-default, #D1D5DB);
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.14));
  font-family: var(--font-family, system-ui, sans-serif);
  color: var(--text-primary, #1F2937);
}

.junipa-contextual-popover__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.junipa-contextual-popover__icon {
  font-size: 13px;
  line-height: 1;
  color: var(--text-secondary, #6c757d);
}

.junipa-contextual-popover__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, #1F2937);
}

.junipa-contextual-popover__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.junipa-contextual-popover__row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.junipa-contextual-popover__row-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #9CA3AF);
}

.junipa-contextual-popover__row-value {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-primary, #1F2937);
}

.junipa-contextual-popover__body {
  margin: 0 0 8px;
}

.junipa-contextual-popover__body p {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary, #6c757d);
}

.junipa-contextual-popover__body p:last-child {
  margin-bottom: 0;
}

.junipa-contextual-popover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.junipa-contextual-popover__action {
  font-size: 11px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Tone accents — recolor the icon only (no left strip) */
.junipa-contextual-popover--info .junipa-contextual-popover__icon {
  color: oklch(0.55 0.16 255);
}
.junipa-contextual-popover--warning .junipa-contextual-popover__icon {
  color: oklch(0.62 0.16 75);
}
.junipa-contextual-popover--danger .junipa-contextual-popover__icon {
  color: oklch(0.55 0.20 28);
}

/* Dark mode */
[data-theme="dark"] .junipa-contextual-popover,
[data-bs-theme="dark"] .junipa-contextual-popover {
  background: var(--surface-1, #1F2937);
  border-color: var(--border-default, #374151);
  color: var(--text-primary, #F9FAFB);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.45));
}
[data-theme="dark"] .junipa-contextual-popover__title,
[data-bs-theme="dark"] .junipa-contextual-popover__title,
[data-theme="dark"] .junipa-contextual-popover__row-value,
[data-bs-theme="dark"] .junipa-contextual-popover__row-value {
  color: var(--text-primary, #F9FAFB);
}
[data-theme="dark"] .junipa-contextual-popover__body p,
[data-bs-theme="dark"] .junipa-contextual-popover__body p {
  color: var(--text-secondary, #9CA3AF);
}

/* ==========================================================================
   Info popover trigger — the inline "?" affordance that opens a
   .junipa-contextual-popover. Borderless icon button: no grey UA chrome,
   no boxed border. Just a muted glyph that brightens on hover.
   Used by census column headers (.census-help) + journal documents, etc.
   ========================================================================== */
.info-popover-trigger,
.census-help {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs, 3px);
  color: var(--text-muted, #9CA3AF);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.info-popover-trigger:hover,
.census-help:hover {
  color: var(--text-secondary, #4B5563);
  background: var(--hover-bg, rgba(15, 23, 42, 0.05));
}
.info-popover-trigger:focus-visible,
.census-help:focus-visible {
  outline: 2px solid var(--border-emphasis, #9CA3AF);
  outline-offset: 1px;
}
.info-popover-trigger > i,
.census-help > i {
  font-size: inherit;
  line-height: 1;
}
[data-theme="dark"] .info-popover-trigger:hover,
[data-bs-theme="dark"] .info-popover-trigger:hover,
[data-theme="dark"] .census-help:hover,
[data-bs-theme="dark"] .census-help:hover {
  color: var(--text-secondary, #9CA3AF);
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
}

/* ==========================================================================
   Grade sheet tabs — spreadsheet-style tab strip sitting flush on a table
   (All / Year 11 / Year 12 …). Each tab pairs a label with a count chip;
   the count is visually distinct and spaced from the label.
   ========================================================================== */
.grade-sheet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
}
.grade-sheet-tab {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--surface-2, #F3F4F6);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-bottom: 0;
  border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
  color: var(--text-secondary, #6B7280);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.grade-sheet-tab:hover {
  background: var(--surface-3, #E5E7EB);
  color: var(--text-primary, #1F2937);
}
.grade-sheet-tab.active {
  background: var(--surface-0, #ffffff);
  color: var(--text-primary, #1F2937);
  border-color: var(--border-default, #D1D5DB);
  font-weight: 600;
}
.grade-sheet-tab-label {
  white-space: nowrap;
}
.grade-sheet-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  background: var(--surface-3, #E5E7EB);
  border-radius: 999px;
  color: var(--text-muted, #6B7280);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.grade-sheet-tab.active .grade-sheet-tab-count {
  background: var(--selection-bg, rgba(13, 110, 253, 0.1));
  color: var(--selection-color, #0D6EFD);
}
[data-theme="dark"] .grade-sheet-tab,
[data-bs-theme="dark"] .grade-sheet-tab {
  background: var(--surface-1, #161B22);
  border-color: var(--border-subtle, #30363D);
  color: var(--text-secondary, #8B949E);
}
[data-theme="dark"] .grade-sheet-tab:hover,
[data-bs-theme="dark"] .grade-sheet-tab:hover {
  background: var(--surface-2, #21262D);
  color: var(--text-primary, #F0F6FC);
}
[data-theme="dark"] .grade-sheet-tab.active,
[data-bs-theme="dark"] .grade-sheet-tab.active {
  background: var(--surface-0, #0D1117);
  border-color: var(--border-default, #30363D);
  color: var(--text-primary, #F0F6FC);
}
[data-theme="dark"] .grade-sheet-tab-count,
[data-bs-theme="dark"] .grade-sheet-tab-count {
  background: var(--surface-3, #30363D);
  color: var(--text-muted, #8B949E);
}
[data-theme="dark"] .grade-sheet-tab.active .grade-sheet-tab-count,
[data-bs-theme="dark"] .grade-sheet-tab.active .grade-sheet-tab-count {
  background: rgba(255, 107, 53, 0.15);
  color: var(--cta-primary, #FF6B35);
}

/* ==========================================================================
   Builder shared primitives (promoted from report-builder + form-builder)
   Namespaced .builder-* so both the Report Builder and the Form Builder can
   consume one source of truth. Linear-inspired, max 4px radius, 10-12px type,
   4px spacing grid, OKLCH only. No side-stripe borders. No emoji, no hex.
   Apply .builder-scope on any wrapping element to seed the local token set;
   each primitive also self-seeds so it works standalone.
   ========================================================================== */

.builder-scope,
.builder-canvas,
.builder-side-tabs,
.builder-search,
.builder-catalog-section,
.builder-catalog-row,
.builder-source-tag {
  --builder-surface: var(--surface-2, oklch(99% 0.005 255));
  --builder-surface-muted: var(--surface-3, oklch(96% 0.007 255));
  --builder-border: var(--border-subtle, oklch(89% 0.01 255));
  --builder-border-strong: var(--border-default, oklch(82% 0.013 255));
  --builder-text: var(--text-primary, oklch(26% 0.025 255));
  --builder-text-muted: var(--text-secondary, oklch(45% 0.025 255));
  --builder-text-soft: var(--text-muted, oklch(63% 0.02 255));
  --builder-accent: var(--cta-primary, oklch(62% 0.19 45));
  --builder-focus: var(--cta-secondary, oklch(56% 0.14 235));
  --builder-grid-dot: color-mix(in oklch, var(--builder-text-soft) 34%, transparent);
}

/* 1. Dotted-grid canvas ---------------------------------------------------- */
.builder-canvas {
  background-color: color-mix(in oklch, var(--builder-surface-muted) 58%, var(--builder-surface));
  background-image: radial-gradient(circle, var(--builder-grid-dot, currentColor) 1px, transparent 1px);
  background-size: 12px 12px;
}

/* 2. Two-tab sidebar header (circle-plus + gear) --------------------------- */
.builder-side-tabs {
  display: flex;
  border-bottom: 1px solid var(--builder-border);
  background: var(--builder-surface);
}

.builder-side-tab-button {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 70px;
  padding: 10px 12px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--builder-text-muted);
  cursor: pointer;
  font-size: var(--font-size-xs, 10px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.builder-side-tab-button i {
  color: currentColor;
  font-size: 18px;
}

.builder-side-tab-button:hover:not(:disabled),
.builder-side-tab-button:focus-visible:not(:disabled) {
  background: var(--builder-surface-muted);
  color: var(--builder-text);
  outline: none;
}

.builder-side-tab-button.active {
  border-bottom-color: var(--builder-accent);
  background: var(--builder-surface);
  color: var(--builder-accent);
}

.builder-side-tab-button:disabled {
  cursor: default;
  opacity: 0.46;
}

/* 3. Search-fields input --------------------------------------------------- */
.builder-search {
  position: relative;
  display: block;
  width: 100%;
}

.builder-search > i {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  color: var(--builder-text-soft);
  font-size: 11px;
  pointer-events: none;
}

.builder-search input {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--builder-border-strong);
  border-radius: var(--radius-sm, 4px);
  background: var(--builder-surface);
  color: var(--builder-text);
  font-size: var(--font-size-sm, 11px);
  line-height: 1.2;
}

.builder-search > i + input {
  padding-left: 26px;
}

.builder-search input::placeholder {
  color: var(--builder-text-soft);
}

.builder-search input:focus {
  border-color: var(--builder-focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--builder-focus) 16%, transparent);
  outline: none;
}

/* 4. Field-group header block (title + subtitle) --------------------------- */
.builder-catalog-section {
  display: grid;
  gap: 2px;
  padding-top: var(--space-1, 4px);
}

.builder-catalog-heading {
  margin: 0;
  color: var(--builder-text-soft);
  font-size: var(--font-size-xs, 10px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.builder-catalog-subtitle {
  margin: 0;
  color: var(--builder-text-soft);
  font-size: var(--font-size-xs, 10px);
  font-weight: 500;
  line-height: 1.35;
}

/* 5. Field row: icon + copy + right-aligned tag ---------------------------- */
.builder-catalog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--builder-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--builder-surface);
  color: var(--builder-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.builder-catalog-row:hover,
.builder-catalog-row:focus-visible {
  border-color: color-mix(in oklch, var(--builder-focus) 32%, var(--builder-border-strong));
  background: var(--builder-surface-muted);
  outline: none;
}

.builder-catalog-row.is-selected {
  border-color: var(--builder-border-strong);
  background: var(--builder-surface-muted);
}

.builder-catalog-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  border: 1px solid var(--builder-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--builder-surface-muted);
  color: var(--builder-text-muted);
  font-size: 12px;
}

.builder-catalog-row:hover .builder-catalog-row-icon {
  border-color: color-mix(in oklch, var(--builder-accent) 25%, var(--builder-border));
  color: var(--builder-accent);
}

.builder-catalog-row-copy {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.builder-catalog-row-copy strong {
  display: block;
  color: var(--builder-text);
  font-size: var(--font-size-sm, 11px);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-catalog-row-copy small {
  display: block;
  color: var(--builder-text-soft);
  font-size: var(--font-size-xs, 10px);
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 6. Source tag (far-right pill) ------------------------------------------- */
.builder-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid var(--builder-border-strong);
  border-radius: var(--radius-sm, 4px);
  background: var(--builder-surface);
  color: var(--builder-text-muted);
  font-size: var(--font-size-xs, 10px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.builder-source-tag i {
  font-size: 11px;
  line-height: 1;
}

/* Junipa = neutral/brandy text pill, no accent fill */
.builder-source-tag--junipa {
  border-color: color-mix(in oklch, var(--builder-accent) 24%, var(--builder-border-strong));
  background: color-mix(in oklch, var(--builder-accent) 8%, var(--builder-surface));
  color: color-mix(in oklch, var(--builder-accent) 62%, var(--builder-text));
}

/* file + external = subtle neutral pills */
.builder-source-tag--file,
.builder-source-tag--external {
  border-color: var(--builder-border-strong);
  background: var(--builder-surface-muted);
  color: var(--builder-text-muted);
}

/* Dark variants ------------------------------------------------------------ */
[data-theme="dark"] .builder-scope,
[data-bs-theme="dark"] .builder-scope,
[data-theme="dark"] .builder-canvas,
[data-bs-theme="dark"] .builder-canvas,
[data-theme="dark"] .builder-side-tabs,
[data-bs-theme="dark"] .builder-side-tabs,
[data-theme="dark"] .builder-search,
[data-bs-theme="dark"] .builder-search,
[data-theme="dark"] .builder-catalog-section,
[data-bs-theme="dark"] .builder-catalog-section,
[data-theme="dark"] .builder-catalog-row,
[data-bs-theme="dark"] .builder-catalog-row,
[data-theme="dark"] .builder-source-tag,
[data-bs-theme="dark"] .builder-source-tag {
  --builder-surface: var(--surface-2, oklch(20% 0.02 255));
  --builder-surface-muted: var(--surface-3, oklch(25% 0.025 255));
  --builder-border: var(--border-default, oklch(33% 0.025 255));
  --builder-border-strong: var(--border-strong, oklch(40% 0.025 255));
  --builder-text: var(--text-primary, oklch(92% 0.012 255));
  --builder-text-muted: var(--text-secondary, oklch(72% 0.018 255));
  --builder-text-soft: var(--text-muted, oklch(58% 0.018 255));
  --builder-accent: var(--cta-primary-dark, oklch(70% 0.17 45));
  --builder-focus: var(--cta-secondary-dark, oklch(74% 0.12 235));
  --builder-grid-dot: color-mix(in oklch, var(--builder-text-soft) 34%, transparent);
}

/* ============================================================
 * Email Activity (inbound student-email triage)
 * Flat semantic <table class="admin-table email-activity-table">.
 * Minimal borders (hairline header only), inline attachment quick-preview.
 * ============================================================ */
.email-activity-container {
  padding: var(--space-3, 12px);
}

.email-activity-empty {
  text-align: center;
  padding: var(--space-6, 32px) var(--space-3, 12px);
  color: var(--text-muted);
  font-size: var(--font-size-base, 12px);
}
.email-activity-empty i {
  display: block;
  font-size: 22px;
  margin-bottom: var(--space-2, 8px);
  opacity: 0.6;
}
.email-activity-empty p {
  margin: 0;
}

/* Hairline-only rows: kill heavy cell borders, keep a faint row separator. */
.email-activity-table.admin-table td {
  border-bottom: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.12));
  vertical-align: top;
  font-size: var(--font-size-base, 12px);
}
.email-activity-table.admin-table tbody tr:hover td {
  background-color: var(--surface-2);
}

.email-activity-table .ea-received {
  white-space: nowrap;
  color: var(--text-secondary);
}
.email-activity-table .ea-from-name {
  font-weight: var(--font-weight-medium, 500);
}
.email-activity-table .ea-from-raw {
  color: var(--text-secondary);
}
.email-activity-table .ea-unmatched,
.email-activity-table .ea-none {
  color: var(--text-muted);
  font-style: italic;
}
.email-activity-table .ea-subject {
  max-width: 220px;
}

.email-activity-table .ea-link-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-1, 4px);
  font-size: var(--font-size-xs, 10px);
  color: var(--cta-secondary, #2563eb);
  cursor: pointer;
}
.email-activity-table .ea-link-btn:hover {
  text-decoration: underline;
}

/* Inline attachment quick-preview chips */
.email-activity-table .ea-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  max-width: 160px;
  margin: 0 var(--space-1, 4px) var(--space-1, 4px) 0;
  padding: 2px var(--space-1, 4px);
  border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.16));
  border-radius: 4px;
  font-size: var(--font-size-xs, 10px);
  color: var(--text-primary);
  text-decoration: none;
}
.email-activity-table .ea-attachment-chip:hover {
  background-color: var(--surface-3);
}
.email-activity-table .ea-attachment-thumb {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
}
.email-activity-table .ea-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-activity-table .ea-icon-btn {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px var(--space-1, 4px);
  margin-left: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.email-activity-table .ea-icon-btn:hover {
  background-color: var(--surface-3);
  color: var(--text-primary);
}
.email-activity-table .ea-icon-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.email-activity-table .ea-icon-btn--danger:hover {
  color: var(--status-error, #dc2626);
}
.email-activity-table .ea-icon-btn--on {
  color: var(--status-success, #16a34a);
}

.email-activity-table .ea-body-row td {
  background-color: var(--surface-2);
}
.email-activity-table .ea-body-preview {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary);
}

/* ============================================================
 * Email Attachment Picker (junipa-email-attachment-picker)
 * Inline quick-preview popover listing recent student email attachments,
 * unactioned first. Minimal borders, 4px radius max.
 * ============================================================ */
.email-attach-picker {
  position: relative;
  display: inline-block;
}
.email-attach-picker__trigger {
  appearance: none;
  background: none;
  border: 1px solid var(--border-default, rgba(127, 127, 127, 0.24));
  border-radius: 4px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary);
  cursor: pointer;
}
.email-attach-picker__trigger:hover {
  background-color: var(--surface-3);
  color: var(--text-primary);
}
.email-attach-picker__panel {
  position: absolute;
  z-index: 1050;
  top: calc(100% + var(--space-1, 4px));
  left: 0;
  width: 320px;
  max-height: 320px;
  overflow: auto;
  background-color: var(--surface-1, #fff);
  border: 1px solid var(--border-default, rgba(127, 127, 127, 0.24));
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.email-attach-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.12));
}
.email-attach-picker__close {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
}
.email-attach-picker__loading,
.email-attach-picker__empty {
  padding: var(--space-3, 12px);
  text-align: center;
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted);
}
.email-attach-picker__list {
  list-style: none;
  margin: 0;
  padding: var(--space-1, 4px);
}
.email-attach-picker__group {
  padding: var(--space-1, 4px) 0;
}
.email-attach-picker__group + .email-attach-picker__group {
  border-top: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.12));
}
.email-attach-picker__group-meta {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted);
}
.email-attach-picker__from {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-attach-picker__att {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  border-radius: 4px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-base, 12px);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.email-attach-picker__att:hover {
  background-color: var(--surface-3);
}
.email-attach-picker__att:disabled {
  opacity: 0.5;
  cursor: default;
}
.email-attach-picker__thumb {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 3px;
  flex: 0 0 auto;
}
.email-attach-picker__att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 * Activity-type badge: Email attachment provenance variant.
 * Composes with the base .activity-type-badge layout (page-scoped in the
 * activity-log viewer). Distinct violet accent, <=4px radius, 10-12px text.
 * ============================================================ */
.activity-type-badge--email-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #c8bdf0;
  background: #f4f1fc;
  color: #4c3a91;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
}
.activity-type-badge--email-attachment .activity-type-badge__icon {
  color: #6d54c7;
}
[data-bs-theme="dark"] .activity-type-badge--email-attachment {
  border-color: rgba(141, 116, 224, 0.4);
  background: rgba(109, 84, 199, 0.16);
  color: #c4b6f2;
}
[data-bs-theme="dark"] .activity-type-badge--email-attachment .activity-type-badge__icon {
  color: #b3a2ee;
}

/* ============================================================
 * ACTIVITY-TYPE BADGE — canonical, design-system-owned (2026-06-29)
 *
 * Promoted out of student-activity-log.component.css (was page-scoped, so the
 * NCCD/Evidence variant had no base style and rendered INVISIBLE in light mode,
 * and the teacher-activity page got nothing). One subtle badge used everywhere
 * an activity type is shown — journal Recent Activity AND the teacher/staff
 * activity-type column.
 *
 * Taxonomy:
 *  - Base (.activity-type-badge): subtle neutral chip — Case note, Evidence,
 *    Planned adjustment all share this exact look (same weight, same case).
 *  - --signature: BLUE (student signature / signature received).
 *  - --signature-requested: GREY (awaiting signature).
 *  - Modifiers compose on top of the base (border/bg/colour overrides only).
 * Non-uppercase, 11px, weight 600, <=4px radius — Linear-subtle.
 * ============================================================ */
.activity-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 8px;
  border: 1px solid var(--border-default, #c9d0d8);
  background: var(--surface-1, #f6f8fa);
  color: var(--text-secondary, #3f4752);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  line-height: 1.2;
  border-radius: 4px;
  white-space: nowrap;
}
.activity-type-badge__icon {
  color: var(--text-muted, #6b7280);
  font-size: 0.85em;
  line-height: 1;
}
/* NCCD / Evidence + Case note + Planned adjustment all inherit the base subtle
   look — no per-variant colour so they read as one consistent family. */
.activity-type-badge--nccd .activity-type-badge__icon,
.activity-type-badge--case-note .activity-type-badge__icon {
  color: var(--text-muted, #6b7280);
}

/* Signature RECEIVED / student signature — blue. */
.activity-type-badge--signature {
  border-color: #bcdcff;
  background: #eaf3ff;
  color: #1d4ed8;
}
.activity-type-badge--signature .activity-type-badge__icon {
  color: #2563eb;
}
/* Signature REQUESTED (awaiting) — grey, same subtle neutral as the base. */
.activity-type-badge--signature-requested {
  border-color: var(--border-default, #c9d0d8);
  background: var(--surface-1, #f6f8fa);
  color: var(--text-secondary, #3f4752);
}

[data-bs-theme="dark"] .activity-type-badge {
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.5));
  background: var(--surface-2, #161b22);
  color: var(--text-secondary, #c9d1d9);
}
[data-bs-theme="dark"] .activity-type-badge__icon,
[data-bs-theme="dark"] .activity-type-badge--nccd .activity-type-badge__icon,
[data-bs-theme="dark"] .activity-type-badge--case-note .activity-type-badge__icon {
  color: var(--text-muted, #8b949e);
}
[data-bs-theme="dark"] .activity-type-badge--signature {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(37, 99, 235, 0.16);
  color: #93c5fd;
}
[data-bs-theme="dark"] .activity-type-badge--signature .activity-type-badge__icon {
  color: #93c5fd;
}
[data-bs-theme="dark"] .activity-type-badge--signature-requested {
  border-color: var(--border-subtle, rgba(48, 54, 61, 0.5));
  background: var(--surface-2, #161b22);
  color: var(--text-secondary, #c9d1d9);
}

/* ── Report import: upload callout + Data-map import strip ───────────────── */
/* Bordered info callout shown after a file upload, offering to map it. */
.ds-import-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  background: var(--bs-tertiary-bg);
  font-size: 12px;
  line-height: 1.4;
}
.ds-import-callout .bi { margin-top: 1px; color: var(--bs-secondary-color); }
.ds-import-callout a { font-weight: 500; }
.ds-import-callout--warn {
  border-color: #d9a400;
  background: rgba(217, 164, 0, 0.08);
}
.ds-import-callout--warn .bi { color: #d9a400; }

/* Inline controls on a Data-map source card: header-row + cohort handling. */
.ds-import-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-top: 1px solid var(--bs-border-color);
  font-size: 11px;
}
.ds-import-strip label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bs-secondary-color);
  margin: 0;
}
.ds-import-strip input[type="number"],
.ds-import-strip select {
  height: 22px;
  padding: 0 4px;
  font-size: 11px;
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.ds-import-strip input[type="number"] { width: 52px; }
.ds-import-strip .ds-import-warn { color: #d9a400; }

/* Suggestion chip for a fuzzy-matched column target. */
.ds-suggestion-chip {
  border: 1px dashed var(--bs-border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.ds-suggestion-chip:hover {
  border-style: solid;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ds-import-callout { background: rgba(255, 255, 255, 0.03); }

/* ── Off-campus schedule state chips (shared: lens + day-editor) ───────────── */
/* Reusable day-state chip for the Off-Campus Coverage calendar grid. */
.oc-state-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.oc-state-chip--off {
  background: rgba(217, 119, 6, 0.12);
  color: #B45309;
}
.oc-state-chip--prov {
  background: rgba(37, 99, 235, 0.12);
  color: #1D4ED8;
}
.oc-state-chip--on {
  background: rgba(22, 163, 74, 0.12);
  color: #15803D;
}
.oc-state-chip--none {
  background: var(--bs-secondary-bg, #EEF2F7);
  color: var(--bs-secondary-color, #5D6673);
}
[data-bs-theme="dark"] .oc-state-chip--none {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bs-secondary-color, #9AA4B2);
}

/* ----------------------------------------
 * plan-link field — "Connect to existing plans" picker (no free text).
 * Chips for connected plans + a select-and-add row. On-brand, light + dark.
 * ---------------------------------------- */
.plan-link-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plan-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  font-size: 12px;
  border-radius: 4px;
  color: var(--bs-body-color, #1F2937);
  background: var(--bs-tertiary-bg, #F1F5F9);
  border: 1px solid var(--bs-border-color, #DEE2E6);
}
.plan-link-chip > i {
  color: var(--bs-secondary-color, #6C757D);
  font-size: 13px;
}
.plan-link-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--bs-secondary-color, #6C757D);
  border-radius: 4px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
}
.plan-link-chip-remove:hover {
  color: var(--bs-danger, #dc3545);
}
.plan-link-add {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 50%;
}
/* "Choose a plan…" select — half width by default, brand DOWN CHEVRON, and the
   same height as the Connect-plan button beside it. */
.plan-link-select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
}
[data-bs-theme="dark"] .plan-link-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B949E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
/* Connect-plan button matches the select height exactly. */
.plan-link-add-btn {
  flex: 0 0 auto;
  height: 32px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.plan-link-empty {
  margin: 0;
  font-size: 11px;
  color: var(--bs-secondary-color, #6C757D);
}
[data-bs-theme="dark"] .plan-link-chip {
  background: rgba(255, 255, 255, 0.04);
}

/* ----------------------------------------
 * .plan-type-badge — shows a plan's type/category (e.g. "Off-campus") in the
 * plan view header beside the status badge. On-brand, light + dark.
 * ---------------------------------------- */
.plan-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  color: var(--bs-primary-text-emphasis, #1D4ED8);
  background: rgba(var(--bs-primary-rgb, 37,99,235), 0.1);
  border: 1px solid rgba(var(--bs-primary-rgb, 37,99,235), 0.25);
}

/* ── Student not-found notice ──────────────────────────────────────────────
   A centred, document-style card shown when a student UID doesn't resolve
   (bad/expired link, archived record). Reads like a small notice sheet with
   clear ways back — not a bare inline message. */
.student-not-found {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 1rem;
    min-height: 60vh;
}
.student-not-found__card {
    width: 100%;
    max-width: 440px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 2.5rem 2rem;
    text-align: center;
}
.student-not-found__icon {
    font-size: 2rem;
    color: var(--bs-secondary-color, #6b7280);
    display: block;
    margin-bottom: 0.75rem;
}
.student-not-found__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--bs-body-color, #111827);
}
.student-not-found__body {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6b7280);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.student-not-found__actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
[data-bs-theme="dark"] .student-not-found__card {
    background: var(--bs-body-bg, #1a1d20);
    border-color: var(--bs-border-color, #374151);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   ORGANISATION SHARED PLAN TEMPLATE BADGE + POPOVER
   Templates published across an organisation by the org portal.
   Info-blue tinted badge opens a small popover listing the org
   and the school names the template is shared with.
   ============================================================ */

.org-shared-source-wrap {
  position: relative;
  display: inline-block;
}

.org-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
  white-space: nowrap;
}

.org-shared-badge:hover {
  border-color: #93c5fd;
}

[data-bs-theme="dark"] .org-shared-badge {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

.org-shared-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 10px 12px;
  z-index: 1060;
  text-align: left;
}

.org-shared-popover-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bs-body-color, #1f2937);
  margin-bottom: 4px;
}

.org-shared-popover-org {
  font-size: 11px;
  color: var(--bs-secondary-color, #6b7280);
  margin-bottom: 6px;
}

.org-shared-popover-school {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--bs-body-color, #1f2937);
  padding: 2px 0;
}

.org-shared-popover-school i {
  color: var(--bs-secondary-color, #6b7280);
}

.org-shared-popover-origin-tag {
  font-size: 10px;
  color: var(--bs-secondary-color, #9ca3af);
}

[data-bs-theme="dark"] .org-shared-popover {
  background: var(--bs-body-bg, #1a1d20);
  border-color: var(--bs-border-color, #374151);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ========================================
 * Evidence Canvas (auditor)
 * Infinite zoomable canvas rendering student evidence as printed
 * A4 pages. Viewport sets --evc-zoom / --evc-pan-x / --evc-pan-y
 * and applies translate3d/scale on .evc-content (origin 0 0).
 * ======================================== */
/* Fills the routed content area (below the dashboard header/toolbar) rather than
   the whole viewport — the toolbar is projected into the global header slot, so
   the canvas must not escape over it. The component sets an exact pixel height on
   this element at runtime (--evc-h) from window.innerHeight − its top; the calc()
   is only a first-paint fallback before that measurement lands. */
.evc-host { display: block; width: 100%; min-width: 0; }
.evc-root { position: relative; display: flex; flex-direction: column; overflow: hidden;
    height: var(--evc-h, calc(100dvh - var(--evc-top, 120px))); min-height: 320px; }
.evc-viewport { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab;
    outline: none; background: var(--surface-0); user-select: none; -webkit-user-select: none; }
.evc-viewport.evc-grabbing { cursor: grabbing; }
.evc-grid-bg { position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(120,120,130,.22) 1px, transparent 1px);
    background-size: calc(48px * var(--evc-zoom)) calc(48px * var(--evc-zoom));
    background-position: var(--evc-pan-x) var(--evc-pan-y);
    opacity: clamp(0, calc(var(--evc-zoom) * 4), .6); }
.evc-content { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.evc-content > * { position: absolute; top: 0; left: 0; }
.evc-animate-rows junipa-evidence-canvas-page,
.evc-animate-rows .evc-chip { transition: transform .4s cubic-bezier(.2,.8,.2,1); }

/* Printed A4 page — deliberately hardcoded paper colours (a printout is the
   same in light and dark mode); serif face signals "document", not UI.
   Tighter padding + a small safety pad at the bottom so packed rows never crop. */
.evc-page { position: relative; width: 794px; height: 1123px; background: #fff; color: #1a1a1e;
    border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
    padding: 40px 40px 30px; display: flex; flex-direction: column; overflow: hidden;
    font-family: Georgia, 'Times New Roman', serif; }
.evc-page--placeholder .evc-skeleton { flex: 1;
    background: repeating-linear-gradient(#eceef1 0 14px, transparent 14px 30px); border-radius: 2px; }
.evc-skeleton { flex: 1; background: repeating-linear-gradient(#f3f4f6 0 14px, transparent 14px 30px); }
.evc-page-header { border-bottom: 2px solid #1a1a1e; padding-bottom: 14px; margin-bottom: 16px; }
.evc-page-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.evc-page-headmain { flex: 1 1 auto; min-width: 0; }
.evc-page-name { font-size: 24px; font-weight: 700; margin: 0 0 10px; cursor: pointer; }
.evc-page-name:hover { text-decoration: underline; }
.evc-page-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 24px; margin: 0; font-size: 12px; }
.evc-page-meta dt { font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: .04em; color: #5a5a64; }
.evc-page-meta dd { margin: 0; }

/* Snapshot: two stacked boxes at the top-right of page 1 — staff count (top) and
   contemporaneous average (bottom). Mirrors the journal adjustment snapshot. */
.evc-snapshot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; width: 160px; }
.evc-snapshot-box { position: relative; border: 1px solid #d4d5da; border-radius: 4px;
    padding: 7px 10px; text-align: center; }
.evc-snapshot-val { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; }
.evc-snapshot-lbl { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em;
    color: #5a5a64; margin-top: 2px; }

/* Clickable staff box → grouped activity view (right arrow affordance). */
.evc-snapshot-box--link { display: block; width: 100%; background: #fff; cursor: pointer;
    font: inherit; color: inherit; transition: background .12s, border-color .12s; }
.evc-snapshot-box--link:hover { background: #f5f7fb; border-color: #b7bdc9; }
.evc-snapshot-arrow { position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    font-size: 12px; color: #8a8a94; }
.evc-snapshot-box--link:hover .evc-snapshot-arrow { color: #2b62d9; }

/* Contemporaneous-average info button + popover (self-contained on the page). */
.evc-info-btn { border: none; background: transparent; padding: 0 0 0 2px; cursor: pointer;
    color: #9a9aa2; font-size: 10px; line-height: 1; vertical-align: middle; }
.evc-info-btn:hover { color: #2b62d9; }
.evc-info-pop { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 6px);
    transform: translateX(-50%); width: 210px; padding: 8px 10px; border-radius: 6px;
    background: #1f2430; color: #fff; font-size: 10px; line-height: 1.45; text-align: left;
    text-transform: none; letter-spacing: 0; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.evc-info-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #1f2430; }

/* Left gutter margin annotation (page 1 only): weeks / attachments / staff. */
.evc-gutter { position: absolute; left: -132px; top: 40px; width: 116px;
    display: flex; flex-direction: column; gap: 14px; text-align: right;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.evc-gutter-stat { display: flex; flex-direction: column; align-items: flex-end; }
.evc-gutter-val { font-size: 22px; font-weight: 700; line-height: 1; color: #3a3a44; }
.evc-gutter-lbl { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em;
    color: #9a9aa2; line-height: 1.25; margin-top: 3px; }

/* Fixed layout so the notes/evidence columns wrap within a real column box and
   rows grow to fit their content (no 2-line clamp, no mid-row crop). */
.evc-page-table { width: 100%; border-collapse: collapse; font-size: 11px; line-height: 1.35;
    table-layout: fixed; }
.evc-page-table th { text-align: left; border-bottom: 1.5px solid #1a1a1e; padding: 3px 6px;
    font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.evc-page-table td { border-bottom: 1px solid #e2e3e8; padding: 5px 6px; vertical-align: top;
    overflow-wrap: anywhere; word-break: normal; }
.evc-col-date   { width: 72px; }
.evc-col-cat    { width: 96px; }
.evc-col-ev     { width: 206px; }
.evc-col-loc    { width: 82px; }
.evc-col-notes  { width: auto; }
.evc-col-attach { width: 62px; }
.evc-attach span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 10px; }
.evc-attach i { margin-right: 3px; }
.evc-page-empty { color: #5a5a64; }
.evc-page-retry { margin: auto; }

/* Hover action bar per page — subdued, modelled on the plan-template
   field-actions-toolbar (appears on page hover, sits top-right on the paper). */
.evc-page-actions { position: absolute; top: 10px; right: 12px; z-index: 2;
    display: flex; background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
    opacity: 0; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease;
    pointer-events: none; }
.evc-page:hover .evc-page-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
.evc-page-action { background: transparent; border: none; padding: 6px 9px; color: #6b7280;
    cursor: pointer; display: flex; align-items: center; font-size: 13px; line-height: 1; }
.evc-page-action + .evc-page-action { border-left: 1px solid #e5e7eb; }
.evc-page-action:hover { background: #f3f4f6; color: #374151; }
.evc-page-action:first-child { border-radius: 6px 0 0 6px; }
.evc-page-action:last-child { border-radius: 0 6px 6px 0; }

/* Footer: small subdued logo (left), page counter (centre), print timestamp
   (right). No italics, no em-dash anywhere. */
.evc-page-footer { margin-top: auto; padding-top: 10px; font-size: 9.5px; color: #9a9aa2;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid #ececf0; margin-top: 12px; }
.evc-footer-brand { display: inline-flex; align-items: center; opacity: .55; }
.evc-footer-logo { height: 13px; width: auto; }
.evc-footer-page { text-align: center; }
.evc-footer-printed { text-align: right; font-style: normal; }

.evc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
    border: 1px solid var(--border-subtle); border-radius: 4px; background: var(--surface-2);
    color: var(--text-primary); font-size: 11px; white-space: nowrap; cursor: pointer;
    transform-origin: 0 0; }
.evc-chip-count { font-weight: 600; }

/* Projected into the dashboard's global toolbar slot. Two stacked rows:
   row 1 = back / drawer toggle / print; row 2 = year/sort/filters/zoom. */
.evc-toolbar { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 2px; }
.evc-toolbar-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow-x: auto; }
.evc-toolbar-row--controls { border-top: 1px solid var(--border-subtle); padding-top: 6px; }
.evc-toolbar-row > * { flex: 0 0 auto; }
.evc-toolbar-spacer { flex: 1 1 auto !important; min-width: 8px; }
.evc-toolbar .btn, .evc-toolbar .form-select, .evc-toolbar .form-control {
    display: inline-flex; align-items: center; height: 30px; }
.evc-toolbar .btn { justify-content: center; }
.evc-toolbar .btn i { line-height: 1; }
/* Student count + zoom %: a touch smaller and muted. */
.evc-toolbar-stat { display: inline-flex; align-items: center; font-size: 10.5px;
    color: var(--text-secondary, #8a8a94); }

/* Canvas selects: proper down-chevron (not the solid triangle) and vertically
   centred, legible text (the global .form-select over-pads for this small size). */
.evc-select {
    padding: 3px 26px 3px 10px !important;
    line-height: 1.1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%236E7681' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 13px !important; }
[data-bs-theme="dark"] .evc-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%238B949E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important; }

/* Step-1 intro modal (reusable singleton pattern; canvas dimmed behind). */
.evc-intro-backdrop { position: absolute; inset: 0; z-index: 20; background: rgba(15,17,21,.5);
    display: flex; align-items: center; justify-content: center; padding: 24px; }
.evc-intro { width: 460px; max-width: 100%; padding: 28px; border-radius: 12px; text-align: center;
    background: var(--surface-0); color: var(--text-primary);
    border: 1px solid var(--border-subtle); box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.evc-intro-icon { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: var(--cta-secondary, #eef1f6); color: var(--cta-primary, #2b62d9); }
.evc-intro-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.evc-intro-lead { margin: 0 0 22px; font-size: 13px; line-height: 1.55; color: var(--text-secondary, #5a5a64); }
.evc-intro-actions { display: flex; gap: 10px; justify-content: center; }

/* Help panel — a compact floating card at the canvas bottom-right (not a blocking
   modal). Dismiss with the top-right ✕; reopen from the toolbar ? button. */
.evc-help { position: absolute; right: 16px; bottom: 16px; z-index: 10; width: 300px;
    border-radius: 8px; background: var(--surface-2); color: var(--text-primary);
    border: 1px solid var(--border-subtle); box-shadow: 0 8px 28px rgba(0,0,0,.22);
    font-size: 11.5px; overflow: hidden; }
.evc-help-head { display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.evc-help-title { margin: 0; font-size: 12px; font-weight: 600; }
.evc-help-close { border: none; background: transparent; color: var(--text-secondary, #8a8a94);
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer; font-size: 12px; }
.evc-help-close:hover { background: var(--surface-1, rgba(0,0,0,.06)); color: var(--text-primary); }
.evc-help-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.evc-help-section { }
.evc-help-subtitle { margin: 0 0 4px; font-size: 9.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-secondary, #8a8a94); }
.evc-help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.evc-help-list li { line-height: 1.4; }

/* Dark mode: pages stay paper-white by design (a printout on a dark desk);
   chrome (chips, toolbar, help, grid) follows tokens automatically. */
[data-bs-theme="dark"] .evc-grid-bg {
    background-image: radial-gradient(circle, rgba(200,200,215,.16) 1px, transparent 1px); }
[data-bs-theme="dark"] .evc-page { box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35); }

/* ============================================================
   DOCX rendered-HTML preview (.sjd-preview-doc-html)
   Server-converted (mammoth), sanitised document HTML injected via
   [innerHTML] — no _ngcontent scoping, so child rules must be global.
   Paper metaphor: content stays on a white page in both themes.
   ============================================================ */
.sjd-preview-doc-html { font-size: 12px; line-height: 1.6; color: #1a1a1a; }
.sjd-preview-doc-html p { margin: 0 0 8px; }
.sjd-preview-doc-html h1, .sjd-preview-doc-html h2, .sjd-preview-doc-html h3,
.sjd-preview-doc-html h4, .sjd-preview-doc-html h5, .sjd-preview-doc-html h6 {
    margin: 16px 0 8px; line-height: 1.3; color: #111; }
.sjd-preview-doc-html h1 { font-size: 18px; }
.sjd-preview-doc-html h2 { font-size: 16px; }
.sjd-preview-doc-html h3 { font-size: 14px; }
.sjd-preview-doc-html h4, .sjd-preview-doc-html h5, .sjd-preview-doc-html h6 { font-size: 12px; }
.sjd-preview-doc-html ul, .sjd-preview-doc-html ol { margin: 0 0 8px; padding-left: 20px; }
.sjd-preview-doc-html li { margin-bottom: 2px; }
.sjd-preview-doc-html table { border-collapse: collapse; width: 100%; margin: 8px 0 12px; }
.sjd-preview-doc-html th, .sjd-preview-doc-html td {
    border: 1px solid #d5d5d5; padding: 4px 8px; vertical-align: top; text-align: left; }
.sjd-preview-doc-html th { background: #f4f4f4; font-weight: 600; }
.sjd-preview-doc-html img { max-width: 100%; height: auto; }
.sjd-preview-doc-html blockquote {
    margin: 8px 0; padding: 4px 12px; border-left: 3px solid #d5d5d5; color: #555; }
.sjd-preview-doc-html hr { border: 0; border-top: 1px solid #e2e2e2; margin: 12px 0; }
.sjd-preview-doc-html a { color: #0b5ed7; text-decoration: underline; }
/* Dark mode: the page itself stays paper-white (set on the container in the
   component sheet), so content colors are unchanged by design. */

/* Back-ported from junipa copy (drift): badges wrapper on Activity log rows. */
.activity-type-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================================================
   EXPANDABLE STAFF GROUP TABLE  (.cn-staff-table)
   ONE real <table>. Staff members are <tr> rows in the same
   table as the <thead>; expanding a staff member reveals their
   case notes as further <tr> rows in that SAME <tbody> (the
   standard expandable-row pattern). There is no nested table
   and no CSS-faked row: `closest('table')` resolves for every
   row, so keyboard, screen readers and column widths all work.

   Promoted from /dashboard/reports/case-notes.

   Structure:
     table.admin-table.cn-staff-table
       > colgroup  (fixes the column geometry across both row types)
       > thead > tr > th.sortable
       > tbody
           > tr.cn-staff-row      (the staff member; .row-expanded when open)
               > td.td-expand > button.btn-expand
           > tr.cn-subhead-row    (column labels for the notes beneath)
           > tr.cn-note-row       (one case note)
           > tr.cn-more-row       (truncation notice)
   ============================================================ */

/* Column geometry. The first-name column is sized to hold a name and no more,
   so the first and last name read as one adjacent name pair rather than
   drifting apart across the row. Email takes the slack.

   `table-layout: fixed` is load-bearing, not cosmetic. With `auto` the browser
   must measure EVERY cell in the table to resolve column widths, so expanding
   85 staff members (1,300+ note rows, each holding a paragraph of free text)
   triggered a full-table remeasure and produced ~850ms of long tasks. Fixed
   layout resolves the columns from this colgroup alone, so expanding is O(new
   rows) instead of O(all rows) and the main thread stays free. */
.cn-staff-table {
  table-layout: fixed;
  width: 100%;
}

.cn-staff-table .cn-col-expand { width: 40px; }
.cn-staff-table .cn-col-first { width: 132px; }
.cn-staff-table .cn-col-last { width: 132px; }
.cn-staff-table .cn-col-email { width: auto; }
.cn-staff-table .cn-col-num { width: 120px; }
.cn-staff-table .cn-col-actions { width: 148px; }

/* Fixed layout will not shrink-to-fit, so long note text must wrap rather
   than overflow its column. */
.cn-staff-table .cn-note-cell {
  white-space: normal;
  word-break: break-word;
}

.cn-staff-table .cn-staff-row {
  cursor: pointer;
}

.cn-staff-table .cn-staff-name {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
  white-space: nowrap;
}

.cn-staff-table .cn-staff-email {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

/* Sub-header naming the columns of the expanded case notes. It sits INSIDE
   the same tbody, so it uses the shared admin-table th typography rather
   than a second visual language. */
.cn-staff-table .cn-subhead-row th {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.cn-staff-table .cn-subhead-row td,
.cn-staff-table .cn-more-row td,
.cn-staff-table .cn-note-row td {
  background-color: var(--surface-2);
}

.cn-staff-table .cn-note-row {
  cursor: pointer;
}

.cn-staff-table .cn-note-row:hover td {
  background-color: var(--surface-3);
}

.cn-staff-table .cn-more-row td {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-secondary);
}

.cn-staff-table .cn-more-row .btn {
  height: 24px;
  padding: 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 10px);
}

/* Pagination controls must LOOK clickable. Historically these were bare <a>
   elements with no href, which UA-defaults to cursor:auto — the control read
   as static text and users concluded paging was broken. Buttons are the
   correct element; this normalises them inside .table-pagination. */
.table-pagination .pagination .page-link {
  cursor: pointer;
  font-family: inherit;
  line-height: 1.5;
  border-width: 1px;
  border-style: solid;
}

.table-pagination .pagination .page-link:disabled,
.table-pagination .pagination .page-item.disabled .page-link {
  cursor: default;
  opacity: 0.55;
}

/* Scroll target so a page change returns the reader to the top of the table. */
.cn-table-anchor {
  display: block;
  scroll-margin-top: var(--space-4, 16px);
}

/* ============================================================
   DRAFT GUARD — Unsaved-work UI
   - .draft-status: tiny auto-save indicator beside a form's save button
     (junipa-draft-status component)
   - .unsaved-work-*: My Junipa "Unsaved work" card rows
   Linear-minimal: 10-12px type, 4px max radius, Bootstrap Icons.
   ============================================================ */

.draft-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  margin-left: var(--space-2, 8px);
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
}

.draft-status i {
  font-size: 11px;
  line-height: 1;
}

.draft-status--saved i {
  color: var(--status-success, #16A34A);
}

.draft-status--dirty {
  color: var(--text-muted);
  font-style: italic;
}

[data-bs-theme="dark"] .draft-status--saved i {
  color: var(--status-success, #4ADE80);
}

/* --- My Junipa "Unsaved work" card --- */

.unsaved-work-icon {
  flex-shrink: 0;
  width: 20px;
  padding-top: 3px;
  text-align: center;
  font-size: var(--font-size-sm, 11px);
  color: var(--status-warning, #D97706);
}

.unsaved-work-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
  padding-top: 2px;
}

.unsaved-work-resume {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--font-size-xs, 10px);
  font-weight: 700;
  color: var(--primary-orange, #FF6813);
  background: rgba(255, 104, 19, 0.08);
  border: 1px solid var(--primary-orange, #FF6813);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
}

.unsaved-work-resume:hover,
.unsaved-work-resume:focus-visible {
  background: rgba(255, 104, 19, 0.16);
}

.unsaved-work-discard {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: var(--font-size-xs, 10px);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
}

.unsaved-work-discard:hover,
.unsaved-work-discard:focus-visible {
  color: var(--status-danger, #DC2626);
  border-color: var(--border-subtle, #E5E7EB);
  background: var(--surface-2, #F9FAFB);
}

[data-bs-theme="dark"] .unsaved-work-discard:hover,
[data-bs-theme="dark"] .unsaved-work-discard:focus-visible {
  background: var(--surface-2, #1A1A1E);
  border-color: var(--border-subtle, #2A2A30);
}

/* --- In-form "Discard draft" button ---
   Secondary muted-danger action beside Cancel in entry forms (case-note
   modal, adjustment-evidence drawer). Visible only while a draft exists or
   the form is dirty. Muted red text on a subtle border; hover deepens to a
   soft danger tint — never a solid fill (discard is secondary to Save). */
.btn-discard-draft {
  color: var(--status-danger, #DC2626);
  background: transparent;
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 4px;
  opacity: 0.9;
}

.btn-discard-draft:hover:not(:disabled),
.btn-discard-draft:focus-visible {
  color: var(--status-danger, #DC2626);
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.4);
  opacity: 1;
}

[data-bs-theme="dark"] .btn-discard-draft,
[data-theme="dark"] .btn-discard-draft {
  color: var(--status-danger, #F87171);
  border-color: var(--border-subtle, #2A2A30);
}

[data-bs-theme="dark"] .btn-discard-draft:hover:not(:disabled),
[data-bs-theme="dark"] .btn-discard-draft:focus-visible,
[data-theme="dark"] .btn-discard-draft:hover:not(:disabled),
[data-theme="dark"] .btn-discard-draft:focus-visible {
  color: #F87171;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.45);
}

/* Narrow-column behaviour: let the row wrap so the text keeps a readable
   measure and the actions drop to their own line instead of crushing it. */
.unsaved-work-row {
  flex-wrap: wrap;
}

.task-item.unsaved-work-row .task-item-body {
  /* Beats the component-scoped .task-item-body so the text keeps a readable
     measure in narrow columns and the actions wrap below. */
  flex: 1 1 180px;
  min-width: 0;
}

.unsaved-work-actions {
  margin-left: auto;
}

/* Super-admin fast-timeout chip (Account Settings → Session Timeout).
   Muted amber chip; clearly marks a sub-minute testing timeout as active. */
.setting-superadmin-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  width: fit-content;
  margin-top: var(--space-1, 4px);
  padding: 2px 8px;
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--status-warning, #D97706);
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
}

[data-bs-theme="dark"] .setting-superadmin-chip {
  color: var(--status-warning, #FBBF24);
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

/* Session-timeout dropdown (Account Settings) — Angular-driven, uses the
   canonical .dropdown-menu surface. Option rows carry an inline
   "Super admin" badge that a native <select> cannot render. */
.timeout-dropdown {
  position: relative;
  width: fit-content;
}

.timeout-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 200px;
  justify-content: flex-start;
  text-align: left;
}

.timeout-dropdown-toggle > .bi-chevron-down {
  margin-left: auto;
}

.timeout-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 240px;
  z-index: 1050;
}

.timeout-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  width: 100%;
}

.timeout-dropdown-item-label {
  flex: 0 0 auto;
}

.timeout-dropdown-item-check {
  margin-left: auto;
  color: var(--status-success, #16A34A);
}

/* Small muted "Super admin" badge used inside dropdown rows and toggles. */
.superadmin-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  color: var(--text-muted, #6B7280);
  background: var(--surface-2, #F3F4F6);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 4px;
  white-space: nowrap;
  text-transform: none;
}

[data-bs-theme="dark"] .superadmin-badge {
  color: var(--text-muted, #9CA3AF);
  background: var(--surface-2, #1A1A1E);
  border-color: var(--border-subtle, #2A2A30);
}

/* Session-timer paused message. Visible proof the idle timeout will not tear
   down a page holding unsaved work. */
.session-timer-paused {
  color: var(--bs-secondary-color, var(--text-muted, #6B7280));
  font-size: var(--font-size-sm, 11px);
  white-space: nowrap;
}

/* Sub-group divider inside the My Drafts card (generic fallback group). */
.unsaved-work-subhead {
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle, #E5E7EB);
}

/* Review completion footer
   A quiet end-of-document decision row shared by plan and evidence reviews.
   It deliberately has no card surface or border: the reviewed content above
   provides the boundary, while copy and actions retain clear hierarchy. */
.review-completion-footer {
  align-items: center;
  color: var(--bs-secondary-color, var(--text-muted, #6B7280));
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-sm, 12px);
  gap: var(--space-3, 12px);
  justify-content: space-between;
  margin-top: var(--space-3, 12px);
}

.review-completion-footer__note {
  flex: 1 0 100%;
}

.review-completion-footer__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2, 8px);
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .review-completion-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .review-completion-footer__actions {
    width: 100%;
  }

  .review-completion-footer__actions .btn {
    flex: 1;
  }
}

/* ============================================================================
 * Destructive Impact Preview  —  action.destructive.impact-preview
 * ============================================================================
 * A destructive action that will not fire until the SERVER has calculated and
 * shown its real consequence. The panel is the confirmation: it presents the
 * counted impact, then either an explicit confirm step or an honest refusal
 * listing the blockers that make the action unsafe.
 *
 * The rule this encodes: Junipa never offers an undo it cannot actually
 * perform. When the server says the action is not recoverable, this pattern
 * REFUSES — it does not grey out a button and hope, and it does not proceed
 * with a warning. The blocker list is the interface.
 *
 * Composition, not redefinition: figures use .data-summary-table
 * (table.summary.compact) and any per-item list uses .admin-table
 * .admin-table-compact (table.admin.compact). This pattern owns only the
 * panel frame, the severity cue, the blocker list and the confirm row.
 */
.destructive-preview {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-error);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  padding: var(--space-3);
}

.destructive-preview-title {
  margin: 0 0 2px;
  color: var(--status-error);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Names the consequence in plain words before any figure is read. */
.destructive-preview-description {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.destructive-preview-body {
  margin-bottom: var(--space-3);
}

/* The refusal. Present ONLY when the server reported it cannot undo safely;
 * it replaces the confirm control rather than sitting beside it. */
.destructive-preview-blockers {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--status-error);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background-color: color-mix(in srgb, var(--status-error) 8%, transparent);
}

.destructive-preview-blockers-title {
  margin: 0 0 var(--space-1);
  color: var(--status-error);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.destructive-preview-blockers ul {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.destructive-preview-blockers li + li {
  margin-top: 2px;
}

.destructive-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* The deliberate second step. Reads as a sentence, not a checkbox label, so
 * the operator confirms the consequence rather than a control. */
.destructive-preview-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.destructive-preview-confirm input[type='checkbox'] {
  flex: 0 0 auto;
  margin-top: 2px;
}

.destructive-preview-confirm input[type='checkbox']:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Loading: the panel keeps its frame and heading while the server counts, so
 * the surface never jumps and the operator is never shown a stale figure. */
.destructive-preview-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

@media (max-width: 575.98px) {
  .destructive-preview-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .destructive-preview-actions .btn {
    width: 100%;
  }
}

/* ========================================
 * Segmented View Switch  (pattern: control.view.segmented)
 *
 * A mutually-exclusive view switch: one control, N segments, exactly one
 * selected. Distinct from .compact-filter-bar, which filters a dataset in
 * place and may hold independent toggles. Use this when the segments swap
 * WHAT is on screen (dashboard Curriculum|Groups|Timetable, timetable
 * structure Periods|Rooms|Subjects|Classes).
 *
 * Appearance is deliberately flat: the unselected segment is transparent with
 * muted secondary text, while the selected segment uses a quiet neutral fill
 * and primary text. View selection is navigation, not a raised button or a
 * primary action, so it never uses an outline, lift shadow, Bootstrap primary
 * blue, or the orange brand accent.
 *
 * Height: the track matches the toolbar's primary action (42px) so the switch
 * and the +Add button read as one aligned row. The parity comes from
 * --segmented-track-height minus the track's own 8px chrome (3px padding +
 * 1px border, twice), not from a hardcoded height on the outer box.
 *
 * HTML:
 *   <div class="segmented-switch" role="tablist" aria-label="Dashboard view">
 *     <button type="button" class="segmented-option" role="tab" aria-selected="true">Groups</button>
 *     <button type="button" class="segmented-option" role="tab" aria-selected="false">Timetable</button>
 *   </div>
 * ======================================== */

.segmented-switch {
  /* Track height is a token so a host row can align the switch to its own
     controls without any consumer redefining the pattern. 36px is the standalone
     default; the segment derives its height from this minus the track's own
     chrome, so setting the token moves the whole control together. */
  --segmented-track-height: 36px;
  --segmented-track-chrome: 8px; /* 3px padding + 1px border, top and bottom */
  --segmented-selected-bg: color-mix(
    in srgb,
    var(--surface-3, #F3F4F6) 92%,
    var(--text-primary, #1F2937)
  );
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 3px;
  background: var(--surface-1, #F6F8FA);
  border: 1px solid var(--border-default, #D1D5DB);
  border-radius: var(--radius-sm, 4px);
  box-shadow: none;
  max-width: 100%;
}

.segmented-option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  min-height: calc(var(--segmented-track-height, 36px) - var(--segmented-track-chrome, 8px));
  padding: 0 var(--space-3, 12px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-secondary, #4B5563);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 100ms ease),
    color var(--transition-fast, 100ms ease),
    border-color var(--transition-fast, 100ms ease),
    box-shadow var(--transition-fast, 100ms ease);
}

/* Unselected affordance: a quiet surface tint identifies the hit target without
   making it compete with the selected view. */
.segmented-option:hover:not([aria-selected='true']):not(:disabled) {
  background: color-mix(in srgb, var(--surface-3, #F3F4F6) 60%, transparent);
  border-color: transparent;
  color: var(--text-primary, #1F2937);
}

.segmented-option:focus-visible {
  outline: 2px solid var(--focus-ring, rgba(37, 99, 235, 0.3));
  outline-offset: 1px;
  z-index: 1;
}

/* Selection is a flat neutral fill with primary text. The track already groups
 * the choices, so an inner outline or lift shadow would create a button within
 * a button instead of communicating a settled view. */
.segmented-option[aria-selected='true'] {
  background: var(--segmented-selected-bg);
  border-color: transparent;
  color: var(--text-primary, #1F2937);
  font-weight: var(--font-weight-semibold, 600);
  box-shadow: none;
}

.segmented-option:disabled,
.segmented-option[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Toolbar parity: when the switch rides an action row it must match that row's
   primary button height (42px, set by #add-button) so the two read as one
   aligned row rather than two stacked sizes. Opt-in, because the standalone and
   in-drawer switches should stay compact. */
.segmented-switch-toolbar {
  --segmented-track-height: 42px;
}

/* Optional icon-only trailing affordance sharing the track (e.g. pin default view) */
.segmented-switch-aside {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  margin-left: var(--space-1, 4px);
  padding-left: var(--space-1, 4px);
  border-left: 1px solid var(--border-subtle, #E5E7EB);
}

.segmented-option-icon {
  min-width: 28px;
  padding: 0;
}

.segmented-option-icon i {
  font-size: 12px;
  line-height: 1;
}

/* Loading: segments stay in place and readable, but refuse input. */
.segmented-switch[aria-busy='true'] .segmented-option {
  cursor: progress;
  color: var(--text-muted, #6B7280);
}

/* The selected segment keeps its neutral treatment while busy, so the control
   does not appear to lose its selection mid-load. */
.segmented-switch[aria-busy='true'] .segmented-option[aria-selected='true'] {
  color: var(--text-primary, #1F2937);
}

/* Dark mode keeps the same flat neutral hierarchy. */
[data-bs-theme='dark'] .segmented-switch {
  background: var(--surface-1, #0D1117);
  border-color: var(--border-default, rgba(48, 54, 61, 1));
  box-shadow: none;
}

[data-bs-theme='dark'] .segmented-option:not([aria-selected='true']) {
  color: var(--text-secondary, #8B949E);
}

[data-bs-theme='dark'] .segmented-option:hover:not([aria-selected='true']):not(:disabled) {
  background: var(--surface-2, #161B22);
  border-color: transparent;
  color: var(--text-primary, #E6EDF3);
}

[data-bs-theme='dark'] .segmented-option[aria-selected='true'] {
  background: var(--segmented-selected-bg);
  border-color: transparent;
  color: var(--text-primary, #E6EDF3);
  box-shadow: none;
}

/* Narrow: the switch spans the row and segments divide it evenly, so no
   segment is clipped and the control keeps a single tap-height row. */
@media (max-width: 575.98px) {
  .segmented-switch {
    display: flex;
    width: 100%;
    /* The toolbar has already reflowed at this width, so the switch stops
       matching a button it is no longer beside and returns to compact. */
    --segmented-track-height: 36px;
  }

  .segmented-option {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--space-2, 8px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .segmented-option-icon {
    flex: 0 0 auto;
  }
}

/* ==========================================================================
 * calendar.month.activity
 * --------------------------------------------------------------------------
 * A month grid whose weekday cells carry that day's recorded activity, with
 * month-at-a-time navigation and days beyond the present rendered inert.
 *
 * Owner of the reusable calendar SHELL only: the month-nav line, the weekday
 * header, the week rows, the day-cell geometry, the day number, the compact
 * activity rows, the overflow chip, the inert/today treatments, the quiet
 * annotation marker, and the narrow-viewport day-list reflow.
 *
 * Each consuming surface supplies its own CELL CONTENT (what a day means) and
 * keeps that in its component stylesheet. Do not add feature-specific colours
 * or labels here.
 *
 * First consumers:
 *   - My Junipa > Timeline (staff's own timetable month)
 *   - Student journal activity calendar (adoption target)
 * ========================================================================== */

.cal-month {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Month navigation line ────────────────────────────────────────────────── */

.cal-month-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  min-height: 28px;
}

.cal-month-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.cal-month-nav-btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--hover-bg);
  border-color: var(--border-subtle);
}

.cal-month-nav-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.cal-month-nav-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.cal-month-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Quiet trailing note on the nav line (e.g. the future-days rule). */
.cal-month-note {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Weekday header ───────────────────────────────────────────────────────── */

.cal-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--table-border);
}

.cal-month-weekday {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cal-month-weekday--weekend {
  color: var(--text-muted);
}

/* ── Week rows and day cells ──────────────────────────────────────────────── */

.cal-month-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--table-border);
}

.cal-month-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  min-width: 0;
  padding: var(--space-1);
  border-right: 1px solid var(--table-border);
  background: transparent;
  transition: background-color 0.12s ease;
}

.cal-month-day:first-child {
  border-left: 1px solid var(--table-border);
}

.cal-month-day--weekend {
  background: var(--surface-1);
}

/* Days outside the displayed month: present for grid continuity, recessive. */
.cal-month-day--outside .cal-month-daynum,
.cal-month-day--outside .cal-month-entry,
.cal-month-day--outside .cal-month-daysummary {
  opacity: 0.35;
}

/* Days beyond the present. Visibly inert: no hover, no pointer, no affordance.
 * This is the product rule that recording ahead of time is not available. */
.cal-month-day--future {
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 5px,
    var(--surface-1) 5px,
    var(--surface-1) 6px
  );
  cursor: default;
}

.cal-month-day--future .cal-month-daynum {
  color: var(--text-muted);
}

.cal-month-day--interactive {
  cursor: pointer;
}

.cal-month-day--interactive:hover {
  background: var(--hover-bg);
}

.cal-month-day--interactive:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* Expanded day keeps its content visible above neighbouring cells. */
.cal-month-day--expanded {
  background: var(--hover-bg);
  z-index: 2;
}

/* ── Day number line ──────────────────────────────────────────────────────── */

.cal-month-dayhead {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 16px;
}

.cal-month-daynum {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

.cal-month-day--today .cal-month-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  color: #FFFFFF;
  background: var(--status-info);
  border-radius: var(--radius-xs);
  font-weight: 600;
}

/* ── Day summary line (the one-line "what this day held") ─────────────────── */

.cal-month-daysummary {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ── Compact activity rows inside a day ───────────────────────────────────── */

.cal-month-entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  padding: 1px 3px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: var(--text-primary);
}

.cal-month-entry-time {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cal-month-entry-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Overflow chip — reads as a count, never as another entry. */
.cal-month-overflow {
  align-self: flex-start;
  padding: 0 5px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.cal-month-overflow:hover {
  background: color-mix(in srgb, var(--status-info) 14%, transparent);
  color: var(--status-info);
}

.cal-month-overflow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ── Annotation marker — the ONLY sanctioned icon inside a data cell ──────── */
/* A quiet corner dot meaning "the stored record for this day changed". It is
 * never coloured as an error: a change is information, not a fault. */

.cal-month-annotation {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--status-warning);
  font-size: 9px;
  line-height: 1;
  cursor: help;
}

.cal-month-annotation:hover,
.cal-month-annotation:focus-visible {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--status-warning) 18%, transparent);
}

.cal-month-annotation:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Annotation detail, revealed on the expanded day rather than in a modal. */
.cal-month-annotation-detail {
  margin-top: 2px;
  padding: 3px 4px;
  border-left: 2px solid var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 8%, transparent);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  color: var(--text-secondary);
  white-space: normal;
}

/* ── Loading skeleton ─────────────────────────────────────────────────────── */

.cal-month-skeleton .cal-month-day {
  pointer-events: none;
}

.cal-month-skeleton-bar {
  height: 9px;
  margin-top: 3px;
  border-radius: var(--radius-xs);
  background: linear-gradient(
    90deg,
    var(--surface-3) 25%,
    var(--surface-1) 37%,
    var(--surface-3) 63%
  );
  background-size: 400% 100%;
  animation: cal-month-shimmer 1.4s ease-in-out infinite;
}

.cal-month-skeleton-bar--short {
  width: 55%;
}

@keyframes cal-month-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-month-skeleton-bar {
    animation: none;
  }
}

/* ── Narrow viewports: the grid becomes a day list ────────────────────────── */
/* Seven columns cannot hold readable dense type below ~700px, so the month
 * reflows into a vertical list of the days that actually carry content. */

@media (max-width: 699.98px) {
  .cal-month-weekdays {
    display: none;
  }

  .cal-month-week {
    display: block;
    border-bottom: none;
  }

  .cal-month-day {
    min-height: 0;
    padding: var(--space-2);
    border: none;
    border-bottom: 1px solid var(--table-border);
  }

  .cal-month-day:first-child {
    border-left: none;
  }

  /* Outside-month padding days and empty in-month days carry nothing to read
   * in a list, so the list shows only days with content. */
  .cal-month-day--outside,
  .cal-month-day--listhidden {
    display: none;
  }

  .cal-month-dayhead {
    margin-bottom: var(--space-1);
  }

  .cal-month-daynum::after {
    content: attr(data-weekday);
    margin-left: var(--space-1);
    color: var(--text-secondary);
    font-weight: 400;
  }

  .cal-month-day--today .cal-month-daynum::after {
    color: rgba(255, 255, 255, 0.85);
  }

  .cal-month-daysummary,
  .cal-month-entry-label {
    white-space: normal;
  }

  .cal-month-note {
    display: none;
  }
}

/* ── Dark parity ──────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .cal-month-day--weekend {
  background: var(--surface-1);
}

[data-bs-theme="dark"] .cal-month-day--future {
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 5px,
    var(--surface-1) 5px,
    var(--surface-1) 6px
  );
}

[data-bs-theme="dark"] .cal-month-entry {
  background: var(--surface-3);
}

[data-bs-theme="dark"] .cal-month-overflow {
  background: color-mix(in srgb, var(--text-secondary) 22%, transparent);
}

[data-bs-theme="dark"] .cal-month-annotation:hover,
[data-bs-theme="dark"] .cal-month-annotation:focus-visible {
  background: color-mix(in srgb, var(--status-warning) 26%, transparent);
}

[data-bs-theme="dark"] .cal-month-annotation-detail {
  background: color-mix(in srgb, var(--status-warning) 14%, transparent);
}

/* ============================================================================
   Document name link — in-table file entries read as hyperlinks
   ----------------------------------------------------------------------------
   Uploaded files are <button> elements so they can trigger a signed-URL fetch
   rather than navigate. Unstyled, a button inherits the browser's default
   chrome (grey fill + 2px outset border), which reads as a boxed control
   instead of a file link. This strips the chrome and adopts the link token so
   the file name looks and behaves like a hyperlink, while the adjacent Edit /
   Remove buttons stay visibly button-shaped and distinct from it.
   ========================================================================== */
.doc-name-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.doc-name-link:hover {
  color: var(--text-link);
  text-decoration-thickness: 2px;
}

/* Keyboard focus must stay visible now that the button chrome is gone. */
.doc-name-link:focus-visible {
  outline: 2px solid var(--text-link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================================
   Rich-text summary content ([innerHTML])
   ----------------------------------------------------------------------------
   Student Summary is stored as HTML and injected with [innerHTML]. Angular's
   emulated encapsulation stamps _ngcontent-* onto template markup only, so
   component-scoped `.summary-rendered ul` selectors compile to
   `ul[_ngcontent-x]` and can never match innerHTML children — the lists fell
   back to the UA default 2rem indent, pushing markers outside the text column.
   These rules are intentionally unscoped so they apply wherever the summary is
   rendered, and are scoped under .summary-rendered so no other rich text moves.
   ========================================================================== */
.summary-rendered {
  /* Rich text is left-aligned regardless of any inherited centring. */
  text-align: left;
}

/* `list-style-position: outside` paints the marker in the gutter LEFT of the
   list's content box, so a list flush with the container renders its markers
   over the card padding — reading as "stepping outside the left margin".
   `inside` puts the marker within the content box instead: the marker aligns
   with surrounding paragraph text and nothing overhangs the container. */
.summary-rendered ul,
.summary-rendered ol {
  padding-left: 0;
  margin-bottom: 0.5rem;
  list-style-position: inside;
}

.summary-rendered li {
  margin-bottom: 0.25rem;
}

.summary-rendered > :last-child {
  margin-bottom: 0;
}

/* ============================================================================
   Bulk import source — shared by student and staff import workflows
   ========================================================================== */
.bulk-import-source { margin-bottom: var(--space-5, 20px); }
.bulk-import-source-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--border-subtle);
}
.bulk-import-source-tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: -1px;
  border-bottom: 0;
}
/* Source tabs use the same compact orange-underlined treatment on both pages. */
.bulk-import-source-tabs .nav-link {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.bulk-import-source-tabs .nav-link:hover,
.bulk-import-source-tabs .nav-link:focus-visible,
.bulk-import-source-tabs .nav-link.active {
  border-color: transparent transparent var(--brand-orange);
  background: transparent;
  color: var(--text-primary);
}
.bulk-import-source-tabs .nav-link.active {
  font-weight: var(--font-weight-semibold, 600);
}
.bulk-import-source-tabs .nav-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-orange) 45%, transparent);
  outline-offset: 2px;
}
.bulk-import-default-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex: 0 0 auto;
  min-height: 32px;
  margin-bottom: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-0);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-sm, 12px);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.bulk-import-default-action:hover:not(:disabled),
.bulk-import-default-action:focus-visible {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}
.bulk-import-default-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-orange) 45%, transparent);
  outline-offset: 2px;
}
.bulk-import-default-action.is-default,
.bulk-import-default-action.is-default:disabled {
  border-color: var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-secondary);
  opacity: 1;
  cursor: default;
}
.bulk-import-default-action .spinner-border { width: 12px; height: 12px; }
.bulk-import-drop-zone {
  display: flex;
  min-height: 260px;
  padding: var(--space-6, 24px);
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.bulk-import-drop-zone.is-drag-over {
  border-color: var(--brand-orange);
  background: color-mix(in srgb, var(--brand-orange) 6%, var(--surface-1));
}
.bulk-import-drop-zone-icon {
  margin-bottom: var(--space-4, 16px);
  color: var(--text-secondary);
  font-size: 40px;
  line-height: 1;
}
.bulk-import-paste-panel {
  padding: var(--space-5, 20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-0);
}
.bulk-import-paste-input {
  min-height: 220px;
  resize: vertical;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: var(--font-size-sm, 12px);
}
.bulk-import-example-download {
  display: flex;
  width: min(380px, 100%);
  justify-content: space-between;
}
.sync-now-spinner-muted {
  border-color: color-mix(in srgb, var(--text-secondary) 24%, transparent);
  border-top-color: var(--text-secondary);
}
@media (max-width: 640px) {
  .bulk-import-source-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2, 8px);
    border-bottom: 0;
  }
  .bulk-import-source-tabs {
    overflow-x: auto;
    border-bottom: 1px solid var(--border-subtle);
  }
  .bulk-import-source-tabs .nav-link { white-space: nowrap; }
  .bulk-import-default-action { align-self: flex-start; margin-bottom: 0; }
  .bulk-import-drop-zone { min-height: 220px; }
}

/* Body scroll lock used by in-page fullscreen overlays (the CSS fallback when
   the native Fullscreen API is unavailable or denied). Document-level because
   a component's scoped stylesheet cannot style <body>. Applied and removed by
   the component that owns the overlay. */
body.cal-fullscreen-lock {
  overflow: hidden;
}