/*
 * GODMODE visual system
 *
 * A vanilla CSS translation of the shadcn/ui design contract: semantic
 * surface tokens, restrained borders, one radius scale, visible focus rings,
 * and predictable composition primitives. It is intentionally framework-free
 * so the existing prototype routes and interaction code remain intact.
 */

:root {
  color-scheme: light;

  /* A neutral scale with a deliberate surface ladder. Every route consumes
   * these roles instead of choosing a page-specific white, gray, or black. */
  --background: #f8f6f0;
  --foreground: #0B0B0D;
  --card: #ffffff;
  --card-foreground: #0B0B0D;
  --popover: #ffffff;
  --popover-foreground: #0B0B0D;
  --surface-0: #f8f6f0;
  --surface-1: #ffffff;
  --surface-2: #f0ece3;
  --surface-3: #e2ddd4;
  --primary: #E6292A;
  --primary-hover: #D32021;
  --primary-foreground: #ffffff;
  --secondary: #f4f0e8;
  --secondary-foreground: #0B0B0D;
  --muted: #f4f0e8;
  --muted-foreground: #5F6166;
  --accent: #f0ece3;
  --accent-foreground: #0B0B0D;
  --destructive: #E6292A;
  --destructive-foreground: #ffffff;
  --destructive-text: #E6292A;
  --destructive-surface: rgba(230, 41, 42, 0.08);
  --destructive-border: rgba(230, 41, 42, 0.25);
  --success: #4F8A34;
  --success-foreground: #ffffff;
  --success-text: #4F8A34;
  --success-surface: rgba(79, 138, 52, 0.08);
  --success-border: rgba(79, 138, 52, 0.25);
  --warning: #b45309;
  --warning-foreground: #ffffff;
  --warning-text: #92400e;
  --warning-surface: #fffbeb;
  --warning-border: #fcd34d;
  --info: #E6292A;
  --info-foreground: #ffffff;
  --info-text: #E6292A;
  --info-surface: rgba(230, 41, 42, 0.08);
  --info-border: rgba(230, 41, 42, 0.25);
  --border: #e2ddd4;
  --border-subtle: #f0ece3;
  --border-strong: #8D8F94;
  --input: #8D8F94;
  --ring: #E6292A;
  --ring-offset: #ffffff;
  --sidebar: #18191C;
  --sidebar-foreground: #F4F0E8;
  --sidebar-primary: #E6292A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #232529;
  --sidebar-accent-foreground: #F4F0E8;
  --sidebar-border: rgba(141, 143, 148, 0.18);
  --sidebar-ring: #E6292A;
  /* Apple Squircle Continuous Curvature Scale (iOS / macOS HIG Superellipse) */
  --radius: 0.875rem;
  --shad-radius-xs: 0.375rem; /* 6px - Apple Checkboxes & Micro Chips */
  --shad-radius-sm: 0.5rem;   /* 8px - Sub-cards & Badges */
  --shad-radius-md: 0.75rem;  /* 12px - Inputs, Textareas, Selects & Buttons */
  --shad-radius-lg: 1.125rem; /* 18px - Cards, Dossiers, Panels & Table Wrappers */
  --shad-radius-xl: 1.5rem;   /* 24px - Modals, Dialog Sheets & Drawers */
  --shad-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shad-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.1);
  --gm-header-height: 56px;
  --gm-canvas: var(--background);
  --gm-surface: var(--card);
  --gm-sidebar: var(--sidebar);
  --gm-sidebar-soft: var(--surface-2);
  --gm-sidebar-text: var(--sidebar-foreground);
  --gm-sidebar-muted: var(--muted-foreground);
  --gm-ink: var(--foreground);
  --gm-muted: var(--muted-foreground);
  --gm-border: var(--border);
  --gm-border-strong: var(--border-strong);
  --gm-accent: var(--primary);
  --gm-accent-hover: var(--primary-hover);
  --gm-accent-soft: var(--info-surface);
  --gm-shadow: var(--shad-shadow);

  /* Compatibility aliases for older route fragments. */
  --bg-canvas: var(--background);
  --bg-subtle: var(--surface-2);
  --bg-surface: var(--card);
  --bg-surface-elevated: var(--popover);
  --bg-surface-hover: var(--accent);
  --bg-surface-subtle: var(--surface-0);
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-tertiary: #64748b;
  --text-inverse: #ffffff;
  --accent-cyan: var(--primary);
  --accent-cyan-hover: var(--primary-hover);
  --accent-cyan-subtle: var(--info-surface);
  --state-success: var(--success);
  --state-success-subtle: var(--success-surface);
  --state-warning: var(--warning);
  --state-warning-subtle: var(--warning-surface);
  --state-danger: var(--destructive);
  --state-danger-subtle: var(--destructive-surface);
  --state-info: var(--info);
  --state-info-subtle: var(--info-surface);
  --border-default: var(--border);
  --border-focus: var(--ring);

  /* Compatibility contract for modular GODMODE pages. Keep legacy SALSA
   * references theme-aware instead of allowing their light fallbacks to win. */
  --salsa-surface-subtle: var(--surface-2);
  --salsa-border: var(--border);
  --salsa-text-primary: var(--foreground);
  --salsa-text-secondary: var(--muted-foreground);
  --salsa-text-muted: var(--text-tertiary);
  --salsa-primary: var(--primary);
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: #0B0B0D;
  --foreground: #F4F0E8;
  --card: #151619;
  --card-foreground: #F4F0E8;
  --popover: #1F2126;
  --popover-foreground: #F4F0E8;
  --surface-0: #0B0B0D;
  --surface-1: #151619;
  --surface-2: #1F2126;
  --surface-3: #282A30;
  --primary: #E6292A;
  --primary-hover: #F03A3B;
  --primary-foreground: #ffffff;
  --secondary: #1F2126;
  --secondary-foreground: #F4F0E8;
  --muted: #1F2126;
  --muted-foreground: #9DA1A9;
  --accent: #282A30;
  --accent-foreground: #F4F0E8;
  --destructive: #E6292A;
  --destructive-foreground: #ffffff;
  --destructive-text: #F03A3B;
  --destructive-surface: rgba(230, 41, 42, 0.18);
  --destructive-border: rgba(230, 41, 42, 0.4);
  --success: #4F8A34;
  --success-foreground: #ffffff;
  --success-text: #72C748;
  --success-surface: rgba(79, 138, 52, 0.2);
  --success-border: rgba(79, 138, 52, 0.4);
  --warning: #f59e0b;
  --warning-foreground: #ffffff;
  --warning-text: #FCD34D;
  --warning-surface: rgba(245, 158, 11, 0.18);
  --warning-border: rgba(245, 158, 11, 0.4);
  --info: #E6292A;
  --info-foreground: #ffffff;
  --info-text: #F03A3B;
  --info-surface: rgba(230, 41, 42, 0.16);
  --info-border: rgba(230, 41, 42, 0.35);
  --border: rgba(244, 240, 232, 0.13);
  --border-subtle: rgba(244, 240, 232, 0.08);
  --border-strong: rgba(244, 240, 232, 0.24);
  --input: rgba(244, 240, 232, 0.16);
  --ring: #E6292A;
  --ring-offset: #0B0B0D;
  --sidebar: #151619;
  --sidebar-foreground: #F4F0E8;
  --sidebar-primary: #E6292A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1F2126;
  --sidebar-accent-foreground: #F4F0E8;
  --sidebar-border: rgba(244, 240, 232, 0.13);
  --sidebar-ring: #E6292A;
  --shad-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shad-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.6);
  --gm-accent-soft: var(--info-surface);
  --text-primary: #F4F0E8;
  --text-secondary: #C8CBD0;
  --text-tertiary: #9DA1A9;
}

