/* =====================================================================
   Synovia Fusion — Woodies Integration Manager
   tokens.css — the CANONICAL FUSION brand tokens, applied last.

   Source of truth: Common/Branding/fusion_design_tokens.json (v1.0.0,
   shipped alongside at /static/brand/fusion_design_tokens.json) and
   Common/Branding/BRAND_GUIDE.md. This sheet loads AFTER
   style.css / fusion_theme.css, so the values here win every tie.
   The Flow-3-era variable names (--flow, --fusion, --abyss…) are kept
   as aliases so every template keeps working — they now point at the
   Fusion pack colours. Change the JSON, mirror it here, and every
   screen moves.
   ===================================================================== */
:root {
  /* ── Fusion palette (fusion_design_tokens.json) ── */
  --navy:       #0B1D3A;   /* primary dark — sidebar, header band    */
  --navy2:      #14305C;   /* splash gradient centre                 */
  --abyss:      #081426;   /* deepest splash edge                    */
  --teal:       #00C4B4;   /* PRIMARY accent — active nav, buttons   */
  --teal-deep:  #00A99B;   /* link default / hover on teal           */
  --accent:     #F97316;   /* warning / attention                    */
  --sky:        #0EA5E9;   /* secondary accent / charts              */
  --bg:         #F0F4FF;   /* app background                         */
  --surface:    #FFFFFF;
  --surface2:   #F5F8FF;   /* subtle fills / hovers                  */
  --text:       #1E2A3A;
  --muted:      #5E6E82;   /* pack #6B7A8D nudged darker - small grey
                              text was the readability complaint     */
  --border:     #D8E0EE;
  --good:       #198754;   /* status green                           */
  --warn:       #F97316;   /* status amber                           */
  --bad:        #DC3545;   /* status rose                            */
  --info:       #7C3AED;   /* status violet                          */

  /* ── aliases: Flow-3-era names used across templates ── */
  --flow:       var(--teal);
  --flow-deep:  var(--teal-deep);
  --fusion:     var(--accent);
  --fusion2:    #FB923C;
  --green:      var(--good);
  --amber:      var(--warn);
  --rose:       var(--bad);
  --violet:     var(--info);
  --navy3:      var(--navy2);
  --ink:        var(--text);
  --hairline:   var(--border);

  /* ── Bootstrap → brand ── */
  --bs-primary:           var(--teal);
  --bs-primary-rgb:       0, 196, 180;
  --bs-dark:              var(--navy);
  --bs-dark-rgb:          11, 29, 58;
  --bs-body-bg:           var(--bg);
  --bs-body-color:        var(--text);
  --bs-link-color:        var(--teal-deep);
  --bs-link-hover-color:  var(--navy);
  --bs-success:           var(--good);
  --bs-success-rgb:       25, 135, 84;
  --bs-danger:            var(--bad);
  --bs-danger-rgb:        220, 53, 69;
  --bs-warning:           var(--warn);
  --bs-warning-rgb:       249, 115, 22;

  /* ── shape + elevation (BRAND_GUIDE §4 layout tokens) ── */
  --radius:      12px;          /* tile / large panel      */
  --radius-sm:   10px;          /* card / KPI block        */
  --radius-card: 10px;
  --radius-tile: 12px;
  --shadow:       0 1px 3px rgba(11,29,58,.06);
  --shadow-lg:    0 6px 18px rgba(11,29,58,.08);
  --shadow-hover: var(--shadow-lg);
  --font: 'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* =====================================================================
   FUSION SKIN — BRAND_GUIDE.md named components applied over the
   Bootstrap shell. This sheet loads last, so these recipes win.
   ===================================================================== */

/* ── Portal Shell (§2.2): solid navy sidebar, teal active nav with
   the 3px left bar — the fusion_theme.css recipes, restated here so
   nothing older overrides them ── */
.sidebar { background: var(--navy); }
.sidebar-brand .tagline { color: var(--teal); }
.sidebar .nav-item { color: #AFC3E0; font-weight: 600;
                     border-left: 3px solid transparent;
                     transition: color .14s, background .14s; }
.sidebar .nav-item:hover { color: #fff; background: rgba(0,196,180,.08); }
.sidebar .nav-item.active { background: rgba(0,196,180,.12);
    color: var(--teal); border-left-color: var(--teal); }
.badge.bg-success { background-color: var(--good) !important; }
.badge.bg-danger  { background-color: var(--bad) !important; }

/* ── topbar: white, sticky (§2.2) ── */
.topbar { position: sticky; top: 0; z-index: 50;
          background: rgba(255,255,255,.92);
          -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
          border-bottom: 1px solid var(--border); }

/* ── headings + eyebrow ── */
h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -.01em;
                         text-wrap: balance; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em;
           text-transform: uppercase; color: var(--muted); }

/* ── Card / Tile (§2.3, §2.5): 10/12px radius, soft shadow,
   hover lifts 2px with teal border ── */
.card { border: 1px solid var(--border); box-shadow: var(--shadow); }
.tile { box-shadow: var(--shadow);
        transition: transform .14s ease, box-shadow .14s ease,
                    border-color .14s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg);
              border-color: var(--teal); }
