/*
  shared-components.css — TradeRig Centralized Design System
  ============================================================
  Link AFTER styles.css / page <style> on every authenticated page.
  Provides the canonical source-of-truth for:
    · page header typography
    · section headers
    · KPI / metric tiles
    · status pills & dots
    · empty states
    · standardized buttons
    · card system
    · loading skeleton
    · responsive grid utilities
    · page load guard

  All modules inherit automatically — no page-specific patches needed.
  ============================================================
*/

/* ══ PAGE HEADER ═══════════════════════════════════════════ */
.pg-header {
  margin-bottom: 28px;
  animation: pgIn .4s ease both;
}
.pg-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.pg-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber, #d97706);
  margin-bottom: 8px;
}
.pg-title {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--navy, #0f172a);
  line-height: .92;
  margin-bottom: 8px;
}
.pg-sub {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  line-height: 1.55;
  max-width: 560px;
}
@keyframes pgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ SECTION HEADER ═════════════════════════════════════════ */
.sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sec-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
}
.sec-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line, #e2e8f0);
}
.sec-head-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber, #d97706);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s;
}
.sec-head-action:hover { color: var(--amber-dark, #b45309); }

/* ══ KPI / METRIC TILES ══════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--white, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--r-lg, 14px);
  padding: 18px 20px;
  transition: border-color .2s, transform .18s, box-shadow .2s;
}
.kpi-card:hover {
  border-color: var(--line-strong, #cbd5e1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15,23,42,.07);
}
.kpi-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-label svg { color: var(--amber, #d97706); flex-shrink: 0; }
.kpi-value {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: 28px;
  font-weight: 800;
  color: var(--navy, #0f172a);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -.02em;
}
.kpi-sub {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

/* ══ STATUS PILLS & DOTS ════════════════════════════════════ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.pill-warn    { background: var(--warning-bg, #fffbeb); color: var(--warning, #d97706); }
.pill-ok      { background: var(--success-bg, #f0fdf4); color: var(--success, #16a34a); }
.pill-danger  { background: var(--danger-bg,  #fef2f2); color: var(--danger,  #dc2626); }
.pill-neutral { background: var(--bg-alt,     #f0efe9); color: var(--slate,   #475569); border: 1px solid var(--line, #e2e8f0); }
.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

/* ══ EMPTY STATE ════════════════════════════════════════════ */
.empty-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 52px 24px;
  gap: 12px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--r-xl, 16px);
}
.empty-view-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--bg-alt, #f0efe9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-light, #94a3b8);
  margin-bottom: 4px;
}
.empty-view h3 {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--navy, #0f172a);
  line-height: 1;
  margin: 0;
}
.empty-view p {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  max-width: 300px;
  line-height: 1.55;
  margin: 0;
}