*, *::before, *::after { border-color: var(--border); }

html,
body {
  background: var(--background);
  overflow-x: clip;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
}

a { color: var(--gm-accent); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px;
}

.sr-only {
  width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  max-height: 1px !important;
  margin: -1px !important;
}

/* App shell */
.app-layout { background: var(--background); }
.app-header,
.top-header {
  height: var(--gm-header-height);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

html,
body,
button,
input,
select,
textarea {
  color-scheme: inherit;
}

.brand-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--shad-radius-md);
  background: #0B0B0D url('../assets/images/salsa-symbol.png') center center / contain no-repeat;
  border: 1px solid rgba(244, 240, 232, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(230, 41, 42, 0.25);
  font-size: 0;
  color: transparent;
  flex-shrink: 0;
}

.brand-name { color: var(--foreground); font-weight: 750; }
.brand-subtitle { color: var(--muted-foreground); }
.header-command-trigger {
  min-height: 36px;
  border-radius: var(--shad-radius-md);
  border-color: var(--border);
  background: var(--muted);
  box-shadow: none;
}
.header-command-trigger:hover { background: var(--accent); border-color: var(--input); box-shadow: none; }
.command-trigger-kbd { background: var(--card); border-color: var(--border); box-shadow: none; }
.header-env-badge { color: var(--success-text); background: var(--success-surface); border-color: var(--success-border); }
.activity-bell-btn { border-color: var(--border); border-radius: var(--shad-radius-md); background: var(--card); }
.header-user-avatar { border-radius: var(--shad-radius-md); background: var(--primary); color: var(--primary-foreground); }
.theme-modal-btn {
  display: inline-flex !important;
  color: var(--muted-foreground);
  background: transparent;
  border-color: transparent;
}
.theme-modal-btn:hover { color: var(--foreground); background: var(--accent); border-color: var(--border); }

