/* QuickStudio Web Interface - Clean, Simple, Functional */

:root {
  /* ============================================
     Brand Colors (constant across themes)
     ============================================ */
  --primary-color: #2563eb;
  --primary-dark: #1e40af;
  --primary-light: #dbeafe;
  --secondary-color: #10b981;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;

  /* ============================================
     Base Gray Scale (constant)
     ============================================ */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ============================================
     Semantic Theme Variables (Light Mode Default)
     These are overridden by [data-theme="dark"]
     ============================================ */
  --bg-page: var(--gray-50);
  --bg-card: white;
  --bg-card-alt: var(--gray-100);
  --bg-input: white;
  --bg-hover: var(--gray-50);
  --bg-table-header: var(--gray-100);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-on-primary: white;

  --border-color: var(--gray-200);
  --border-color-strong: var(--gray-300);

  --sidebar-bg: var(--gray-900);
  --sidebar-text: rgba(255, 255, 255, 0.8);
  --sidebar-text-hover: white;
  --sidebar-border: rgba(255, 255, 255, 0.1);

  --modal-backdrop: rgba(0, 0, 0, 0.5);

  /* ============================================
     Semantic Status Colors (Light Mode)
     Used by status badges, alerts, and inline status pills.
     Soft background + accessible strong text per tone; warning also
     ships a border (used by inline panels like proposed-slot-fields).
     ============================================ */
  --bg-success-soft: #dcfce7;
  --text-success-strong: #166534;

  --bg-warning-soft: #fef3c7;
  --text-warning-strong: #92400e;
  --border-warning: #fbbf24;

  --bg-info-soft: #dbeafe;
  --text-info-strong: #0c4a6e;

  --bg-danger-soft: #fee2e2;
  --text-danger-strong: #991b1b;

  --bg-neutral-soft: #f3f4f6;
  --text-neutral-strong: #6b7280;

  --link-color: #667eea;

  /* Stronger button-hover variants of brand colors */
  --danger-color-hover: #dc2626;
  --secondary-color-hover: #059669;

  /* ============================================
     Font Sizes (can be scaled by data-font-size)
     ============================================ */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* ============================================
     Spacing & Effects (constant)
     ============================================ */
  --border-radius: 8px;
  --transition: all 0.2s ease;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme='dark'] {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-card-alt: #334155;
  --bg-input: #1e293b;
  --bg-hover: #334155;
  --bg-table-header: #1e293b;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-on-primary: white;

  --border-color: #475569;
  --border-color-strong: #64748b;

  --sidebar-bg: #020617;
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-hover: white;
  --sidebar-border: rgba(255, 255, 255, 0.15);

  --modal-backdrop: rgba(0, 0, 0, 0.7);

  /* Adjust primary-light for dark mode contrast */
  --primary-light: #1e40af;

  /* Shadows need more opacity in dark mode */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);

  /* ============================================
     Semantic Status Colors (Dark Mode)
     Soft tints become translucent overlays of the brand color so they
     stay legible against the dark card background. Strong text shifts
     to lighter tints for contrast.
     ============================================ */
  --bg-success-soft: rgba(16, 185, 129, 0.18);
  --text-success-strong: #6ee7b7;

  --bg-warning-soft: rgba(245, 158, 11, 0.18);
  --text-warning-strong: #fcd34d;
  --border-warning: rgba(245, 158, 11, 0.55);

  --bg-info-soft: rgba(59, 130, 246, 0.18);
  --text-info-strong: #93c5fd;

  --bg-danger-soft: rgba(239, 68, 68, 0.18);
  --text-danger-strong: #fca5a5;

  --bg-neutral-soft: rgba(148, 163, 184, 0.18);
  --text-neutral-strong: #cbd5e1;

  --link-color: #a5b4fc;

  --danger-color-hover: #f87171;
  --secondary-color-hover: #34d399;
}

[data-theme='dark'] .avatar-dropdown-item.danger:hover {
  background: var(--bg-danger-soft);
}

