:root {
  /* -------------------------------------------------------------------------- */
  /* 1. COLOR SYSTEM                                                            */
  /* -------------------------------------------------------------------------- */

  /* Anchor Colors (Preserved) */
  --color-primary-navy: #002950;
  --color-accent-blue: #73B5F5;
  --color-accent-teal: #80DAD0;
  --color-link: #2B7AC7;

  /* Neutrals (Slate-based for cool, calm feel) */
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  
  --color-border: #E2E8F0;
  --color-border-muted: #F1F5F9;
  
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;  /* Slate 600 - for secondary information */
  --color-text-muted: #64748B;
  --color-text-on-navy: #FFFFFF;

  /* Semantic Colors (Muted, Healthcare-friendly) */
  --color-success: #006B5E;  /* Teal-based success */
  --color-success-bg: #E6F4F2;
  --color-success-text: #004D43;

  --color-info: #0D5A9E;     /* Deep blue info */
  --color-info-bg: #E8F1FA;
  --color-info-text: #0A4578;

  --color-primary-bg: #E0EDF9; /* Light tint of primary navy for backgrounds */
  --color-primary-border: rgba(0, 41, 80, 0.2); /* Primary navy at 20% for subtle borders */

  /* Overlay colors for backdrop-filter elements */
  --color-overlay-light: rgba(255, 255, 255, 0.95);
  --color-overlay-dark: rgba(100, 116, 139, 0.9); /* Slate overlay for subdued states */
  --color-warning-border: rgba(245, 158, 11, 0.3); /* Warning color at 30% for subtle borders */
  --color-success-border: rgba(16, 185, 129, 0.3); /* Success color at 30% for subtle borders */
  --color-danger-border: rgba(244, 63, 94, 0.3); /* Danger color at 30% for subtle borders */

  --color-warning: #F59E0B;  /* Amber 500 */
  --color-warning-bg: #FFFBEB;
  --color-warning-text: #78350F;

  --color-danger: #F43F5E;   /* Rose 500 */
  --color-danger-bg: #FFF1F2;
  --color-danger-text: #881337;

  /* Interaction States */
  --color-action-hover: #003666; /* Slightly lighter navy for primary hover */
  --color-action-pressed: #001F3D;
  --color-action-selected: #E0F2FE; /* Very light blue */
  --color-action-disabled: #CBD5E1;
  --color-focus-ring: rgba(115, 181, 245, 0.4); /* Based on accent blue */
  --color-focus-ring-error: rgba(244, 63, 94, 0.4);

  /* Table Tokens */
  --table-row-selected-bg: #F0F9FF; /* Lighter selection - Sky 50 */
  --table-row-selected-border: #BAE6FD; /* Subtle selection border - Sky 200 */

  /* -------------------------------------------------------------------------- */
  /* 2. TYPOGRAPHY                                                              */
  /* -------------------------------------------------------------------------- */
  
  --font-family-base: 'Inter', sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Type Scale (Size / Line-Height) */
  --text-h1-size: 32px;
  --text-h1-line-height: 40px;

  --text-h2-size: 24px;
  --text-h2-line-height: 32px;

  --text-h3-size: 20px;
  --text-h3-line-height: 28px;

  --text-body-size: 16px;
  --text-body-line-height: 24px;

  --text-small-size: 14px;
  --text-small-line-height: 20px;

  --text-micro-size: 12px;
  --text-micro-line-height: 16px;

  /* Legacy aliases (used in older sections; prevents undefined token failures) */
  --text-sm-size: 14px;
  --text-xs-size: 12px;

  /* -------------------------------------------------------------------------- */
  /* 3. SPACING & LAYOUT                                                        */
  /* -------------------------------------------------------------------------- */

  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  --layout-max-width: 1200px;
  --layout-padding-horizontal: 24px;

  /* -------------------------------------------------------------------------- */
  /* 4. RADII                                                                   */
  /* -------------------------------------------------------------------------- */

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px; /* Default */
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------------------- */
  /* 5. BORDERS & SHADOWS                                                       */
  /* -------------------------------------------------------------------------- */

  --border-width-default: 1px;
  
  --shadow-none: none;
  --shadow-overlay: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* -------------------------------------------------------------------------- */
  /* 6. LAYOUT                                                                   */
  /* -------------------------------------------------------------------------- */

  --sidebar-width: 200px;

}

/* Mobile: collapse sidebar width for full-bleed footer */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }
}

/* -------------------------------------------------------------------------- */
/* RESET & BASE STYLES                                                        */
/* -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  line-height: var(--text-body-line-height);
  -webkit-font-smoothing: antialiased;
  padding: var(--space-40);
}

[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY UTILITIES                                                       */
/* -------------------------------------------------------------------------- */

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-24);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-16);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-12);
}

p {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  margin-bottom: var(--space-16);
  max-width: 65ch;
}

.text-small {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

.text-micro {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
}

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

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

/* -------------------------------------------------------------------------- */
/* COMPONENT LIBRARY (PHASE 2)                                               */
/* -------------------------------------------------------------------------- */

/* --- A. BUTTONS --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 40px;
  min-height: 40px;
  padding: 0 var(--space-16);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

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

.btn:disabled, .btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* Sizes */
.btn-sm {
  height: 32px;
  min-height: 32px;
  padding: 0 var(--space-16);
  font-size: var(--text-small-size);
}

.btn-md {
  height: 40px;
  min-height: 40px;
  padding: 0 var(--space-16);
  font-size: var(--text-body-size);
}

.btn-lg {
  height: 48px;
  min-height: 48px;
  padding: 0 var(--space-24);
  font-size: var(--text-body-size);
}

/* Icon Buttons - Square with min touch target */
.btn-icon {
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
}

.btn-icon.btn-lg {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

/* Variants */
.btn-primary {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}
.btn-primary:hover {
  background-color: var(--color-action-hover);
}
.btn-primary:active {
  background-color: var(--color-action-pressed);
}

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background-color: var(--color-background);
  border-color: var(--color-border);
}
.btn-secondary:active {
  background-color: #E2E8F0;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}
.btn-outline:hover {
  background-color: rgba(0, 41, 80, 0.05);
}
.btn-outline:active {
  background-color: rgba(0, 41, 80, 0.1);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-primary);
}
.btn-ghost:hover {
  background-color: var(--color-background);
}
.btn-ghost:active {
  background-color: var(--color-border);
}
.btn-ghost.destructive {
  color: var(--color-danger-text);
}
.btn-ghost.destructive:hover {
  background-color: var(--color-danger-bg);
}

.btn-destructive {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: transparent;
}
.btn-destructive:hover {
  background-color: #FFE4E6;
}
.btn-destructive:active {
  background-color: #FECDD3;
}

.btn-link {
  background-color: transparent;
  color: var(--color-link);
  padding: 0;
  height: auto;
  border-radius: 0;
}
.btn-link:hover {
  text-decoration: underline;
}
.btn-link-danger {
  background-color: transparent;
  color: var(--color-danger-text);
  text-decoration: none;
  font-weight: inherit;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
}
.btn-link-danger:hover {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  text-decoration: none;
}
.btn-link-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Two-column form grid — compact field layout */
.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.form-row-grid .form-row-action {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Logic chip row — vertical spacing for AND/OR badges between filter rows */
.filter-logic-chip-row {
  text-align: center;
  margin: var(--space-8) 0;
}

/* Button Group */
.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
  margin-left: -1px; /* Overlap borders */
}
.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  margin-left: 0;
}
.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* Loading */
.btn-loading {
  position: relative;
  color: transparent !important; /* Hide text */
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid currentColor; /* Use text color */
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  color: var(--color-text-muted); /* Fallback color if transparent */
}
.btn-primary.btn-loading::after {
  color: var(--color-text-on-navy);
}

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

/* --- B. CARDS --- */

