/* =====================================================================
   Brand merge — unify the app with conceptualhq.com.
   Direction: dark chrome + light data, lime accent.
   Tokens lifted from the live homepage. Loaded last, overrides Bootstrap.
   ===================================================================== */
:root {
  --brand-lime: #c7f751;
  --brand-lime-strong: #b9ee37;
  --brand-lime-tint: rgba(199, 247, 81, .14);
  --brand-lime-ink: #1b2206;        /* readable text on lime */
  --brand-lime-text: #4d6b00;       /* lime-ish but readable on white */
  --brand-coral: #f0897a;
  --brand-ink: #15181c;             /* dark slate — chrome */
  --brand-ink-2: #1c2025;
  --brand-cream: #f4f3ee;           /* warm off-white on dark */
  --brand-paper: #faf9f6;           /* warm light content bg */
  --brand-line: #e7e5df;
  --brand-muted: #6b7480;
  --brand-muted-2: #9aa3ad;

  --brand-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --brand-mono: 'Chakra Petch', ui-monospace, 'SFMono-Regular', monospace;
}

/* ---------- Typography ---------- */
body { font-family: var(--brand-font); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--brand-display);
  letter-spacing: -.01em;
}

/* Mono uppercase eyebrow — reusable label, like the homepage's stat labels */
.brand-eyebrow {
  font-family: var(--brand-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .7rem;
  font-weight: 400;
  color: var(--brand-muted-2);
}

/* ---------- Buttons: pill + lime primary ---------- */
.btn { border-radius: 999px; font-weight: 600; }
/* keep segmented/grouped buttons square so they still join cleanly */
.btn-group > .btn,
.btn-group-vertical > .btn,
.input-group .btn { border-radius: var(--bs-border-radius, .375rem); }

.btn-primary {
  --bs-btn-bg: var(--brand-lime);
  --bs-btn-border-color: var(--brand-lime);
  --bs-btn-color: var(--brand-lime-ink);
  --bs-btn-hover-bg: var(--brand-lime-strong);
  --bs-btn-hover-border-color: var(--brand-lime-strong);
  --bs-btn-hover-color: var(--brand-lime-ink);
  --bs-btn-active-bg: var(--brand-lime-strong);
  --bs-btn-active-border-color: var(--brand-lime-strong);
  --bs-btn-active-color: var(--brand-lime-ink);
  --bs-btn-disabled-bg: var(--brand-lime);
  --bs-btn-disabled-border-color: var(--brand-lime);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-lime-text);
  --bs-btn-border-color: var(--brand-lime);
  --bs-btn-hover-bg: var(--brand-lime);
  --bs-btn-hover-border-color: var(--brand-lime);
  --bs-btn-hover-color: var(--brand-lime-ink);
  --bs-btn-active-bg: var(--brand-lime);
  --bs-btn-active-border-color: var(--brand-lime);
  --bs-btn-active-color: var(--brand-lime-ink);
}

/* ---------- Chrome: dark slate sidebar + lime, warm content bg ---------- */
/* (navbar vars live at :root and its <style> loads after this file, so !important.) */
:root {
  --app-shell-bg: var(--brand-paper) !important;       /* warm content bg, not cool gray */
  --app-sidebar-active: var(--brand-lime) !important;  /* active + hover text */
  --app-sidebar-active-bg: var(--brand-lime-tint) !important;
  --app-sidebar-hover: rgba(255, 255, 255, .05) !important;
  --app-sidebar-border: rgba(255, 255, 255, .08) !important;
}
.app-sidebar { background: var(--brand-ink) !important; }   /* flat slate, replaces navy gradient */
.app-sidebar__brand .logo-letter,
.app-topbar .logo-letter {
  background: var(--brand-lime) !important;
  color: var(--brand-lime-ink) !important;                 /* dark text on lime tile */
}
.app-sidebar-link.is-active {
  box-shadow: inset 0 0 0 1px var(--brand-lime-tint) !important;   /* drop the blue glow */
}
.app-sidebar__eyebrow {
  font-family: var(--brand-mono) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ---------- Content area: replace lingering Bootstrap/legacy blue ---------- */
/* (These rules live in page-level <style> blocks that load after this file, so !important.) */

/* Pill tabs (granularity + channel tabs): dark-slate active pill, muted inactive, lime hover */
.nav-pills-sm .nav-link {
  color: var(--brand-muted) !important;
  font-weight: 600;
}
.nav-pills-sm .nav-link:hover {
  color: var(--brand-ink) !important;
  background: rgba(21, 24, 28, .05) !important;
}
.nav-pills-sm .nav-link.active {
  color: var(--brand-cream) !important;
  background-color: var(--brand-ink) !important;
}

/* Data-table headers: warm neutral instead of cool blue (#cbd6e7) */
.table-dashboard thead th,
.table-dashboard thead,
thead[style*="cbd6e7"],
thead[style*="203, 214, 231"] {
  background-color: #f1efe9 !important;   /* warm paper-grey */
  color: #4b5159 !important;
  border-bottom-color: var(--brand-line) !important;
}

/* Form focus: lime tint ring instead of Bootstrap blue glow */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #c7d39a !important;
  box-shadow: 0 0 0 .2rem var(--brand-lime-tint) !important;
}
.form-check-input:checked {
  background-color: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
}

/* Pagination: dark-slate active page, muted numbers, lime hover/focus (was Bootstrap blue) */
.pagination {
  --bs-pagination-color: var(--brand-muted);
  --bs-pagination-hover-color: var(--brand-ink);
  --bs-pagination-hover-bg: rgba(21, 24, 28, .05);
  --bs-pagination-hover-border-color: var(--brand-line);
  --bs-pagination-focus-color: var(--brand-ink);
  --bs-pagination-focus-bg: var(--brand-lime-tint);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--brand-lime-tint);
  --bs-pagination-active-bg: var(--brand-ink);
  --bs-pagination-active-border-color: var(--brand-ink);
  --bs-pagination-active-color: var(--brand-cream);
}
.page-link { color: var(--brand-muted); }
.page-item.active .page-link {
  background-color: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
  color: var(--brand-cream) !important;
}