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

/* ── DESIGN TOKENS ──
 *
 * This file is the dashboard's own component CSS. It is NOT a second design
 * system any more: every colour below is one of the tokens in
 * /assets/theme.css, restated as HSL channels because this file's rules are all
 * written hsl(var(--name) / alpha) and that syntax needs channels, not a hex.
 * Both pages that load this file load theme.css first, so the two agree by
 * construction — change a colour in theme.css and change its twin here.
 *
 * It used to be a dark palette (--background: 24 25% 11%), which is why the
 * light values below look like a bigger diff than they are: the names, the
 * rules and the markup are untouched, only what the names resolve to changed.
 *
 *   theme.css        →  here
 *   --bg    #FFFFFF  →  0 0% 100%
 *   --wash  #FAFAF8  →  60 17% 98%
 *   --panel #FFFFFF  →  0 0% 100%
 *   --ink   #1E1B18  →  30 11% 11%
 *   --muted #6D6862  →  33 5% 41%
 *   --line  #ECEAE6  →  40 14% 91%
 *   --line2 #E2DFDA  →  38 12% 87%
 *   --gold  (#FFC425)  →  43 100% 57%   (already matched — the one thing that did)
 *   --gold-ink #7A5E00 → 46 100% 24%
 *   --gold-soft #FFF6DC → 45 100% 93%
 *   --green #1F7A4D  →  150 60% 30%
 *   --red   #A8443C  →  4 47% 45%
 */
:root {
  /* Color system (HSL channels — use as hsl(var(--name))) */
  --background:             60 17% 98%;
  --foreground:             30 11% 11%;
  --card:                   0 0% 100%;
  --card-foreground:        30 11% 11%;
  --popover:                0 0% 100%;
  --popover-foreground:     30 11% 11%;
  --primary:                43 100% 57%;
  --primary-foreground:     46 100% 24%;
  --secondary:              40 14% 91%;
  --secondary-foreground:   30 11% 11%;
  --muted:                  60 17% 98%;
  --muted-foreground:       33 5% 41%;
  --accent:                 43 100% 57%;
  --accent-foreground:      46 100% 24%;
  --destructive:            4 47% 45%;
  --destructive-foreground: 0 0% 100%;
  --border:                 40 14% 91%;
  --input:                  38 12% 87%;
  --ring:                   46 100% 24%;
  --gold:                   43 100% 57%;
  --gold-hover:             43 100% 50%;
  --gold-ink:               46 100% 24%;
  --gold-soft:              45 100% 93%;
  --green:                  150 60% 30%;
  --amber:                  40 100% 27%;
  --blue:                   217 56% 42%;
  --purple:                 262 36% 48%;
  --sidebar-background:     0 0% 100%;
  --sidebar-foreground:     33 5% 41%;
  --sidebar-primary:        43 100% 57%;
  --sidebar-primary-fg:     46 100% 24%;
  --sidebar-accent:         45 100% 93%;
  --sidebar-accent-fg:      30 11% 11%;
  --sidebar-border:         40 14% 91%;
  --radius:                 0.875rem;

  /* ── SPACING SYSTEM ── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */

  /* ── LAYOUT ── */
  --sidebar-w:          220px;
  --topbar-h:           58px;
  --page-x:             2.25rem;   /* 36px — main horizontal padding */
  --page-top:           2rem;      /* 32px — page title top padding */
  --view-pad-bottom:    3rem;      /* 48px */
  --card-pad:           1.5rem;    /* consistent card inner padding */
  --card-gap:           0.875rem;  /* gap between cards */

  /* ── TYPOGRAPHY ── */
  --text-xs:       0.6875rem;  /* 11px */
  --text-sm:       0.8125rem;  /* 13px */
  --text-body:     0.875rem;   /* 14px  — body copy */
  --text-subhead:  1rem;       /* 16px  — subheadings */
  --text-title:    1.5rem;     /* 24px  — section titles */
  --text-page:     1.75rem;    /* 28px  — page titles */
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, -apple-system, system-ui, sans-serif;
  font-size: var(--text-body);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Outfit, -apple-system, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img, svg, video { display: block; }

/* ── AUTH ── */
#auth-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.auth-box {
  width: 360px;
  padding: var(--sp-10);
  background: hsl(var(--sidebar-background));
  border: 1px solid hsl(var(--gold) / 0.25);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(30,27,24,.04), 0 8px 24px rgba(30,27,24,.06);
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.logo-mark {
  width: 38px; height: 38px;
  background: hsl(var(--gold) / 0.15);
  border: 1px solid hsl(var(--gold));
  border-radius: calc(var(--radius) - 2px);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: hsl(var(--gold-ink));
}
.logo-text { font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.logo-text span { display: block; font-size: 10px; font-weight: 400; color: hsl(var(--muted-foreground)); letter-spacing: .1em; margin-top: 1px; }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-form input {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  padding: 11px 14px;
  color: hsl(var(--foreground));
  font-size: var(--text-body);
  outline: none;
  transition: border-color .15s;
}
.auth-form input:focus { border-color: hsl(var(--gold) / 0.5); }
.auth-form button {
  background: hsl(var(--gold) / 0.15);
  border: 1px solid hsl(var(--gold));
  border-radius: calc(var(--radius) - 2px);
  padding: 11px;
  color: hsl(var(--gold-ink));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .15s;
}
.auth-form button:hover { background: hsl(var(--gold) / 0.28); }
.auth-error { font-size: 12px; color: hsl(var(--destructive)); margin-top: var(--sp-2); min-height: 16px; }

/* ── LAYOUT ── */
#app { display: flex; min-height: 100vh; }

/* ── SIDEBAR ── */
#sidebar {
  width: var(--sidebar-w);
  background: hsl(var(--sidebar-background));
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  border-right: 1px solid hsl(var(--sidebar-border));
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-bottom: 1px solid hsl(var(--gold) / 0.15);
  margin-bottom: var(--sp-1);
}
.sidebar-logo-img {
  width: 140px;
  height: auto;
  display: block;
}
.sidebar-client-selector {
  margin: var(--sp-4) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--gold));
  border-radius: calc(var(--radius) - 2px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background .15s;
}
.sidebar-client-selector:hover { background: hsl(var(--gold) / 0.1); }
.sidebar-client-name { font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); }
.sidebar-client-caret { color: hsl(var(--gold-ink)); display: flex; align-items: center; }