.app-sidebar,
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-left: 1px solid var(--sidebar-border);
}
.nav-group-title { border-radius: var(--shad-radius-md); }
.nav-group-title:hover,
.nav-group.is-active-group .nav-group-title { background: var(--sidebar-accent); }
.nav-item { border-radius: var(--shad-radius-sm); }
.nav-item.active { color: var(--sidebar-foreground); background: color-mix(in srgb, var(--sidebar-primary) 18%, transparent); border-right-color: var(--sidebar-primary); }
.nav-item:hover { background: var(--sidebar-accent); }
.dossier-section-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  color: var(--muted-foreground);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--shad-radius-md);
}
.dossier-section-intro strong { color: var(--foreground); }

/* Page orientation */
.app-main,
.main-wrapper {
  background: var(--background);
  background-image: none;
}
.page-header {
  min-height: 84px;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border) !important;
  border-radius: var(--shad-radius-lg);
  background: var(--card);
  box-shadow: var(--shad-shadow);
}
.page-title-group h1,
.page-title { color: var(--foreground) !important; font-size: clamp(1.15rem, 1.4vw, 1.4rem) !important; letter-spacing: -.018em; }
.breadcrumb-nav { color: var(--muted-foreground); }
.breadcrumb-link, .breadcrumb-current { color: var(--muted-foreground); }
.breadcrumb-section { color: var(--gm-accent); }

/* Core shadcn-like primitives */
.btn {
  min-height: 36px;
  border-radius: var(--shad-radius-md);
  corner-shape: squircle;
  font-weight: 650;
  box-shadow: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn-primary { color: var(--primary-foreground) !important; background: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.btn-secondary,
.btn-outline-cyan,
.btn-subtle { color: var(--secondary-foreground); background: var(--secondary); border-color: var(--border); }
.btn-secondary:hover, .btn-outline-cyan:hover, .btn-subtle:hover { background: var(--accent); border-color: var(--input); }
.btn-ghost { color: var(--muted-foreground); background: transparent; border-color: transparent; }
.btn-ghost:hover { color: var(--foreground); background: var(--accent); }
.btn-danger { color: var(--destructive-text); background: transparent; border-color: var(--destructive-border); }
.btn-danger:hover { color: var(--destructive-text); background: var(--destructive-surface); }

.card,
.surface-panel,
.table-wrapper,
.table-container,
.table-responsive,
.dossier-panel,
.settings-section,
.wizard-card,
.gm11-panel,
.feature-item-card,
.plan-tier-card,
.reconciliation-details-card,
.restaurant-be-card,
.sim-formula-card,
.sim-override-card,
.health-calendar-card,
.health-inspector-box,
.data-quality-detail-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--shad-radius-lg) !important;
  corner-shape: squircle;
  background: var(--card) !important;
  color: var(--card-foreground);
  box-shadow: var(--shad-shadow);
}
.card:hover,
.feature-item-card:hover,
.plan-tier-card:hover { transform: none; box-shadow: var(--shad-shadow-hover); border-color: var(--input) !important; }
.card-header,
.settings-section-header { border-bottom-color: var(--border); }
.card-title,
.section-title,
.settings-section-title { color: var(--foreground); }
.card-subtitle,
.settings-section-desc,
.form-helper-text,
.form-hint { color: var(--muted-foreground); }