.card {
  background-color: var(--color-surface);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.card-clickable {
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a.card-clickable {
  text-decoration: none;
  color: inherit;
}
.card-clickable:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: var(--color-accent-blue);
}

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

/* Stacked card header with title + subtitle in column layout */
.card-header--stacked {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: var(--space-12);
}

.card-header--stacked .card-subtitle {
  margin-top: var(--space-2);
}

/* ==========================================================================
   CARD HEADER TYPOGRAPHY
   Card titles are 20px (h3-size) or 16px (sm). Never 24px - that's page-title.
   ========================================================================== */

.card-title {
  font-size: var(--text-h3-size); /* 20px - DO NOT change to h2-size (24px) */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.card-title-sm {
  font-size: var(--text-body-size); /* 16px - smaller card section headers */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.card-subtitle {
  font-size: 14px; /* Same as page-subtitle but separate class for cards */
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.card-icon {
  color: var(--color-accent-blue);
  margin-bottom: var(--space-16);
}

.card-footer {
  margin-top: auto; /* Push to bottom */
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-muted);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
}

/* --- B2. SPECIALIZED CARD PATTERNS --- */

/* Card Pattern Grid (3-column responsive) */
.card-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  padding: var(--space-8) 0;
}

@media (max-width: 1024px) {
  .card-pattern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .card-pattern-grid {
    grid-template-columns: 1fr;
  }
}

/* Card with Hero Image */
.card-visual {
  padding: 0;
  overflow: hidden;
}

.card-visual .card-hero {
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-visual .card-hero-icon {
  color: rgba(255, 255, 255, 0.4);
}

.card-visual .card-body {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Hero Gradients */
.card-hero-navy {
  background: linear-gradient(135deg, var(--color-primary-navy) 0%, #1a4a6e 100%);
}

.card-hero-teal {
  background: linear-gradient(135deg, #4EB8A4 0%, var(--color-accent-teal) 100%);
}

.card-hero-blue {
  background: linear-gradient(135deg, #4A9FE8 0%, var(--color-accent-blue) 100%);
}

/* Card Meta Row */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.card-meta-left {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Card Details */
.card-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.card-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.card-detail-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

/* Card Progress */
.card-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.card-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.card-progress-bar {
  height: 6px;
  background: var(--color-border-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.card-progress-fill {
  height: 100%;
  background: var(--color-primary-navy);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* Horizontal Bar Chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.bar-chart-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.bar-chart-label {
  flex-shrink: 0;
  width: 140px;
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
}

.bar-chart-bar-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.bar-chart-bar {
  flex: 1;
  height: 24px;
  background: var(--color-border-muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bar-chart-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.bar-chart-fill--new {
  background: var(--color-text-muted);
}

.bar-chart-fill--at-risk {
  background: var(--color-danger);
}

.bar-chart-fill--low-engagement {
  background: var(--color-warning);
}

.bar-chart-fill--active {
  background: var(--color-success);
}

.bar-chart-value {
  flex-shrink: 0;
  width: 32px;
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* Card Tags */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Card CTA (full-width button) */
.card-cta {
  margin-top: var(--space-8);
}

.card-cta .btn {
  width: 100%;
  justify-content: center;
}

/* EVENT CARD */
.card-event .card-title {
  font-size: var(--text-h4-size);
}

/* LEARNING PATH CARD */
.card-learning .card-description {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* RESOURCE CARD */
.card-resource .card-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.card-resource .card-type-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  color: var(--color-info);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-resource .card-title-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-resource .card-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
}

.card-resource .card-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ===================================================================
   RESOURCE CARD COMPONENT
   A clickable card with media, type pill, bookmark overlay, title,
   description, and tags at bottom.
   =================================================================== */

.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, outline 0.15s ease;
}

.resource-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-muted);
}

/* Focus-within: visible ring when any element inside card has focus */
.resource-card:focus-within {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Media container */
.resource-card-media {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}

.resource-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Type pill - overlay top-left */
.resource-card-type {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.resource-card-type i,
.resource-card-type svg {
  flex-shrink: 0;
}

/* Bookmark button - overlay top-right on image */
.resource-card-bookmark {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-muted);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.resource-card-bookmark:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--color-text-primary);
}

.resource-card-bookmark:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 1px;
}

.resource-card-bookmark[aria-pressed="true"] {
  color: var(--color-primary-navy);
  background: rgba(255, 255, 255, 1);
}

.resource-card-bookmark[aria-pressed="true"]:hover {
  color: var(--color-primary-navy);
}

/* Type pill - inline variant */
.resource-card--type-inline .resource-card-type {
  position: static;
  background: var(--color-background);
  backdrop-filter: none;
  margin-bottom: var(--space-8);
  width: fit-content;
  z-index: auto;
}

/* Body container */
.resource-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-16);
  gap: var(--space-8);
}

/* Title - uses stretched link pattern for card clickability */
.resource-card-title {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched link inside title makes the whole card clickable */
.resource-card-link {
  color: inherit;
  text-decoration: none;
}

.resource-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hide default link focus since card has focus-within */
.resource-card-link:focus-visible {
  outline: none;
}

/* Description with line clamp */
.resource-card-desc {
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-card-desc--3-lines {
  -webkit-line-clamp: 3;
}

/* Tags row - positioned at bottom of card body */
.resource-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: auto;
  padding-top: var(--space-8);
}

.resource-card-tags .badge {
  font-size: var(--text-xxs-size);
}

/* Variant: Featured resource card (larger, horizontal) */
.resource-card--featured {
  flex-direction: row;
}

.resource-card--featured .resource-card-media {
  width: 280px;
  height: auto;
  min-height: 200px;
}

.resource-card--featured .resource-card-body {
  padding: var(--space-20);
}

.resource-card--featured .resource-card-title {
  font-size: var(--text-base-size);
  -webkit-line-clamp: 3;
}

.resource-card--featured .resource-card-desc {
  font-size: var(--text-sm-size);
  -webkit-line-clamp: 3;
}

.resource-card--featured .resource-card-tags {
  margin-top: auto;
}

/* ===================================================================
   EVENT CARD COMPONENT
   A clickable card with media, state pill overlay, tags, title,
   description, date/time, and action button.
   =================================================================== */

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, outline 0.15s ease;
}

.event-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-muted);
}

/* Focus-within: visible ring when any element inside card has focus */
.event-card:focus-within {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Media container */
.event-card-media {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}

.event-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* State pill - overlay top-left */
.event-card-state {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(4px);
  z-index: 1;
}

/* State variants */
.event-card-state--live {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.event-card-state--upcoming {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-primary);
}

.event-card-state--past {
  background: rgba(100, 116, 139, 0.9);
  color: var(--color-surface);
}

.event-card-state--cancelled {
  background: rgba(100, 116, 139, 0.9);
  color: var(--color-surface);
}

.event-card-state--full {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Body container */
.event-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-16);
  gap: var(--space-8);
}

/* Tags row */
.event-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Title - uses stretched link pattern for card clickability */
.event-card-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched link inside title makes the whole card clickable */
.event-card-link {
  color: inherit;
  text-decoration: none;
}

.event-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hide default link focus since card has focus-within */
.event-card-link:focus-visible {
  outline: none;
}

/* Description with line clamp */
.event-card-desc {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date/time block */
.event-card-datetime {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.event-card-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.event-card-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

/* Footer with action button - includes divider line above */
.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-muted);
}

/* Action button base - stays above stretched link */
.event-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 36px;
  padding: 0 var(--space-16);
  font-family: var(--font-family-base);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.event-card-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.event-card-action:disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* Action button variants */
.event-card-action--primary {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.event-card-action--primary:hover {
  background-color: var(--color-action-hover);
}

.event-card-action--muted {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: transparent;
}

.event-card-action--muted:hover {
  background-color: #D1FAE5;
}

.event-card-action--danger {
  background-color: transparent;
  color: var(--color-danger-text);
  border-color: var(--color-border);
}

.event-card-action--danger:hover {
  background-color: var(--color-danger-bg);
  border-color: transparent;
}

/* Secondary info in footer */
.event-card-meta {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* Past/Cancelled card subdued styling */
.event-card--past,
.event-card--cancelled {
  opacity: 0.75;
}

.event-card--past:hover,
.event-card--cancelled:hover {
  box-shadow: none;
  border-color: var(--color-border);
}

.event-card--past .event-card-img,
.event-card--cancelled .event-card-img {
  filter: grayscale(0.5);
}

/* ===================================================================
   LEARNING PATH CARD COMPONENT
   A clickable card with media, status/required pill overlays, bookmark,
   title, description, metrics, category badges, progress bar, and action.
   Uses stretched-link pattern for full-card clickability.
   =================================================================== */

.learning-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, outline 0.15s ease;
}

.learning-path-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-muted);
}

/* Focus-within: visible ring when any element inside card has focus */
.learning-path-card:focus-within {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Media container */
.learning-path-card-media {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}

.learning-path-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay pills container - top-left for status + required */
.learning-path-card-overlay {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  z-index: 1;
}

/* Status pill base */
.learning-path-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(4px);
}

/* Status variants */
.learning-path-card-status--new {
  background: var(--color-primary-bg);
  color: var(--color-primary-navy);
  border: 1px solid var(--color-primary-border);
}

.learning-path-card-status--not-started {
  background: var(--color-overlay-light);
  color: var(--color-text-primary);
}

.learning-path-card-status--in-progress {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
}

.learning-path-card-status--completed {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
}

/* Required indicator pill */
.learning-path-card-required {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  backdrop-filter: blur(4px);
}

/* Bookmark button - overlay top-right on image */
.learning-path-card-bookmark {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-overlay-light);
  color: var(--color-text-muted);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.learning-path-card-bookmark:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.learning-path-card-bookmark:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 1px;
}

.learning-path-card-bookmark[aria-pressed="true"] {
  color: var(--color-primary-navy);
  background: var(--color-surface);
}

.learning-path-card-bookmark[aria-pressed="true"]:hover {
  color: var(--color-primary-navy);
}

/* Body container */
.learning-path-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-16);
  gap: var(--space-8);
}

/* Title - uses stretched link pattern for card clickability */
.learning-path-card-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched link inside title makes the whole card clickable */
.learning-path-card-link {
  color: inherit;
  text-decoration: none;
}

.learning-path-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hide default link focus since card has focus-within */
.learning-path-card-link:focus-visible {
  outline: none;
}

/* Description with line clamp */
.learning-path-card-desc {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metrics row */
.learning-path-card-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.learning-path-card-metric {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.learning-path-card-metric i,
.learning-path-card-metric svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Tags row for category badges */
.learning-path-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Progress bar container */
.learning-path-card-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.learning-path-card-progress-bar {
  height: 6px;
  background: var(--color-border-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.learning-path-card-progress-fill {
  height: 100%;
  background: var(--color-primary-navy);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* Completed state - green progress bar */
.learning-path-card--completed .learning-path-card-progress-fill {
  background: var(--color-success);
}

.learning-path-card-progress-label {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* Footer with action button - includes divider line above */
.learning-path-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-muted);
}

/* Action button base - stays above stretched link */
.learning-path-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 36px;
  padding: 0 var(--space-16);
  font-family: var(--font-family-base);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.learning-path-card-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Action button variants */
.learning-path-card-action--primary {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.learning-path-card-action--primary:hover {
  background-color: var(--color-action-hover);
}

.learning-path-card-action--secondary {
  background-color: transparent;
  color: var(--color-primary-navy);
  border-color: var(--color-border);
}

.learning-path-card-action--secondary:hover {
  background-color: var(--color-background);
  border-color: var(--color-border-muted);
}

/* Completed card styling */
.learning-path-card--completed .learning-path-card-img {
  filter: saturate(0.8);
}

/* STORY / FORUM CARD */
.card-story {
  padding: var(--space-24);
}

.card-story .card-author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.card-story .card-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-border-muted);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}

.card-story .card-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-story .card-author-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-body-size);
}

.card-story .card-author-time {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.card-story .card-quote {
  font-size: var(--text-body-size);
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-style: italic;
}

.card-story .card-engagement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.card-story .card-engagement-stats {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.card-story .card-engagement-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* GROUP / CIRCLE CARD */
.card-group .card-title {
  font-size: var(--text-h4-size);
}

.card-group .card-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.card-group .card-members {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.card-group .card-avatars {
  display: flex;
  align-items: center;
}

.card-group .card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  background: var(--color-border-muted);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  margin-left: -8px;
}

.card-group .card-avatar:first-child {
  margin-left: 0;
}

.card-group .card-avatar-more {
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.card-group .card-message-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* Tag Badge (outlined style for cards) */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  background: transparent;
}

/* ===================================================================
   CATEGORY BADGE SYSTEM
   Shared category badges for Resource cards and Event cards.
   Limit to 1–2 badges per card for scannability.
   
   Allowed categories (use only these):
   Boundaries, Addiction, Orientation, Codependency, Family,
   Recovery, Parenting, Wellness, Health
   =================================================================== */

.badge-category {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  height: 22px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* Category badge color variants - mapped to design tokens */
.badge-category--navy {
  background-color: rgba(0, 41, 80, 0.08);
  border-color: rgba(0, 41, 80, 0.2);
  color: var(--color-primary-navy);
}

.badge-category--teal {
  background-color: var(--color-success-bg);
  border-color: rgba(0, 107, 94, 0.2);
  color: var(--color-success-text);
}

.badge-category--blue {
  background-color: var(--color-info-bg);
  border-color: rgba(13, 90, 158, 0.2);
  color: var(--color-info-text);
}

.badge-category--mint {
  background-color: rgba(128, 218, 208, 0.15);
  border-color: rgba(128, 218, 208, 0.4);
  color: #006B5E;
}

/* Status Badges */
.badge-registered {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid transparent;
}

.badge-required {
  background-color: transparent;
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-text);
}

.badge-optional {
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* --- C. BADGES & TAGS --- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  height: 24px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

/* Variants */
.badge-neutral { background-color: var(--color-border-muted); color: var(--color-text-primary); }
.badge-primary { background-color: var(--color-primary-navy); color: var(--color-text-on-navy); }
.badge-success { background-color: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-muted { background-color: var(--color-border-muted); color: var(--color-text-secondary); }

/* Source badges - for Pathroot vs Program origin indicators */
.badge-source-pathroot {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.badge-source-program {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Soft Variant (Tinted) - Reuse same classes as above, they are already "soft" by default in palette design */
/* Solid Variants override */
.badge-solid-success { background-color: var(--color-success); color: white; }
.badge-solid-warning { background-color: var(--color-warning); color: white; }
.badge-solid-danger { background-color: var(--color-danger); color: white; }

/* Tags (Small list) */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* --- D. ALERTS & CALLOUTS --- */
/* ALERT SYSTEM: Canonical alert styles. Do not duplicate selectors.
   Use .alert-info/.alert-success/.alert-warning/.alert-danger for inline alerts.
   Use .alert--info/.alert--success/.alert--warning/.alert--danger for card-based alerts.
   Scope overrides by container if needed. */

.alert {
  padding: var(--space-16);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  font-size: var(--text-small-size);
  line-height: var(--text-body-line-height);
}

.alert-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
  display: block;
}

.alert-info { background-color: var(--color-info-bg); color: var(--color-info-text); border: 1px solid rgba(13, 90, 158, 0.2); }
.alert-success { background-color: var(--color-success-bg); color: var(--color-success-text); border: 1px solid rgba(0, 107, 94, 0.2); }
.alert-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid rgba(245, 158, 11, 0.2); }
.alert-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); border: 1px solid rgba(244, 63, 94, 0.2); }

.alert-banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  width: 100%;
}

/* --- E. TOASTS --- */

.toast-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 320px;
}

.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

.toast-success { border-left: 4px solid var(--color-success); }
.toast-error { border-left: 4px solid var(--color-danger); }
.toast-warning { border-left: 4px solid var(--color-warning); }
.toast-info { border-left: 4px solid var(--color-info); }

.toast-content { flex: 1; }
.toast-title { font-weight: var(--font-weight-medium); font-size: var(--text-small-size); margin-bottom: 2px; }
.toast-message { font-size: var(--text-small-size); color: var(--color-text-muted); }
.toast-close { color: var(--color-text-muted); cursor: pointer; }

/* --- F. LOADING & EMPTY STATES --- */

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 4px; }

.skeleton-text {
  height: 16px;
  background-color: var(--color-border-muted);
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-8);
  width: 100%;
}
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }

.skeleton-block {
  height: 120px;
  background-color: var(--color-border-muted);
  border-radius: var(--radius-md);
}

.empty-state {
  text-align: center;
  padding: var(--space-48) var(--space-24);
  background: var(--color-background);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.empty-state h3 {
  margin: 0;
  color: var(--color-text-primary);
}

.empty-state p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 400px;
  text-align: center;
}

.empty-state .btn {
  margin-top: var(--space-8);
}

/* --- G. FORMS (Wrappers & Basics) --- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.form-label {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-hint {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* Required field asterisk - only the asterisk span is red, not the label text */
/* Usage: <label class="form-label">Field <span class="form-label-required">*</span></label> */
.form-label-required {
  color: var(--color-danger);
  font-weight: 400;
}

.input-base {
  height: 40px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  width: 100%;
  transition: all 0.2s ease;
}

textarea.input-base {
  height: auto;
  min-height: 100px;
  padding: var(--space-8) var(--space-12);
  resize: vertical;
}

.input-base:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.input-base:disabled {
  background-color: var(--color-background);
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.form-field.error .input-base {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}
.form-field.error .input-base:focus {
  box-shadow: 0 0 0 3px var(--color-focus-ring-error);
}

.form-helper {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--text-micro-size);
  color: var(--color-danger-text);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Form row layouts */
.form-row {
  display: flex;
  gap: var(--space-16);
}

.form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.form-success {
  font-size: var(--text-micro-size);
  color: var(--color-success-text);
}

/* --- H. DIVIDERS --- */

.divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-24) 0;
  width: 100%;
}

.divider-label {
  display: flex;
  align-items: center;
  margin: var(--space-24) 0;
}

.divider-label::before,
.divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.divider-text {
  padding: 0 var(--space-12);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* -------------------------------------------------------------------------- */
/* LAYOUT UTILITIES (Demo use)                                                */
/* -------------------------------------------------------------------------- */

.ds-container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.ds-section {
  margin-bottom: var(--space-64);
  background: var(--color-surface);
  padding: var(--space-32);
  border-radius: var(--radius-md);
  border: var(--border-width-default) solid var(--color-border);
}

.ds-section-header {
  border-bottom: 1px solid var(--color-border-muted);
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-24);
}

.ds-grid {
  display: grid;
  gap: var(--space-24);
}

.ds-grid-colors {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ds-grid-type {
  gap: var(--space-32);
}

/* -------------------------------------------------------------------------- */
/* COLOR SWATCHES                                                             */
/* -------------------------------------------------------------------------- */

.swatch {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border-muted);
}

.swatch-color {
  height: 80px;
  width: 100%;
}

.swatch-info {
  padding: var(--space-12);
}

.swatch-name {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  display: block;
}

.swatch-hex {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  font-family: monospace;
}

/* -------------------------------------------------------------------------- */
/* SPACING BLOCKS                                                             */
/* -------------------------------------------------------------------------- */

.spacing-block-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-12);
}

.spacing-block {
  background-color: var(--color-accent-teal);
  height: 24px;
  margin-right: var(--space-16);
  border-radius: 2px;
}

/* -------------------------------------------------------------------------- */
/* RADIUS EXAMPLES                                                            */
/* -------------------------------------------------------------------------- */

.radius-box {
  width: 100px;
  height: 100px;
  background-color: var(--color-primary-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--text-small-size);
  margin-right: var(--space-24);
  display: inline-flex;
}

/* -------------------------------------------------------------------------- */
/* SPEC TABLES (UI Rules & Specifications)                                     */
/* -------------------------------------------------------------------------- */

.spec-table-container {
  max-width: 400px;
}

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

.spec-table td {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border-muted);
}

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

.spec-table td:first-child {
  color: var(--color-text-muted);
  width: 50%;
}

.spec-table td:last-child {
  text-align: right;
}

.spec-table code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: var(--text-micro-size);
  background: var(--color-background);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--color-primary-navy);
}

/* -------------------------------------------------------------------------- */
/* BORDERS & SHADOWS EXAMPLES                                                 */
/* -------------------------------------------------------------------------- */

.surface-box {
  width: 200px;
  height: 120px;
  background: var(--color-surface);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-24);
  display: inline-flex;
}

.shadow-overlay {
  box-shadow: var(--shadow-overlay);
  border: none;
}

.shadow-hover {
  transition: box-shadow 0.2s ease;
}