.sidebar-nav { flex: 1; padding: var(--sp-2) var(--sp-2); display: flex; flex-direction: column; gap: 1px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 11px;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-item:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--foreground)); }
.nav-item.active {
  background: hsl(var(--gold) / 0.12);
  color: hsl(var(--gold-ink));
  box-shadow: inset 2px 0 0 hsl(var(--gold));
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px var(--sp-4);
  border-top: 1px solid hsl(var(--sidebar-border));
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.6);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted)); transition: background .3s; }
.status-dot.online { background: hsl(var(--green)); box-shadow: 0 0 5px hsl(var(--green)); }
.sidebar-logout {
  display: block;
  width: calc(100% - 2 * var(--sp-4));
  margin: 8px var(--sp-4) 16px;
  padding: 8px;
  background: transparent;
  border: 1px solid hsl(var(--sidebar-border));
  border-radius: 6px;
  color: hsl(var(--muted-foreground) / 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.sidebar-logout:hover { color: hsl(var(--foreground)); border-color: hsl(var(--foreground) / 0.3); }
.sidebar-user {
  padding: 12px var(--sp-4);
  border-top: 1px solid hsl(var(--sidebar-border));
}
.sidebar-user-email {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-role {
  font-size: 10px;
  color: hsl(var(--muted-foreground) / 0.7);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
}

/* ── MAIN ── */
#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── TOPBAR ── */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-x);
  height: var(--topbar-h);
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-left { display: flex; align-items: baseline; gap: var(--sp-3); }
.topbar-left h2 { font-size: var(--text-subhead); font-weight: 600; color: hsl(var(--muted-foreground)); }
.topbar-right { display: flex; align-items: center; gap: var(--sp-3); position: relative; }

.date-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 14px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: border-color .15s;
}
.date-pill:hover { border-color: hsl(var(--gold) / 0.35); }
.date-pill svg { width: 12px; height: 12px; }

.date-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: hsl(var(--sidebar-background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 14px;
  z-index: 200;
  min-width: 220px;
  box-shadow: 0 1px 2px rgba(30,27,24,.04), 0 8px 24px rgba(30,27,24,.06);
}
.date-dropdown.hidden { display: none; }
.date-presets { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); }
.date-preset {
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.date-preset:hover { background: hsl(var(--gold) / 0.08); color: hsl(var(--foreground)); }
.date-preset.active { background: hsl(var(--gold) / 0.15); color: hsl(var(--gold-ink)); }
.date-custom { border-top: 1px solid hsl(var(--border)); padding-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.date-custom label { font-size: 11px; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .05em; }
.date-custom input[type="date"] {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 4px);
  color: hsl(var(--foreground));
  font-size: 12px;
  padding: 6px 10px;
  width: 100%;
  box-sizing: border-box;
}

.avatar {
  width: 30px; height: 30px;
  background: hsl(var(--gold) / 0.15);
  border: 1px solid hsl(var(--gold));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: hsl(var(--gold-ink));
}

/* ── VIEWS ── */
.view { display: none; flex-direction: column; }
.view.active { display: flex; }

.page-title {
  font-size: var(--text-page);
  font-weight: 600;
  padding: var(--page-top) var(--page-x) 0;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

/* ── TABS ── */
.view-tabs { display: flex; gap: 2px; padding: var(--sp-4) var(--page-x) 0; }
.view-tabs-inner {
  display: flex;
  background: hsl(var(--muted));
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}
.tab-btn {
  padding: 6px var(--sp-4);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: none;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab-btn:hover { color: hsl(var(--foreground)); }
.tab-btn.active { background: hsl(var(--gold) / 0.2); color: hsl(var(--gold-ink)); font-weight: 600; }

/* ── VIEW BODY ── */
.view-body { padding: var(--sp-6) var(--page-x) var(--view-pad-bottom); }

/* ── FORM / FLAT FIELDS ── */
.form-section { margin-bottom: var(--sp-8); }
.form-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--sp-5);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.form-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: .07em;
}
.form-input {
  background: hsl(var(--muted));
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  padding: 10px var(--sp-3);
  color: hsl(var(--foreground));
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: hsl(var(--gold) / 0.4); }

/* ── BUTTONS ── */
.btn-outline {
  background: none;
  border: 1px solid hsl(var(--gold) / 0.35);
  border-radius: calc(var(--radius) - 2px);
  padding: var(--sp-2) var(--sp-4);
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-outline:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold-ink)); background: hsl(var(--gold) / 0.1); }

.btn-gold {
  background: hsl(var(--gold) / 0.15);
  border: 1px solid hsl(var(--gold));
  border-radius: calc(var(--radius) - 2px);
  padding: var(--sp-2) var(--sp-4);
  color: hsl(var(--gold-ink));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-gold:hover { background: hsl(var(--gold) / 0.28); }

/* ── STATUS / INTEGRATION ── */
.integration-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid hsl(var(--border));
}
.integration-name { font-size: 13px; font-weight: 500; }
.integration-meta { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.status-ok      { background: hsl(var(--green) / .12);  color: hsl(var(--green)); }
.status-error   { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); }
.status-pending { background: hsl(var(--gold) / 0.1); color: hsl(var(--gold-ink)); }
.status-none    { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* ── CLIENTS GRID ── */
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--card-gap); margin-top: var(--sp-3); }
.client-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--card-pad);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.client-card:hover { border-color: hsl(var(--gold) / 0.3); box-shadow: 0 1px 2px rgba(30,27,24,.04), 0 8px 24px rgba(30,27,24,.06); }
.client-card-name { font-size: var(--text-body); font-weight: 600; margin-bottom: 3px; }
.client-card-slug { font-size: 12px; color: hsl(var(--muted-foreground)); }
.client-card-industry {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 9999px;
  background: hsl(var(--gold) / 0.1);
  color: hsl(var(--gold-ink));
  letter-spacing: .04em;
}