/* ============================================
   LARGE FONT MODE (Accessibility)
   ============================================ */
[data-font-size='large'] {
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-base: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
}

/* ============================================
   HIGH CONTRAST MODE (Accessibility)
   ============================================ */
[data-high-contrast='true'] {
  --text-primary: #000000;
  --text-secondary: #1a1a1a;
  --text-muted: #333333;
  --border-color: #000000;
  --border-color-strong: #000000;
}

[data-theme='dark'][data-high-contrast='true'] {
  --text-primary: #ffffff;
  --text-secondary: #f0f0f0;
  --text-muted: #e0e0e0;
  --border-color: #ffffff;
  --border-color-strong: #ffffff;
}

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

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-page);
  line-height: 1.5;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
  gap: 0;
}

.sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 1rem;
}

.sidebar-brand h1 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.sidebar-brand .subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
}

.sidebar-nav {
  list-style: none;
}

.sidebar-nav li {
  margin: 0;
}

.sidebar-nav a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: var(--transition);
  border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-text-hover);
}

.sidebar-nav a.active {
  background-color: var(--primary-color);
  color: white;
  border-left-color: var(--secondary-color);
}

.main-content {
  padding: 2rem;
  overflow-y: auto;
}

.top-bar {
  background-color: var(--bg-card);
  padding: 1rem 2rem;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -2rem -2rem 2rem -2rem;
  margin-bottom: 2rem;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Trial-days-left chip (dashboard top bar). Built on the shared tone tokens
   (--bg-info-soft / --bg-warning-soft) which already carry dark-mode overrides,
   so no separate [data-theme="dark"] block is needed. Amber (.trial-chip-warn)
   flips on at <=3 days left, matching the settings-subscription banner.
   Hidden by default; the manager dashboard adds .trial-chip-shown when the
   subscription is trialing (a class, not an inline style, so the mobile media
   query below can hide it — an inline style would out-specify the query). */
.trial-chip {
  display: none;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--bg-info-soft);
  color: var(--text-info-strong);
  transition: filter 0.15s ease;
}

.trial-chip.trial-chip-shown {
  display: inline-flex;
}

.trial-chip:hover {
  filter: brightness(0.97);
}

.trial-chip-warn {
  background-color: var(--bg-warning-soft);
  color: var(--text-warning-strong);
  border-color: var(--border-warning);
}

/* Current-studio-name chip (dashboard top bar). FB-20260624-03 — the
   multi-studio account→user model means someone can belong to several
   studios with nothing on the dashboard saying which one is active. Reuses
   --text-muted / --border-color (already dark-mode-token-backed, no new
   [data-theme="dark"] block needed). Same shown/hidden + mobile-hide pattern
   as .trial-chip: hidden by default, .studio-chip-shown reveals it, the
   375px media query below re-hides it so the no-wrap top bar can't overflow. */
.studio-chip {
  display: none;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
}

.studio-chip.studio-chip-shown {
  display: inline-flex;
}

.user-info {
  text-align: right;
}

.user-name {
  font-weight: 600;
  color: var(--text-primary);
}

.user-role {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Avatar User Menu */
.avatar-menu-container {
  position: relative;
}

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition);
}

.avatar-btn:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.avatar-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.avatar-caret {
  font-size: 0.6rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.avatar-menu-container.open .avatar-caret {
  transform: rotate(180deg);
}

.avatar-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}

.avatar-menu-container.open .avatar-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.avatar-dropdown-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.avatar-dropdown-header .user-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.avatar-dropdown-header .user-role {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: capitalize;
}

.avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.avatar-dropdown-item:hover {
  background: var(--bg-hover);
}

.avatar-dropdown-item .item-icon {
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.avatar-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0.25rem 0;
}

.studio-switcher {
  padding: 0.25rem 0;
}