.shadow-hover:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------------- */
/* ICONS                                                                      */
/* -------------------------------------------------------------------------- */

.icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  color: var(--color-primary-navy);
}

/* -------------------------------------------------------------------------- */
/* DOCUMENTATION HELPERS                                                      */
/* -------------------------------------------------------------------------- */

.ds-component-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
    align-items: center;
}

.ds-usage-note {
    background-color: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    padding: var(--space-16);
    margin-top: var(--space-24);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ds-usage-note h4 {
    color: var(--color-info-text);
}

/* ============================================================================ */
/* PHASE 3: NAVIGATION + LAYOUT + FORMS                                         */
/* ============================================================================ */

/* -------------------------------------------------------------------------- */
/* NAVIGATION: APP HEADER (TOP BAR)                                           */
/* -------------------------------------------------------------------------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-24);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.header-page-title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.header-search {
  position: relative;
  width: 280px;
}

.header-search .input-base {
  padding-left: 40px;
  height: 36px;
  background-color: var(--color-background);
  border-color: var(--color-border);
}

.header-search .input-base:focus {
  background-color: var(--color-surface);
  border-color: var(--color-accent-blue);
}

.header-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
  position: relative;
}

.header-icon-btn:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

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

.header-icon-btn.has-notification::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}

.header-user {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-user:hover {
  background-color: var(--color-background);
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}

.header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Rootie AI Button */
.header-ai-btn {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-blue));
  color: var(--color-primary-navy);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

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

/* -------------------------------------------------------------------------- */
/* NAVIGATION: SIDEBAR                                                         */
/* -------------------------------------------------------------------------- */

.sidebar {
  width: 220px;
  min-height: 100vh;
  background-color: var(--color-primary-navy);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
}

.sidebar.collapsed {
  width: 72px;
}

.sidebar-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-accent-teal);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-navy);
}

.sidebar-logo-text {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: white;
}

.sidebar-logo-img {
  display: block;
  width: 75%;
  height: auto;
  margin: 0 auto var(--space-8);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar.collapsed .sidebar-logo-text {
  display: none;
}

.sidebar-content {
  flex: 1;
  padding: var(--space-16) var(--space-12);
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: var(--space-16);
}

.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: var(--space-12) var(--space-8);
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 var(--space-8);
  margin-bottom: var(--space-8);
  margin-top: var(--space-16);
}

.sidebar-section:first-child .sidebar-section-label {
  margin-top: 0;
}

.sidebar.collapsed .sidebar-section-label {
  display: none;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.sidebar-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.sidebar-item.active .sidebar-item-icon {
  color: var(--color-accent-teal);
}

.sidebar-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.sidebar-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-item-label {
  display: none;
}

.sidebar-item-badge {
  font-size: var(--text-micro-size);
  background-color: var(--color-accent-teal);
  color: var(--color-primary-navy);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
  font-weight: var(--font-weight-medium);
}

.sidebar.collapsed .sidebar-item-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 8px;
  height: 8px;
  padding: 0;
}

/* Nested sidebar items */
.sidebar-nested {
  margin-left: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-nested .sidebar-item {
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-small-size);
}

.sidebar.collapsed .sidebar-nested {
  display: none;
}

/* Sidebar user profile */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sidebar-user:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-navy);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-small-size);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--text-micro-size);
  color: rgba(255, 255, 255, 0.6);
}

.sidebar.collapsed .sidebar-user-info {
  display: none;
}

/* Collapsed sidebar item relative for badge positioning */
.sidebar.collapsed .sidebar-item {
  position: relative;
  justify-content: center;
  padding: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/* NAVIGATION: TABS                                                            */
/* -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}

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

.tab.active {
  color: var(--color-primary-navy);
  border-bottom-color: var(--color-primary-navy);
}

.tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus-ring);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.tab:disabled {
  color: var(--color-action-disabled);
  cursor: not-allowed;
}

.tab-icon {
  width: 16px;
  height: 16px;
}

/* Icon-only tabs */
.tabs-icon-only .tab {
  padding: var(--space-12);
}

.tabs-icon-only .tab .tab-label {
  display: none;
}

/* Tabs inside Card (padded panel) */
.tabs-group--in-card .tabs {
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}

.tab-panel {
  display: block;
}

.tab-panel.tab-content--hidden {
  display: none;
}

.tab-panel-body {
  padding: var(--space-24);
}

/* -------------------------------------------------------------------------- */
/* NAVIGATION: BREADCRUMBS                                                     */
/* -------------------------------------------------------------------------- */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-link:hover {
  color: var(--color-primary-navy);
  text-decoration: underline;
}

.breadcrumb-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  border-radius: 2px;
}

.breadcrumb-separator {
  color: var(--color-border);
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.breadcrumb-section {
  color: var(--color-text-muted);
  cursor: default;
  pointer-events: none;
}

.breadcrumb-truncated {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------- */
/* LAYOUT: APP SHELL                                                           */
/* -------------------------------------------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-background);
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-content {
  flex: 1;
  padding: var(--space-24);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/* LAYOUT: DASHBOARD PATTERNS                                                  */
/* -------------------------------------------------------------------------- */

/* Member Dashboard (Low density, calm) */
.dashboard-member {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.dashboard-hero-card {
  background: linear-gradient(135deg, var(--color-primary-navy), #003D75);
  color: var(--color-text-on-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
}

.dashboard-hero-card h2 {
  color: var(--color-text-on-navy);
  margin-bottom: var(--space-8);
}

.dashboard-hero-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-16);
}

/* Welcome Banner - Reusable pattern for dashboard greetings */
.welcome-banner {
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
}

.welcome-banner-navy {
  background: linear-gradient(135deg, var(--color-primary-navy) 0%, #003d73 100%);
}

.welcome-banner-green {
  background: linear-gradient(135deg, #1a6b4a 0%, #2d8a62 100%);
}

.welcome-banner-title {
  font-size: var(--text-xl-size);
  font-weight: var(--font-weight-semibold);
  color: white;
  margin: 0 0 var(--space-4) 0;
}

.welcome-banner-subtitle {
  font-size: var(--text-sm-size);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.welcome-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-shrink: 0;
}

.welcome-banner-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.welcome-banner-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .welcome-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .welcome-banner-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

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

.dashboard-rail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-24);
}

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

/* Staff Dashboard (Moderate density) */
.dashboard-staff {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-16);
}

/* -------------------------------------------------------------------------- */
/* KPI SYSTEM B: KPI ITEMS (dashboard / legacy)                               */
/* Base definitions for .kpi-label, .kpi-value, .kpi-change                   */
/* Used with .kpi-card (legacy) and .kpi-item contexts                        */
/* For admin list screens, use KPI SYSTEM A (.kpi-card-*) instead             */
/* -------------------------------------------------------------------------- */

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}

/* Base .kpi-label - minimal definition */
.kpi-label {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

/* Base .kpi-value - minimal definition */
.kpi-value {
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
}

/* Base .kpi-change - minimal definition */
.kpi-change {
  font-size: var(--text-micro-size);
}

/* Dashboard context: spacing adjustments for .kpi-card usage */
.kpi-card .kpi-label {
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.kpi-card .kpi-change {
  margin-top: var(--space-4);
}

.kpi-change.positive {
  color: var(--color-success);
}

.kpi-change.negative {
  color: var(--color-danger);
}

.dashboard-two-col {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-24);
}

@media (max-width: 1024px) {
  .dashboard-two-col {
    grid-template-columns: 1fr;
  }
}

/* Admin Dashboard (Denser, still calm) */
.dashboard-admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* -------------------------------------------------------------------------- */
/* FORMS: SELECT                                                               */
/* -------------------------------------------------------------------------- */

.select-wrapper {
  position: relative;
}

.select-base {
  height: 40px;
  padding: 0 var(--space-32) 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  width: 100%;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s ease;
}

.select-base:hover {
  border-color: var(--color-text-muted);
}

.select-base:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.select-base:active {
  background-color: var(--color-background);
}

.select-base:disabled {
  background-color: var(--color-background);
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.select-base:disabled:hover {
  border-color: var(--color-border);
}

.select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

.form-field.error .select-base {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.select-wrapper.error .select-base {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.form-field.success .select-base {
  border-color: var(--color-success);
}

/* Dropdown menu (visual spec) */
.select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}

.select-option {
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-small-size);
  cursor: pointer;
  transition: background 0.1s ease;
}

.select-option:hover {
  background-color: var(--color-background);
}

.select-option:active {
  background-color: var(--color-action-selected);
}

.select-option.selected {
  background-color: var(--color-action-selected);
  color: var(--color-primary-navy);
  font-weight: var(--font-weight-medium);
}

.select-option.selected:hover {
  background-color: #CCE4FC;
}

/* -------------------------------------------------------------------------- */
/* FORMS: CHECKBOX                                                             */
/* -------------------------------------------------------------------------- */

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  cursor: pointer;
}

.checkbox-input {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.checkbox-wrapper:hover .checkbox-input {
  border-color: var(--color-accent-blue);
}

.checkbox-input.checked {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

.checkbox-input.checked .checkbox-icon {
  color: white;
}

.checkbox-input.indeterminate {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

.checkbox-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.checkbox-input.disabled {
  background-color: var(--color-background);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.checkbox-input.disabled.checked {
  background-color: var(--color-action-disabled);
}

.checkbox-wrapper.error .checkbox-input {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.checkbox-label {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.checkbox-label.disabled {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FORMS: CHECKBOX GROUP (MULTI-SELECT)                                        */
/* -------------------------------------------------------------------------- */

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.checkbox-row input[type="checkbox"] {
  width: var(--space-16);
  height: var(--space-16);
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary-navy);
}

.checkbox-row span {
  user-select: none;
}

/* -------------------------------------------------------------------------- */
/* FORMS: RADIO                                                                */
/* -------------------------------------------------------------------------- */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.radio-group.horizontal {
  flex-direction: row;
  gap: var(--space-24);
}

.radio-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  cursor: pointer;
}

.radio-input {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.radio-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.radio-wrapper:hover .radio-input {
  border-color: var(--color-accent-blue);
}

.radio-input.selected {
  border-color: var(--color-primary-navy);
}

.radio-input.selected::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--color-primary-navy);
  border-radius: 50%;
}

.radio-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.radio-input.disabled {
  background-color: var(--color-background);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.radio-input.disabled.selected::after {
  background-color: var(--color-action-disabled);
}

.radio-wrapper.error .radio-input {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.radio-label {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.radio-label.disabled {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FORMS: SWITCH/TOGGLE                                                        */
/* -------------------------------------------------------------------------- */

.switch-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}

.switch-track {
  width: 44px;
  height: 24px;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.switch-track.on {
  background-color: var(--color-success);
}

.switch-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--color-surface);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.switch-track.on .switch-thumb {
  transform: translateX(20px);
}

.switch-track:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.switch-track.disabled {
  background-color: var(--color-border-muted);
  cursor: not-allowed;
}

.switch-track.disabled .switch-thumb {
  background-color: var(--color-background);
}

.switch-label {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
}

.switch-label.disabled {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FORMS: SEGMENTED CONTROL                                                    */
/* -------------------------------------------------------------------------- */
/* Usage: Two or more mutually-exclusive options as distinct button-like pills */
/* Structure: .segmented-control > .segmented-option (label wrapping radio)    */
/* Accessibility: Uses real radio inputs, visible focus ring, selected state   */

.segmented-control {
  display: inline-flex;
  gap: var(--space-8);
  background: transparent;
  border: none;
  padding: 0;
}

.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.segmented-option:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-background);
}

.segmented-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.segmented-option:has(input:checked) {
  background-color: var(--color-primary-bg);
  color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

.segmented-option:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* -------------------------------------------------------------------------- */
/* FORMS: INPUT WITH ICONS                                                     */
/* -------------------------------------------------------------------------- */

.input-with-icon {
  position: relative;
}

.input-with-icon .input-base {
  padding-left: 40px;
}

.input-with-icon.trailing .input-base {
  padding-left: var(--space-12);
  padding-right: 40px;
}

.input-with-icon.both .input-base {
  padding-left: 40px;
  padding-right: 40px;
}

.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.input-icon.leading {
  left: 12px;
}

.input-icon.trailing {
  right: 12px;
}

.input-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-4);
  border-radius: var(--radius-xs);
  transition: color 0.15s ease;
}

.input-action:hover {
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* FORMS: HELPER TEXT PATTERNS                                                 */
/* -------------------------------------------------------------------------- */

.helper-neutral {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.helper-error {
  font-size: var(--text-micro-size);
  color: var(--color-danger-text);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.helper-success {
  font-size: var(--text-micro-size);
  color: var(--color-success-text);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* FORMS: INPUT WITH FIXED PREFIX (PATH INPUT)                                 */
/* -------------------------------------------------------------------------- */

.input-prefix-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-prefix-group:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-12);
  background-color: var(--color-background);
  color: var(--color-text-muted);
  font-size: var(--text-body-size);
  font-family: var(--font-family-base);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}

.input-prefix-input {
  flex: 1;
  border: none;
  border-radius: 0;
  min-width: 0;
}

.input-prefix-input:focus {
  outline: none;
  box-shadow: none;
}

.input-prefix-group--success {
  border-color: var(--color-success);
}

.input-prefix-group--success:focus-within {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(0, 107, 94, 0.2);
}

.input-prefix-group--error {
  border-color: var(--color-danger);
}

.input-prefix-group--error:focus-within {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-focus-ring-error);
}

/* -------------------------------------------------------------------------- */
/* FORMS: COLOR PICKER FIELD                                                   */
/* -------------------------------------------------------------------------- */

.color-field {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
}

.color-swatch-input {
  width: 44px;
  height: 44px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.color-swatch-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-swatch-input::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
}

.color-swatch-input::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
}

.color-swatch-input:hover {
  border-color: var(--color-accent-blue);
}

.color-swatch-input:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.color-hex-input {
  flex: 1;
  min-width: 100px;
  max-width: 140px;
  font-family: var(--font-family-mono);
  text-transform: lowercase;
}

.color-hex-input.input-error {
  border-color: var(--color-danger);
}

.color-hex-input.input-error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-focus-ring-error);
}

/* -------------------------------------------------------------------------- */
/* PREVIEW BOX                                                                  */
/* -------------------------------------------------------------------------- */

.preview-box {
  padding: var(--space-12);
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.preview-box-lg {
  padding: var(--space-24);
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Program header preview for Appearance tab */
.program-header-preview {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background-color: var(--color-primary-navy);
  border-radius: var(--radius-sm);
}

.program-header-preview-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: white;
  padding: 4px;
}

.program-header-preview-text h4 {
  color: white;
  margin: 0;
  font-size: var(--text-body-size);
}

.program-header-preview-text p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-size: var(--text-small-size);
}

/* Constrained width for prefix inputs */
.input-prefix-group--constrained {
  max-width: 400px;
}

/* -------------------------------------------------------------------------- */
/* FORMS: SAVE PATTERNS                                                        */
/* -------------------------------------------------------------------------- */

/* Inline Save - Right-aligned save/cancel buttons */
.form-actions-inline {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

/* Sticky Save Bar */
.save-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-24);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 50;
}

.save-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.save-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.save-bar-status {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-size);
  color: var(--color-success);
}

.save-bar-status.unsaved {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* BUILDER: MICRO-PATTERNS                                                     */
/* -------------------------------------------------------------------------- */

.status-draft {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

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

.status-scheduled {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.preview-callout {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-info-bg);
  border: 1px solid rgba(13, 90, 158, 0.2);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-info-text);
}

.preview-callout-icon {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* DEMO: PHASE 3 LAYOUT EXAMPLES                                               */
/* -------------------------------------------------------------------------- */

.phase3-demo-shell {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-32);
}

.phase3-sidebar-demo {
  width: 200px;
  min-height: 400px;
  background: var(--color-primary-navy);
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
}

.phase3-sidebar-demo .sidebar-logo {
  margin-bottom: var(--space-16);
}

.phase3-sidebar-demo .sidebar-logo-text {
  font-size: var(--text-body-size);
  color: white;
}

.phase3-sidebar-demo .sidebar-section-label {
  color: rgba(255, 255, 255, 0.5);
}

.phase3-sidebar-demo .sidebar-item {
  color: rgba(255, 255, 255, 0.8);
}

.phase3-sidebar-demo .sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.phase3-sidebar-demo .sidebar-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.phase3-sidebar-demo .sidebar-item.active .sidebar-item-icon {
  color: var(--color-accent-teal);
}

.phase3-sidebar-demo .sidebar-footer-demo {
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------------- */
/* SIDEBAR LIGHT VARIANT                                                       */
/* Toggle with .sidebar--light class on .phase3-sidebar-demo                   */
/* -------------------------------------------------------------------------- */

.phase3-sidebar-demo.sidebar--light {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.phase3-sidebar-demo.sidebar--light .sidebar-logo-img {
  border-bottom-color: var(--color-border);
}

/* Hide white logo, show color logo in light mode */
.phase3-sidebar-demo.sidebar--light .sidebar-logo-img.logo-dark {
  display: none;
}

.phase3-sidebar-demo.sidebar--light .sidebar-logo-img.logo-light {
  display: block;
}

/* Default: show dark logo, hide light logo */
.phase3-sidebar-demo .sidebar-logo-img.logo-light {
  display: none;
}

.phase3-sidebar-demo .sidebar-logo-img.logo-dark {
  display: block;
}

.phase3-sidebar-demo.sidebar--light .sidebar-logo-text {
  color: var(--color-primary-navy);
}

.phase3-sidebar-demo.sidebar--light .sidebar-divider {
  background: var(--color-border);
}

.phase3-sidebar-demo.sidebar--light .sidebar-section-label {
  color: var(--color-text-muted);
}

.phase3-sidebar-demo.sidebar--light .sidebar-item {
  color: var(--color-text-secondary);
}

.phase3-sidebar-demo.sidebar--light .sidebar-item:hover {
  background-color: rgba(0, 41, 80, 0.06);
  color: var(--color-primary-navy);
}

.phase3-sidebar-demo.sidebar--light .sidebar-item.active {
  background-color: rgba(0, 41, 80, 0.1);
  color: var(--color-primary-navy);
}

.phase3-sidebar-demo.sidebar--light .sidebar-item.active .sidebar-item-icon {
  color: var(--color-primary-navy);
}

.phase3-sidebar-demo.sidebar--light .sidebar-footer-demo {
  border-top-color: var(--color-border);
}

/* -------------------------------------------------------------------------- */
/* SIDEBAR FOOTER WITH THEME TOGGLE                                           */
/* -------------------------------------------------------------------------- */
/* SIDEBAR FOOTER SYSTEM: Canonical sidebar footer styles.
   Avoid duplicate selectors; scope by sidebar container if needed. */

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.phase3-sidebar-demo.sidebar--light .sidebar-footer {
  border-top-color: var(--color-border);
}

.sidebar-footer .switch-label {
  color: rgba(255, 255, 255, 0.7);
}

.phase3-sidebar-demo.sidebar--light .sidebar-footer .switch-label {
  color: var(--color-text-secondary);
}

.sidebar-footer-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm-size);
  transition: background-color 0.15s ease;
}

.sidebar-footer-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.phase3-sidebar-demo.sidebar--light .sidebar-footer-toggle {
  color: var(--color-text-secondary);
}

.phase3-sidebar-demo.sidebar--light .sidebar-footer-toggle:hover {
  background-color: rgba(0, 41, 80, 0.06);
  color: var(--color-primary-navy);
}

.phase3-header-demo {
  height: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-16);
}

/* ============================================================================ */
/* PHASE 4: ADMIN PATTERNS (DATA + FLOWS)                                        */
/* ============================================================================ */

/* -------------------------------------------------------------------------- */
/* TABLES: CONTAINER & STRUCTURE                                               */
/* -------------------------------------------------------------------------- */

.table-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.table-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.table-search {
  width: 320px;
  min-width: 200px;
  max-width: 400px;
}

.table-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.table-filters-btn:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-text-primary);
}

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

.table-checkbox-cell {
  width: 48px;
}

/* INPUT SIZE SYSTEM: .input-sm is the canonical compact input. 
   Avoid duplicate selectors; scope variants by container. */
.input-sm {
  height: 36px;
}

.select-auto {
  width: auto;
  padding: var(--space-6) var(--space-12);
}

.table-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.table-bulk-actions {
  display: none;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-action-selected);
  border-bottom: 1px solid var(--color-border);
}

