/* ============================================================================
   SFL Tech marketing-site theme — shared across index.html and all reports.
   Loaded AFTER each file's own <style> block so these rules win the cascade
   for shared selectors (body background, buttons, table header tint) without
   needing to touch every individual selector inside each dashboard.
   ============================================================================ */

:root{
  --sfl-pink:#ec4899;
  --sfl-purple:#8b5cf6;
  --sfl-blue:#3b82f6;
  --sfl-ink:#0f172a;
  --sfl-muted:#64748b;
}

/* ---------- page background: soft gradient wash + dotted grid (subtle) ---------- */
body{
  background-color:#f8f9fb;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(236,72,153,.06), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(59,130,246,.06), transparent 42%),
    radial-gradient(circle at 50% 92%, rgba(139,92,246,.05), transparent 46%),
    radial-gradient(rgba(15,23,42,.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 22px 22px;
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* ---------- decorative blobs (inserted as empty divs right after <body>) ---------- */
.sfl-blob{
  position:fixed;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  filter:blur(2px);
  opacity:.28;
}
.sfl-blob-1{ top:-60px; left:-60px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(236,72,153,.30), transparent 70%); }
.sfl-blob-2{ top:20%; right:-90px; width:300px; height:300px;
  background:radial-gradient(circle, rgba(59,130,246,.24), transparent 70%); }
.sfl-blob-3{ bottom:-80px; left:30%; width:340px; height:340px;
  background:radial-gradient(circle, rgba(139,92,246,.22), transparent 70%); }
.sfl-blob-dot{
  position:fixed; pointer-events:none; z-index:0; border-radius:50%; opacity:.6;
}
.sfl-dot-1{ top:26px; left:18px; width:8px; height:8px; background:#22c55e; }
.sfl-dot-2{ top:64px; right:12%; width:6px; height:6px; background:var(--sfl-pink); }
.sfl-dot-3{ bottom:18%; right:6%; width:7px; height:7px; background:var(--sfl-blue); }

/* Keep real content above the decorative layer */
header, .topbar, .tabbar, nav, main, .content, .pane, #sp-gate,
.wrap, .container, .page, body > div:not([class^="sfl-"]) { position:relative; z-index:1; }

/* ---------- pill buttons everywhere ---------- */
button, .btn, .tab, input[type="button"]{
  border-radius: 999px !important;
}
table button, table .tab, .metric-row, thead button{
  border-radius: inherit !important; /* don't pill-ify tiny in-table controls */
}

/* ---------- soft card look for main panels ---------- */
.card, .panel, .pane-scroll, .table-wrap, table{
  border-radius: 14px;
}

/* ---------- table header tint (subtle) — row text stays high-contrast/dark ---------- */
table thead th, thead tr th, .t1metrics thead th, #t1metrics thead th{
  background: linear-gradient(120deg, rgba(236,72,153,.07), rgba(139,92,246,.07), rgba(59,130,246,.07)) !important;
  color: var(--sfl-ink) !important;
  border-bottom: 1px solid rgba(139,92,246,.18) !important;
}

/* ---------- gradient headline text utility ---------- */
.sfl-gradient-text{
  background: linear-gradient(120deg, var(--sfl-pink) 0%, var(--sfl-purple) 50%, var(--sfl-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- progress bars: always render below the metric/value/% text ----------
   Most tables already put the bar in its own full-width row beneath the metric
   row (.metric-bar-row) or in a block-level element that naturally falls below
   the text. The one place a bar sat inline next to its % value (Revenue
   Schedules' segment & scenario tables) is fixed here without touching its
   meaningful pixel-width magnitude encoding. */
.pct + .bar{
  display:block !important;
  height:6px !important;
  margin-top:4px !important;
}