.studio-current {
  padding: 0.4rem 1rem;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.avatar-dropdown-item.danger {
  color: var(--danger-color);
}

.avatar-dropdown-item.danger:hover {
  background: var(--bg-danger-soft);
}

/* Typography */
h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.5rem 0 1rem 0;
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 1rem 0 0.5rem 0;
}

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.page-title {
  margin-bottom: 0.25rem;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

/* Cards */
.card {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.card-header h3 {
  margin: 0;
}

.card-body {
  flex: 1;
}

.card-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* Grid Layouts */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ============================================
   Metrics Cards - Theme-Aware Design
   ============================================ */
.metric-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  container-type: inline-size;
}

.metric-card:hover {
  box-shadow: var(--shadow-lg);
}

.metric-card a.metric-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.metric-card:has(a.metric-card-link):hover {
  transform: translateY(-2px);
}

.metric-card .metric-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.metric-card .metric-value {
  font-size: clamp(1.1rem, 4.5vw, var(--font-size-3xl));
  font-size: clamp(1.1rem, 14cqi, var(--font-size-3xl));
  font-weight: 700;
  color: var(--text-primary);
  margin: 0.5rem 0;
  line-height: 1.2;
}

.metric-card .metric-change {
  font-size: var(--font-size-sm);
  margin-top: 0.5rem;
  color: var(--text-muted);
}

.metric-change.positive {
  color: var(--secondary-color);
}

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

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

/* ---- Metric Card Variants ---- */

/* Primary variant - blue accent */
.metric-card.metric-primary {
  border-left: 4px solid var(--primary-color);
}

.metric-card.metric-primary .metric-value {
  color: var(--primary-color);
}

/* Success variant - green accent (for positive metrics like revenue, paid) */
.metric-card.metric-success {
  border-left: 4px solid var(--secondary-color);
}

.metric-card.metric-success .metric-value {
  color: var(--secondary-color);
}

/* Warning variant - orange accent (for attention items) */
.metric-card.metric-warning {
  border-left: 4px solid var(--warning-color);
}

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

/* Danger variant - red accent (for overdue, outstanding) */
.metric-card.metric-danger {
  border-left: 4px solid var(--danger-color);
}

.metric-card.metric-danger .metric-value {
  color: var(--danger-color);
}

/* Neutral variant - gray accent (for counts, statistics) */
.metric-card.metric-neutral {
  border-left: 4px solid var(--gray-400);
}

.metric-card.metric-neutral .metric-value {
  color: var(--text-primary);
}

/* ---- Dark Mode Adjustments ---- */
[data-theme='dark'] .metric-card {
  border-color: var(--border-color);
}

[data-theme='dark'] .metric-card.metric-success .metric-value {
  color: #34d399; /* Brighter green for dark mode */
}

[data-theme='dark'] .metric-card.metric-warning .metric-value {
  color: #fbbf24; /* Brighter amber for dark mode */
}

[data-theme='dark'] .metric-card.metric-danger .metric-value {
  color: #f87171; /* Brighter red for dark mode */
}

/* ---- High Contrast Mode ---- */
[data-high-contrast='true'] .metric-card {
  border-width: 2px;
}

[data-high-contrast='true'] .metric-card .metric-value {
  color: var(--text-primary);
}

[data-high-contrast='true'] .metric-card.metric-primary,
[data-high-contrast='true'] .metric-card.metric-success,
[data-high-contrast='true'] .metric-card.metric-warning,
[data-high-contrast='true'] .metric-card.metric-danger {
  border-left-width: 6px;
}

/* ---- Large Font Mode ---- */
[data-font-size='large'] .metric-card {
  padding: 2rem;
}

[data-font-size='large'] .metric-card .metric-value {
  font-size: clamp(1.3rem, 5.5vw, 2.5rem);
  font-size: clamp(1.3rem, 16cqi, 2.5rem);
}

/* Tables */
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

table thead {
  background-color: var(--bg-table-header);
}

table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
}

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

