/* ============================================================================
   Data Axle 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: the all-channel
   overview, the LinkedIn page, and any channel page added later.

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

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

/* ---- Brand tokens: the knobs. Edit these to recolor / re-font everything. ---- */
:root{
  --da-blue:#00a0dc;      /* primary brand blue */
  --da-blue-dk:#0089be;   /* darker blue for gradients / hovers */
  --da-blue-soft:#e5f6fc; /* pale blue for chips / backgrounds */
  --da-gold:#fdb912;      /* accent gold */
  --da-ink:#231f20;       /* near-black text */
  --da-slate:#6a7c8f;     /* muted slate text */
  --da-white:#ffffff;
  --da-line:#e6e9f0;      /* hairlines / borders */
  --da-bg:#f4f6fa;        /* app background */
  --da-card:#ffffff;      /* card background */
  --da-font-head:'Poppins','Roboto',sans-serif;
  --da-font-body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ---- Remap the shared variable names both dashboards already use, so their
   existing rules pick up Data Axle colors automatically (no per-page edits). ---- */
:root{
  --ink:var(--da-ink); --muted:var(--da-slate); --line:var(--da-line);
  --bg:var(--da-bg); --card:var(--da-card);
  --li:var(--da-blue); --li-soft:var(--da-blue-soft); --gold:var(--da-gold);
  --navy:var(--da-blue); --navy2:var(--da-blue-dk);      /* accent; header is overridden below */
  --red:var(--da-blue); --red-soft:var(--da-blue-soft);  /* all-channel accent -> brand blue */
  --good:#0d9463; --warn:#c9820a;
}

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

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

/* ---- Division cards (all-channel page): brand blue + charcoal ---- */
.divcard.ent{background:linear-gradient(135deg,var(--da-blue-dk),var(--da-blue)) !important}
.divcard.smb{background:linear-gradient(135deg,#3a4550,var(--da-ink)) !important}
/* Product / feature highlight accent uses the brand gold for warmth */
.fcard{border-left-color:var(--da-gold) !important}

/* ---- Cross-page nav bar (markup injected into <body> by the Worker) ---- */
#dashnav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--da-line);display:flex;align-items:center;gap:14px;padding:8px 18px;font-family:var(--da-font-head)}
#dashnav .brandlogo{display:inline-flex;align-items:center;text-decoration:none}
#dashnav .brandlogo img{width:70px;height:70px;object-fit:contain;display:block}
#dashnav .menu{position:relative}
#dashnav .menu-btn{display:flex;align-items:center;gap:10px;background:var(--da-bg);border:1px solid var(--da-line);color:var(--da-ink);font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;font-family:inherit}
#dashnav .menu-btn .car{color:var(--da-slate);font-size:10px}
#dashnav .menu-list{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:#fff;border:1px solid var(--da-line);border-radius:10px;padding:6px;box-shadow:0 12px 34px rgba(35,31,32,.14);display:none}
#dashnav .menu.open .menu-list{display:block}
#dashnav .menu-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:var(--da-ink);font-size:13px;font-weight:600;padding:8px 11px;border-radius:7px}
#dashnav .menu-list a:hover{background:var(--da-bg);color:var(--da-blue)}
#dashnav .menu-list a.active{color:var(--da-blue)}
#dashnav .menu-list a.active .dot{background:var(--da-blue)}
#dashnav .menu-list .lbl{display:flex;align-items:center;gap:9px}
#dashnav .menu-list .dot{width:7px;height:7px;border-radius:50%;background:#c3ccd6;flex:none}
#dashnav .menu-list a.soon{opacity:.5;cursor:default}
#dashnav .menu-list a.soon:hover{background:transparent;color:var(--da-ink)}
#dashnav .menu-list .tag{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--da-slate);border:1px solid var(--da-line);padding:1px 6px;border-radius:99px}