.badge { border-radius: 999px; font-weight: 650; }
.badge-neutral { color: var(--muted-foreground); background: var(--muted); border-color: var(--border); }
.badge-primary, .badge-cyan { color: var(--info-text); background: var(--info-surface); border-color: var(--info-border); }
.badge-emerald, .badge-success { color: var(--success-text); background: var(--success-surface); border-color: var(--success-border); }
.badge-warning { color: var(--warning-text); background: var(--warning-surface); border-color: var(--warning-border); }
.badge-danger { color: var(--destructive-text); background: var(--destructive-surface); border-color: var(--destructive-border); }

/* Data surfaces */
.table-wrapper,
.table-container,
.table-responsive { overflow: auto; border-radius: var(--shad-radius-lg); corner-shape: squircle; }
.table-toolbar,
.table-filters,
.table-pagination,
.bulk-actions-bar,
.table-bulk-actions-bar {
  background: var(--card);
  border-color: var(--border);
}
.table-toolbar { min-height: 54px; padding: .65rem .8rem; }
.data-table { color: var(--foreground); font-size: .78rem; }
.data-table th { color: var(--muted-foreground); background: var(--muted); border-bottom-color: var(--border); font-size: .68rem; }
.data-table td { border-bottom-color: var(--border); }
.data-table tbody tr:hover { background: var(--accent); }
.data-table a { color: var(--gm-accent); }

.form-control,
.form-input,
.form-select,
input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
  min-height: 38px;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--shad-radius-md);
  corner-shape: squircle;
}
.form-control::placeholder,
.form-input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--muted-foreground); }
.form-control:focus, .form-input:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent);
}
.form-label { color: var(--foreground); font-weight: 650; }
.form-error-summary { border-color: var(--destructive-border); background: var(--destructive-surface); color: var(--destructive-text); border-radius: var(--shad-radius-md); corner-shape: squircle; }

/* Apple Squircle Checkbox Primitives (iOS Superellipse) */
input[type="checkbox"],
.form-checkbox,
.data-table input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  margin: 0;
  vertical-align: middle;
  border: 1.5px solid var(--border-strong, #94a3b8);
  border-radius: var(--shad-radius-xs, 6px);
  corner-shape: squircle;
  background-color: var(--card, #ffffff);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  position: relative;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--primary, #1d4ed8);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #1d4ed8) 18%, transparent);
}
input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--ring, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring, #2563eb) 28%, transparent);
}
input[type="checkbox"]:checked {
  background-color: var(--primary, #1d4ed8) !important;
  border-color: var(--primary, #1d4ed8) !important;
}
input[type="checkbox"]:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
}
input[type="checkbox"]:indeterminate {
  background-color: var(--primary, #1d4ed8);
  border-color: var(--primary, #1d4ed8);
}
input[type="checkbox"]:indeterminate::after {
  content: "";
  width: 8px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
}
input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--muted, #f1f5f9);
}

/* Tabs, segmented navigation, and filters */
.tabs,
.subtabs,
.page-tabs,
.tenant-tabs,
.hub-tabs-bar,
.nav-tabs,
.gm11-tabs-nav {
  gap: .2rem;
  padding: .25rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--shad-radius-md);
}
.tab-btn,
.subtab-btn,
.page-tab,
.tenant-tab,
.hub-tab,
.dossier-tab-btn,
.gm11-tab-btn,
.tab-link {
  min-height: 34px;
  padding: .4rem .7rem;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--shad-radius-sm);
  box-shadow: none;
}
.tab-btn:hover,
.subtab-btn:hover,
.page-tab:hover,
.tenant-tab:hover,
.hub-tab:hover,
.dossier-tab-btn:hover,
.gm11-tab-btn:hover,
.tab-link:hover { color: var(--foreground); background: var(--accent); }
.tab-btn.active,
.subtab-btn.active,
.page-tab.active,
.tenant-tab.active,
.hub-tab.active,
.dossier-tab-btn.active,
.gm11-tab-btn.active,
.tab-link.active,
.tab-link[aria-selected="true"] {
  color: var(--foreground);
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shad-shadow);
}
.filter-chip { border-radius: 999px; background: var(--muted); border-color: var(--border); }
.filter-chip.active { color: var(--info-text); background: var(--info-surface); border-color: var(--info-border); }