table tbody tr {
  transition: var(--transition);
}

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

table .status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-active {
  background-color: var(--bg-success-soft);
  color: var(--text-success-strong);
}

.status-pending {
  background-color: var(--bg-warning-soft);
  color: var(--text-warning-strong);
}

.status-completed {
  background-color: var(--bg-info-soft);
  color: var(--text-info-strong);
}

.status-cancelled {
  background-color: var(--bg-danger-soft);
  color: var(--text-danger-strong);
}

.status-paid {
  background-color: var(--bg-success-soft);
  color: var(--text-success-strong);
}

.status-outstanding {
  background-color: var(--bg-danger-soft);
  color: var(--text-danger-strong);
}

.status-overdue {
  background-color: var(--bg-danger-soft);
  color: var(--text-danger-strong);
}

.status-inactive {
  background-color: var(--bg-neutral-soft);
  color: var(--text-neutral-strong);
}

.status-error {
  background-color: var(--bg-danger-soft);
  color: var(--text-danger-strong);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  font-weight: 700;
  color: var(--primary-color);
  background-color: var(--bg-card-alt, #f0f0f0);
  border-radius: var(--border-radius);
  font-size: 0.85rem;
}

/* Buttons */
button,
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: var(--bg-card-alt);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--bg-hover);
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
}

.btn-danger:hover {
  background-color: var(--danger-color-hover);
}

.btn-success {
  background-color: var(--secondary-color);
  color: white;
}

.btn-success:hover {
  background-color: var(--secondary-color-hover);
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-group {
  display: flex;
  gap: 0.5rem;
}

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-secondary);
}

input,
select,
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: var(--transition);
  background-color: var(--bg-input);
  color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light);
}

input[type='checkbox'],
input[type='radio'] {
  width: auto;
  margin-right: 0.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.consent-group {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-subtle, #f8f9fb);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.consent-group label {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  cursor: pointer;
  margin: 0;
}

.consent-group input[type='checkbox'] {
  margin-top: 0.2rem;
  margin-right: 0;
  flex-shrink: 0;
}

.consent-group a {
  color: var(--link-color);
  text-decoration: underline;
}

.consent-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  padding-left: 1.5rem;
}

/* Alerts */
.alert {
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.alert-info {
  background-color: var(--bg-info-soft);
  border-left: 4px solid var(--primary-color);
  color: var(--text-info-strong);
}

.alert-success {
  background-color: var(--bg-success-soft);
  border-left: 4px solid var(--secondary-color);
  color: var(--text-success-strong);
}

.alert-warning {
  background-color: var(--bg-warning-soft);
  border-left: 4px solid var(--warning-color);
  color: var(--text-warning-strong);
}

.alert-danger {
  background-color: var(--bg-danger-soft);
  border-left: 4px solid var(--danger-color);
  color: var(--text-danger-strong);
}

/* Inline soft warning panel (e.g. reschedule proposed-time fields,
   inline closure banners). Pairs background + border + text via
   semantic vars so dark mode flips automatically. */
.proposed-slot-fields {
  padding: 0.75rem;
  background: var(--bg-warning-soft);
  border: 1px solid var(--border-warning);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  color: var(--text-warning-strong);
}

/* List View */
.list-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

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

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

.list-item-content {
  flex: 1;
}

.list-item-title {
  font-weight: 600;
  color: var(--text-primary);
}

.list-item-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.list-item-meta {
  text-align: right;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Calendar (Simple) */
.calendar {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.calendar-weekday {
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  padding: 0.5rem 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--bg-card);
}

.calendar-day:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-color);
}

.calendar-day.today {
  font-weight: 700;
  color: var(--primary-color);
}

.calendar-day.other-month {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Selected must come last to override other states */
.calendar-day.selected {
  background-color: var(--primary-light);
  border: 3px solid var(--primary-color);
  font-weight: 700;
  font-size: 1.1em;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modal-backdrop);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

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

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}

