/**
 * static/css/regx3_design_system.css
 * REGX³ Master Institutional Design Tokens & High-Fidelity Components.
 * Standard: Dark-Mode Elevation, WCAG 2.1 AA Contrast & Institutional Palettes.
 */

:root {
  /* Surface Layers (Elevation Hierarchy) */
  --regx3-bg-canvas:        #020617; /* Deep midnight void */
  --regx3-bg-card:          #0b0f19; /* Primary card surface */
  --regx3-bg-card-elevated: #111827; /* Modals, tooltips, popovers */
  --regx3-bg-card-hover:    #1e293b;

  /* Borders & Dividers */
  --regx3-border-subtle:    #1e293b; /* Subtle card border */
  --regx3-border-muted:     #334155; /* Secondary line */
  --regx3-border-active:    #00D2FF; /* Focus / Highlight ring */

  /* Regulatory & Action Accents */
  --regx3-cyan-primary:     #00D2FF; /* Brand Core */
  --regx3-cyan-hover:       #38bdf8;
  --regx3-emerald-success:  #10b981; /* Accretive / Hurdle Clear */
  --regx3-amber-warning:    #f59e0b; /* Caution / Marginal */
  --regx3-rose-danger:      #ef4444; /* Cutoff / Deficit / Loss */

  /* Text & Luminance Hierarchy */
  --regx3-text-primary:     #f8fafc; /* Headers, bold values */
  --regx3-text-secondary:   #94a3b8; /* Labels, subtitles */
  --regx3-text-muted:       #64748b; /* Disclaimers, axis ticks */

  /* Typography Stacks */
  --regx3-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --regx3-font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

/* --- High-Fidelity Status Glow Pills --- */
.badge-regx3-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--regx3-font-mono);
}

.badge-glow-danger {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
}

.badge-glow-warning {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.badge-glow-success {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}

.badge-glow-cyan {
  background: rgba(0, 210, 255, 0.14) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(0, 210, 255, 0.45) !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.15);
}

/* Master Header Brand Anchor Clickability */
.regx3-header-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 99999;
  position: relative;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

.regx3-header-brand-link:hover {
  opacity: 0.88;
}

/* Institutional Navigation Dropdown Reset */
.dropdown-menu,
ul.dropdown-menu,
.dropdown-menu > li,
ul.dropdown-menu > li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* ==========================================================================
   REGX3 MOBILE-RESPONSIVE ADAPTIVE SHELL & VIEWPORT ENGINE
   Enforces institutional typography scaling and table wrapping on mobile viewports.
   ========================================================================== */

:root {
    --shell-max-width: 1440px;
    --mobile-gutter: 1rem;
}

.regx3-mobile-shell {
    width: 100%;
    max-width: var(--shell-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
    box-sizing: border-box;
}

/* Institutional Table and Quantitative Matrix Horizontal Overflow Isolation */
.regx3-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-subtle, #1e293b);
    border-radius: 4px;
}

.regx3-table-responsive table {
    min-width: 640px;
    width: 100%;
    border-collapse: collapse;
}

@media screen and (max-width: 768px) {
    :root {
        --mobile-gutter: 0.75rem;
    }
    
    .regx3-mobile-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Collapse multi-column ALCO and Quant grids into structured mobile stacks */
    .regx3-grid-split,
    .quant-dashboard-grid,
    .deal-desk-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .regx3-stat-card {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Ensure institutional typography scales down cleanly without wrapping artifacts */
    h1, .regx3-heading-xl {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    h2, .regx3-heading-lg {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    .regx3-badge-metric {
        font-size: 0.75rem !important;
    }
}