/* ── PLACEHOLDER ── */
.placeholder-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: hsl(var(--muted-foreground) / 0.6);
}
.placeholder-icon { font-size: 36px; margin-bottom: var(--sp-4); opacity: .4; }
.placeholder-view h3 { font-size: var(--text-subhead); font-weight: 600; color: hsl(var(--muted-foreground)); margin-bottom: var(--sp-2); }
.placeholder-view p { font-size: 13px; max-width: 300px; line-height: 1.6; }

/* ── CLIENT DROPDOWN ── */
.client-avatar { width:22px;height:22px;background:hsl(var(--gold) / 0.15);border:1px solid hsl(var(--gold));border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:hsl(var(--gold-ink)); }
.client-dropdown { position:absolute;top:64px;left:12px;right:12px;background:hsl(var(--muted));border:1px solid hsl(var(--gold) / 0.3);border-radius:var(--radius);z-index:200;overflow:hidden;box-shadow:0 8px 24px rgba(30,27,24,.10); }
.client-dropdown-item { display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .12s; }
.client-dropdown-item:hover { background:hsl(var(--sidebar-accent)); }
.client-dd-avatar { width:26px;height:26px;background:hsl(var(--gold) / 0.15);border:1px solid hsl(var(--gold));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:hsl(var(--gold-ink));flex-shrink:0; }
.client-dd-name { font-size:13px;font-weight:600;color:hsl(var(--foreground)); }
.client-dd-slug { font-size:11px;color:hsl(var(--muted-foreground)); }

