/* ============================================================
   EVE AI Design System
   ============================================================
   Unified layout primitives, grid system, card components,
   and typography classes for all internal app pages.

   Load order:  theme.css -> design-system.css -> bl-components.css
   Tokens live in theme.css (:root block).
   ============================================================ */

/* ── Reset (light-touch, theme.css already has box-sizing) ── */
img { max-width: 100%; height: auto; }
button { font-family: inherit; }

/* ── Global Surface Anchor ─────────────────────────────────────────────
   Ensures the full viewport and any React/SPA root div use the
   primary background. Suppressed when prefers-reduced-motion fires. */
html,
body,
#root {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

/* ── Ambient Transition (reduced-motion in base.css overrides via !important) ── */
* {
  transition: background 0.2s ease, color 0.2s ease;
}

/* ── Generic .card (dark-tinted elevated surface with depth shadow) ─── */
.card {
  background: var(--bg-tertiary, #1f2937);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-primary);
}
/* Danger / warning / success tints */
.card-danger  { background: rgba(239, 68,  68,  0.08); border-color: rgba(239, 68,  68,  0.3); }
.card-warning { background: rgba(245, 158, 11,  0.08); border-color: rgba(245, 158, 11,  0.3); }
.card-success { background: rgba(16,  185, 129, 0.08); border-color: rgba(16,  185, 129, 0.3); }

/* ── SVG Icon Sizing ──
   Only targets the standard 24×24 icon viewBox used by all inline icons.
   Gauges, charts, EKG waves, and other data-viz SVGs use different viewBox
   values (36×36, 120×120, 200×24, 280×280, etc.) and are untouched. */
svg[viewBox="0 0 24 24"] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Icon containers can override size via font-size (1em inheritance) */
[class$="-icon"] > svg,
[class*="-icon "] > svg,
.icon > svg,
button > svg,
a > svg,
.btn > svg,
.bl-btn > svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* SVGs that have an icon class directly (e.g. <svg class="logout-icon">) */
svg[class$="-icon"],
svg[class*="-icon "] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Icon Sizing Utilities ──
   Apply to icon containers to control child SVG size via 1em inheritance. */
.icon-xs  { font-size: var(--text-xs, 12px); }
.icon-sm  { font-size: var(--text-sm, 14px); }
.icon-md  { font-size: var(--text-base, 16px); }
.icon-lg  { font-size: var(--text-lg, 20px); }
.icon-xl  { font-size: var(--text-xl, 28px); }
.icon-2xl { font-size: 32px; }
.icon-3xl { font-size: 48px; }

/* ── Decorative / Empty-State Icons ──
   These are larger illustrative icons, not inline text icons. */
.bl-empty-icon,
.service-unavailable-icon {
  font-size: 48px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  margin-bottom: var(--space-3, 12px);
  opacity: 0.5;
}

/* ============================================================
   1. APP LAYOUT  (Sidebar + Main)
   Matches veto-service / bl-components: same padding scale and max-width.
   ============================================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-primary);
}
.main-content {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Content Area — responsive padding, unified max-width ── */
.content-area {
  padding: var(--space-4, 16px);
  max-width: var(--page-max-width, 1400px);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 640px)  { .content-area { padding: var(--space-5, 20px); } }
@media (min-width: 768px)  { .content-area { padding: var(--space-7, 28px); } }
@media (min-width: 1024px) { .content-area { padding: var(--space-10, 40px); } }

/* Embedded — consistent 24px padding on all sides */
body.embedded-in-dashboard .content-area,
html.embedded-in-dashboard .content-area {
  padding: var(--space-6, 24px) !important;
  max-width: 100% !important;
}

/* ── Page Container (max-width wrapper) ── */
.page-container {
  width: 100%;
  max-width: var(--page-max-width, 1400px);
  margin: 0 auto;
}

/* Legacy alias — many pages use .dashboard as the inner wrapper */
.dashboard {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
}


/* ============================================================
   2. PAGE HEADER
   ============================================================ */
.page-header {
  margin-bottom: var(--space-8);
}
.page-header h1,
.page-title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-2) 0;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