.table-bulk-actions.visible {
  display: flex;
}

.table-cell-center {
  text-align: center;
}

.table-bulk-actions-count {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-navy);
}

.table-wrapper {
  overflow-x: auto;
}

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

.table th,
.table td {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  border-bottom: 1px solid var(--color-border-muted);
}

.table th {
  background-color: var(--color-background);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: var(--text-micro-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr {
  transition: background-color 0.1s ease;
}

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

.table tbody tr.selected {
  background-color: var(--table-row-selected-bg);
  border-left: 2px solid var(--table-row-selected-border);
}

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

/* Sortable Headers */
.table-header-sortable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  transition: color 0.15s ease;
}

.table-header-sortable:hover {
  color: var(--color-text-primary);
}

.table-header-sortable.active {
  color: var(--color-primary-navy);
}

.table-sort-icon {
  opacity: 0.4;
}

.table-header-sortable.active .table-sort-icon {
  opacity: 1;
}

/* Row Selection Checkbox */
.table-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-checkbox:hover {
  border-color: var(--color-accent-blue);
}

.table-checkbox.checked {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
  color: white;
}

.table-checkbox.checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}

.table-checkbox.indeterminate {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
  color: white;
}

.table-checkbox.indeterminate::after {
  content: '';
  display: block;
  width: 10px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

/* Table Compact (smaller padding for tight spaces) */
.table.table-compact th,
.table.table-compact td {
  padding: var(--space-8) var(--space-12);
}

.table.table-compact th {
  font-size: 11px;
}

/* Drawer Table Container (constrained height for drawers) */
.drawer-table-container {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.drawer-table-container .table-toolbar {
  border-bottom: 1px solid var(--color-border-muted);
  background-color: var(--color-surface);
}

.drawer-table-container .table-wrapper {
  max-height: 280px;
  overflow-y: auto;
}

.drawer-table-container .pagination {
  border-top: 1px solid var(--color-border-muted);
  padding: var(--space-8) var(--space-12);
  background-color: var(--color-surface);
}

/* Row Actions */
.table-actions-cell {
  width: 48px;
  text-align: center;
}

.table-action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

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

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

/* Data Links (for clickable names in table cells) */
.data-link {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.15s ease;
}

.data-link:hover {
  color: var(--color-primary-navy);
  text-decoration: underline;
}

.data-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  border-radius: 2px;
}

/* Action Menu Dropdown */
.dropdown-container {
  position: relative;
}

.table-action-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  min-width: 160px;
  z-index: 1000;
  overflow: hidden;
}

.table-action-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.table-action-menu-item:hover {
  background-color: var(--color-background);
}

/* Destructive Actions
   Use .table-action-menu-item--danger for all destructive table actions.
   Do NOT use generic .destructive classes in tables.
   The --danger modifier follows BEM convention and is the canonical pattern.
*/
.table-action-menu-item--danger,
.table-action-menu-item.destructive {
  color: var(--color-danger-text);
}

.table-action-menu-item--danger:hover,
.table-action-menu-item.destructive:hover {
  background-color: var(--color-danger-bg);
}

/* Open state for action menus (toggled by JS) */
.table-action-menu.open,
.table-action-menu.ds-action-menu-open {
  display: block;
}

/* Upward-opening action menus (use when near bottom of viewport) */
.table-action-menu--up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* Status Pills for Tables */
.status-active {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-disabled {
  background-color: var(--color-border-muted);
  color: var(--color-text-muted);
}

.status-archived {
  background-color: var(--color-border-muted);
  color: var(--color-text-muted);
}

/* Table Empty States */
.table-empty-state {
  padding: var(--space-48) var(--space-24);
  text-align: center;
}

.table-empty-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}

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

.table-empty-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  max-width: 400px;
  margin: 0 auto var(--space-16);
}

/* Table Loading Skeleton */
.table-skeleton-row td {
  padding: var(--space-16);
}

.table-skeleton-cell {
  height: 16px;
  background-color: var(--color-border-muted);
  border-radius: var(--radius-xs);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.table-skeleton-cell.w-20 { width: 20%; }
.table-skeleton-cell.w-30 { width: 30%; }
.table-skeleton-cell.w-40 { width: 40%; }
.table-skeleton-cell.w-60 { width: 60%; }

/* -------------------------------------------------------------------------- */
/* TABLES: PAGINATION                                                          */
/* -------------------------------------------------------------------------- */

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: var(--space-12);
}

.table-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.table-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.table-per-page {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.table-per-page-label {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.table-per-page-select {
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  background: var(--color-surface);
  cursor: pointer;
}

.table-per-page-select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.pagination-info {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pagination-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  transition: all 0.15s ease;
}

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

.pagination-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

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

.pagination-btn.active {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  border-color: var(--color-primary-navy);
}

.pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FILTER CHIPS                                                                */
/* -------------------------------------------------------------------------- */

.filter-chips {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-action-selected);
  border: 1px solid var(--color-accent-blue);
  border-radius: var(--radius-pill);
  font-size: var(--text-micro-size);
  color: var(--color-primary-navy);
}

.filter-chip-label {
  font-weight: var(--font-weight-medium);
}

.filter-chip-value {
  color: var(--color-text-primary);
}

.filter-chip-remove {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
  margin-left: var(--space-4);
}

.filter-chip-remove:hover {
  background-color: var(--color-primary-navy);
  color: white;
}

.filter-clear-all {
  font-size: var(--text-micro-size);
  color: var(--color-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4);
  margin-left: var(--space-8);
}

.filter-clear-all:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* FILTER PANEL (DRAWER STYLE)                                                 */
/* -------------------------------------------------------------------------- */

.filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.filter-panel.open {
  transform: translateX(0);
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.filter-panel-title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.filter-panel-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.filter-panel-close:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.filter-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-24);
}

.filter-panel-section {
  margin-bottom: var(--space-24);
}

.filter-panel-section-title {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-12);
}

.filter-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-24);
  border-top: 1px solid var(--color-border);
  gap: var(--space-12);
}

/* -------------------------------------------------------------------------- */
/* DRAWER (SLIDE-OVER PANEL)                                                   */
/* -------------------------------------------------------------------------- */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100%;
  height: 100vh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

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

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-16);
}

.drawer-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1;
  min-width: 0;
}

.drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.drawer-close:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.drawer-title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-24);
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-16) var(--space-24);
  border-top: 1px solid var(--color-border);
  gap: var(--space-12);
}