/* ── PLATFORM TABS ── */
.campaign-toolbar { display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap; }
.platform-tabs { display:flex;gap:2px;background:hsl(var(--muted));border-radius:9999px;padding:3px;width:fit-content; }
.ptab { padding:6px 18px;border-radius:9999px;font-size:13px;font-weight:500;color:hsl(var(--muted-foreground));background:none;border:none;cursor:pointer;transition:background .15s,color .15s; }
.ptab.active { background:hsl(var(--gold) / 0.2);color:hsl(var(--gold-ink));font-weight:600; }
.status-pills { display:flex;gap:4px; }
.status-pill { padding:5px 14px;border-radius:9999px;font-size:12px;font-weight:500;border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));background:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s;text-transform:capitalize; }
.status-pill:hover { color:hsl(var(--foreground));border-color:hsl(var(--muted-foreground)); }
.status-pill.active { border-color:hsl(var(--gold));color:hsl(var(--gold-ink));background:hsl(var(--gold) / 0.1); }

/* ── SORTABLE HEADERS ── */
.sortable-th { cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s;text-align:right; }
.sortable-th:hover { color:hsl(var(--foreground)); }
.sort-active { color:hsl(var(--gold-ink)); }
.td-num { text-align:right;font-variant-numeric:tabular-nums; }

/* ── KPI ROW ── */
.kpi-row { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap); }
.kpi-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--card-pad);
  transition: border-color .15s;
}
.kpi-card:hover { border-color: hsl(var(--gold) / 0.25); }
.kpi-platform { font-size:var(--text-xs);font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-2); }
.kpi-big { font-size:28px;font-weight:700;color:hsl(var(--foreground));letter-spacing:-.02em; }
.kpi-sub { font-size:13px;color:hsl(var(--muted-foreground));margin-top:var(--sp-1); }
.kpi-meta { display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-1); }
.kpi-meta span { font-size:12px;color:hsl(var(--muted-foreground)); }
.kpi-loading { font-size:13px;color:hsl(var(--muted-foreground) / 0.6);margin-top:var(--sp-2); }
.kpi-error { font-size:12px;color:hsl(var(--destructive));margin-top:var(--sp-2); }

/* ── TWO COL ── */
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5); }
.section-label { font-size:var(--text-xs);font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-2); }

/* ── SIGNAL GRID (full page) ── */
.signal-grid { display:flex;flex-wrap:wrap;gap:var(--card-gap);align-items:flex-start; }
.signal-card {
  width: 300px;
  flex: 0 0 300px;
  height: 200px;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 14px var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color .15s;
  box-sizing: border-box;
}
.signal-card:hover { border-color: hsl(var(--gold) / 0.3); }
.signal-card-top { display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2); }
.signal-card-body { flex:1;display:flex;flex-direction:column;gap:var(--sp-1); }
.signal-title { font-size:13px;font-weight:500;color:hsl(var(--foreground));line-height:1.4; }
.signal-summary { font-size:12px;color:hsl(var(--muted-foreground));line-height:1.5;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical; }
.signal-card-footer { display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--sp-1); }
.signal-read-more { font-size:11px;color:hsl(var(--gold-ink));background:none;border:none;cursor:pointer;padding:0;opacity:.85; }
.signal-read-more:hover { opacity:1; }

