/* ============================================================
   Blackbeard Leads — application stylesheet
   Single source of truth for the app UI. Loaded once in base.html,
   after Bootstrap so these rules win.

   Layers, in order:
     1. Design tokens   — :root CSS variables (colors, later spacing)
     2. Base / layout   — body, header, session bar
     3. Components      — cards, tables, buttons, badges, forms, tiles
     4. Utilities       — small single-purpose helpers (use !important so
                          they override component rules like `.bb-table td`)

   Prefer a component or utility class over an inline style. If you find
   yourself writing style="..." on more than one page, add a class here.
   ============================================================ */

/* ── 1. Design tokens ──────────────────────────────────────── */
/* Customer-facing theme = "Hill Country" light (matches texasprobateleads.com).
   Staff dashboards opt into the dark palette via body.theme-staff (below).
   Variable NAMES are unchanged so no component markup has to change — only
   values differ between the two themes. */
:root {
  --bb-bg: #F6EEDD;            /* sand */
  --bb-surface: #FFFDF6;       /* paper (cards) */
  --bb-surface-2: #FCF6EA;     /* sand-2 (table head, tiles) */
  --bb-border: #E6D9C1;
  --bb-border-light: #D8C6A6;
  --bb-blue: #1E4A38;          /* PRIMARY ACCENT — forest green */
  --bb-blue-light: #2C6B4F;    /* lighter green — hovers/links */
  --bb-blue-glow: rgba(30, 74, 56, 0.15);
  --bb-text: #2A211A;          /* walnut */
  --bb-text-dim: #7A6B59;
  --bb-text-bright: #17120D;
  --bb-green: #2E7D52;         /* success/status */
  --bb-green-bg: rgba(46, 125, 82, 0.14);
  --bb-yellow: #A66A00;
  --bb-yellow-bg: rgba(221, 162, 58, 0.18);
  --bb-red: #B3402A;
  --bb-red-bg: rgba(179, 64, 42, 0.10);
  --bb-gold: #C0851E;          /* Lone Star / sun */
  --bb-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Staff dashboards (ETL / Guide / Roadmap) — dark, so it's obvious you're
   on a staff page. Same variable names, original dark values. */
body.theme-staff {
  --bb-bg: #07080d;
  --bb-surface: #0d1520;
  --bb-surface-2: #111c2e;
  --bb-border: #1a2d47;
  --bb-border-light: #243a56;
  --bb-blue: #2563eb;
  --bb-blue-light: #3b82f6;
  --bb-blue-glow: rgba(37, 99, 235, 0.15);
  --bb-text: #e2e8f0;
  --bb-text-dim: #64748b;
  --bb-text-bright: #f1f5f9;
  --bb-green: #10b981;
  --bb-green-bg: rgba(16, 185, 129, 0.12);
  --bb-yellow: #f59e0b;
  --bb-yellow-bg: rgba(245, 158, 11, 0.12);
  --bb-red: #ef4444;
  --bb-red-bg: rgba(239, 68, 68, 0.12);
}

/* ── 2. Base / layout ──────────────────────────────────────── */
body {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Header — two-row top bar */
.bb-header {
  background: var(--bb-surface);
  border-bottom: 1px solid var(--bb-border);
}
.bb-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.5rem 0.4rem;
}
.bb-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--bb-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bb-blue);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.bb-brand:hover { color: var(--bb-blue-light); }
.bb-brand-logo { height: 26px; width: auto; margin-right: 9px; }
body.theme-staff .bb-brand-logo { filter: brightness(0) invert(1); }
.bb-staff-badge { display: none; }
body.theme-staff .bb-staff-badge {
  display: inline-flex; align-items: center;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #0b0c10; background: var(--bb-yellow);
  padding: 2px 9px; border-radius: 999px; margin-left: 0.7rem;
}
.bb-user {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.82rem;
}
.bb-user a {
  color: var(--bb-text-dim);
  text-decoration: none;
  transition: color 0.12s;
}
.bb-user a:hover { color: var(--bb-text-bright); }
.bb-user-sep {
  color: var(--bb-border-light);
  margin: 0 0.35rem;
  user-select: none;
}
.bb-header-nav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0 1.5rem 0.55rem;
}
.bb-header-nav a {
  color: var(--bb-text-dim);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.15rem 0;
  transition: color 0.12s;
}
.bb-header-nav a:hover { color: var(--bb-text-bright); }
.bb-header-nav a.active { color: var(--bb-text-bright); font-weight: 600; }
.bb-nav-sep {
  color: var(--bb-border-light);
  font-size: 0.72rem;
  margin: 0 0.55rem;
  user-select: none;
}