/* Drawer View Mode */
.drawer-view-row {
  display: flex;
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.drawer-view-row:last-child {
  border-bottom: none;
}

.drawer-view-label {
  width: 120px;
  flex-shrink: 0;
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.drawer-view-value {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* MODAL                                                                       */
/* -------------------------------------------------------------------------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.is-open {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

/* When used as root container (not inside .modal), hide by default */
body > .modal-overlay,
.screen-wrapper > .modal-overlay,
.phase4-example-screen > .modal-overlay {
  display: none;
}

/* Show modal overlay when active (for root-level usage) */
.modal-overlay.active,
.modal-overlay.visible {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Overlay inside .modal is always visible (parent .modal controls visibility) */
.modal .modal-overlay {
  display: block;
}

.modal-dialog {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 400px;
  padding: var(--space-24);
  z-index: 1;
}

/* Modal width variant — used for email preview */
.modal-dialog--wide {
  max-width: 720px;
}

.modal-header {
  margin-bottom: var(--space-16);
}

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

.modal-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.modal-body {
  font-size: var(--text-base-size);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

.modal-body-name {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-8);
}

.modal-body-warning {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

/* -------------------------------------------------------------------------- */
/* WIZARD / STEPPER                                                            */
/* -------------------------------------------------------------------------- */

.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-24);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.stepper-step {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.stepper-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
}

.stepper-step.upcoming .stepper-number {
  background: var(--color-background);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.stepper-step.current .stepper-number {
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.stepper-step.completed .stepper-number {
  background: var(--color-success);
  color: white;
}

.stepper-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.stepper-step.current .stepper-label {
  color: var(--color-primary-navy);
}

.stepper-step.completed .stepper-label {
  color: var(--color-success-text);
}

.stepper-connector {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--space-8);
  min-width: 24px;
}

.stepper-connector.completed {
  background: var(--color-success);
}

/* -------------------------------------------------------------------------- */
/* WIZARD STEPPER COMPACT (Centered with Progress Bar Underline)               */
/* -------------------------------------------------------------------------- */

/* Card container for wizard stepper */
.wizard-stepper-card {
  margin-bottom: var(--space-24);
  padding: var(--space-16) var(--space-24);
}

.wizard-stepper-compact {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-8);
  position: relative;
  padding-bottom: var(--space-12); /* Space for progress bar underline */
}

.wizard-stepper-compact-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  position: relative;
}

.wizard-stepper-compact-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-24);
  cursor: pointer;
  position: relative;
  user-select: none;
}

.wizard-stepper-compact-step[data-clickable="false"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.wizard-stepper-compact-step[data-clickable="true"] {
  cursor: pointer;
  opacity: 1;
}

.wizard-stepper-compact-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
  background: var(--color-background);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.wizard-stepper-compact-step.current .wizard-stepper-compact-number {
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  border-color: var(--color-primary-navy);
}

.wizard-stepper-compact-step.completed .wizard-stepper-compact-number {
  background: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.wizard-stepper-compact-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.wizard-stepper-compact-step.current .wizard-stepper-compact-label {
  color: var(--color-primary-navy);
}

.wizard-stepper-compact-step.completed .wizard-stepper-compact-label {
  color: var(--color-success-text);
}

/* Progress bar underline */
.wizard-stepper-compact-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-border);
}

.wizard-stepper-compact-progress-fill {
  height: 100%;
  width: 50%; /* Default: Step 1 active = 50% (halfway) */
  background: var(--color-primary-navy);
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}

/* Connector line between steps - vertically centered with step circles (28px height) */
.wizard-stepper-compact-connector {
  width: 48px;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--space-4);
  align-self: flex-start;
  margin-top: 13px; /* Centers with 28px circle */
}

.wizard-stepper-compact-connector.completed {
  background: var(--color-success);
}

/* -------------------------------------------------------------------------- */
/* LISTS: USER LIST                                                            */
/* -------------------------------------------------------------------------- */

.user-list {
  display: flex;
  flex-direction: column;
}

.user-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border-muted);
  transition: background 0.1s ease;
}

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

.user-list-item:hover {
  background-color: var(--color-background);
}

.user-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.user-list-info {
  flex: 1;
  min-width: 0;
}

.user-list-name {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.user-list-secondary {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.user-list-badge {
  flex-shrink: 0;
}

.user-list-actions {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* LISTS: ACTIVITY FEED / TIMELINE                                             */
/* -------------------------------------------------------------------------- */
/* ACTIVITY COMPONENT: Canonical activity list styles.
   Avoid duplicate selectors; scope by container only if needed. */

.activity-feed {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  position: relative;
  border-bottom: 1px solid var(--color-border-muted);
}

.activity-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--color-border-muted);
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-background);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  z-index: 1;
}

.activity-icon.success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.activity-icon.info {
  background: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-info);
}

.activity-icon.warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* BEM modifier variants (preferred pattern) */
.activity-icon--info {
  background: var(--color-action-selected);
  color: var(--color-accent-blue);
}

.activity-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.activity-icon--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.activity-content {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-4);
}

.activity-title {
  font-size: var(--text-sm-size);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
}

.activity-footer {
  padding: var(--space-12);
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* LISTS: ACCORDION                                                            */
/* -------------------------------------------------------------------------- */

.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

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

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-16);
  background: var(--color-surface);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: background 0.15s ease;
}

.accordion-header:hover {
  background-color: var(--color-background);
}

.accordion-header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus-ring);
}

.accordion-header.disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.accordion-header.disabled:hover {
  background: var(--color-surface);
}

.accordion-icon {
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 var(--space-16) var(--space-16);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  line-height: 1.6;
  display: none;
}

.accordion-item.open .accordion-content {
  display: block;
}

/* -------------------------------------------------------------------------- */
/* DEMO: PHASE 4 LAYOUT HELPERS                                                */
/* -------------------------------------------------------------------------- */

.phase4-demo-shell {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-32);
}

.phase4-example-screen {
  min-height: 600px;
  display: flex;
}

/* ============================================================================ */
/* PHASE 5: ADVANCED PATTERNS (ROLES + NOTIFICATIONS + SETTINGS + CHARTS)       */
/* ============================================================================ */

/* -------------------------------------------------------------------------- */
/* ROLES & PERMISSIONS: ROLE SELECTOR                                          */
/* -------------------------------------------------------------------------- */

.role-selector {
  margin-bottom: var(--space-24);
}

.role-selector-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  display: block;
}

.role-selector-helper {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  margin-top: var(--space-8);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* ROLES & PERMISSIONS: MATRIX TABLE                                           */
/* -------------------------------------------------------------------------- */

.permissions-matrix {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.permissions-matrix-header {
  display: grid;
  grid-template-columns: 1fr repeat(3, 100px);
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.permissions-matrix-header-cell {
  padding: var(--space-12) var(--space-16);
  text-align: center;
}

.permissions-matrix-header-cell:first-child {
  text-align: left;
}

.permissions-matrix-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 100px);
  border-bottom: 1px solid var(--color-border-muted);
  background: var(--color-surface);
  transition: background 0.1s ease;
}

.permissions-matrix-row:last-child {
  border-bottom: none;
}

.permissions-matrix-row:hover {
  background-color: var(--color-background);
}

.permissions-matrix-row.inherited {
  background-color: var(--color-background);
}

.permissions-matrix-cell {
  padding: var(--space-12) var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.permissions-matrix-cell:first-child {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.permissions-matrix-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.permissions-matrix-desc {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.permissions-matrix-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.permissions-matrix-checkbox:hover {
  border-color: var(--color-accent-blue);
}

.permissions-matrix-checkbox.checked {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
  color: white;
}

.permissions-matrix-checkbox.inherited {
  background-color: var(--color-border-muted);
  border-color: var(--color-border-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.permissions-matrix-checkbox.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inherited Hint */
.permissions-inherited-hint {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-8) var(--space-16);
  background: var(--color-background);
  border-top: 1px solid var(--color-border-muted);
}

/* Inheritance Info Callout */
.permissions-info-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-info-bg);
  border: 1px solid rgba(13, 90, 158, 0.2);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-info-text);
  margin-bottom: var(--space-16);
}

.permissions-info-callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Warning for Risky Changes */
.permissions-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-warning-bg);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-warning-text);
  margin-top: var(--space-16);
}

.permissions-warning-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* -------------------------------------------------------------------------- */
/* NOTIFICATIONS CENTER                                                        */
/* -------------------------------------------------------------------------- */

.notification-bell {
  position: relative;
}

.notification-bell-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.notification-bell-btn:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.notification-bell-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.notification-bell-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}

/* Notification Dropdown */
.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  z-index: 100;
  margin-top: var(--space-8);
  overflow: hidden;
}

/* For design system examples - inline display */
.notification-dropdown.ds-example {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 0;
  width: 100%;
}

.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.notification-dropdown-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.notification-dropdown-action {
  font-size: var(--text-micro-size);
  color: var(--color-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.notification-dropdown-action:hover {
  text-decoration: underline;
}

.notification-dropdown-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.notification-dropdown-tab {
  flex: 1;
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s ease;
}

.notification-dropdown-tab:hover {
  color: var(--color-text-primary);
}

.notification-dropdown-tab.active {
  color: var(--color-primary-navy);
  border-bottom-color: var(--color-primary-navy);
}

.notification-dropdown-list {
  max-height: 400px;
  overflow-y: auto;
}

/* Notification Items */
.notification-item {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border-muted);
  cursor: pointer;
  transition: background 0.1s ease;
}

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

.notification-item:hover {
  background-color: var(--color-background);
}

.notification-item.unread {
  background-color: var(--color-action-selected);
}

.notification-item.unread:hover {
  background-color: rgba(115, 181, 245, 0.15);
}

.notification-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.notification-item-icon.info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.notification-item-icon.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.notification-item-icon.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.notification-item-content {
  flex: 1;
  min-width: 0;
}

.notification-item-title {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.notification-item-desc {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.notification-unread-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent-blue);
  border-radius: 50%;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* SETTINGS LAYOUT                                                             */
/* -------------------------------------------------------------------------- */

.settings-layout {
  display: flex;
  min-height: 500px;
}

.settings-nav {
  width: 220px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-16);
  flex-shrink: 0;
}

.settings-nav-title {
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-12);
  padding: 0 var(--space-8);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: var(--space-4);
}

.settings-nav-item:hover {
  background-color: var(--color-background);
}

.settings-nav-item.active {
  background-color: var(--color-action-selected);
  color: var(--color-primary-navy);
  font-weight: var(--font-weight-medium);
}

.settings-nav-item-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.settings-nav-item.active .settings-nav-item-icon {
  color: var(--color-primary-navy);
}

.settings-content {
  flex: 1;
  padding: var(--space-24);
  background: var(--color-background);
  overflow-y: auto;
}

.settings-content-header {
  margin-bottom: var(--space-24);
}

.settings-content-title {
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-8);
}

.settings-content-desc {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.settings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-24);
}

.settings-section-header {
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.settings-section-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.settings-section-body {
  padding: var(--space-20);
}

.settings-section-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-12) var(--space-20);
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
  gap: var(--space-12);
}

/* Inline Save Confirmation */
.save-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-size);
  color: var(--color-success);
}

/* -------------------------------------------------------------------------- */
/* CHARTS: CONTAINER & COMMON                                                  */
/* -------------------------------------------------------------------------- */

.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.chart-card-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chart-card-subtitle {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  margin-top: 2px;
}

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

.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-16);
  justify-content: center;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chart-legend-dot.primary {
  background-color: var(--color-accent-blue);
}

.chart-legend-dot.secondary {
  background-color: var(--color-border);
}

.chart-legend-dot.teal {
  background-color: var(--color-accent-teal);
}

/* Chart Empty State */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--space-16);
  text-align: center;
}

.chart-empty-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}

.chart-empty-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

.chart-empty-desc {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  max-width: 280px;
}

/* Chart Loading State */
.chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--space-16);
}

.chart-loading-placeholder {
  width: 100%;
  height: 150px;
  background: linear-gradient(90deg, var(--color-border-muted) 25%, var(--color-background) 50%, var(--color-border-muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

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

/* -------------------------------------------------------------------------- */
/* CHARTS: LINE CHART (CSS-based visual spec)                                  */
/* -------------------------------------------------------------------------- */

.chart-line {
  position: relative;
  height: 180px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding-bottom: var(--space-24);
}

.chart-line-point {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.chart-line-bar {
  width: 4px;
  background: var(--color-accent-blue);
  border-radius: 2px;
  position: relative;
}

.chart-line-bar::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--color-accent-blue);
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}

.chart-line-label {
  position: absolute;
  bottom: 0;
  font-size: 10px;
  color: var(--color-text-muted);
}

.chart-line-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 1px;
  background: var(--color-border-muted);
}

/* -------------------------------------------------------------------------- */
/* CHARTS: BAR CHART                                                           */
/* -------------------------------------------------------------------------- */

.chart-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  height: 180px;
  padding-bottom: var(--space-24);
  position: relative;
}

.chart-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar-fill {
  width: 100%;
  max-width: 48px;
  background: var(--color-border-muted);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: background 0.2s ease;
}

.chart-bar-fill.accent {
  background: var(--color-accent-blue);
}

.chart-bar-fill.teal {
  background: var(--color-accent-teal);
}

.chart-bar-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: var(--space-8);
}

.chart-bar-value {
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* CHARTS: DONUT CHART                                                         */
/* -------------------------------------------------------------------------- */

.chart-donut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
}

.chart-donut-ring {
  width: 120px;
  height: 120px;
  position: relative;
}

.chart-donut-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.chart-donut-ring circle {
  fill: none;
  stroke-width: 12;
}

.chart-donut-ring .donut-bg {
  stroke: var(--color-border-muted);
}

.chart-donut-ring .donut-fill {
  stroke: var(--color-accent-blue);
  stroke-linecap: round;
}

.chart-donut-ring .donut-fill-secondary {
  stroke: var(--color-accent-teal);
  stroke-linecap: round;
}

.chart-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chart-donut-value {
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
}

.chart-donut-label {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.chart-donut-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/* KPI SYSTEM B (continued): KPI MINI-ROW                                      */
/* Inline KPI display used in cards/panels                                     */
/* Overrides base .kpi-label/.kpi-value/.kpi-change for centered layout        */
/* -------------------------------------------------------------------------- */

.kpi-row {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
}

.kpi-item {
  flex: 1;
  text-align: center;
}

/* .kpi-item context: smaller value size, label below value */
.kpi-item .kpi-value {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
}

.kpi-item .kpi-label {
  margin-top: 2px;
}

.kpi-item .kpi-change {
  margin-top: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* DEMO: PHASE 5 LAYOUT HELPERS                                                */
/* -------------------------------------------------------------------------- */

.phase5-demo-shell {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-32);
}

.phase5-example-screen {
  min-height: 600px;
  display: flex;
}


/* ============================================================================ */
/* NORMALIZATION LAYER: SEMANTIC HELPERS                                         */
/* ============================================================================ */
/* Minimal semantic classes for design system reference files.
   Organized into: Page Structure, Spacing, Layout, Demo Helpers, Component States */

/* -------------------------------------------------------------------------- */
/* A. PAGE STRUCTURE                                                           */
/* Classes for design system documentation pages only                          */
/* -------------------------------------------------------------------------- */

.ds-page-header {
  margin-bottom: var(--space-48);
}

.ds-page-header h1 {
  margin-bottom: var(--space-8);
}

.ds-page-header h2 {
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.ds-nav-links {
  margin-top: var(--space-8);
}

.ds-nav-separator {
  color: var(--color-text-muted);
  margin: 0 8px;
}

.ds-nav-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.ds-phase-header {
  margin-bottom: var(--space-48);
}

.ds-phase-header h2 {
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.ds-label-block {
  margin-bottom: var(--space-16);
  display: block;
}

.ds-label-sm {
  margin-bottom: var(--space-12);
}

.ds-label-section {
  margin: var(--space-32) 0 var(--space-12);
}

/* -------------------------------------------------------------------------- */
/* B. SEMANTIC SPACING                                                         */
/* ds-block: standard vertical rhythm between content blocks                   */
/* ds-stack: parent container that spaces children vertically                  */
/* ds-cluster: horizontal grouping with wrapping                               */
/* -------------------------------------------------------------------------- */

/* Block spacing (margin-bottom) - use on individual elements */
.ds-block {
  margin-bottom: var(--space-24);
}

.ds-block--sm {
  margin-bottom: var(--space-16);
}

.ds-block--lg {
  margin-bottom: var(--space-32);
}

/* Stack: vertical gap between children */
.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ds-stack--sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ds-stack--lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Cluster: horizontal grouping */
.ds-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  align-items: center;
}

.ds-cluster--top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  align-items: flex-start;
}

.ds-cluster--sm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

/* -------------------------------------------------------------------------- */
/* C. LAYOUT GRIDS                                                             */
/* Reusable grid patterns for design system demos                              */
/* -------------------------------------------------------------------------- */

.ds-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

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

.ds-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.ds-grid-main-aside {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-24);
}

