/* ============================================================================
   Command Center — Theme Bridge Layer
   ----------------------------------------------------------------------------
   Loaded AFTER w3.css. Two jobs:
     1. Base layer    — body typography, links, scrollbars, focus, motion.
     2. W3.CSS bridge — remap the colour-bearing W3 utility classes onto design
        tokens, so existing markup adopts the unified palette + dark mode with
        zero template changes. W3 utilities use !important, so overrides here
        must too (this is the one sanctioned place for it).
     3. Components    — shared app-shell / card / badge / state primitives built
        directly on tokens, used by the modernised views.
   Consumes tokens.css only — no raw hex.
   ========================================================================== */

/* ============================ 1. BASE ===================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text);
  letter-spacing: -0.01em;
}

a { color: var(--primary-text); }

code, pre, kbd, samp { font-family: var(--font-mono); }

/* Accessible focus ring for everything keyboard-reachable. Never leave an
   element with no visible focus — replace W3's outline removal. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
/* Mouse users don't get the ring; keyboard users always do. */
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary-subtle); color: var(--text); }

/* Themed scrollbars */
* { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

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

/* ====================== 2. W3.CSS BRIDGE ================================== */

/* Surfaces & canvas */
.w3-light-grey, .w3-lightgrey { background-color: var(--bg) !important; color: var(--text) !important; }
.w3-white { background-color: var(--surface) !important; color: var(--text) !important; }
.w3-black { background-color: var(--gray-950) !important; color: var(--gray-25) !important; }
.w3-grey, .w3-gray { background-color: var(--gray-500) !important; color: #fff !important; }
.w3-dark-grey, .w3-dark-gray { background-color: var(--gray-700) !important; color: #fff !important; }

/* Brand / semantic solid fills (tags, buttons, accents) */
.w3-blue { background-color: var(--primary) !important; color: var(--primary-fg) !important; }
.w3-green { background-color: var(--success) !important; color: #fff !important; }
.w3-red { background-color: var(--danger) !important; color: #fff !important; }
.w3-yellow { background-color: var(--warning) !important; color: #fff !important; }
.w3-orange { background-color: var(--warning) !important; color: #fff !important; }

/* Pale / subtle backgrounds */
.w3-pale-blue { background-color: var(--info-subtle) !important; color: var(--text) !important; }
.w3-pale-green { background-color: var(--success-subtle) !important; color: var(--text) !important; }
.w3-pale-yellow { background-color: var(--warning-subtle) !important; color: var(--text) !important; }
.w3-pale-red { background-color: var(--danger-subtle) !important; color: var(--text) !important; }

/* Text colours */
.w3-text-blue { color: var(--primary-text) !important; }
.w3-text-grey, .w3-text-gray { color: var(--text-muted) !important; }
.w3-text-dark-grey, .w3-text-dark-gray { color: var(--text) !important; }
.w3-text-light-grey, .w3-text-light-gray { color: var(--text-subtle) !important; }
.w3-text-green { color: var(--success-text) !important; }
.w3-text-red { color: var(--danger-text) !important; }
.w3-text-orange { color: var(--warning-text) !important; }
.w3-text-black { color: var(--text) !important; }
.w3-text-white { color: #fff !important; }

/* Borders */
.w3-border { border: 1px solid var(--border) !important; }
.w3-border-top { border-top: 1px solid var(--border) !important; }
.w3-border-bottom { border-bottom: 1px solid var(--border) !important; }
.w3-border-left { border-left: 4px solid var(--border) !important; }
.w3-border-right { border-right: 1px solid var(--border) !important; }
.w3-border-blue { border-color: var(--primary) !important; }
.w3-border-green { border-color: var(--success) !important; }
.w3-border-red { border-color: var(--danger) !important; }
.w3-border-orange { border-color: var(--warning) !important; }
.w3-border-grey, .w3-border-gray { border-color: var(--border-strong) !important; }

/* Radius — slightly larger, modern */
.w3-round-small { border-radius: var(--radius-sm) !important; }
.w3-round, .w3-round-medium { border-radius: var(--radius-md) !important; }
.w3-round-large { border-radius: var(--radius-lg) !important; }

/* Panels & cards */
.w3-panel { border-radius: var(--radius-md); }
.w3-card, .w3-card-2, .w3-card-4 { box-shadow: var(--shadow-sm) !important; }

/* Hover utilities */
.w3-hover-light-grey:hover, .w3-hover-light-gray:hover { background-color: var(--surface-hover) !important; color: var(--text) !important; }
.w3-hover-red:hover { background-color: var(--danger) !important; color: #fff !important; }
.w3-hover-shadow:hover { box-shadow: var(--shadow-md) !important; }

/* Form controls */
.w3-input {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.w3-input:focus { border-color: var(--primary) !important; box-shadow: var(--focus-ring); }
.w3-select {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md);
}
.w3-select:focus { border-color: var(--primary) !important; box-shadow: var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }

/* Tables */
.w3-table, .w3-table-all { color: var(--text); }
.w3-table-all { border: 1px solid var(--border) !important; }
.w3-bordered tr, .w3-table-all tr { border-bottom: 1px solid var(--border) !important; }
.w3-striped tbody tr:nth-child(odd) { background-color: var(--bg-subtle) !important; }
.w3-table th { color: var(--text-muted); font-weight: var(--weight-semibold); }

/* Tags & badges */
.w3-tag, .w3-badge {
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
}

/* Modal */
.w3-modal { background-color: rgba(8, 9, 12, 0.55); backdrop-filter: blur(2px); z-index: 1200; }
.w3-modal-content { background-color: var(--surface) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Dropdown */
.w3-dropdown-content {
  background-color: var(--surface-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md);
}
.w3-bar-block .w3-bar-item:hover { background-color: var(--surface-hover) !important; color: var(--text) !important; }

/* Bars (legacy headers that still use w3-bar) */
.w3-bar { background-color: var(--surface); }

hr { border: none; border-top: 1px solid var(--border); }

/* ====================== 3. SHARED COMPONENTS ============================= */

.cc-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
.cc-container.is-wide { max-width: var(--content-max-wide); }

/* --- App shell header --------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--space-5);
  background-color: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.app-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.app-header__brand .cc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
  color: #fff;
}
.app-header__spacer { flex: 1; }

/* Primary service navigation */
.app-nav { display: flex; align-items: center; gap: 2px; }
.app-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.app-nav__item:hover { background-color: var(--surface-hover); color: var(--text); }
.app-nav__item.is-active { background-color: var(--primary-subtle); color: var(--primary-text); }
.app-nav__item .cc-icon { flex-shrink: 0; }

.app-header__actions { display: flex; align-items: center; gap: var(--space-2); }

/* Mobile services menu — hidden on desktop, revealed when .app-nav collapses */
.nav-menu { position: relative; display: none; }
.nav-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  padding: var(--space-1);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
  z-index: 200;
}
.nav-menu.is-open .nav-menu__panel { display: block; }
.nav-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.nav-menu__item:hover { background: var(--surface-hover); }
.nav-menu__item.is-active { color: var(--primary-text); background: var(--primary-subtle); }
.nav-menu__item .cc-icon { color: var(--text-subtle); }
.nav-menu__item.is-active .cc-icon { color: var(--primary-text); }

/* Icon-only ghost button (theme toggle, hamburger) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.icon-btn:hover { background-color: var(--surface-hover); color: var(--text); border-color: var(--border); }

/* Theme toggle shows the moon in light mode, sun in dark mode */
.theme-toggle .cc-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .cc-icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .cc-icon-sun { display: inline-flex; }

/* User profile chip */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-2) 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: var(--text-base);
}
.user-chip:hover { background: var(--surface-hover); }
.user-avatar {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  object-fit: cover;
}

/* --- Section header (page title + actions) ------------------------------ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.section-head h1, .section-head h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.section-head .cc-icon, .panel-title .cc-icon { color: var(--primary-text); }

.panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3);
}

/* Subtle metadata strip */
.meta-bar {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}

/* --- Arrow link CTA (modern "view more" affordance) --------------------- */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--primary-text);
  text-decoration: none;
  padding: 6px 8px;
  margin: -6px -8px;            /* keep baseline alignment despite the hit-area padding */
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.link-cta:hover { color: var(--primary); background-color: var(--primary-subtle); }
.link-cta:hover .cc-icon { transform: translateX(3px); }
.link-cta .cc-icon { transition: transform var(--transition-fast); }

/* --- Card --------------------------------------------------------------- */
.cc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.cc-card.is-padded { padding: var(--space-5); }

/* --- Inline SVG icon ---------------------------------------------------- */
.cc-icon {
  display: inline-flex;
  width: 1.05em; height: 1.05em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.cc-icon svg { width: 100%; height: 100%; stroke: currentColor; }

/* --- Empty / loading / error states ------------------------------------ */
.cc-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  color: var(--text-muted);
}
.cc-state__icon { color: var(--text-subtle); opacity: 0.8; }
.cc-state__icon .cc-icon { width: 40px; height: 40px; }
.cc-state__title { font-weight: var(--weight-semibold); color: var(--text); font-size: var(--text-md); }
.cc-state__body { font-size: var(--text-base); max-width: 42ch; }

/* Spinner for busy buttons / async regions */
.cc-spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: cc-spin 0.6s linear infinite;
  vertical-align: -0.15em;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

[aria-busy="true"] { cursor: progress; }

/* Toast — brief global confirmation (e.g. the metric-info toggle) */
.cc-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 1300;
  padding: var(--space-2) var(--space-4);
  background: var(--gray-900);
  color: var(--gray-25);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.cc-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Visually-hidden helper for icon-only controls / a11y labels */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Responsive shell --------------------------------------------------- */
@media (max-width: 768px) {
  .app-header { padding: 0 var(--space-3); gap: var(--space-2); }
  .app-nav { display: none; }          /* horizontal nav collapses … */
  .nav-menu { display: inline-flex; }  /* … into this menu button */
  .cc-container { padding: var(--space-5) var(--space-4); }
}