/*
 * crm-page.css — THE page template for the CRM (leads.buildoly.com).
 *
 * Served at /shared/crm-page.css. Every CRM page links it FIRST in <head>,
 * before its own <style>, and wraps its content like this:
 *
 *   <main class="crm-page">
 *     <h1 class="crm-title">Follow-ups</h1>
 *     <p class="crm-sub">One line on what this page is for.</p>
 *     ...
 *   </main>
 *
 * The look is the brand one (Jeff 2026-09-30, buildoly.com/dev/brand): cream
 * page, white cards with a warm hairline, Articulat CF, one blue main button
 * per view. The values live in brand.css, imported below, shared with Ops. Inbox, New Signups and Confirmations already looked like this; the
 * rest of the CRM tabs had drifted into a cool-grey, blue-button look with a
 * different width and title size on nearly every page.
 *
 * A page keeps its OWN rules for what is genuinely its own (a queue row, a
 * pipeline column). What lives here, it should not redefine: page background,
 * base font, width, title, subtitle, buttons, filter chips, cards, tables,
 * form fields. If a page needs something different, add a modifier here
 * (like .crm-page.narrow) rather than overriding in the page, or the drift
 * starts again.
 *
 * The CRM top bar is not in here: it is drawn once, by public/crm/index.html,
 * and every tab below it is a page inside that shell.
 */

@import url("/shared/brand.css");

:root {
  /* Every value comes from the brand (brand.css); these names are what the
     CRM pages use, so a brand change reaches them without touching a page. */
  --crm-bg: var(--bd-cream);
  --crm-surface: var(--bd-ink-0);
  --crm-surface-2: var(--bd-ink-50);     /* hover, zebra, quiet fills */
  --crm-ink: var(--bd-ink-950);          /* text */
  --crm-ink-2: var(--bd-ink-700);        /* secondary text, secondary buttons */
  --crm-muted: var(--bd-ink-500);        /* subtitles, labels */
  --crm-faint: var(--bd-ink-400);        /* meta, timestamps */
  --crm-line: var(--bd-ink-200);         /* card and control borders */
  --crm-line-soft: var(--bd-ink-100);    /* row dividers */
  --crm-line-strong: var(--bd-ink-200);
  --crm-accent: var(--bd-accent);        /* the main action, links, focus */
  --crm-accent-hover: var(--bd-accent-hover);
  --crm-good: #14602f;  --crm-good-bg: #e3f3e9;
  --crm-warn: #8a5300;  --crm-warn-bg: #fdf0d8;
  --crm-bad:  #96201a;  --crm-bad-bg:  #fbe6e3;
  --crm-radius: var(--bd-radius-md);
  --crm-radius-sm: var(--bd-radius-sm);
  --crm-font: var(--bd-font);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 var(--crm-font);
  color: var(--crm-ink);
  background: var(--crm-bg);
}

a { color: var(--crm-accent); }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.crm-page { max-width: 1400px; margin: 0 auto; padding: 24px; }
/* A queue read row by row (the Inbox) reads better narrow. */
.crm-page.narrow { max-width: 1000px; }
/* Long-form reading (Sales Guide, Sales Funnel). */
.crm-page.prose { max-width: 1100px; }
/* Wide multi-column tables that already scroll inside themselves (Scorecard). */
.crm-page.wide { max-width: none; }

.crm-title { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 4px; }
.crm-sub { color: var(--crm-muted); font-size: 13px; margin: 0 0 18px; }
.crm-section { font-size: 15px; font-weight: 700; margin: 24px 0 10px; }
.crm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crm-head .crm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Page tabs ──────────────────────────────────────────────────────────── */
/* Views of the same page (Dashboard / Trends / Calls). The CRM's own tabs
   live in the top bar; these sit under a page title. */

.crm-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--crm-line); margin: 0 0 16px; }
.crm-tab {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--crm-muted); cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 14px;
}
.crm-tab:hover { color: var(--crm-ink); }
.crm-tab.active { color: var(--crm-ink); border-bottom-color: var(--crm-ink); font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* .btn is the secondary button; .pri (or .btn-primary) is the one main action,
   in the brand's accent blue. Selected states (a chip that is on, the active
   tab) stay near-black: they are not actions. */