/* ============================================
   Mobile Hamburger Menu
   ============================================ */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 4px;
  transition: var(--transition);
}

.hamburger-btn:hover {
  background-color: var(--bg-hover);
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: 998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.sidebar-close-btn {
  display: none;
  background: none;
  border: none;
  color: var(--sidebar-text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 4px;
  position: absolute;
  top: 1.25rem;
  right: 0.75rem;
}

.sidebar-close-btn:hover {
  color: var(--sidebar-text-hover);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }

  /* The dashboard top bar is a no-wrap flex row down to 375px; the trial chip
     would push user-info + Logout into horizontal overflow. Hide it on narrow
     screens — the trial countdown stays available in Settings → Subscription.
     Overrides .trial-chip.trial-chip-shown (same specificity, declared later). */
  .trial-chip.trial-chip-shown {
    display: none;
  }

  /* Same overflow reasoning as the trial chip above. */
  .studio-chip.studio-chip-shown {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

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

  .hamburger-btn {
    display: block;
  }

  .sidebar-close-btn {
    display: block;
  }

  .main-content {
    padding: 1rem;
  }

  .top-bar {
    margin: -1rem -1rem 1rem -1rem;
    padding: 0.75rem 1rem;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  table {
    font-size: 0.875rem;
  }

  table th,
  table td {
    padding: 0.75rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }
}

/* Utilities */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

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

.font-bold {
  font-weight: 700;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.p-1 {
  padding: 0.5rem;
}

.p-2 {
  padding: 1rem;
}

.gap-1 {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  opacity: 0.6;
  pointer-events: none;
}

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--gray-300);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* ===== Chart Styles ===== */
.chart-container {
  position: relative;
  height: 300px;
  margin: 1rem 0;
  padding: 1rem 0;
}

/* ===== List Item Styles ===== */
.list-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list-group .list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

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

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

.list-group .list-item-content {
  flex: 1;
}

.list-group .list-item-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.list-group .list-item-meta {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.list-item-value {
  font-weight: 600;
  color: var(--primary-color);
  white-space: nowrap;
  margin-left: 1rem;
}

/* ===== Statistics Grid ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background-color: var(--bg-card-alt);
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary-color);
}

/* ===== Table Responsive ===== */
.table-responsive {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background-color: var(--bg-table-header);
}

.data-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
}

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

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

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

/* ============================================
   Toast Notifications
   ============================================ */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  color: white;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.3s,
    transform 0.3s;
  /* The element is reused and stays in the DOM while hidden; without this it
     would keep intercepting clicks in the bottom-right corner at opacity 0. */
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Toasts carry white text, so they need darker backgrounds than the shared
   --secondary-color/--danger-color button tokens: white on #10b981 is only
   2.5:1 and on #ef4444 only 3.8:1, both below the WCAG AA 4.5:1 floor. These
   shades hit 5.5:1 and 6.5:1. Neither token has a dark-theme override, so one
   value is correct in both themes. */
.toast-success {
  background-color: #047857;
}

.toast-error {
  background-color: #b91c1c;
}

.toast-info {
  background-color: var(--primary-color);
}

.toast-warning {
  background-color: var(--warning-color);
  color: var(--gray-900);
}

/* ============================================
   Theme Toggle Button (Quick toggle in header)
   ============================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--bg-card-alt);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition);
}

.theme-toggle:hover {
  background-color: var(--bg-hover);
}

.theme-toggle .theme-icon {
  font-size: 1.25rem;
}

/* ============================================
   Settings Page Styles
   ============================================ */
.settings-section {
  margin-bottom: 2rem;
}

.setting-group {
  margin-bottom: 1.5rem;
}

.setting-group h3 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.setting-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
}

.setting-row label {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0;
}

.setting-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Toggle switch for settings */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  transition: var(--transition);
  border-radius: 1.5rem;
}

.toggle-slider:before {
  position: absolute;
  content: '';
  height: 1.125rem;
  width: 1.125rem;
  left: 0.1875rem;
  bottom: 0.1875rem;
  background-color: white;
  transition: var(--transition);
  border-radius: 50%;
}

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

input:checked + .toggle-slider:before {
  transform: translateX(1.5rem);
}

@media (max-width: 768px) {
  .setting-row {
    grid-template-columns: 1fr;
  }

  .toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* ────────────────────────────────────────────────────────────
   Impersonation banner + picker
   ──────────────────────────────────────────────────────────── */

.impersonation-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: #f59e0b;
  color: #1f2937;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  border-bottom: 1px solid #d97706;
}

.impersonation-banner-text { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.impersonation-banner-role {
  background: rgba(255,255,255,0.35);
  border-radius: 4px;
  padding: 0.08rem 0.5rem;
  font-size: 0.78rem;
  text-transform: capitalize;
}
.impersonation-banner-exit {
  background: #1f2937;
  color: #fbbf24;
  border: 0;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.impersonation-banner-exit:hover:not(:disabled) { background: #111827; }
.impersonation-banner-exit:disabled { opacity: 0.7; cursor: wait; }

[data-theme="dark"] .impersonation-banner {
  background: #b45309;
  color: #fef3c7;
  border-bottom-color: #78350f;
}
[data-theme="dark"] .impersonation-banner-exit { background: #0f172a; color: #fde68a; }

@media (max-width: 600px) {
  .impersonation-banner { flex-direction: column; align-items: stretch; gap: 0.4rem; text-align: center; }
}

/* Picker modal */
.impersonation-picker-help {
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.8rem;
}
.impersonation-results { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-color, #e5e7eb); border-radius: 6px; padding: 0.25rem; }
.impersonation-group + .impersonation-group { margin-top: 0.5rem; }
.impersonation-group-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  padding: 0.4rem 0.5rem 0.2rem;
}
.impersonation-candidate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.impersonation-candidate:hover { background: var(--bg-hover, #f3f4f6); }
.impersonation-candidate-name { font-weight: 500; }
.impersonation-candidate-meta { font-size: 0.82rem; color: var(--text-muted, #6b7280); }
.impersonation-empty, .impersonation-loading {
  padding: 1rem; text-align: center; color: var(--text-muted, #6b7280); font-size: 0.9rem;
}
.impersonation-confirm { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #e5e7eb); }
.impersonation-confirm-target { margin-bottom: 0.75rem; font-size: 0.95rem; }

/* ============================================================
   Platform Config page (admin-platform-config.html)
   All colors reference existing themed CSS variables, so dark
   mode is inherited automatically via [data-theme="dark"].
   ============================================================ */

/* Monospace cell for config keys and raw values */
.pc-key,
.pc-readonly-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  word-break: break-all;
}

.pc-readonly-value {
  color: var(--text-secondary);
}

/* Inline edit row: input + buttons on one line, wraps on narrow screens */
.pc-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Override the global full-width input default for the compact inline edit */
.pc-edit-input {
  width: auto;
  min-width: 8rem;
  max-width: 16rem;
  flex: 1 1 8rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

/* Source provenance badge — reuses themed soft-color variables */
.pc-source {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background-color: var(--bg-neutral-soft);
  color: var(--text-neutral-strong);
}
.pc-source-tenant {
  background-color: var(--bg-info-soft);
  color: var(--text-info-strong);
}
.pc-source-platform {
  background-color: var(--bg-success-soft);
  color: var(--text-success-strong);
}
.pc-source-env {
  background-color: var(--bg-warning-soft);
  color: var(--text-warning-strong);
}

/* "bounce / restart required" badge */
.pc-bounce {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: var(--bg-warning-soft);
  color: var(--text-warning-strong);
}

/* Muted note for env-only rows */
.pc-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Quota readout */
.pc-quota-current {
  margin: 0.75rem 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.pc-quota-current strong {
  color: var(--text-primary);
}