/* Session status bar */
.bb-session-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.5rem;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--bb-border);
}
.bb-session-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
}
.bb-session-label { font-weight: 600; }
.bb-session-detail { opacity: 0.85; }
.bb-session-refresh { margin: 0 0 0 auto; }
.bb-session-refresh button { padding: 0.15rem 0.7rem; }
.bb-session-active  { background: var(--bb-green-bg);  color: var(--bb-green); }
.bb-session-active  .bb-session-dot { background: var(--bb-green); box-shadow: 0 0 6px var(--bb-green); }
.bb-session-partial { background: var(--bb-yellow-bg); color: var(--bb-yellow); }
.bb-session-partial .bb-session-dot { background: var(--bb-yellow); }
.bb-session-expired { background: var(--bb-red-bg);    color: var(--bb-red); }
.bb-session-expired .bb-session-dot { background: var(--bb-red); }
.bb-session-unknown { background: var(--bb-surface-2); color: var(--bb-text-dim); }
.bb-session-unknown .bb-session-dot { background: var(--bb-text-dim); }

/* ── 3. Components ─────────────────────────────────────────── */

/* Page + section headers */
.bb-page-title {
  font-family: var(--bb-serif);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--bb-text-bright);
}
.bb-section {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-text-dim);
  margin-bottom: 0.75rem;
}
.bb-section-lg {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bb-blue-light);
  margin-bottom: 0.75rem;
}

/* Cards */
.bb-card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: 10px;
  overflow: hidden;
}
.bb-card-header {
  padding: 0.9rem 1.1rem 0.7rem;
  border-bottom: 1px solid var(--bb-border);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-text-dim);
}
/* Standard interior padding for card contents */
.bb-card-body { padding: 0.75rem 1.1rem; }
.bb-card-body-lg { padding: 1.25rem; }
/* Constrained-width card, e.g. confirmation / single-column forms */
.bb-card-narrow { max-width: 500px; }

/* Stat tiles — a row of big-number KPIs inside a card */
.stat-row {
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem 1.1rem;
}
.stat-item .label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bb-text-dim);
}
.stat-item .value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bb-text-bright);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Tables */
.bb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
}
.bb-table thead th {
  background: var(--bb-surface-2);
  color: var(--bb-text-dim);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--bb-border);
  white-space: nowrap;
}
.bb-table tbody td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--bb-border);
  color: var(--bb-text);
  vertical-align: middle;
}
.bb-table tbody tr:last-child td {
  border-bottom: none;
}
.bb-table tbody tr:hover td {
  background: var(--bb-surface-2);
}
.text-tabular { font-variant-numeric: tabular-nums; }
.text-val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--bb-text-bright);
}
.bb-table-centered thead th { text-align: center; }
.bb-table-centered tbody td { text-align: center; }
.bb-table-centered tbody td:first-child { text-align: left; }
.bb-table-centered thead th:first-child { text-align: left; }

/* Empty-state cell (use with colspan) */
.bb-empty {
  text-align: center !important;
  color: var(--bb-text-dim) !important;
  padding: 1.5rem !important;
}

/* Badges */
.badge-t1 { background: var(--bb-green-bg) !important; color: var(--bb-green) !important; font-weight: 600; }
.badge-t2 { background: var(--bb-blue-glow) !important; color: var(--bb-blue) !important; font-weight: 600; }
.badge-t3 { background: var(--bb-yellow-bg) !important; color: var(--bb-yellow) !important; font-weight: 600; }
.badge-joint { background: var(--bb-green-bg) !important; color: var(--bb-green) !important; font-weight: 600; }
.badge-probate { background: var(--bb-blue-glow) !important; color: var(--bb-blue) !important; font-weight: 600; }
.badge-divorce { background: var(--bb-green-bg) !important; color: var(--bb-green) !important; font-weight: 600; }
.purged { opacity: 0.35; text-decoration: line-through; }

/* Buttons — work on both <button> and <a>. display:inline-block +
   text-decoration:none are baked in so anchor-buttons need no inline style.
   Add a size modifier (.btn-bb-sm / .btn-bb-xs) alongside the color class. */