.ds-grid-panel {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-24);
}

/* -------------------------------------------------------------------------- */
/* D. DEMO CONTAINER HELPERS                                                   */
/* Width constraints and wrappers for component demos                          */
/* -------------------------------------------------------------------------- */

.ds-demo-narrow {
  max-width: 400px;
}

.ds-demo-wide {
  max-width: 700px;
}

.ds-demo-padded {
  padding: var(--space-24);
}

/* Demo shell layouts for full-page previews */
.ds-demo-shell {
  display: flex;
  min-height: 600px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ds-demo-sidebar {
  width: 220px;
  background: var(--color-primary-navy);
  padding: var(--space-16);
  flex-shrink: 0;
}

.ds-demo-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-demo-content {
  flex: 1;
  padding: var(--space-24);
  background: var(--color-background);
  overflow-y: auto;
}

.ds-demo-header-flat {
  border-radius: 0;
}

/* Placeholder boxes for layout demos */
.ds-placeholder {
  background: var(--color-background);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  min-height: 120px;
}

.ds-placeholder--lg {
  min-height: 200px;
}

/* -------------------------------------------------------------------------- */
/* D2. CONTENT PREVIEW                                                         */
/* Reusable content preview card for Resources, Events, Learning Paths, etc.   */
/* Shows read-only preview with edit action. Supports empty/draft/published.   */
/* -------------------------------------------------------------------------- */

.ds-content-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ds-content-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ds-content-preview-area {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}

.ds-content-preview-text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ds-content-preview-text p {
  margin: 0 0 var(--space-8) 0;
}

.ds-content-preview-text p:last-child {
  margin-bottom: 0;
}

/* Block editor layout for dedicated content editor screens */
.ds-block-editor {
  display: flex;
  gap: var(--space-16);
  min-height: 400px;
}

.ds-block-editor-palette {
  flex: 0 0 160px;
}

.ds-block-editor-canvas {
  flex: 1;
}

.ds-block-editor-block {
  position: relative;
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-24);
  margin-bottom: var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
}

.ds-block-editor-block:last-child {
  margin-bottom: 0;
}