/* ── SIGNAL LIST (overview panel) ── */
.signal-list, .alert-list { display:flex;flex-direction:column;gap:var(--sp-2); }
.signal-row { display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid hsl(var(--border)); }
.signal-row:last-child { border-bottom:none; }
.signal-source-badge { font-size:10px;font-weight:600;padding:3px 8px;border-radius:9999px;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;background:hsl(var(--muted-foreground) / .12);color:hsl(var(--muted-foreground)); }
.src-openfda          { background:hsl(var(--destructive) / .12);  color:hsl(var(--destructive)); }
.src-clinicaltrials   { background:hsl(var(--green) / .12); color:hsl(var(--green)); }
.src-pubmed           { background:hsl(var(--blue) / .12); color:hsl(var(--blue)); }
.src-nihreporter      { background:hsl(var(--purple) / .12);color:hsl(var(--purple)); }
.src-secedgar         { background:hsl(var(--amber) / .12); color:hsl(var(--amber)); }
.src-orangebook       { background:hsl(var(--amber) / .12); color:hsl(var(--amber)); }
.src-euclinicaltrials { background:hsl(var(--blue) / .12); color:hsl(var(--blue)); }
.src-fdaapprovals     { background:hsl(var(--destructive) / .12);  color:hsl(var(--destructive)); }
.src-googlenews       { background:hsl(var(--green) / .12);color:hsl(var(--green)); }
.src-competitive      { background:hsl(var(--gold) / 0.15); color:hsl(var(--gold-ink)); }
.relevance-badge { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:11px;font-weight:700;flex-shrink:0; }
.rel-high { background:hsl(var(--green) / .12); color:hsl(var(--green)); }
.rel-mid  { background:hsl(var(--amber) / .12); color:hsl(var(--amber)); }
.rel-low  { background:hsl(var(--muted-foreground) / .12); color:hsl(var(--muted-foreground)); }
.signal-body { flex:1;min-width:0; }
.signal-summary-row { font-size:12px;color:hsl(var(--muted-foreground));line-height:1.5; }
.signal-link { font-size:11px;color:hsl(var(--gold-ink));text-decoration:none;margin-top:var(--sp-1);display:inline-block; }
.signal-ts { font-size:11px;color:hsl(var(--muted-foreground) / 0.6);white-space:nowrap;flex-shrink:0; }

/* ── ALERTS ── */
.alert-row { display:flex;align-items:center;gap:var(--sp-2);padding:10px 0;border-bottom:1px solid hsl(var(--border));font-size:13px;color:hsl(var(--foreground)); }
.sev-badge { font-size:10px;font-weight:600;padding:2px 7px;border-radius:9999px;text-transform:uppercase;flex-shrink:0; }
.sev-critical .sev-badge { background:hsl(var(--destructive) / 0.2);color:hsl(var(--destructive)); }
.sev-high .sev-badge     { background:hsl(var(--amber) / .12);color:hsl(var(--amber)); }
.sev-medium .sev-badge   { background:hsl(var(--gold) / 0.15);color:hsl(var(--gold-ink)); }

/* ── TABLES ── */
/* theme.css styles bare `th` as a sticky header, which is right inside the
   portal's own scroll containers and wrong here — this page's tables scroll with
   the document. Opt out explicitly rather than let it inherit. */
.gb-table th { position:static;background:none;z-index:auto; }
.gb-table { width:100%;border-collapse:collapse;font-size:13px; }
.gb-table th { text-align:left;font-size:11px;font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.07em;padding:8px var(--sp-3);border-bottom:1px solid hsl(var(--border)); }
.gb-table td { padding:11px var(--sp-3);border-bottom:1px solid hsl(var(--border) / 0.5);color:hsl(var(--foreground)); }
.gb-table tr:hover td { background:hsl(var(--muted) / 0.5); }
.td-primary { font-weight:500; }

/* ── FILTER ROW ── */
.filter-row { display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-1); }
.gb-select { background:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);padding:7px var(--sp-3);color:hsl(var(--foreground));font-size:13px;outline:none; }
.gb-select option { background:hsl(var(--sidebar-background)); }

/* ── BRIEFINGS ── */
.briefing-card { background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:var(--card-pad);margin-bottom:var(--sp-2);cursor:pointer;transition:border-color .15s; }
.briefing-card:hover { border-color:hsl(var(--gold) / 0.3); }
.briefing-dates { font-size:12px;color:hsl(var(--gold-ink));font-weight:600;margin-bottom:var(--sp-1); }
.briefing-preview { font-size:13px;color:hsl(var(--muted-foreground));line-height:1.5;margin-bottom:var(--sp-2); }
.briefing-meta { font-size:11px;color:hsl(var(--muted-foreground) / 0.6); }
.briefing-home-meta { font-size:11px;color:hsl(var(--muted-foreground));margin-bottom:var(--sp-2);letter-spacing:.02em; }
.signal-source-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:8px; }
.signal-source-item { display:flex;align-items:center;gap:8px;font-size:13px;color:hsl(var(--foreground));cursor:pointer; }
.signal-source-item input { accent-color:hsl(var(--gold));width:15px;height:15px;cursor:pointer; }
.briefing-full { background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:28px 32px;line-height:1.7;color:hsl(var(--foreground)); }
.briefing-full h1 { font-size:var(--text-title);font-weight:700;margin:0 0 var(--sp-4);color:hsl(var(--foreground)); }
.briefing-full h2 { font-size:var(--text-subhead);font-weight:600;color:hsl(var(--gold-ink));margin:var(--sp-5) 0 var(--sp-2);border-bottom:1px solid hsl(var(--border));padding-bottom:var(--sp-1); }
.briefing-full ul { padding-left:20px;margin:var(--sp-2) 0; }
.briefing-full li { margin-bottom:5px;font-size:13px; }
.briefing-full p { font-size:13px;margin-bottom:var(--sp-2); }
.briefing-full strong { color:hsl(var(--foreground)); }