.btn-bb {
  display: inline-block;
  background: var(--bb-blue);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.45rem 1.1rem;
  border-radius: 7px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-bb:hover { background: var(--bb-blue-light); color: #fff; }
.btn-bb-success {
  display: inline-block;
  background: var(--bb-green);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.45rem 1.1rem;
  border-radius: 7px;
  text-decoration: none;
}
.btn-bb-success:hover { background: #0ea572; color: #fff; }
.btn-bb-danger {
  display: inline-block;
  background: var(--bb-red);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.45rem 1.1rem;
  border-radius: 7px;
  text-decoration: none;
}
.btn-bb-danger:hover { background: #dc2626; color: #fff; }
.btn-bb-outline {
  display: inline-block;
  background: transparent;
  color: var(--bb-text-dim);
  border: 1px solid var(--bb-border);
  font-weight: 500;
  font-size: 0.78rem;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-bb-outline:hover { border-color: var(--bb-blue); color: var(--bb-blue-light); }
.btn-bb-outline-danger { border-color: var(--bb-red); color: var(--bb-red); }
.btn-bb-outline-danger:hover { border-color: var(--bb-red); color: #fff; background: var(--bb-red); }
/* Size modifiers — combine with a .btn-bb* color class */
.btn-bb-sm { padding: 0.3rem 0.8rem; font-size: 0.78rem; }
.btn-bb-xs { padding: 0.2rem 0.6rem; font-size: 0.75rem; }

/* Forms */
.form-control, .form-select {
  background: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text) !important;
  font-size: 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bb-blue) !important;
  box-shadow: 0 0 0 2px var(--bb-blue-glow) !important;
}
.form-check-input {
  background-color: var(--bb-surface-2);
  border-color: var(--bb-border-light);
}
.form-check-input:checked {
  background-color: var(--bb-blue);
  border-color: var(--bb-blue);
}

/* County grid — compact tiles of per-county counts */
.county-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}
@media (max-width: 1400px) { .county-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 992px)  { .county-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 576px)  { .county-grid { grid-template-columns: repeat(3, 1fr); } }
.county-tile {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  transition: border-color 0.15s ease;
}
.county-tile:hover { border-color: var(--bb-blue); }
.county-tile .name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bb-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.county-tile .count {
  font-size: 0.68rem;
  color: var(--bb-text-dim);
  font-variant-numeric: tabular-nums;
  margin-top: 0.05rem;
}
.county-tile .loaded {
  font-size: 0.62rem;
  color: var(--bb-text-dim);
  opacity: 0.7;
}

/* Links, alerts, scrollbar */
a { color: var(--bb-blue); }
a:hover { color: var(--bb-blue-light); }
.alert-info {
  background: var(--bb-blue-glow);
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--bb-text);
}
.alert-warning {
  background: var(--bb-yellow-bg);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--bb-yellow);
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bb-bg); }
::-webkit-scrollbar-thumb { background: var(--bb-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bb-border-light); }

/* ── 4. Utilities ──────────────────────────────────────────── */
/* !important so they override component rules (e.g. `.bb-table td`
   sets its own color). Mirrors Bootstrap's utility convention. */
.text-dim    { color: var(--bb-text-dim) !important; }
.text-bright { color: var(--bb-text-bright) !important; }
.text-ok     { color: var(--bb-green) !important; }
.text-warn   { color: var(--bb-yellow) !important; }
.text-bad    { color: var(--bb-red) !important; }
.text-blue   { color: var(--bb-blue-light) !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.text-sm { font-size: 0.78rem !important; }
.text-xs { font-size: 0.72rem !important; }
.bb-pad  { padding: 0.75rem; }
.min-w-0 { min-width: 0 !important; }
/* Constrained input widths (forms) */
.field-sm { max-width: 160px; }
.field-md { max-width: 220px; }
.field-lg { max-width: 320px; }
.cell-truncate {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 5. Auth pages (django-allauth: login / signup / password / email) ──
   These extend base.html via templates/allauth/layouts/base.html, which sets
   the body class `auth-page`. Centered branded card, styled bare inputs. */
.auth-page .bb-header-nav { display: none; }
.auth-page .container-fluid {
  max-width: 430px;
  margin: 3rem auto;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: 14px;
  padding: 2rem 2rem 2.2rem;
  box-shadow: 0 18px 40px -26px rgba(60, 40, 20, 0.45);
}
.auth-page h1 {
  font-family: var(--bb-serif);
  font-size: 1.6rem;
  color: var(--bb-text-bright);
  margin: 0 0 1.2rem;
}
.auth-page label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bb-text);
  margin: 0 0 0.3rem;
}
.auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.auth-page select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--bb-border-light);
  border-radius: 8px;
  background: var(--bb-surface-2);
  color: var(--bb-text);
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}
.auth-page input:focus, .auth-page select:focus {
  outline: none;
  border-color: var(--bb-blue);
  box-shadow: 0 0 0 3px var(--bb-blue-glow);
}
.auth-page button[type="submit"],
.auth-page input[type="submit"],
.auth-page button.primaryAction,
.auth-page .btn-primary {
  display: inline-block;
  width: 100%;
  background: var(--bb-blue);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0.3rem;
  transition: background 0.15s ease;
}
.auth-page button[type="submit"]:hover,
.auth-page input[type="submit"]:hover,
.auth-page button.primaryAction:hover { background: var(--bb-blue-light); }
.auth-page a { color: var(--bb-blue); font-weight: 500; }
.auth-page p { color: var(--bb-text-dim); font-size: 0.9rem; }

/* ── Global footer (all pages) ─────────────────────────────── */
.bb-footer {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--bb-border);
  background: var(--bb-surface-2);
  text-align: center;
}
.bb-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  margin-bottom: 0.6rem;
}
.bb-footer-links a {
  color: var(--bb-text-dim);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}
.bb-footer-links a:hover { color: var(--bb-blue-light); text-decoration: underline; }
.bb-footer-bug { color: var(--bb-blue) !important; font-weight: 600 !important; }
.bb-footer-copy { color: var(--bb-text-dim); font-size: 0.78rem; }