/* Dialogs, drawers, overlays, and status messaging */
.modal-backdrop,
.drawer-backdrop { background: rgba(9, 9, 11, .52); backdrop-filter: blur(2px); }
.drawer[aria-hidden="true"] { display: none !important; }
.drawer.open { display: flex !important; }
.modal,
.drawer,
.drawer-panel,
.popover,
.dropdown-menu {
  color: var(--popover-foreground);
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--shad-radius-xl);
  corner-shape: squircle;
  box-shadow: 0 16px 45px rgba(24,24,27,.16);
}
.modal-header,
.drawer-header { border-bottom-color: var(--border); }
.alert,
.alert-primary,
.alert-info,
.alert-warning,
.alert-danger { border-radius: var(--shad-radius-md); corner-shape: squircle; border-width: 1px; box-shadow: none; }
.empty-state,
.empty-state-compact,
.sim-empty-state { border: 1px dashed var(--border); border-radius: var(--shad-radius-lg); corner-shape: squircle; background: var(--muted); color: var(--muted-foreground); }

/* The GM-02 dashboard follows the same contract without inheriting cards. */
.gm02-operator-dashboard,
.gm02-dashboard-heading,
.gm02-dashboard-panel,
.gm02-dashboard-kpi { border-color: var(--border); }
.gm02-dashboard-heading,
.gm02-dashboard-panel,
.gm02-dashboard-kpi { background: var(--card); box-shadow: var(--shad-shadow); }
.gm02-dashboard-heading { border-top: 1px solid var(--border); border-radius: var(--shad-radius-lg); }
.gm02-dashboard-kpi { border-right-width: 2px; border-radius: var(--shad-radius-md); }
.gm02-dashboard-kpi:hover { box-shadow: var(--shad-shadow-hover); }
.gm02-dashboard-panel-head { border-bottom-color: var(--border); }
.gm02-dashboard-list-row { border-bottom-color: var(--border); }
.gm02-dashboard-list-row:hover { background: var(--accent); }

.gm-start-panel {
  border: 1px solid var(--border);
  border-radius: var(--shad-radius-lg);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: var(--shad-shadow);
}
.gm-start-heading h2,
.gm-start-heading p { color: var(--foreground); }
.gm-start-heading p { color: var(--muted-foreground); }
.gm-task-link { color: var(--foreground); background: var(--muted); border-color: var(--border); }
.gm-task-link span { color: var(--muted-foreground); }

/* Final normalization: older route fragments keep their markup, but every
 * visible surface still resolves to the same shadcn semantic contract. */
:where(
  .app-main .surface-subtle,
  .app-main .kv-item,
  .app-main .metric-card,
  .app-main .stat-card,
  .app-main .plan-tier-price-box,
  .app-main .cell-mono,
  .app-main .invoice-id-code,
  .app-main .payment-ref-code,
  .app-main .operator-next-step,
  .app-main .flagship-card,
  .app-main .operator-next-step-icon
) {
  color: var(--card-foreground);
  background: var(--muted) !important;
  border-color: var(--border) !important;
  box-shadow: none;
}

:where(
  .app-main .flagship-card,
  .app-main .operator-next-step-icon
) {
  background: var(--accent) !important;
  color: var(--accent-foreground);
}