/* ── ADMIN ── */
.admin-client-card { background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:var(--card-pad);margin-bottom:var(--sp-4); }
.admin-client-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-1); }
.admin-client-name { font-size:var(--text-subhead);font-weight:600; }
.admin-client-slug { font-size:12px;color:hsl(var(--muted-foreground)); }

/* ── PROVIDER BADGE ── */
.provider-badge { font-size:11px;font-weight:600;padding:2px 8px;border-radius:9999px;background:hsl(var(--blue) / .12);color:hsl(var(--blue));text-transform:uppercase; }

/* ── OUTREACH ── */
.reply-rate { font-size:12px;font-weight:600;padding:2px 8px;border-radius:9999px; }
.rate-hot  { background:hsl(var(--green) / .12);color:hsl(var(--green)); }
.rate-warm { background:hsl(var(--gold) / 0.15);color:hsl(var(--gold-ink)); }
.rate-cold { background:hsl(var(--muted));color:hsl(var(--muted-foreground)); }

.disconnected-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:var(--sp-2); }
.disconnected-icon { font-size:32px;opacity:.4; }
.disconnected-title { font-size:var(--text-subhead);font-weight:600;color:hsl(var(--muted-foreground)); }
.disconnected-sub { font-size:12px;color:hsl(var(--muted-foreground) / 0.6); }
.disconnected-sub code { background:hsl(var(--muted));padding:2px 6px;border-radius:4px;color:hsl(var(--gold-ink));font-size:11px; }

/* ── INLINE EXPAND/COLLAPSE (campaigns) ── */
.gb-btn-secondary { background:transparent;border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));padding:5px 12px;border-radius:4px;font-size:12px;cursor:pointer; }
.gb-btn-secondary:hover { border-color:hsl(var(--gold));color:hsl(var(--gold-ink)); }
.gb-btn-secondary:disabled { opacity:.5;cursor:default; }

.campaign-list-table .campaign-row,
.adgroup-table .adgroup-row { cursor:pointer; }

.th-chevron, .td-chevron { width:24px; padding-right:0 !important; }
.chevron {
  display:inline-block; width:10px; text-align:center;
  color:hsl(var(--muted-foreground));
  transition: transform .15s, color .15s;
}
tr.expanded > .td-chevron .chevron {
  transform: rotate(90deg);
  color: hsl(var(--gold-ink));
}

.child-panel-row > td { padding:0; background:transparent !important; border-bottom:none !important; }
.child-panel-row:hover > td { background:transparent !important; }

.child-panel {
  background: hsl(var(--muted) / 0.3);
  border-left: 2px solid hsl(var(--gold));
  padding: var(--sp-3) var(--sp-4);
  margin: 2px 0;
}
.child-panel.level-1 { padding-left: calc(var(--sp-4) + 24px); }
.child-panel.level-2 { background: hsl(var(--muted) / 0.45); padding-left: calc(var(--sp-4) + 48px); }

.adgroup-table { margin-top: var(--sp-2); }

.child-loading, .child-error {
  font-size: 12px; color: hsl(var(--muted-foreground));
  padding: var(--sp-3) 0; display: flex; align-items: center; gap: 8px;
}
.child-error { color: hsl(var(--destructive)); }

.gb-spinner {
  width:12px; height:12px;
  border: 2px solid hsl(var(--muted-foreground) / 0.3);
  border-top-color: hsl(var(--gold));
  border-radius: 50%;
  animation: gb-spin 0.8s linear infinite;
}
@keyframes gb-spin { to { transform: rotate(360deg); } }

.expand-all-btn { margin-left:auto; }

.sub-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: hsl(var(--muted-foreground)); font-weight: 600;
  margin: 0 0 var(--sp-2);
}
.ads-section { margin-top: var(--sp-2); }

/* ── KEYWORDS TABLE ── */
.kw-section { margin-bottom: var(--sp-3); }
.kw-table { font-size: 12px; }
.kw-table th { padding: 6px var(--sp-3); }
.kw-table td { padding: 6px var(--sp-3); }
.kw-table .kw-text { max-width: 340px; word-break: break-word; }

/* Match type — three tints, PPC-engineer UX cue:
   EXACT = precise intent (blue), PHRASE = neutral (amber),
   BROAD = spend risk (red). */