.kpi-value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }

/* ── Buttons (§2.9): primary = solid teal with navy text;
   plain buttons go teal on hover ── */
.btn { font-weight: 700; }
.btn-primary, .btn-success {
    background: var(--teal) !important; border: none !important;
    color: var(--navy) !important;
    transition: transform .12s ease, box-shadow .14s ease,
                background .14s ease; }
.btn-primary:hover, .btn-success:hover { background: var(--teal-deep) !important;
    transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,196,180,.30); }
.btn-dark { background: var(--navy) !important; border: none !important;
    color: #fff !important; }
.btn-dark:hover { background: var(--navy2) !important; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); }
.btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-dark:hover { background: var(--surface); color: var(--teal-deep);
    border-color: var(--teal); }
.btn-danger { background: var(--bad) !important;
    border: none !important; color: #fff !important; }

/* ── Data Table + Header Band (§2.8) — the signature: solid navy
   header row, white uppercase text, the same band the Excel exports
   paint. Rows divide on --border and hover teal-tinted. ── */
.table > thead > tr > th, .table thead.table-dark th {
    background: var(--navy) !important; color: #fff !important;
    font-weight: 700; text-transform: uppercase;
    border-bottom: none !important; }
.table > tbody > tr:hover > * { background: rgba(0,196,180,.05);
    --bs-table-bg-state: rgba(0,196,180,.05); }

/* ── focus + motion ── */
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   TYPE RAMP - readability pass.
   The earlier "bigger across the board" block in style.css is dead:
   fusion_theme.css loads after it and wins every tie, so the portal
   was really running a 13px body and 12px tables. This sheet loads
   LAST, so the ramp lives here. (.wim-* and .mono are set in
   base.html's inline block, which outranks even this sheet.)
   ===================================================================== */
body            { font-size: 15px; font-weight: 500; }
table           { font-size: 14px; }
tbody td        { font-weight: 500; }
.table > thead th { font-size: 12px; letter-spacing: .4px; } /* was 11px/.8px -
                    the tracking cut buys back the width the size costs */
.table.table-sm > :not(caption) > * > * { padding: 7px 10px; } /* Bootstrap's
                    4px cell padding read cramped at the new size */
.nav-item       { font-size: 14px; font-weight: 600; }
.topbar-title   { font-size: 19px; font-weight: 800; }
.card-title     { font-size: 12px; }
.kpi-value      { font-size: 32px; }
.kpi-label      { font-size: 12.5px; font-weight: 600; }
.badge          { font-size: 12px; font-weight: 700; }
.tile-title     { font-size: 17px; }
.alert          { font-size: 14px; }

/* =====================================================================
   STATUS COMPONENTS - one visual language for every state on screen.
   .pill  : a bold rounded chip with a built-in traffic-light dot
   .tl    : a standalone traffic-light dot (for dense tables)
   .pipe  : a pipeline / stepper for ordered sequences
   Tones  : good (green) / warn (amber) / bad (red) / run (blue, pulsing)
            / info (violet) / off (grey)
   ===================================================================== */
.pill { display:inline-flex; align-items:center; gap:7px;
        padding:3px 12px 3px 9px; border-radius:999px;
        font-size:12.5px; font-weight:700; letter-spacing:.02em;
        white-space:nowrap; line-height:1.5; }
.pill::before { content:""; width:8px; height:8px; border-radius:50%;
                background:currentColor; flex:0 0 auto; }
.pill-good { background:rgba(25,135,84,.14);  color:#146C43; }
.pill-warn { background:rgba(249,115,22,.16);   color:#C2570C; }
.pill-bad  { background:rgba(220,53,69,.13);   color:#B02A37; }
.pill-run  { background:rgba(14,165,233,.14);  color:#0B7DB8; }
.pill-run::before { animation:tl-pulse 1.2s ease-in-out infinite; }
.pill-info { background:rgba(124,58,237,.13);  color:#6D28D9; }
.pill-off  { background:rgba(107,122,141,.13);  color:#4A5C70; }

.tl { display:inline-block; width:11px; height:11px; border-radius:50%;
      vertical-align:-1px; box-shadow:inset 0 0 0 1px rgba(7,21,43,.12); }
.tl-good { background:var(--good); } .tl-warn { background:var(--warn); }
.tl-bad  { background:var(--bad);  } .tl-off  { background:#B9C6D4; }
.tl-run  { background:var(--sky); animation:tl-pulse 1.2s ease-in-out infinite; }
@keyframes tl-pulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) {
  .tl-run, .pill-run::before { animation:none; }
}

.pipe { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
.pipe .arrow { align-self:center; color:var(--muted); font-size:15px;
               flex:0 0 auto; }
.pipe .step { display:flex; align-items:center; gap:10px;
              padding:9px 14px; border-radius:11px; min-width:0;
              background:var(--surface2); border:1.5px solid var(--border);
              font-size:13.5px; font-weight:700; }
.pipe .step .seq { display:inline-flex; align-items:center; justify-content:center;
                   width:24px; height:24px; border-radius:50%; flex:0 0 auto;
                   background:var(--navy); color:#fff; font-size:11.5px;
                   font-weight:800; }
.pipe .step .sub { display:block; font-size:11.5px; font-weight:600;
                   color:var(--muted); letter-spacing:.02em; }
.pipe .step.good { border-color:rgba(25,135,84,.45);
                   background:rgba(25,135,84,.07); }
.pipe .step.good .seq { background:var(--good); }
.pipe .step.warn { border-color:rgba(249,115,22,.5);
                   background:rgba(249,115,22,.08); }
.pipe .step.warn .seq { background:var(--warn); }
.pipe .step.bad  { border-color:rgba(220,53,69,.5);
                   background:rgba(220,53,69,.07); }
.pipe .step.bad .seq { background:var(--bad); }
.pipe .step.now  { border-color:var(--flow-deep);
                   box-shadow:0 0 0 3px rgba(0,196,180,.18); }
.pipe .step.now .seq { background:var(--flow-deep); }

/* ── flyout sub-navigation: hover a module, see its dashboards ─────── */
.sidebar, .sidebar-nav { overflow: visible; }
.nav-flyout { position: relative; }
.nav-flyout > .nav-item { display: flex; align-items: center; }
.nav-flyout > .nav-item .caret { margin-left: auto; font-size: 10px;
                                 opacity: .55; }
.nav-sub { display: none; position: absolute; left: calc(100% - 8px);
           top: -6px; min-width: 252px;
           background: var(--navy); border: 1px solid rgba(255,255,255,.14);
           border-radius: 12px; box-shadow: 0 16px 44px rgba(7,21,43,.5);
           padding: 8px; z-index: 400; }
.nav-flyout:hover > .nav-sub, .nav-sub:hover { display: block; }
.nav-sub .sub-head { font-size: 10px; letter-spacing: 1.6px;
                     text-transform: uppercase;
                     color: rgba(255,255,255,.42); padding: 4px 12px 7px; }
.nav-sub a { display: flex; align-items: center; gap: 9px;
             padding: 8px 12px; color: #AFC3E0; border-radius: 8px;
             font-size: 13px; font-weight: 600; text-decoration: none; }
.nav-sub a i { font-size: 13px; width: 17px; text-align: center; }
.nav-sub a:hover { background: rgba(0,196,180,.12); color: #fff; }
.nav-sub a.on { background: rgba(0,196,180,.16); color: var(--teal); }

/* ── topbar user menu: floating dropdown + issue modal ─────────────── */
.user-menu-btn { background: none; border: 1.5px solid var(--border);
                 border-radius: 99px; padding: 5px 14px; font-size: 13px;
                 font-weight: 600; color: var(--ink);
                 transition: border-color .12s ease, box-shadow .12s ease; }
.user-menu-btn:hover { border-color: var(--teal);
                       box-shadow: 0 0 0 3px rgba(0,196,180,.14); }
.user-menu-btn i { color: var(--teal); margin-right: 2px; }
.user-menu.dropdown-menu { min-width: 268px; border: none; padding: 8px;
                 background: var(--navy); border-radius: 12px;
                 box-shadow: 0 16px 44px rgba(7,21,43,.5); }
.user-menu .dropdown-header { font-size: 11px; letter-spacing: .06em;
                 text-transform: uppercase; color: rgba(255,255,255,.45);
                 padding: 4px 12px 6px; }
.user-menu .dropdown-header b { color: #fff; }
.user-menu .dropdown-divider { border-color: rgba(255,255,255,.14);
                               margin: 5px 8px; }
.user-menu .dropdown-item { display: flex; align-items: center; gap: 9px;
                 padding: 8px 12px; color: #AFC3E0; border-radius: 8px;
                 font-size: 13px; font-weight: 600; }
.user-menu .dropdown-item i { font-size: 13px; width: 17px;
                              text-align: center; }
.user-menu .dropdown-item:hover { background: rgba(0,196,180,.12);
                                  color: #fff; }
#issueModal .modal-content { border: none; border-radius: 12px;
                 box-shadow: 0 24px 60px rgba(7,21,43,.35); }
#issueModal .modal-header { background: var(--navy); color: #fff;
                 border-radius: 12px 12px 0 0; padding: 12px 18px; }
#issueModal .modal-header .btn-close { filter: invert(1) grayscale(1); }
#issueModal .modal-title { font-weight: 800; letter-spacing: .02em; }
#issueModal .modal-title i { color: var(--teal); }
.issue-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em;
             text-transform: uppercase; color: var(--muted);
             margin-bottom: 3px; }
.issue-ctx { font-size: 12px; color: var(--muted); margin-top: 8px;
             padding: 8px 10px; background: var(--bg);
             border-radius: 8px; }
.issue-ctx i { color: var(--teal); }