.app-main .featured-icon,
.app-main .featured-icon-primary,
.app-main .badge-group-pill,
.app-main .stat-badge {
  border-color: var(--border);
  box-shadow: none;
}

.app-main .filter-chip.active,
.app-main .badge-primary,
.app-main .badge-cyan,
.app-main .badge-scope-global,
.app-main .badge-scope-tenant {
  color: var(--info-text);
  background: var(--info-surface);
  border-color: var(--info-border);
}

.app-main .btn-warning {
  color: var(--warning-foreground);
  background: var(--warning);
  border-color: var(--warning);
}

.app-main .btn-warning:hover {
  background: color-mix(in srgb, var(--warning) 86%, var(--foreground));
  border-color: color-mix(in srgb, var(--warning) 86%, var(--foreground));
}

.app-main .toggle-switch-btn.on {
  color: var(--success-foreground);
  background: var(--success);
  border-color: var(--success);
}

/* State surfaces always pair a readable text role with their background. */
.app-main .status-success,
.app-main .state-success,
.app-main .pill-success,
.app-main .badge-success,
.app-main .badge-emerald {
  color: var(--success-text);
  background: var(--success-surface);
  border-color: var(--success-border);
}

.app-main .status-warning,
.app-main .state-warning,
.app-main .pill-warning,
.app-main .badge-warning {
  color: var(--warning-text);
  background: var(--warning-surface);
  border-color: var(--warning-border);
}

.app-main .status-danger,
.app-main .state-danger,
.app-main .pill-danger,
.app-main .badge-danger {
  color: var(--destructive-text);
  background: var(--destructive-surface);
  border-color: var(--destructive-border);
}

/* Toasts sit above both light and dark canvases; keep their message readable
 * instead of inheriting the legacy white-on-white treatment. */
.toast-container .toast {
  color: var(--card-foreground);
  background: var(--card);
  border-color: var(--border);
}

.toast-container .toast > div {
  color: inherit;
}

.toast-container .toast.toast-info {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 10%, var(--card));
  border-color: color-mix(in srgb, var(--info) 32%, var(--border));
}

.toast-container .toast.toast-success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--card));
  border-color: color-mix(in srgb, var(--success) 32%, var(--border));
}

.toast-container .toast.toast-warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--card));
  border-color: color-mix(in srgb, var(--warning) 36%, var(--border));
}

.toast-container .toast.toast-error,
.toast-container .toast.toast-danger {
  color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 10%, var(--card));
  border-color: color-mix(in srgb, var(--destructive) 32%, var(--border));
}

/* GM-03 owns customer creation; keep its one primary action in the page
 * header instead of duplicating it in the sidebar navigation. */
.app-main .gm03-page .header-actions {
  display: flex !important;
  align-items: center;
  gap: .45rem;
}

/* Legacy customer tools render inside the selected dossier. Their standalone
 * page chrome and provenance strips would duplicate the dossier hierarchy. */
.dossier-embedded-view > .page-header,
.dossier-embedded-view > .data-quality-strip,
.dossier-embedded-view > [id^="data-freshness-bar-"] {
  display: none !important;
}

/* Keep the desktop shell anchored to the viewport while the active workspace
 * scrolls.  `overflow-x: hidden` on the legacy grid made `.app-layout` an
 * unintended scroll container, so the sticky header and rail drifted away
 * when a long customer table was scrolled. */
@media (min-width: 769px) {
  .app-layout {
    overflow: clip;
  }

  .app-sidebar,
  .sidebar {
    position: sticky;
    top: calc(var(--gm-banner-height) + var(--gm-header-height));
    height: calc(100dvh - var(--gm-banner-height) - var(--gm-header-height));
    max-height: calc(100dvh - var(--gm-banner-height) - var(--gm-header-height));
    align-self: start;
  }
}

.app-main .data-state-pill,
.app-main .data-state-dot,
.app-main .status-dot,
.app-main .subsystem-dot {
  border-color: currentColor;
}

