/* ==========================================================================
   NAVIS Design System — Bloombergization Overhaul
   ========================================================================== */

/* ── 1. Color & Sizing Variables ── */
:root {
  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Basic Colors */
  --bg-primary: #F8FAFC;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --panel-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --border-color: #E2E8F0;
  --border-emphasis: #CBD5E1;

  /* Text Colors */
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  
  --color-navy: #0F172A;
  --color-navy-text: #0F172A;
  --color-navy-secondary: #64748B;
  --color-slate: #64748B;
  --color-slate-light: #F1F5F9;

  /* Primary Accent */
  --color-indigo: #0F766E;
  --color-indigo-hover: #0d5f58;
  --color-indigo-light: #f0fbfb;
  --color-teal: #0F766E;

  /* Risk Severity Colors */
  --color-safe: #16A34A;
  --color-safe-bg: #F0FDF4;
  --color-safe-text: #16A34A;
  --color-within-appetite: var(--color-safe);

  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-warning-text: #D97706;
  --color-near-appetite: var(--color-warning);

  --color-critical: #DC2626;
  --color-critical-bg: #FEF2F2;
  --color-critical-text: #DC2626;
  --color-above-appetite: var(--color-critical);

  /* Restrained Institutional Border Radius */
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  --card-padding: 18px;
}

/* ── 2. Global Resets ── */
body, button, input, select, textarea, td, th {
  font-family: var(--font-family) !important;
  color: var(--text-primary);
}

body {
  background-color: var(--bg-primary) !important;
}

/* Remove shadows and gradients globally */
*, *::before, *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
}

/* Solid card layouts with restrained rounding */
.glass-panel, .card, .movement-row, .ticker-card, .insight-card, .intake-dropzone {
  background-image: none !important;
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  padding: var(--card-padding) !important;
}

/* Inline spacing adjustments for movement rows and small widgets */
.movement-row, .insight-card {
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  border-radius: var(--radius-sm) !important;
}

/* Ticker status box overrides */
.ticker-card.above { border-left: 4px solid var(--color-critical) !important; background: var(--color-critical-bg) !important; }
.ticker-card.near { border-left: 4px solid var(--color-warning) !important; background: var(--color-warning-bg) !important; }
.ticker-card.within { border-left: 4px solid var(--color-safe) !important; background: var(--color-safe-bg) !important; }

/* ── 3. Typography & Hierarchy ── */
h1, .page-header h1 {
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

h2, h3, .dashboard-card-title, .panel-title, .modal-heading {
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
  margin-top: 0 !important;
}

label, .control-label, .form-group label {
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 6px !important;
  display: inline-block !important;
}

body, p, span, td, .form-control {
  font-weight: 400 !important;
  font-size: 13px !important;
}

/* ── 4. Table Overhaul ── */
table, .custom-table {
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: 0 !important;
}

table th, .custom-table th {
  border-bottom: 1.5px solid var(--border-emphasis) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  padding: 8px 12px !important;
  text-align: left !important;
}

table td, .custom-table td {
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 10px 12px !important;
  background-color: transparent !important;
}

table tr:hover td, .custom-table tr:hover td {
  background-color: var(--bg-primary) !important;
}

/* ── 5. Standard Page Headers ── */
.page-header {
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}

.profile-role-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--color-indigo) !important;
  background-color: var(--color-indigo-light) !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-pill) !important;
  display: inline-block !important;
  margin-bottom: 4px !important;
}

.page-subtitle {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* ── 6. Form Controls & Buttons ── */
.form-control, select, input[type="text"], input[type="email"], input[type="password"], textarea {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  background-color: #FFFFFF !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

.form-control:focus, select:focus, input:focus, textarea:focus {
  border-color: var(--color-indigo) !important;
  outline: none !important;
}

.btn {
  border-radius: var(--radius-sm) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.btn-primary {
  background-color: var(--color-indigo) !important;
  color: #FFFFFF !important;
}

.btn-primary:hover {
  background-color: var(--color-indigo-hover) !important;
}

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

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

/* Active Tab highlighting */
.top-nav-item.active {
  border-bottom: 2px solid var(--color-indigo) !important;
  border-radius: 0 !important;
}

/* SVG Text Font Standardization */
svg text, .network-node text, .network-svg text {
  font-family: var(--font-family) !important;
}

/* ── 7. Operating Mode Switcher ── */
.mode-switcher {
  display: flex;
  background-color: var(--color-slate-light);
  padding: 2px;
  border-radius: var(--radius-sm); /* 8px rounding */
  align-items: center;
  border: 1px solid var(--border-color);
}

.mode-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  line-height: 1.2 !important;
}

.mode-btn.active {
  background-color: #FFFFFF !important;
  color: var(--text-primary) !important;
}

.mode-btn:hover:not(.active) {
  color: var(--text-primary) !important;
}