.btn, .btn-primary {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3;
  padding: 5px 11px; border: 1px solid var(--crm-line-strong); border-radius: var(--crm-radius-sm);
  background: var(--crm-surface); color: var(--crm-ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--crm-surface-2); }
.btn.pri, .btn-primary { background: var(--crm-accent); border-color: var(--crm-accent); color: #fff; }
.btn.pri:hover, .btn-primary:hover { background: var(--crm-accent-hover); border-color: var(--crm-accent-hover); }
.btn.danger { color: var(--crm-bad); border-color: #f0c8c3; }
.btn.danger:hover { background: var(--crm-bad-bg); }
.btn.quiet { color: var(--bd-ink-300); border-color: var(--bd-ink-100); background: var(--bd-ink-0); }
.btn.quiet:hover { color: var(--bd-ink-500); border-color: var(--crm-line-strong); }
.btn.sm { font-size: 11.5px; padding: 3px 9px; }
.btn:disabled, .btn-primary:disabled { opacity: 0.55; cursor: default; }

/* ── Filter chips ───────────────────────────────────────────────────────── */

.chipset { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.chip-label { font-size: 11px; color: var(--crm-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-right: 2px; }
.chip {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--crm-ink-2); cursor: pointer;
  background: var(--crm-surface); border: 1px solid var(--crm-line-strong); padding: 5px 11px; border-radius: 999px;
}
.chip:hover { background: var(--crm-surface-2); }
.chip.on { background: var(--crm-ink); color: #fff; border-color: var(--crm-ink); font-weight: 600; }

/* ── Cards, stat tiles, tables ──────────────────────────────────────────── */

.crm-card { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); padding: 16px 18px; margin-bottom: 14px; }
.crm-card > h2, .crm-card > h3 { font-size: 13px; font-weight: 700; margin: 0 0 10px; }

.crm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.crm-stat { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); padding: 12px 14px; }
.crm-stat b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-stat span { font-size: 11px; color: var(--crm-muted); text-transform: uppercase; letter-spacing: 0.4px; }

.crm-table-wrap { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--crm-faint); padding: 10px 12px; border-bottom: 1px solid var(--crm-line); white-space: nowrap; background: var(--crm-surface);
}
.crm-table td { padding: 10px 12px; border-bottom: 1px solid var(--crm-line-soft); vertical-align: top; }
.crm-table tr:last-child td { border-bottom: 0; }
.crm-table tbody tr:hover td { background: var(--crm-surface-2); }

/* ── Form fields ────────────────────────────────────────────────────────── */
/* :where() keeps these at zero specificity, so a page's own class on a field
   (a search box sized for its toolbar) still wins without a fight. */

:where(.crm-page) :where(input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="date"], input:not([type]), select, textarea) {
  font: inherit; font-size: 13px; color: var(--crm-ink);
  padding: 6px 10px; border: 1px solid var(--crm-line-strong); border-radius: var(--crm-radius-sm); background: var(--crm-surface);
}
:where(.crm-page) :where(input, select, textarea):focus { outline: none; border-color: var(--crm-accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.14); }

/* ── Status pills ───────────────────────────────────────────────────────── */

.crm-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--bd-ink-100); color: var(--crm-muted); }
.crm-pill.good { background: var(--crm-good-bg); color: var(--crm-good); }
.crm-pill.warn { background: var(--crm-warn-bg); color: var(--crm-warn); }
.crm-pill.bad  { background: var(--crm-bad-bg);  color: var(--crm-bad); }

:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }

/* ── Phones ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .crm-page { padding: 14px 12px; }
  .crm-title { font-size: 19px; }
  .btn, .btn-primary, .chip, .crm-tab { min-height: 44px; } /* brand: 44px touch targets */
  :where(.crm-page) :where(input, select, textarea) { font-size: 16px; } /* below 16px iOS zooms on focus */
}