.kw-match { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; letter-spacing: .04em; white-space: nowrap; }
.kw-match-exact  { background: hsl(var(--blue) / .12); color: hsl(var(--blue)); }
.kw-match-phrase { background: hsl(var(--amber) / .12); color: hsl(var(--amber)); }
.kw-match-broad  { background: hsl(var(--destructive) / .12);  color: hsl(var(--destructive)); }
.kw-match-other  { background: hsl(var(--muted));    color: hsl(var(--muted-foreground)); }

/* Quality score badge — 8–10 green, 5–7 amber, <5 red, null muted */
.qs-badge { display: inline-block; min-width: 22px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.qs-high { background: hsl(var(--green) / .12);         color: hsl(var(--green)); }
.qs-mid  { background: hsl(var(--amber) / .12);         color: hsl(var(--amber)); }
.qs-low  { background: hsl(var(--destructive) / 0.18); color: hsl(var(--destructive)); }
.qs-none { background: hsl(var(--muted));             color: hsl(var(--muted-foreground) / 0.6); }

/* Ads toggle (collapsed-by-default) */
.ads-toggle {
  background: transparent; border: none;
  color: hsl(var(--gold-ink)); font-size: 12px; font-weight: 500;
  cursor: pointer; padding: var(--sp-2) 0;
}
.ads-toggle:hover { text-decoration: underline; }
.ads-body { margin-top: var(--sp-2); }
.ads-empty {
  font-size: 12px; color: hsl(var(--muted-foreground) / 0.7);
  font-style: italic; padding: var(--sp-2) 0;
}

.ad-cards-grid { display:flex;flex-wrap:wrap;gap:var(--card-gap);align-items:flex-start; }
.ad-creative-card { width:320px;flex:0 0 320px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-2); }
.ad-creative-header { display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap; }
.ad-type-badge { font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:3px;background:hsl(var(--blue) / .12);color:hsl(var(--blue)); }
.li-badge { background:hsl(var(--blue) / .12);color:hsl(var(--blue)); }
.ad-metrics-inline { margin-left:auto;display:flex;gap:10px;font-size:11px;color:hsl(var(--muted-foreground)); }
.ad-headlines { font-size:13px;font-weight:600;color:hsl(var(--foreground));line-height:1.4; }
.ad-descriptions { font-size:12px;color:hsl(var(--muted-foreground));line-height:1.5; }
.ad-url { font-size:10px;color:hsl(var(--muted-foreground) / 0.6);word-break:break-all; }
.ad-url a { color:hsl(var(--muted-foreground) / 0.6);text-decoration:none; }
.ad-url a:hover { color:hsl(var(--gold-ink)); }
.ad-creative-footer { display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--sp-2);gap:var(--sp-2); }
.ad-creative-id { font-size:10px;color:hsl(var(--muted-foreground) / 0.6); }
.cm-preview-link { font-size:11px;color:hsl(var(--gold-ink));text-decoration:none;white-space:nowrap; }
.cm-preview-link:hover { text-decoration:underline; }
.ad-boosted-post { font-size:12px;color:hsl(var(--muted-foreground));font-style:italic; }
.ad-company { font-size:11px;font-weight:600;color:hsl(var(--gold-ink));text-transform:uppercase;letter-spacing:.4px; }
.ad-cta { display:inline-block;margin-top:var(--sp-1);font-size:11px;font-weight:600;color:hsl(var(--foreground));border:1px solid hsl(var(--border));border-radius:4px;padding:3px 10px; }

.drill-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;gap:var(--sp-2); }
.drill-empty-icon { font-size:28px;opacity:.35; }
.drill-empty-title { font-size:var(--text-body);font-weight:600;color:hsl(var(--muted-foreground)); }
.drill-empty-sub { font-size:12px;color:hsl(var(--muted-foreground) / 0.6);max-width:400px;line-height:1.6; }
.drill-empty-err .drill-empty-icon { opacity:.5; }
.drill-empty-err .drill-empty-title { color:hsl(var(--destructive)); }

/* ── PIPELINE SUMMARY ── */
.pipeline-summary .kpi-row { grid-template-columns:repeat(3,1fr); }

/* ── MODAL ── */
.modal-overlay { position:fixed;inset:0;background:rgba(30,27,24,.45);display:flex;align-items:center;justify-content:center;z-index:500; }
.modal-box { background:hsl(var(--card));border:1px solid hsl(var(--gold) / 0.3);border-radius:var(--radius);padding:28px;width:400px;box-shadow:0 16px 48px rgba(30,27,24,.14); }
.modal-title { font-size:var(--text-subhead);font-weight:700;margin-bottom:var(--sp-5); }