.ds-block-editor-block-handle {
  position: absolute;
  left: var(--space-4);
  top: var(--space-12);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* E. CHART FRAME                                                              */
/* Container heights for chart demos. Bar heights use inline --h variable.     */
/* -------------------------------------------------------------------------- */

.chart-frame {
  height: 200px;
}

.chart-frame--sm {
  height: 120px;
}

.chart-frame--md {
  height: 160px;
}

/* Chart bar with variable height: use style="--h: 70%" */
.chart-bar {
  height: var(--h, 50%);
}

/* -------------------------------------------------------------------------- */
/* F. STATE DISPLAY HELPERS                                                    */
/* Containers for showing component states in documentation                    */
/* -------------------------------------------------------------------------- */

.ds-state-box {
  padding: var(--space-12);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.ds-state-box--bordered {
  padding: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.ds-state-label {
  color: var(--color-text-muted);
  font-size: var(--text-micro-size);
  display: block;
  margin-bottom: var(--space-8);
}

/* Dark background state label (for sidebar demos) */
.ds-state-label--dark {
  color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------------------- */
/* G. SIDEBAR DEMO HELPERS                                                     */
/* Specific helpers for sidebar state demonstrations                           */
/* -------------------------------------------------------------------------- */

.ds-sidebar-states {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  background: var(--color-primary-navy);
  padding: var(--space-16);
  border-radius: var(--radius-sm);
}

.ds-sidebar-states--light {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* Demo shell height variants */
.ds-sidebar-shell--auto {
  height: auto;
  min-height: 520px;
}

.ds-sidebar-shell--tall {
  height: auto;
  min-height: 700px;
}

/* -------------------------------------------------------------------------- */
/* H. FORM STATE HELPERS                                                       */
/* Mock states for form input documentation                                    */
/* -------------------------------------------------------------------------- */

.ds-input-hover {
  border-color: var(--color-text-muted);
}

.ds-input-focus {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.ds-input-success {
  border-color: var(--color-success);
}

/* Dropdown demo positioning */
.ds-dropdown-demo {
  max-width: 300px;
  position: relative;
}

.ds-dropdown-offset {
  position: relative;
  top: -8px;
}

.ds-select-option-hover {
  background-color: var(--color-background);
}

/* -------------------------------------------------------------------------- */
/* I. COMPONENT STATE HELPERS                                                  */
/* For demonstrating active/hover/selected states                              */
/* -------------------------------------------------------------------------- */

.ds-filter-active {
  background: var(--color-action-selected);
  border-color: var(--color-accent-blue);
}

.ds-panel-open {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ds-action-menu {
  position: relative;
}

.ds-action-menu-dropdown {
  position: absolute;
  right: 0;
  top: 36px;
}

/* -------------------------------------------------------------------------- */
/* J. SAVE BAR DEMO                                                            */
/* Positioning for sticky save bar demonstrations                              */
/* -------------------------------------------------------------------------- */

.ds-save-bar-demo {
  position: relative;
  padding-bottom: 60px;
}

.ds-save-bar-fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* -------------------------------------------------------------------------- */
/* K. TABLE DEMO HELPERS                                                       */
/* Column widths and action states for table documentation                     */
/* -------------------------------------------------------------------------- */

.th-checkbox {
  width: 48px;
}

.th-actions {
  width: 48px;
}

.ds-table-action-open {
  background: var(--color-background);
}

/* -------------------------------------------------------------------------- */
/* L. THEME TOGGLE BAR                                                         */
/* Container for sidebar theme toggle in docs                                  */
/* -------------------------------------------------------------------------- */

.ds-theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.ds-theme-toggle-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.ds-theme-toggle-hint {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  margin-left: auto;
}

.ds-theme-toggle-hint code {
  background: var(--color-background);
  padding: 2px 6px;
  border-radius: 3px;
}

/* -------------------------------------------------------------------------- */
/* M. USAGE NOTE VARIANT                                                       */
/* Highlighted usage note for important callouts                               */
/* -------------------------------------------------------------------------- */

.ds-usage-note--highlight {
  background-color: var(--color-action-selected);
  border-left: 4px solid var(--color-accent-teal);
}

.ds-canonical-list {
  margin: 0;
  padding-left: var(--space-20);
}

/* -------------------------------------------------------------------------- */
/* N. ICON UTILITIES                                                           */
/* Icon color variants for component demos                                     */
/* -------------------------------------------------------------------------- */

.ds-icon-teal {
  color: var(--color-accent-teal);
}

.ds-icon-blue {
  color: var(--color-accent-blue);
}

.ds-icon-success {
  color: var(--color-success);
}

.ds-chevron-muted {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* O. SWATCH BACKGROUNDS                                                       */
/* Color swatch semantic background classes                                    */
/* -------------------------------------------------------------------------- */

.swatch-primary-navy { background: var(--color-primary-navy); }
.swatch-accent-blue { background: var(--color-accent-blue); }
.swatch-accent-teal { background: var(--color-accent-teal); }
.swatch-background { background: var(--color-background); border: 1px solid #eee; }
.swatch-surface { background: var(--color-surface); border: 1px solid #eee; }
.swatch-border { background: var(--color-border); }
.swatch-text-primary { background: var(--color-text-primary); }
.swatch-text-muted { background: var(--color-text-muted); }
.swatch-success { background: var(--color-success); }
.swatch-info { background: var(--color-info); }
.swatch-warning { background: var(--color-warning); }
.swatch-danger { background: var(--color-danger); }

/* -------------------------------------------------------------------------- */
/* P. SPACING & RADIUS DEMOS                                                   */
/* Width tokens for spacing visualization blocks                               */
/* -------------------------------------------------------------------------- */

.spacing-4 { width: var(--space-4); }
.spacing-8 { width: var(--space-8); }
.spacing-12 { width: var(--space-12); }
.spacing-16 { width: var(--space-16); }
.spacing-24 { width: var(--space-24); }
.spacing-32 { width: var(--space-32); }
.spacing-40 { width: var(--space-40); }
.spacing-48 { width: var(--space-48); }
.spacing-64 { width: var(--space-64); }

.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-pill { border-radius: var(--radius-pill); width: 140px; }

/* -------------------------------------------------------------------------- */
/* Q. ICON ROW HELPERS                                                         */
/* -------------------------------------------------------------------------- */

.icon-row-muted {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* R. SKELETON SIZES                                                           */
/* -------------------------------------------------------------------------- */

.ds-skeleton-checkbox {
  width: 18px;
  height: 18px;
}

.ds-skeleton-title {
  width: 200px;
  height: 36px;
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* T. MISC COMPONENT HELPERS                                                   */
/* -------------------------------------------------------------------------- */

/* Card header row layout */
.ds-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}

/* Quick actions stack */
.ds-quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Input toolbar sizing */
.ds-input-toolbar {
  height: 32px;
  font-size: 14px;
}

/* Settings nav with border */
.ds-settings-nav-bordered {
  border-right: 1px solid var(--color-border);
}

/* Role selector sizing */
.ds-role-selector-sm {
  max-width: 300px;
  margin-bottom: var(--space-16);
}

/* Notification dropdown */
.ds-dropdown-320 {
  width: 320px;
}

/* Header variants */
.ds-header-flat {
  border-radius: 0;
}

.ds-notification-btn-bg {
  background: var(--color-background);
}

/* Status text muted */
.ds-status-muted {
  color: var(--color-text-muted);
}

/* Checkbox group layout */
.ds-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Panel body height constraints */
.ds-panel-body-h {
  max-height: 320px;
}

.ds-drawer-body-h {
  max-height: 280px;
}

.ds-panel-content {
  padding: var(--space-24);
}

/* Demo panel closed state */
.ds-demo-panel-closed {
  height: 300px;
  position: relative;
  overflow: hidden;
}

/* Actions row centered */
.ds-actions-center {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
}

/* Page title styling */
.ds-page-title {
  font-size: 24px;
  margin-bottom: var(--space-8);
}

/* Breadcrumb row spacing */
.ds-breadcrumb-row {
  margin-top: var(--space-8);
}

/* Search input widths */
.ds-search-toolbar {
  width: 240px;
}

.ds-search-table {
  width: 220px;
}

.ds-search-compact {
  width: 200px;
}

.ds-search-header {
  width: 180px;
}

/* Table input height */
.ds-input-table {
  height: 36px;
}

/* Avatar color variants */
.avatar-teal {
  background: var(--color-accent-teal);
  color: var(--color-primary-navy);
}

.avatar-blue {
  background: var(--color-accent-blue);
  color: var(--color-primary-navy);
}

/* Card patterns */
.card-header-with-avatar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.card-header-tight {
  margin-bottom: 0;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
}

.avatar-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.progress-50 {
  width: 50%;
}

/* Toast icon colors */
.toast-icon-success {
  color: var(--color-success);
}

/* Loading and skeleton demos */
.spinner-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
}

.skeleton-demo {
  margin-top: 16px;
  margin-bottom: 8px;
}

/* Empty state icon styling */
.empty-state-icon {
  margin-bottom: 16px;
  color: var(--color-text-muted);
}

/* Button demo mock states */
.btn-hover-mock {
  background-color: var(--color-action-hover);
}

/* Cursor utilities */
.cursor-pointer {
  cursor: pointer;
}

/* Form demo container */
.form-demo-container {
  max-width: 400px;
}

/* Tab demo mock states */
.tab-default-demo {
  border-bottom: 2px solid transparent;
}

.tab-hover-demo {
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/* Sidebar item hover demo */
.sidebar-item-hover-demo {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* HEADER SEARCH SYSTEM: .header-search-sm/md/lg are the canonical header search widths.
   Avoid duplicate selectors; scope overrides by container. */
.header-search-sm {
  width: 180px;
}

.header-search-md {
  width: 200px;
}

.header-search-lg {
  width: 220px;
}

.header-search-xl {
  width: 240px;
}

.textarea-md {
  min-height: 80px;
}

.textarea-compact {
  min-height: 80px;
}

/* Form input states */
.input-success {
  border-color: var(--color-success);
}

.input-with-trailing {
  padding-right: 40px;
}

/* Select demo states */
.select-hover-demo {
  border-color: var(--color-text-muted);
}

.select-active-demo {
  background-color: var(--color-background);
}

.select-focused-demo {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.select-option-hover {
  background-color: var(--color-background);
}

/* Preview text styles */
.ds-preview-text {
  margin: 0;
  margin-top: 4px;
}

/* Button with active filter */
.btn-filter-active {
  background: var(--color-action-selected);
  border-color: var(--color-accent-blue);
}

/* Badge variants */
.badge-count {
  margin-left: 4px;
  padding: 0 6px;
  height: 18px;
  font-size: 10px;
}

.badge-small {
  height: 18px;
  font-size: 10px;
}

.badge-mini {
  height: 16px;
  font-size: 9px;
}

/* Table action active */
.table-action-btn-active {
  background: var(--color-background);
}

/* Button justify start */
.btn-justify-start {
  justify-content: flex-start;
}

/* Checkbox icon color */
.checkbox-icon-white {
  color: white;
}

/* Icon fill current color */
.icon-fill {
  fill: currentColor;
}

/* Margin left auto utility */
.ds-ml-auto {
  margin-left: auto;
}

/* -------------------------------------------------------------------------- */
/* ADDITIONAL STATE LABEL VARIANTS                                             */
/* -------------------------------------------------------------------------- */

.ds-state-label-block {
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-8);
}

.ds-state-label-block-lg {
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-12);
}

.ds-state-label-inline {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* ADDITIONAL FLEX COLUMN VARIANTS                                             */
/* -------------------------------------------------------------------------- */

.ds-flex-col-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ds-flex-col-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* -------------------------------------------------------------------------- */
/* ADDITIONAL GRID VARIANTS                                                    */
/* -------------------------------------------------------------------------- */

.ds-grid-2-gap-lg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32);
}

.ds-grid-span-full {
  grid-column: 1 / -1;
}

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

/* ============================================================================
   SCREEN LAYOUT CLASSES
   Used by actual application screens (member/, program-admin/, screens/admin/)
   ============================================================================ */

/* Screen wrapper - full viewport height flex container */
.screen-wrapper {
  display: flex;
  min-height: 100vh;
  border-radius: 0;
}

/* Sidebar in screen context */
.screen-sidebar {
  flex-shrink: 0;
  border-radius: 0;
  min-height: 100vh;
}

/* Main content column */
.screen-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Scrollable content area */
.screen-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-24);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
}

/* Content wrapper inside screen-content for proper sticky footer behavior */
.screen-content > *:not(.page-footer) {
  flex-shrink: 0;
}

/* Header without border-radius for screens */
.screen-header {
  border-radius: 0;
}

/* Grid layouts for screens */
.screen-grid-panel {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-24);
}

.screen-grid-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-24);
}

/* Card variants for screens */
.card-content {
  padding: var(--space-20);
}

.card-media {
  padding: 0;
  overflow: hidden;
  position: relative;
}

.card-media-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.card-media-badge {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
}

.card-media--placeholder {
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

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

/* Feature image in cards */
.card-feature-img {
  width: 180px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Card meta info row */
.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-16);
}

.card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Card horizontal layout */
.card-horizontal {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-horizontal-body {
  flex: 1;
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
}

/* Progress bar wrapper in cards */
.card-progress {
  margin-top: auto;
}

/* Full-width button */
.btn-full {
  width: 100%;
}

/* Section with title */
.screen-section-title {
  font-size: var(--text-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

.screen-section-title-sm {
  font-size: var(--text-base-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

/* ==========================================================================
   PAGE HEADER TYPOGRAPHY
   Page titles are 24px (h2-size). Card titles are 20px - never use card-title
   for page headers. Use .page-title only on screen-level H1 elements.
   ========================================================================== */

.page-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.page-title {
  font-size: var(--text-h2-size); /* 24px - larger than card-title (20px) */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0 0 var(--space-4) 0;
}

.page-subtitle {
  font-size: 14px; /* Same as card-subtitle but separate class for pages */
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

.card-description {
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-12) 0;
  line-height: 1.4;
}

/* Assigned by line */
.card-assigned {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Progress text */
.progress-text {
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
}

/* Utility: margin-bottom spacers */
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }

/* Badge alignment */
.badge-self-start {
  align-self: flex-start;
}

/* Chevron muted (for header dropdowns) */
.chevron-muted {
  color: var(--color-text-muted);
}

/* Welcome banner full width */
.welcome-banner-full {
  width: 100%;
}

/* Grid for recommended cards */
.screen-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

/* Sidebar widget section */
.sidebar-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Sidebar theme toggle control */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.theme-toggle-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.theme-toggle-btn i {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------------------- */
/* DASHBOARD UTILITY CLASSES                                                  */
/* -------------------------------------------------------------------------- */

/* Additional margin utilities */
.mb-12 { margin-bottom: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* Icon accent colors */
.icon-accent-blue {
  color: var(--color-accent-blue);
}

.icon-accent-teal {
  color: var(--color-accent-teal);
}

/* Card meta items */
.card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Progress container */
.card-progress-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Progress fill variant */
.card-progress-fill--teal {
  background: var(--color-accent-teal);
}

/* -------------------------------------------------------------------------- */
/* CARD WIDGET (Sidebar Cards)                                                */
/* -------------------------------------------------------------------------- */

.card-widget {
  padding: var(--space-16);
  gap: var(--space-12);
}

.card-widget-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.card-widget-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-widget-icon--teal {
  background: var(--color-accent-teal-bg, #E6F7F5);
  color: var(--color-accent-teal);
}

.card-widget-icon--purple {
  background: var(--color-accent-purple-bg, #F3E8FF);
  color: var(--color-accent-purple, #9333EA);
}

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

.card-widget-text {
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
  margin: 0;
}

.card-widget-footnote {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin: var(--space-8) 0 0 0;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* EVENT LIST (Sidebar Compact Events)                                        */
/* -------------------------------------------------------------------------- */

.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.event-list-item {
  display: flex;
  gap: var(--space-12);
}

.event-list-item--border {
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.event-date-box {
  width: 40px;
  height: 40px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.event-date-day {
  font-size: var(--text-xs-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1;
}

.event-date-month {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.event-list-title {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.event-list-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin: 0;
}

/* Screen section title small variant */
.screen-section-title-sm {
  font-size: var(--text-base-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* BODY RESET (for screen pages)                                               */
/* -------------------------------------------------------------------------- */

.body-reset {
  margin: 0;
  padding: 0;
  background: var(--color-background);
}

/* -------------------------------------------------------------------------- */
/* CARD WIDGET EXTENSIONS                                                      */
/* -------------------------------------------------------------------------- */

.card-widget-value {
  font-size: var(--text-3xl-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.card-widget-label {
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
}

.card-widget-icon--blue {
  background: var(--color-action-selected);
  color: var(--color-accent-blue);
}

.card-widget-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.card-widget-icon--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* -------------------------------------------------------------------------- */
/* BAR CHART EXTENSIONS                                                        */
/* -------------------------------------------------------------------------- */

.bar-chart-bar--success-bg {
  background: var(--color-success-bg);
}

.bar-chart-bar--info-bg {
  background: var(--color-info-bg);
}

.bar-chart-bar--danger-bg {
  background: var(--color-danger-bg);
}

.bar-chart-fill--info {
  background: var(--color-accent-blue);
}

/* -------------------------------------------------------------------------- */
/* ATTENTION ROWS (Needs Attention Section)                                    */
/* -------------------------------------------------------------------------- */

.attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) 0;
}

.attention-row--border {
  border-bottom: 1px solid var(--color-border-muted);
}

.attention-info {
  flex: 1;
}

.attention-link {
  font-size: var(--text-sm-size);
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.attention-link:hover {
  text-decoration: underline;
}

.attention-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------- */
/* SIGNAL ROWS (Growth & Trust Signals Section)                                */
/* -------------------------------------------------------------------------- */

.signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) 0;
}

.signal-row--border {
  border-bottom: 1px solid var(--color-border-muted);
}

.signal-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.signal-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.signal-icon--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.signal-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.signal-icon--muted {
  background: var(--color-border-muted);
  color: var(--color-text-muted);
}

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

.signal-value {
  font-size: var(--text-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* CIRCLE ROWS (New Support Circles Section)                                   */
/* -------------------------------------------------------------------------- */

.circle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12);
  background: var(--color-border-muted);
  border-radius: var(--radius-sm);
}

.circle-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.circle-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-avatar--teal {
  background: var(--color-accent-teal);
  color: var(--color-primary-navy);
}

.circle-details {
  display: flex;
  flex-direction: column;
}

.circle-name {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.circle-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* ENTITY LIST ROWS (Builder Screens)                                          */
/* -------------------------------------------------------------------------- */

.entity-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Scrollable selection panel list — constrained height for inline panels */
.selection-panel-list {
  max-height: 240px;
  overflow-y: auto;
}

.entity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border-muted);
  transition: background-color 0.1s ease;
}

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

.entity-row:hover {
  background-color: var(--color-background);
}

.entity-row-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: var(--color-border-muted);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lesson drag grip — plain icon wrapper, no background or tint */
.lesson-drag-grip {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
}

/* Lesson type icon (tinted) — colorizes entity-row-icon based on content type */
/* Lesson type icon sizing - larger container for content type icons */
[class*="lesson-type-icon--"] {
  width: 40px;
  height: 40px;
}

.lesson-type-icon--text {
  background-color: var(--color-info-text);
  color: var(--color-info-bg);
}

.lesson-type-icon--video {
  background-color: var(--color-success-text);
  color: var(--color-success-bg);
}

.lesson-type-icon--audio {
  background-color: var(--color-accent-purple);
  color: var(--color-white);
}

.lesson-type-icon--pdf {
  background-color: var(--color-error-text);
  color: var(--color-error-bg);
}

.lesson-type-icon--presentation {
  background-color: var(--color-accent-orange);
  color: var(--color-white);
}

.lesson-type-icon--survey {
  background-color: var(--color-warning-text);
  color: var(--color-warning-bg);
}

.lesson-type-icon--resource {
  background-color: var(--color-text-secondary);
  color: var(--color-border-muted);
}

.lesson-type-icon--event {
  background-color: var(--color-primary-navy);
  color: var(--color-primary-bg);
}

/* -------------------------------------------------------------------------- */
/* SELECTABLE TILES (4-up grid)                                               */
/* -------------------------------------------------------------------------- */
/* Usage: Tile-based selection for lesson types, content types, etc.          */
/* Container: .tile-selector                                                  */
/* Tile: .tile-option with data-tile-value for selection state                */

.tile-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
}

@media (max-width: 480px) {
  .tile-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact variant for drawer contexts (3-column layout) */
.tile-selector--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Authoring variant for editor screens (5/3/2 responsive columns, compact tiles) */
.tile-selector--authoring {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 2-column variant for location/schedule tiles */
.tile-selector--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile-selector--2col .tile-option {
  padding: var(--space-16);
  min-height: auto;
  gap: var(--space-8);
  flex: 1;
}

/* 4-column variant for resource editor format selector */
.tile-selector--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .tile-selector--4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile-selector--4col .tile-option {
  padding: var(--space-16);
  min-height: 100px;
  gap: var(--space-8);
}

.tile-selector--4col .tile-option-icon {
  width: 36px;
  height: 36px;
}

@media (max-width: 1024px) {
  .tile-selector--authoring {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .tile-selector--authoring {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile-selector--authoring .tile-option {
  padding: var(--space-12);
  min-height: 88px;
  gap: var(--space-4);
}

.tile-selector--authoring .tile-option-icon {
  width: 32px;
  height: 32px;
}

.tile-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16);
  min-height: 112px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tile-option:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-background);
}

.tile-option[aria-selected="true"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

.tile-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}

.tile-option-icon--plain {
  background: transparent;
  color: var(--color-text-primary);
}

.tile-option-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.entity-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.entity-row-title {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.entity-row-title:hover {
  color: var(--color-primary-navy);
  text-decoration: underline;
}

.entity-row-meta {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.entity-row-badge {
  flex-shrink: 0;
}

.entity-row-actions {
  flex-shrink: 0;
  position: relative;
}

/* -------------------------------------------------------------------------- */
/* ADD ROW: Dotted full-width action row for builder interfaces               */
/* -------------------------------------------------------------------------- */

.add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  color: var(--color-text-secondary);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  gap: var(--space-8);
}

.add-row:hover {
  background-color: var(--color-border-muted);
  border-color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* SCREEN BODY & UTILITY CLASSES                                               */
/* -------------------------------------------------------------------------- */

.screen-body {
  margin: 0;
  background: var(--color-background);
}

.screen-header {
  border-radius: 0;
}

/* Card widget extensions */
.card-widget-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.card-widget-value-sm {
  font-size: var(--text-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.card-widget-icon--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Avatar utilities */
.avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  color: white;
}

.avatar-sm--blue {
  background: var(--color-accent-blue);
}

.avatar-sm--success {
  background: var(--color-success);
}

.avatar-sm--muted {
  background: var(--color-text-muted);
}

/* Avatar component - circular container for user photos or initials
 * Usage: <img class="avatar avatar--sm" src="..."> or 
 *        <div class="avatar avatar--sm avatar--initials avatar--teal">AB</div>
 */
.avatar {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  object-fit: cover;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.avatar--initials {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Avatar color modifiers using existing design tokens */
.avatar--teal {
  background: var(--color-accent-teal);
  color: var(--color-primary-navy);
}

.avatar--blue {
  background: var(--color-accent-blue);
  color: var(--color-primary-navy);
}

.avatar--purple {
  background: var(--color-accent-purple);
  color: white;
}

.avatar--orange {
  background: var(--color-accent-orange);
  color: var(--color-primary-navy);
}

.avatar--green {
  background: var(--color-success);
  color: white;
}

.avatar--navy {
  background: var(--color-primary-navy);
  color: white;
}

/* Table thumbnail - small square container for table row thumbnails */
.ds-thumb-square-sm {
  width: 50px;
  height: 50px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.ds-thumb-square-sm img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 1px);
}

/* Table thumbnail - medium square container for table row thumbnails */
.ds-thumb-square-md {
  width: var(--space-48);
  height: var(--space-48);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.ds-thumb-square-md img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 1px);
}

/* Table thumbnail placeholder SVG sizing - ensures consistent icon rendering */
.ds-thumb-square-sm svg {
  width: var(--space-16);
  height: var(--space-16);
}

.ds-thumb-square-md svg {
  width: var(--space-24);
  height: var(--space-24);
}

/* Icon-based thumbnail modifier - centers icon with subtle background */
.ds-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-bg);
  color: var(--color-primary-navy);
}

/* Activity list styling */
.activity-list {
  padding: 0;
}

/* Participant row styling */
.participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.participant-row--highlight {
  background: var(--color-action-selected);
}

/* Form field display (read-only fields) */
.form-field-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-field-label {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
}

.form-field-value {
  font-size: var(--text-sm-size);
  color: var(--color-text-primary);
  padding: var(--space-12);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

/* Tab content visibility */
.tab-content--hidden {
  display: none;
}

/* Card section divider */
.card-section-divider {
  padding-bottom: var(--space-20);
  margin-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border-muted);
}

/* Text utilities */
.text-primary {
  color: var(--color-text-primary);
}

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

.font-medium {
  font-weight: var(--font-weight-medium);
}

/* Badge variant */
.badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* -------------------------------------------------------------------------- */
/* SCREEN CLEANUP SEMANTIC CLASSES                                            */
/* -------------------------------------------------------------------------- */

/* KPI Value Variants */
.kpi-value--warning {
  color: var(--color-warning);
}

.kpi-value--danger {
  color: var(--color-danger);
}

/* ALERT ICON SYSTEM: Canonical alert-icon styles. Do not duplicate selectors.
   Use modifiers .alert-icon--warning/.alert-icon--danger/.alert-icon--info/.alert-icon--success for color variants. */
.alert-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-icon--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.alert-icon--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.alert-icon--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.alert-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* CARD HEADER ROW SYSTEM: Canonical header-row styles.
   Avoid duplicate selectors; scope by container if needed. */
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.card-header-row--last {
  border-bottom: none;
}

/* Badge Fixed Width Variant */
.badge--fixed {
  min-width: 64px;
  justify-content: center;
}

/* Table Column Width Classes */
.table-col-checkbox {
  width: 48px;
}

.table-col-actions {
  width: 48px;
}

/* Modal Size Variants */
.modal--sm {
  max-width: 480px;
}

.modal--lg {
  max-width: 720px;
}

.alert--danger {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
}

.alert--danger .card-title-sm {
  color: var(--color-danger-text);
}

.alert--danger .card-description {
  color: var(--color-danger-text);
  margin-top: var(--space-8);
}

.alert--warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.alert--info {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info);
}

.alert--success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
}

/* Screen Grid Panel (for stat boxes within cards) */
.screen-grid-panel {
  padding: var(--space-16);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

/* Modal overlay is always visible when modal is open (controlled by .modal.is-open) */

/* Sidebar theme toggle in header */
.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebar-theme-toggle:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}


/* ============================================================================
   KPI SYSTEM A: KPI CARDS (admin list screens)
   - Uses .kpi-card-label, .kpi-card-value, .kpi-card-subtext
   - Informational metrics display (not clickable)
   - Three variants: Summary, Delta, Distribution
   - For dashboard/legacy screens, use KPI SYSTEM B (.kpi-label, .kpi-value)
   ============================================================================ */

/* Base KPI Card (admin screens - extends legacy .kpi-card with flex layout) */
.kpi-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.kpi-card-label {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.kpi-card-value {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.kpi-card-subtext {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* KPI Summary Variant (.kpi-card--summary) */
/* Used for: Total members, Total support circles, Total referrals, Total reviews */
.kpi-card--summary .kpi-card-value {
  margin-top: var(--space-4);
}

/* KPI Card List (for ranked items like top categories) */
.kpi-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.kpi-card-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

/* KPI Delta Variant (.kpi-card--delta) */
/* Used for: New members, Active members change, Engagement change */
.kpi-card--delta .kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-xs);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-8);
}

.kpi-delta--up {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.kpi-delta--down {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.kpi-delta--neutral {
  background: var(--color-background);
  color: var(--color-text-muted);
}

.kpi-delta-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* KPI Distribution Variant (.kpi-card--distribution) */
/* Used for: Support circles by stage, Engagement breakdown */
.kpi-card--distribution .kpi-dist-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-12);
  background: var(--color-background);
}

.kpi-dist-seg {
  height: 100%;
  min-width: 0;
  /* Width is set via JS based on data-value attribute */
}

/* Distribution segment color variants */
.kpi-dist-seg--risk {
  background: var(--color-danger);
}

.kpi-dist-seg--low {
  background: var(--color-warning);
}

.kpi-dist-seg--active {
  background: var(--color-success);
}

.kpi-dist-seg--new {
  background: var(--color-info);
}

/* Distribution legend */
.kpi-dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.kpi-dist-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  color: var(--color-text-secondary);
}

.kpi-dist-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.kpi-dist-legend-color--risk {
  background: var(--color-danger);
}

.kpi-dist-legend-color--low {
  background: var(--color-warning);
}

.kpi-dist-legend-color--active {
  background: var(--color-success);
}

.kpi-dist-legend-color--new {
  background: var(--color-info);
}

.kpi-dist-legend-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* PROGRAM DETAIL: Logo tile and status rows                                  */
/* -------------------------------------------------------------------------- */

/* Program logo tile (square with border) */
.program-logo-tile {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  object-fit: contain;
  background: var(--color-background);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-logo-tile-lg {
  max-width: 100%;
  max-height: 240px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  object-fit: contain;
  background: var(--color-background);
}

.logo-upload-preview {
  display: flex;
  justify-content: center;
}

.thumbnail-preview-square {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Status row: 2-column layout with space-between */
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

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

.status-row .badge {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* PAGE FOOTER ACTIONS                                                        */
/* -------------------------------------------------------------------------- */

.page-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  background: transparent;
  border-top: 1px solid var(--color-border);
  z-index: 50;
  flex-shrink: 0;
}

.page-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  max-width: 100%;
}

.page-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.page-footer-note {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-muted);
}

.page-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-left: auto;
}

/* Sticky footer variant - fixed to viewport bottom for save/cancel screens */
.page-footer--sticky {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background-color: var(--color-surface);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Demo-only: inline footer for documentation examples */
.page-footer--demo {
  position: relative;
}

/* Page content padding helper to prevent content from hiding behind fixed footer */
[data-sticky-footer-offset] {
  padding-bottom: var(--space-64);
}

/* -------------------------------------------------------------------------- */
/* WIZARD FOOTER                                                               */
/* -------------------------------------------------------------------------- */

.wizard-footer {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.wizard-footer-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
}

.wizard-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.wizard-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-left: auto;
}

/* -------------------------------------------------------------------------- */
/* COLLAPSIBLE PANEL STATE                                                     */
/* -------------------------------------------------------------------------- */

.is-collapsed {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* SECTION HEADER (Builder Patterns)                                           */
/* -------------------------------------------------------------------------- */

.section-header {
  padding-bottom: var(--space-8);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* ADD-ROW ICON CIRCLE                                                         */
/* -------------------------------------------------------------------------- */

.add-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-info-text);
  color: var(--color-info-bg);
  margin-right: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/* LESSON ROW CONTAINER (Builder Pattern)                                      */
/* -------------------------------------------------------------------------- */

.lesson-row {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
}

.entity-row--card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  border-bottom: none;
}

[data-nav-sublist="true"] {
  padding-left: var(--space-24);
}

.lesson-row.dragging {
  opacity: 0.5;
}

.lesson-row.drag-over {
  border-color: var(--color-info-text);
  box-shadow: 0 0 0 2px var(--color-info-bg);
}

/* -------------------------------------------------------------------------- */
/* LEARNING PATH BUILDER SCOPED RULES                                          */
/* -------------------------------------------------------------------------- */

[data-screen="learning-path-builder"] .entity-list,
[data-screen="application-builder"] .entity-list {
  background: transparent;
  border: none;
  overflow: visible;
}

[data-screen="learning-path-builder"] .lesson-row,
[data-screen="application-builder"] .lesson-row {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-8);
}

[data-screen="learning-path-builder"] .lesson-row:last-child,
[data-screen="application-builder"] .lesson-row:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* SECTION NUMBER BADGE                                                        */
/* -------------------------------------------------------------------------- */

.section-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-border-muted);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-size);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* UPLOADER COMPONENT                                                          */
/* -------------------------------------------------------------------------- */

.uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  text-align: center;
  min-height: 120px;
  margin-bottom: var(--space-8);
}

.uploader-thumbnail {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background-color: var(--color-background);
  padding: var(--space-24);
}

.uploader--header.uploader-thumbnail {
  aspect-ratio: 4 / 1;
}

.uploader-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.uploader-icon {
  color: var(--color-text-muted);
}

.uploader-actions {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
}

.uploader-uploaded {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  justify-content: center;
}

.uploader-file-icon {
  color: var(--color-accent-blue);
}

.uploader-filename {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.uploader-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.uploader-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.uploader-preview-actions {
  display: flex;
  gap: var(--space-8);
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
}

/* Show "Use Default" button only when thumbnail is custom */
.uploader[data-thumbnail-mode="default"] [data-use-default] {
  display: none !important;
}

.uploader[data-thumbnail-mode="custom"] [data-use-default] {
  display: inline-flex !important;
}

.uploader-replace-btn {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
}

.uploader:not(.uploader-empty) {
  border-style: solid;
  padding: 0;
  overflow: hidden;
}

.uploader:not(.uploader-empty) .uploader-placeholder {
  display: none;
}

.uploader.uploader-empty .uploader-uploaded,
.uploader.uploader-empty .uploader-preview {
  display: none;
}

/* Media uploader variant (video/audio/file) - gray background, more padding */
.uploader--media {
  background-color: var(--color-background);
  padding: var(--space-32) var(--space-24);
  min-height: 140px;
}

.uploader--media:not(.uploader-empty) {
  padding: var(--space-24);
}

/* Video uploader with persistent header and expandable link section */
.uploader--video {
  min-height: 160px;
  padding: var(--space-32) var(--space-24);
}

.uploader-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.uploader-link-section {
  display: none;
  width: 100%;
  max-width: 360px;
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-subtle);
}

.uploader[data-link-mode="true"] .uploader-link-section {
  display: block;
}

.uploader-link-input {
  width: 100%;
  margin-bottom: var(--space-8);
}

/* Toggle button active state */
.uploader[data-link-mode="true"] [data-video-link-toggle] {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Legacy link state - hidden (replaced by new pattern) */
.uploader-link-state {
  display: none;
}

.uploader-link-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/* MULTISELECT COMPONENT                                                       */
/* -------------------------------------------------------------------------- */

.multiselect {
  position: relative;
}

.multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  text-align: left;
  background-color: var(--color-surface);
}

.multiselect-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.multiselect-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.multiselect-value.has-selection {
  color: var(--color-text-primary);
}

.multiselect-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.multiselect.is-open .multiselect-icon {
  transform: rotate(180deg);
}

.multiselect-dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.multiselect-search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.multiselect-search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.multiselect-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  outline: none;
}

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

.multiselect-options {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-4) 0;
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
}

.multiselect-option:hover {
  background-color: var(--color-surface-hover);
}

.multiselect-option input[type="checkbox"] {
  flex-shrink: 0;
}

.multiselect-option.hidden {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* CREATABLE SELECT COMPONENT                                                  */
/* -------------------------------------------------------------------------- */

.creatable-select {
  position: relative;
}

.creatable-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  text-align: left;
  background-color: var(--color-surface);
}

.creatable-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.creatable-select-value.has-selection {
  color: var(--color-text-primary);
}

.creatable-select-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.creatable-select.is-open .creatable-select-icon {
  transform: rotate(180deg);
}

.creatable-select-dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.creatable-select-search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.creatable-select-search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.creatable-select-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  outline: none;
}

.creatable-select-search-input::placeholder {
  color: var(--color-text-muted);
}

.creatable-select-options {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-4) 0;
}

.creatable-select-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-8) var(--space-12);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  background: none;
  border: none;
}

.creatable-select-option:hover {
  background-color: var(--color-surface-hover);
}

.creatable-select-option.selected {
  background-color: var(--color-accent-blue-subtle);
  color: var(--color-accent-blue);
}

.creatable-select-option.hidden {
  display: none;
}

.creatable-select-create {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  text-align: left;
  padding: var(--space-8) var(--space-12);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-accent-blue);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
}

.creatable-select-create:hover {
  background-color: var(--color-surface-hover);
}

/* ============================================================
   SCHEDULE CONTROL
   A reusable date/time/timezone picker component
   ============================================================ */

.schedule-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.schedule-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

.schedule-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: var(--space-8) var(--space-12);
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Scoped padding for trailing icon - schedule-trigger uses flexbox, not input-base */
.schedule-control .input-with-icon.trailing .schedule-trigger {
  padding-right: 40px;
}

.schedule-trigger:hover {
  border-color: var(--color-border-hover);
}

.schedule-trigger:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.schedule-trigger[aria-expanded="true"] {
  border-color: var(--color-border-focus);
}

.schedule-trigger.error {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.schedule-value {
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
}

.schedule-value.text-muted {
  color: var(--color-text-muted);
}

/* Popover */
.schedule-popover {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  z-index: 200;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.schedule-popover[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Calendar popover header */
.schedule-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.schedule-month {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Day of week labels */
.schedule-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  padding: var(--space-8) var(--space-12) var(--space-4);
}

.schedule-dow span {
  text-align: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Calendar grid */
.schedule-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  padding: var(--space-4) var(--space-12) var(--space-12);
}

.schedule-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.schedule-day:hover {
  background-color: var(--color-background);
}

.schedule-day:focus-visible {
  outline: none;
  background-color: var(--color-background);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.schedule-day.is-today {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-blue);
}

.schedule-day.is-selected {
  background-color: var(--color-accent-blue);
  color: var(--color-text-on-primary);
}

.schedule-day.is-selected:hover {
  background-color: var(--color-accent-blue-hover);
}

.schedule-day.is-other-month {
  color: var(--color-text-muted);
}

.schedule-day.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.schedule-day.is-disabled:hover {
  background: none;
}

/* Calendar footer */
.schedule-popover-footer {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-12);
  border-top: 1px solid var(--color-border);
}

/* Time list popover */
.schedule-time-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.schedule-time-option {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.schedule-time-option:hover {
  background-color: var(--color-background);
  cursor: pointer;
}

.schedule-time-option:focus-visible {
  outline: none;
  background-color: var(--color-background);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.schedule-time-option.is-selected {
  background-color: var(--color-accent-blue);
  color: var(--color-text-on-primary);
}

.schedule-time-option.is-selected:hover {
  background-color: var(--color-accent-blue-hover);
}

/* ============================================================
   DAY SELECTOR
   Row of day-of-week checkboxes for recurrence (S M T W T F S)
   ============================================================ */

.day-selector {
  display: flex;
  gap: var(--space-8);
}

.day-option {
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--text-body-size);
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.day-label:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-surface-hover);
}

.day-option input[type="checkbox"]:checked + .day-label {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-text-on-primary);
}

.day-option input[type="checkbox"]:focus-visible + .day-label {
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}