/* Legacy aliases — pages use .dashboard-header */
.dashboard-header {
  margin-bottom: var(--space-8);
}
.dashboard-header h1 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2) 0;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dashboard-header .subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}


/* ============================================================
   3. SECTION TITLES
   ============================================================ */
.section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-heading);
  margin: var(--space-8) 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-primary);
}
.category-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-primary);
}


/* ============================================================
   4. CARD COMPONENT
   ============================================================ */
.ds-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ds-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}
.ds-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.ds-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
}
.ds-card-body {
  /* Just a semantic container; children handle their own spacing */
}

/* Compact variant (less padding, tighter) */
.ds-card-sm {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}
.ds-card-sm .ds-card-header {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ── Legacy card mapping ── */
/* Make existing bl-section and service-card cards consistent */
.bl-section,
.service-card,
.agent-card {
  border-radius: var(--radius-lg);
}


/* ============================================================
   5. GRID SYSTEM  (12-column conceptual, practical column classes)
   ============================================================ */
.grid {
  display: grid;
  gap: var(--space-5);
}
/* Explicit column counts */
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fill responsive columns */
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

/* Gap variants */
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Legacy grid aliases (used by investor-dashboard etc.) */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive collapse */
@media (max-width: 1200px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   6. TYPOGRAPHY CLASSES
   ============================================================ */
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-heading   { color: var(--text-heading); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent-primary); }
.text-success   { color: var(--accent-safe); }
.text-warning   { color: var(--accent-warning); }
.text-danger    { color: var(--accent-alert); }


/* ============================================================
   7. STAT / METRIC COMPONENTS
   ============================================================ */
.stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: var(--leading-tight);
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}
.stat-trend.up   { color: var(--accent-safe); }
.stat-trend.down { color: var(--accent-alert); }
.stat-trend.flat { color: var(--text-secondary); }


/* ============================================================
   8. STATUS INDICATORS
   ============================================================ */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: inline-block;
}
.status-dot.online,
.status-dot.success,
.status-dot.healthy  { background: var(--accent-safe); box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
.status-dot.offline,
.status-dot.error,
.status-dot.critical { background: var(--accent-alert); }
.status-dot.warning,
.status-dot.degraded { background: var(--accent-warning); }
.status-dot.idle,
.status-dot.checking { background: var(--text-muted); animation: ds-pulse 1.5s infinite; }
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(74, 143, 224, 0.15);
  color: var(--accent-primary);
}
.badge-success { background: rgba(34, 197, 94, 0.15); color: var(--accent-safe); }
.badge-warning { background: rgba(251, 191, 36, 0.15); color: var(--accent-warning); }
.badge-danger  { background: rgba(239, 68, 68, 0.15); color: var(--accent-alert); }


/* ============================================================
   9. BUTTONS (supplement theme.css .btn)
   ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  line-height: 1;
}
.ds-btn-primary {
  background: linear-gradient(135deg, var(--accent-primary) 0%, #764ba2 100%);
  color: var(--text-on-accent, #ffffff);
}
.ds-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.ds-btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}
.ds-btn-outline:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.ds-btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}


/* ============================================================
   10. TABS
   ============================================================ */
.ds-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}
.ds-tab {
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.ds-tab:hover { color: var(--text-primary); }
.ds-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}


/* ============================================================
   11. TABLES
   ============================================================ */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.ds-table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.ds-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary);
}
.ds-table tr:hover td {
  background: rgba(74, 143, 224, 0.04);
}


/* ============================================================
   12. UTILITY CLASSES
   ============================================================ */
/* Flexbox shortcuts */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* Spacing helpers */
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* Display */
.hidden    { display: none; }
.block     { display: block; }
.sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Borders */
.border-b { border-bottom: 1px solid var(--border-primary); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }


/* ============================================================
   13. MOBILE OVERRIDES (shared across all pages)
   ============================================================ */
@media (max-width: 767px) {
  .app-layout {
    flex-direction: column;
  }
  #shared-sidebar {
    /* sidebar.js handles collapse; just ensure it doesn't break layout */
  }
  .dashboard-header h1,
  .page-header h1,
  .page-title {
    font-size: 22px;
  }
  .section-title,
  .category-title {
    font-size: 16px;
  }
  .stat-value {
    font-size: var(--text-xl);
  }
}


/* ============================================================
   14. LIGHT MODE (token-based, minimal overrides)
   ============================================================
   Most light mode should work via theme.css tokens.
   These handle the few structural elements that need explicit overrides.
   ============================================================ */
[data-theme="light"] .ds-card,
[data-theme="light"] .bl-section,
[data-theme="light"] .service-card,
[data-theme="light"] .agent-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
[data-theme="light"] .ds-card:hover,
[data-theme="light"] .bl-section:hover,
[data-theme="light"] .service-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.06);
}
[data-theme="light"] .dashboard-header h1,
[data-theme="light"] .page-header h1,
[data-theme="light"] .page-title {
  background: linear-gradient(135deg, #4338ca, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .section-title,
[data-theme="light"] .category-title {
  color: #0f172a;
  border-bottom-color: #e5e7eb;
}
[data-theme="light"] .ds-table th {
  color: #64748b;
  border-bottom-color: #e5e7eb;
}
[data-theme="light"] .ds-table td {
  color: #0f172a;
  border-bottom-color: #f1f5f9;
}
[data-theme="light"] .ds-table tr:hover td {
  background: rgba(99, 102, 241, 0.03);
}
[data-theme="light"] .badge {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}
[data-theme="light"] .badge-success { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
[data-theme="light"] .badge-warning { background: rgba(245, 158, 11, 0.1); color: #d97706; }
[data-theme="light"] .badge-danger  { background: rgba(220, 38, 38, 0.1); color: #dc2626; }

/* ── Common light-mode patterns (deduplicated from per-page overrides) ── */

/* Body / background */
[data-theme="light"] body {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Containers */
[data-theme="light"] .container,
[data-theme="light"] .dashboard,
[data-theme="light"] .page-container {
  color: #0f172a;
}

/* Header & subtitle */
[data-theme="light"] .header-left h1 {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 50%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] .subtitle {
  color: #475569 !important;
}

/* Stat cards */
[data-theme="light"] .stat-card,
[data-theme="light"] .stat-section {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .stat-card:hover {
  border-color: #c7d2fe !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .stat-value {
  background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
[data-theme="light"] .stat-label {
  color: #475569 !important;
}

/* Glass cards / metric cards / feature cards / layer cards */
[data-theme="light"] .glass-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .layer-card,
[data-theme="light"] .status-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .glass-card:hover,
[data-theme="light"] .metric-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .layer-card:hover {
  border-color: #c7d2fe !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* Agent cards */
[data-theme="light"] .agent-card {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .agent-card:hover {
  border-color: #c7d2fe !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .agent-header {
  background: #f8fafc !important;
  border-bottom-color: #e5e7eb !important;
}
[data-theme="light"] .agent-description {
  color: #475569 !important;
}
[data-theme="light"] .agent-stat {
  background: #f8fafc !important;
}
[data-theme="light"] .agent-stat-label,
[data-theme="light"] .agent-meta {
  color: #64748b !important;
}

/* Status banners */
[data-theme="light"] .status-banner.running {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .status-banner.stopped {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(234, 179, 8, 0.05) 100%) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
[data-theme="light"] .status-banner.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.05) 100%) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-theme="light"] .status-text {
  color: #0f172a !important;
}
[data-theme="light"] .status-meta {
  color: #475569 !important;
}

/* Tabs (legacy per-page .tab-btn) */
[data-theme="light"] .tab-btn {
  color: #475569 !important;
  border-color: transparent !important;
}
[data-theme="light"] .tab-btn:hover {
  color: #0f172a !important;
}
[data-theme="light"] .tab-btn.active {
  color: #6366f1 !important;
  border-color: #6366f1 !important;
}

/* Form groups */
[data-theme="light"] .form-group label {
  color: #374151 !important;
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

/* Data tables */
[data-theme="light"] .data-table th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom-color: #e5e7eb !important;
}
[data-theme="light"] .data-table td {
  color: #0f172a !important;
  border-bottom-color: #f1f5f9 !important;
}
[data-theme="light"] .data-table tr:hover td {
  background: #f8fafc !important;
}

/* Alert items */
[data-theme="light"] .alert-item {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* History items / event items */
[data-theme="light"] .history-item,
[data-theme="light"] .event-item {
  border-bottom-color: #f1f5f9 !important;
}
[data-theme="light"] .history-item:hover,
[data-theme="light"] .event-item:hover {
  background: #f8fafc !important;
}

/* Loading spinner */
[data-theme="light"] .loading {
  color: #475569 !important;
}

/* Toast shadows */
[data-theme="light"] .toast {
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15) !important;
}

/* Generic rgba-based backgrounds (used inline by many pages) */
[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"] {
  background: #f8fafc !important;
}
[data-theme="light"] [style*="color:#8892b0"],
[data-theme="light"] [style*="color: #8892b0"] {
  color: #475569 !important;
}

/* ── Inline Equalizer Loader ──
   Drop-in replacement for "Loading..." placeholder text.
   Usage: <span class="eq-loader"><span class="eq-bar"></span>×5</span> */
@keyframes equalize {
  0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}
.eq-loader {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  vertical-align: middle;
}
.eq-loader .eq-bar {
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.5;
  animation: equalize 1s ease-in-out infinite;
}
.eq-loader .eq-bar:nth-child(1) { height: 4px; animation-delay: 0.0s; }
.eq-loader .eq-bar:nth-child(2) { height: 8px; animation-delay: 0.1s; }
.eq-loader .eq-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.eq-loader .eq-bar:nth-child(4) { height: 8px; animation-delay: 0.3s; }
.eq-loader .eq-bar:nth-child(5) { height: 4px; animation-delay: 0.4s; }

/* ============================================================
   EMBEDDED-IN-DASHBOARD — Applied when page is an iframe inside dashboard.html
   dashboard.html adds class="embedded-in-dashboard" to <html> of each iframe.
   All standalone chrome (breadcrumbs, page headers, footers, sidebars, nav bars,
   back-to-dashboard links) must disappear; content panels expand to full width.
   ============================================================ */

/* ── Hide chrome ── */
html.embedded-in-dashboard .bl-breadcrumb,
body.embedded-in-dashboard .bl-breadcrumb         { display: none !important; }

/* Page headers (icon + title + description block above content) */
html.embedded-in-dashboard .bl-header,
html.embedded-in-dashboard .bl-header-wrapper,
html.embedded-in-dashboard .page-header,
html.embedded-in-dashboard header.hdr,
html.embedded-in-dashboard .hdr-standalone,
html.embedded-in-dashboard header.terminal-header,
body.embedded-in-dashboard .bl-header,
body.embedded-in-dashboard .page-header          { display: none !important; }

html.embedded-in-dashboard .bl-footer,
html.embedded-in-dashboard footer,
html.embedded-in-dashboard .app-footer,
html.embedded-in-dashboard .theme-footer,
body.embedded-in-dashboard footer                 { display: none !important; }

html.embedded-in-dashboard nav.theme-nav,
html.embedded-in-dashboard .theme-header          { display: none !important; }

/* Breadcrumb wrapper variations */
html.embedded-in-dashboard .breadcrumb-wrapper,
html.embedded-in-dashboard .breadcrumb-row,
html.embedded-in-dashboard .page-breadcrumb       { display: none !important; }

/* Back-to-dashboard / back links */
html.embedded-in-dashboard .back-to-dashboard,
html.embedded-in-dashboard .back-link,
html.embedded-in-dashboard a[href="/app/dashboard"]:not(.inline-link),
html.embedded-in-dashboard a[href="/app/dashboard"]:not(.inline-link) + *  { display: none !important; }

/* Page classification banners (PUBLIC / INTERNAL) */
html.embedded-in-dashboard .page-classification  { display: none !important; }

/* ── Layout normalisation ── */
html.embedded-in-dashboard body {
  /* Remove top-padding compensation for fixed nav bars */
  padding-top: 0 !important;
  /* Prevent double scrollbar — iframe already scrolls */
  overflow-x: hidden;
}

html.embedded-in-dashboard .app-layout {
  display: block !important;
  min-height: unset !important;
}

/* Sidebars */
html.embedded-in-dashboard #shared-sidebar,
html.embedded-in-dashboard #sidebar,
html.embedded-in-dashboard .sidebar,
html.embedded-in-dashboard .app-sidebar,
html.embedded-in-dashboard .side-nav            { display: none !important; width: 0 !important; overflow: hidden !important; }

/* Main content fills full width when sidebar is gone */
html.embedded-in-dashboard .main-content {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Wrapper elements — release their max-width cap so content fills the iframe */
html.embedded-in-dashboard .dashboard,
html.embedded-in-dashboard .page-container,
html.embedded-in-dashboard .container           { max-width: 100% !important; }

/* Content area (already covered above, re-stated for explicit override) */
html.embedded-in-dashboard .content-area {
  padding: var(--space-3, 12px) var(--space-5, 20px) 0 !important;
  max-width: 100% !important;
}


/* ============================================================
   15. SOVEREIGN OBJECT CLASSES
   Canonical universal classes for Charts, Cards, Panels, Lists,
   Inputs, Buttons, and Tables across all 116 app pages.
   Per-page variants should be aliased via the refactor script.
   ============================================================ */

/* ── .eve-panel — Surface container ── */
.eve-panel {
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.eve-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.eve-panel-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
}
.eve-panel-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.eve-panel-sm  { padding: var(--space-4); border-radius: var(--radius-md); }
.eve-panel-lg  { padding: var(--space-8); border-radius: var(--radius-xl); }
.eve-panel-flat { box-shadow: none !important; }

/* ── .eve-card — Metric / data card ── */
.eve-card {
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.eve-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.eve-card-label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.eve-card-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: var(--leading-tight);
}
.eve-card-subtext {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.eve-card-icon {
  font-size: 28px;
  line-height: 1;
  opacity: 0.7;
}

/* ── .eve-chart-container — Chart.js / canvas wrapper ── */
.eve-chart-container {
  position: relative;
  width: 100%;
  height: 220px;
  min-height: 120px;
}
.eve-chart-container canvas { max-width: 100%; }
.eve-chart-sm   { height: 140px; }
.eve-chart-md   { height: 220px; }
.eve-chart-lg   { height: 320px; }
.eve-chart-xl   { height: 440px; }
.eve-chart-full { height: 100%; min-height: 200px; }

/* ── .eve-input — Universal form input ── */
.eve-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.eve-input::placeholder { color: var(--text-muted); }
.eve-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(74, 143, 224, 0.12);
}
.eve-input:disabled { opacity: 0.5; cursor: not-allowed; }
.eve-input.error   { border-color: var(--accent-alert); }
.eve-input.success { border-color: var(--accent-safe); }

.eve-input-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
}
.eve-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.eve-field:last-child { margin-bottom: 0; }
.eve-field-error {
  font-size: var(--text-xs);
  color: var(--accent-alert);
  margin-top: var(--space-1);
}

/* ── .eve-btn-primary — Primary action button ── */
.eve-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, var(--accent-primary, #4a8fe0) 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  user-select: none;
}
.eve-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 143, 224, 0.35);
}
.eve-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.eve-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.eve-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  user-select: none;
}
.eve-btn-secondary:hover:not(:disabled) { border-color: var(--accent-primary); color: var(--accent-primary); }
.eve-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

.eve-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.eve-btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }

/* Button size modifiers (mix with any .eve-btn-* variant) */
.eve-btn-xs { padding: var(--space-1) var(--space-3) !important; font-size: var(--text-xs) !important; border-radius: var(--radius-sm) !important; }
.eve-btn-sm { padding: var(--space-2) var(--space-4) !important; font-size: var(--text-xs) !important; }
.eve-btn-lg { padding: var(--space-4) var(--space-8) !important; font-size: var(--text-base) !important; }

/* ── .eve-table — Universal data table ── */
.eve-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.eve-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--border-primary);
  white-space: nowrap;
}
.eve-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary);
  vertical-align: middle;
}
.eve-table tbody tr:last-child td { border-bottom: none; }
.eve-table tbody tr:hover td { background: rgba(74, 143, 224, 0.04); }
.eve-table-striped tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.02); }
.eve-table-sm thead th,
.eve-table-sm tbody td { padding: var(--space-2) var(--space-3); }
.eve-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── .eve-list — Universal list ── */
.eve-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eve-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  transition: background 0.15s;
}
.eve-list-item:last-child { border-bottom: none; }
.eve-list-item:hover { background: rgba(74, 143, 224, 0.04); }
.eve-list-item-label { flex: 1; color: var(--text-primary); font-size: var(--text-sm); }
.eve-list-item-value { color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.eve-list-item-badge { flex-shrink: 0; }


/* ============================================================
   16. SOVEREIGN LIGHT MODE OVERRIDES
   .eve-* classes inside [data-theme="light"]
   ============================================================ */

[data-theme="light"] .eve-panel {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}
[data-theme="light"] .eve-panel:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
}
[data-theme="light"] .eve-panel-header { border-bottom-color: #e5e7eb; }
[data-theme="light"] .eve-panel-title  { color: #0f172a; }
[data-theme="light"] .eve-panel-footer { border-top-color: #e5e7eb; }

[data-theme="light"] .eve-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
[data-theme="light"] .eve-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 12px rgba(15,23,42,0.08);
}
[data-theme="light"] .eve-card-label   { color: #64748b; }
[data-theme="light"] .eve-card-value   { color: #0f172a; }
[data-theme="light"] .eve-card-subtext { color: #64748b; }

[data-theme="light"] .eve-input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #0f172a;
}
[data-theme="light"] .eve-input::placeholder { color: #9ca3af; }
[data-theme="light"] .eve-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10);
}
[data-theme="light"] .eve-input-label { color: #374151; }

[data-theme="light"] .eve-btn-secondary {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #0f172a;
}
[data-theme="light"] .eve-btn-secondary:hover:not(:disabled) {
  border-color: #6366f1;
  color: #6366f1;
}
[data-theme="light"] .eve-btn-ghost { color: #475569; }
[data-theme="light"] .eve-btn-ghost:hover { background: #f1f5f9; color: #0f172a; }

[data-theme="light"] .eve-table thead th {
  color: #64748b;
  border-bottom-color: #e5e7eb;
}
[data-theme="light"] .eve-table tbody td {
  color: #0f172a;
  border-bottom-color: #f1f5f9;
}
[data-theme="light"] .eve-table tbody tr:hover td { background: rgba(99,102,241,0.03); }
[data-theme="light"] .eve-table-striped tbody tr:nth-child(odd) td { background: #f8fafc; }

[data-theme="light"] .eve-list-item { border-bottom-color: #f1f5f9; }
[data-theme="light"] .eve-list-item:hover { background: #f8fafc; }
[data-theme="light"] .eve-list-item-label { color: #0f172a; }
[data-theme="light"] .eve-list-item-value { color: #64748b; }