/* ── TOAST ── */
#gb-toast { position:fixed;bottom:28px;right:28px;background:hsl(var(--card));border:1px solid hsl(var(--gold));border-radius:calc(var(--radius) - 2px);padding:10px 18px;font-size:13px;color:hsl(var(--gold-ink));opacity:0;pointer-events:none;transition:opacity .2s;z-index:999; }
#gb-toast.visible { opacity:1; }

/* ── MISC ── */
.gb-loading { font-size:13px;color:hsl(var(--muted-foreground) / 0.6);padding:20px 0; }
.empty-state { font-size:13px;color:hsl(var(--muted-foreground) / 0.6);padding:20px 0; }
.error-state { font-size:13px;color:hsl(var(--destructive));padding:20px 0; }
.hidden { display:none !important; }

/* ── CHANGELOG ── */
.cl-day { margin-bottom: 36px; }
.cl-day-header {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, hsl(var(--muted-foreground)));
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid hsl(var(--border));
}
.cl-bucket {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.cl-bucket-title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--amber));
  margin-bottom: 12px;
}
.cl-cat { padding: 8px 0; }
.cl-cat + .cl-cat { border-top: 1px dashed hsl(var(--border)); margin-top: 12px; padding-top: 16px; }
.cl-cat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 6px;
}
.cl-summary {
  font-size: 14px;
  line-height: 1.55;
  color: hsl(var(--foreground));
  margin: 0 0 10px 0;
}
.cl-tech {
  margin: 6px 0 0 0;
  padding-left: 20px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 1.6;
}
.cl-tech li { margin-bottom: 3px; }
.changelog-empty {
  background: hsl(var(--muted));
  border: 1px dashed hsl(var(--border));
  border-radius: 10px;
  padding: 36px 22px;
  text-align: center;
}
.changelog-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 6px;
}
.changelog-empty-sub {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

/* ── ABM Pipeline view ── */
.abm-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.abm-stat{background:var(--panel,hsl(var(--muted)));border:1px solid var(--border,hsl(var(--border)));border-radius:10px;padding:12px 14px}
.abm-stat-v{font-size:22px;font-weight:700;letter-spacing:-.02em}
.abm-stat-l{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.55;margin-top:2px}
.abm-layout{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}
.abm-sec-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:8px}
.abm-acct{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;border:1px solid transparent}
.abm-acct:hover{background:hsl(var(--muted))}
.abm-acct.active{background:hsl(var(--gold) / .12);border-color:hsl(var(--gold))}
.abm-acct-fit{font-size:10.5px;font-weight:700;opacity:.6;min-width:20px;font-variant-numeric:tabular-nums}
.abm-acct-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm-acct-n{font-size:11px;opacity:.5;font-variant-numeric:tabular-nums}
.abm-log-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.abm-log-head select{background:hsl(var(--muted));border:1px solid hsl(var(--input));color:inherit;border-radius:7px;padding:4px 8px;font-size:12px}
.abm-row{background:var(--panel,hsl(var(--muted)));border:1px solid var(--border,hsl(var(--border)));border-radius:10px;padding:12px 14px;margin-bottom:8px}
.abm-row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.abm-name{font-weight:600;font-size:13.5px}
.abm-title{font-size:12px;opacity:.6;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm-spacer{flex:1}
.abm-conf{font-size:10px;font-weight:700;letter-spacing:.04em}
.abm-conf-high{color:hsl(var(--green))}.abm-conf-med{color:hsl(var(--amber))}
.abm-status{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;text-transform:capitalize;background:hsl(var(--muted))}
.abm-status-drafted{background:hsl(var(--gold) / .12);color:hsl(var(--gold-ink))}
.abm-status-sent{background:hsl(var(--green) / .12);color:hsl(var(--green))}
.abm-status-replied{background:hsl(var(--green) / .12);color:hsl(var(--green))}
.abm-row-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;opacity:.55;margin-top:5px}
.abm-row-meta a{color:hsl(var(--gold-ink));text-decoration:none}
.abm-msg{margin-top:9px;padding:10px 12px;border-left:2px solid hsl(var(--gold));background:hsl(var(--muted));border-radius:0 8px 8px 0;font-size:12.5px;line-height:1.6;opacity:.85}
.abm-msg-empty{border-left-color:hsl(var(--input));opacity:.4;font-style:italic}
.abm-loading{opacity:.5;padding:20px 0;font-size:13px}
@media(max-width:900px){.abm-stats{grid-template-columns:repeat(3,1fr)}.abm-layout{grid-template-columns:1fr}}