@media (max-width: 920px) {
  .app-main, .main-wrapper { padding-inline: 1rem; }
  .page-header { min-height: 76px; }
  .grid-cols-4, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid-cols-3, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 640px) {
  .app-main, .main-wrapper { padding: .8rem .7rem 2rem; }
  .page-header { min-height: 68px; padding: .85rem; }
  .grid-cols-4, .grid-4, .grid-cols-3, .grid-3, .grid-cols-2, .grid-2 { grid-template-columns: 1fr !important; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .tabs, .subtabs, .page-tabs, .tenant-tabs, .hub-tabs-bar, .nav-tabs, .gm11-tabs-nav { overflow-x: auto; max-width: 100%; }
  .tab-btn, .subtab-btn, .page-tab, .tenant-tab, .hub-tab, .dossier-tab-btn, .gm11-tab-btn, .tab-link { flex: 0 0 auto; }
  .theme-btn-label { display: none; }
}

/* The legacy workspace stylesheet still contains a few higher-specificity
 * dark selectors. Rebind those surfaces to the same semantic ladder so a
 * route cannot switch palettes halfway through a modal, table, or form. */
[data-theme="dark"] .app-header,
[data-theme="dark"] .top-header,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .surface-panel,
[data-theme="dark"] .table-toolbar,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .drawer,
[data-theme="dark"] .drawer-header {
  background: var(--card) !important;
  color: var(--card-foreground) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .modal-footer,
[data-theme="dark"] .drawer-footer {
  background: var(--surface-2) !important;
  color: var(--card-foreground) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .data-table th {
  background: var(--surface-2) !important;
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .data-table td {
  color: var(--card-foreground) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface-2) !important;
  color: var(--foreground) !important;
  border-color: var(--input) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .filter-chip,
[data-theme="dark"] .subsystem-block {
  background: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border-color: var(--border) !important;
}

@media (prefers-contrast: more) {
  :root,
  [data-theme="dark"] {
    --border: var(--border-strong);
    --input: var(--border-strong);
    --muted-foreground: var(--foreground);
  }

  .btn,
  .form-control,
  .form-input,
  .form-select,
  input,
  select,
  textarea,
  .tab-btn,
  .tab-link {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  *, *::before, *::after { forced-color-adjust: auto; }
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid CanvasText !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GODMODE ERGONOMIC WORKSPACE & KEYBOARD SHORTCUTS ENHANCEMENTS
/* Modal Solid Surface & Legibility Guarantee */
.modal,
.modal-dialog {
  background: var(--card, #ffffff) !important;
  color: var(--card-foreground, #0f172a) !important;
  border-radius: var(--radius-xl, 20px) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
}
.modal-header,
.modal-body,
.modal-footer {
  background: var(--card, #ffffff) !important;
  color: var(--card-foreground, #0f172a) !important;
}
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
  background: var(--card, #111726) !important;
  color: var(--card-foreground, #f8fafc) !important;
}
.modal-backdrop.open {
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.modal:has(.shortcuts-modal-container) {
  width: 780px !important;
  max-width: 94vw !important;
}

.shortcuts-modal-container {
  padding: 0.25rem 0;
}

.shortcuts-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}

.shortcuts-card {
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 0.65rem;
  padding: 0.85rem;
}

[data-theme="dark"] .shortcuts-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.gm-kbd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.15rem 0.4rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 0.35rem;
  background: var(--surface-3, #e2e8f0);
  border: 1px solid var(--border, #cbd5e1);
  color: var(--foreground, #0f172a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .gm-kbd-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
}

/* Status Pulse Indicators */
.status-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

.status-pulse::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  opacity: 0.6;
}

.status-pulse--healthy { background: #10b981; }
.status-pulse--healthy::after { background: #10b981; }

.status-pulse--warning { background: #f59e0b; }
.status-pulse--warning::after { background: #f59e0b; }

.status-pulse--danger { background: #ef4444; }
.status-pulse--danger::after { background: #ef4444; }

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.75; }
  50% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* Copy-to-Clipboard Chip */
.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  transition: all 0.15s ease;
}

.copy-chip:hover {
  background: var(--primary, #1d4ed8);
  color: #ffffff;
  border-color: var(--primary, #1d4ed8);
}