/* ══ STANDARDIZED BUTTONS ═══════════════════════════════════ */
/* "+ Report Incident" — consistent across all pages */
.btn-incident {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  background: linear-gradient(180deg, #e8930f, var(--amber, #d97706));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .12s;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(217,119,6,.22);
}
.btn-incident:hover {
  background: linear-gradient(180deg, #d97706, var(--amber-dark, #b45309));
  box-shadow: 0 6px 18px rgba(217,119,6,.32);
  transform: translateY(-1px);
}
.btn-incident:active { transform: scale(.97); box-shadow: none; }

/* Primary CTA (amber fill) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 20px;
  background: var(--amber, #d97706);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-cta:hover {
  background: var(--amber-dark, #b45309);
  box-shadow: 0 4px 12px rgba(217,119,6,.28);
  transform: translateY(-1px);
}
.btn-cta:active { transform: scale(.97); box-shadow: none; }

/* Ghost / outline */
.btn-outline-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-muted, #64748b);
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: 9px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.btn-outline-sm:hover { border-color: var(--amber, #d97706); color: var(--amber, #d97706); }

/* ══ CARD SYSTEM ════════════════════════════════════════════ */
.card {
  background: var(--white, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--r-xl, 16px);
  overflow: hidden;
}
.card-pad { padding: 20px 22px; }
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-head-title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.card-head-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber, #d97706);
  text-decoration: none;
  transition: color .15s;
}
.card-head-link:hover { color: var(--amber-dark, #b45309); }

/* ══ LOADING SKELETON ════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt,#f0efe9) 25%, var(--line,#e2e8f0) 50%, var(--bg-alt,#f0efe9) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  height: 16px;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ══ PAGE LOAD GUARD ════════════════════════════════════════
   body.tr-loading hides main content during auth/data fetch.
   JS adds .tr-ready when data is ready → fades content in.
   Prevents layout flicker on pages with conditional sections.
   =========================================================*/
body.tr-loading #main-body,
body.tr-loading .page-content {
  opacity: 0;
  pointer-events: none;
}
body.tr-ready #main-body,
body.tr-ready .page-content {
  opacity: 1;
  transition: opacity .2s ease;
  pointer-events: auto;
}

/* ══ PERM-VISIBLE OVERRIDE ══════════════════════════════════
   shared-mobile.css sets a[data-perm].perm-visible{display:flex!important}
   which breaks grid-layout action cards. Higher specificity below
   restores correct display values for each element type.
   =========================================================*/
a.action-card[data-perm].perm-visible { display: grid !important; }
.settings-nav-item[data-perm].perm-visible { display: flex !important; }

/* ══ RESPONSIVE GRID UTILITIES ═══════════════════════════════ */
.rg-auto    { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; }
.rg-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; }
.rg-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rg-3       { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.rg-4       { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }

@media (max-width: 900px)  { .rg-3, .rg-4 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px)  { .rg-2, .rg-3, .rg-4, .rg-auto { grid-template-columns: 1fr !important; } }

/* ══ TYPOGRAPHY UTILITIES ═══════════════════════════════════ */
.text-mono  { font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.text-head  { font-family: var(--font-head, 'Space Grotesk', sans-serif); }
.text-muted { color: var(--text-muted, #64748b); }
.text-amber { color: var(--amber, #d97706); }
.text-navy  { color: var(--navy, #0f172a); }
.text-sm    { font-size: 12px; }
.text-xs    { font-size: 11px; }

/* ══ PAGE HEADER ALIASES ═════════════════════════════════════
   Canonical overrides for legacy .page-title / .page-mono / .page-sub
   class names used by per-page <style> blocks. shared-components.css
   loads after those blocks, so these definitions win when specificity
   is equal — providing a single source of truth without touching HTML.
   =========================================================*/
.page-header {
  margin-bottom: 28px;
  animation: pgIn .4s ease both;
}
.page-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber, #d97706);
  margin-bottom: 8px;
}
.page-title {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--navy, #0f172a);
  line-height: .92;
  margin-bottom: 8px;
}
.page-sub {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  line-height: 1.55;
  max-width: 560px;
  margin-bottom: 0;
}

/* ── Shared circuit boot loader ───────────────────────────────────────────────
   Matches the sim-select launch animation so every page loads the same way.
   Each page owns its own fullscreen container (dark canvas + *-pending toggle);
   this file owns the inner visual: wordmark, animated circuit, status, bar. */
.tr-boot-mark { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:800; font-size:24px; letter-spacing:-.02em; color:#fff; }
.tr-boot-mark .t { color:#fff; }
.tr-boot-mark .r { color:var(--amber); }
.tr-boot-svg { width:180px; height:auto; }
.tr-boot-wire { fill:none; stroke:rgba(255,255,255,.16); stroke-width:2.5; }
.tr-boot-flow { fill:none; stroke:#f4a82a; stroke-width:2.5; stroke-dasharray:6 9; stroke-linecap:round; animation:trBootFlow .9s linear infinite; }
@keyframes trBootFlow { to { stroke-dashoffset:-30; } }
.tr-boot-node { fill:#f4a82a; opacity:0; animation:trBootNode .4s ease forwards; }
@keyframes trBootNode { to { opacity:1; } }
.tr-boot-glow { fill:#f4a82a; opacity:.85; }
.tr-boot-status { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#aebbcf; min-height:14px; }
.tr-boot-bar { width:180px; height:3px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.tr-boot-bar span { display:block; height:100%; width:0; background:#f4a82a; animation:trBootBar 1.2s ease forwards; }
@keyframes trBootBar { 0% { width:0; } 55% { width:70%; } 100% { width:90%; } }
@media (prefers-reduced-motion:reduce) {
  .tr-boot-flow, .tr-boot-node, .tr-boot-bar span { animation:none; }
  .tr-boot-node { opacity:1; }
  .tr-boot-bar span { width:90%; }
}