/* ============================================================================
   B2B Example Client dashboard — shared brand theme (SINGLE SOURCE OF TRUTH).

   The Cloudflare Worker (src/worker.js) injects this file into the <head> of
   every HTML page, AFTER each page's own <style>, so the rules here win.
   Change the design here once and it applies to every page.

   To restyle the whole dashboard, edit the tokens in the first :root block.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---- Brand tokens: the knobs. Edit these to recolor / re-font everything. ---- */
:root{
  --nx-blue:#2563eb;      /* primary brand blue */
  --nx-blue-dk:#1e40af;   /* darker blue for gradients / hovers */
  --nx-blue-soft:#e8effd; /* pale blue for chips / backgrounds */
  --nx-cyan:#06b6d4;      /* accent cyan */
  --nx-ink:#101828;       /* near-black text */
  --nx-slate:#64748b;     /* muted slate text */
  --nx-white:#ffffff;
  --nx-line:#e5e8f0;      /* hairlines / borders */
  --nx-bg:#f5f7fb;        /* app background */
  --nx-card:#ffffff;      /* card background */
  --nx-font-head:'Space Grotesk','Inter',sans-serif;
  --nx-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ---- Remap the shared variable names the pages already use, so their
   existing rules pick up Example Client colors automatically (no per-page edits). ---- */
:root{
  --ink:var(--nx-ink); --muted:var(--nx-slate); --line:var(--nx-line);
  --bg:var(--nx-bg); --card:var(--nx-card);
  --li:var(--nx-blue); --li-soft:var(--nx-blue-soft); --gold:var(--nx-cyan);
  --navy:var(--nx-blue-dk); --navy2:var(--nx-blue);
  --red:var(--nx-blue); --red-soft:var(--nx-blue-soft);  /* overview accent -> brand blue */
  --good:#0d9463; --warn:#c9820a;
}

/* ---- Typography ---- */
body{font-family:var(--nx-font-body) !important; color:var(--nx-ink)}
h1,h2,h3,h4{font-family:var(--nx-font-head) !important}

/* ---- Page header: white, to match the logo background ---- */
header{background:#fff !important; color:var(--nx-ink) !important; border-bottom:1px solid var(--nx-line)}
.brand h1{color:var(--nx-ink) !important}
.brand h1 .axle,.brand h1 .li,.brand h1 .accent{color:var(--nx-blue) !important}
.brand p{color:var(--nx-slate) !important}
.refreshed{color:var(--nx-slate) !important}
.refreshed b{color:var(--nx-ink) !important}

/* ---- Division cards (overview page): brand blue + deep navy ---- */
.divcard.ent{background:linear-gradient(135deg,var(--nx-blue-dk),var(--nx-blue)) !important}
.divcard.smb{background:linear-gradient(135deg,#0b1f3a,#155e75) !important}
/* Product / feature highlight accent uses the accent cyan */
.fcard{border-left-color:var(--nx-cyan) !important}

/* ---- Cross-page nav bar: horizontal tabs (markup injected into <body> by the
   Worker). The current page's tab carries the `.active` class. ---- */
#dashnav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--nx-line);display:flex;align-items:center;gap:16px;padding:6px 18px;font-family:var(--nx-font-head)}
#dashnav .brandlogo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
#dashnav .brandlogo img{width:46px;height:46px;object-fit:contain;display:block}
#dashnav .tabs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:1;min-width:0}
#dashnav .tab{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--nx-slate);font-size:13px;font-weight:600;line-height:1;padding:9px 13px;border-radius:8px;white-space:nowrap;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
#dashnav .tab:hover{background:var(--nx-bg);color:var(--nx-blue)}
#dashnav .tab.active{color:var(--nx-blue);background:var(--nx-blue-soft);border-color:#cfe0fb;font-weight:700}
#dashnav .tab.soon{color:var(--nx-slate);opacity:.55;cursor:default}
#dashnav .tab.soon:hover{background:transparent;color:var(--nx-slate)}
#dashnav .tab .tag{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--nx-slate);border:1px solid var(--nx-line);padding:1px 6px;border-radius:99px}

/* ---- Demo watermark: this is a portfolio example with synthetic data ---- */
#dashnav::after{content:"Demo · synthetic data";margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--nx-slate);border:1px dashed var(--nx-line);padding:3px 9px;border-radius:99px}
