/* GlobalWits Sales Dashboard — viewer styles.
   Carries the workbook's deep-blue identity into a data-dense web UI.
   Single file, no build step. */

:root {
  --navy: #1F3864;
  --blue: #2E5FA3;
  --blue-2: #3f74c0;
  --pale: #eef3fb;
  --pale-2: #d6e4f0;
  --high: #eaf2fd;          /* MY/ID priority row tint */
  --high-edge: #2E5FA3;
  --ink: #1a2233;
  --ink-soft: #5b6c86;
  --muted: #8892a6;
  --line: #e3e8f0;
  --line-2: #eef1f6;
  --bg: #f5f7fb;
  --card: #ffffff;
  --good: #1f9d61;
  --warn: #c47f17;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,40,80,.05), 0 6px 20px rgba(20,40,80,.06);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--bg); line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Top bar ─────────────────────────────────────────────── */
/* flex-wrap matters more than it looks. The bar's contents need to fit
   ~1280px, and never shrank, so on a 1280px screen it fitted only while
   the page was short enough to have no vertical scrollbar - add one (the
   Countries settings page is 143 rows long) and the 15px it takes tipped
   the whole document into horizontal scrolling. Wrapping the row removes
   that cliff instead of leaving it to depend on page length.
   column-gap trimmed 24px -> 12px (2026-08-25, alongside .topnav's own
   padding/gap and .globalsearch input's max-width) when the "AI Usage"
   link pushed .editor-form (the "admin / Sign out" box) onto its own row
   at exactly this width - verified back on one row at 1280x800 after. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px;
  background: linear-gradient(120deg, var(--navy), var(--blue));
  color: #fff; box-shadow: 0 2px 12px rgba(20,40,80,.18);
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand:hover { text-decoration: none; }
/* MUST come before/alongside the display:grid below. The `hidden` attribute
   only works through the UA rule `[hidden] { display: none }`, which ANY
   author `display` declaration outranks - so without this, the "AP"
   fallback badge stays laid out at 40px wide even while marked hidden.
   That is not theoretical: it rendered next to the real logo AND pushed
   the whole top bar onto a second row once the logo started loading. */
.brand-mark[hidden] { display: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.15); font-weight: 800; letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,.25);
}
/* Sized for the WIDE, transparent-background banner logo (roughly 3:1), not
   the old square-on-a-blue-field asset. Three deliberate changes from that
   earlier version: `contain` not `cover` (cover on a 3:1 image squeezed
   into a 40px square crops it down to the middle of the word); height
   fixed with width:auto so any reasonable aspect ratio stays undistorted;
   and no border/background/radius, because those existed only to make an
   opaque blue square read as a badge and would draw a visible box around a
   transparent logo. */
/* border-radius suits BOTH assets: it rounds the square .jpg into a badge
   on the navy bar, and is invisible on a wide transparent .png whose
   corners are already clear. No background/border though - those would
   draw a visible box around a transparent logo. */
.brand-logo {
  height: 38px; width: auto; max-width: 160px;
  object-fit: contain; border-radius: 8px; flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; }
.brand-text em { font-style: normal; font-size: 11.5px; opacity: .8; }
/* min-width:0 lets the search box actually give up space when the bar is
   tight; without it the flex item refuses to shrink below its input's
   intrinsic width and pushes the editor form off the right edge. */
.globalsearch { margin-left: auto; display: flex; gap: 8px; min-width: 0; }
.globalsearch input {
  width: min(32vw, 300px); min-width: 100px; padding: 9px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14);
  color: #fff; font-size: 14px;
}
.globalsearch input::placeholder { color: rgba(255,255,255,.7); }
.globalsearch input:focus {
  outline: none; background: #fff; color: var(--ink);
  border-color: #fff;
}
.globalsearch button {
  padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: var(--navy); font-weight: 650; font-size: 13.5px;
}
.globalsearch button:hover { background: var(--pale-2); }

.wrap { max-width: 1400px; margin: 0 auto; padding: 26px 24px 60px; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--blue); }
.crumbs span { margin: 0 6px; opacity: .6; }

.page-title { font-size: 26px; margin: 4px 0 18px; letter-spacing: -.01em; }

/* ── Landing hero ────────────────────────────────────────── */
.hero { margin-bottom: 22px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.stat {
  flex: 1 1 180px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.stat-num { display: block; font-size: 26px; font-weight: 750; color: var(--navy); }
.stat-label { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ── Country cards ───────────────────────────────────────── */
.card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.country-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; color: var(--ink);
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.country-card:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--blue-2); box-shadow: 0 8px 26px rgba(20,40,80,.12);
}
/* flex-wrap is what keeps a long country name inside its card. Without it the
   h2 refuses to shrink below its content width and .cc-period is nowrap, so
   "Philippines(NEW)" pushed the date straight out through the card's right
   edge. Wrapping drops the date onto its own line instead of truncating the
   name - both are worth reading in full. */
.cc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px 8px; flex-wrap: wrap;
}
.cc-head h2 { font-size: 17px; margin: 0; color: var(--navy); min-width: 0; overflow-wrap: anywhere; }
.cc-period { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cc-built { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.cc-cif { font-size: 22px; font-weight: 750; margin: 10px 0 2px; color: var(--ink); }
.cc-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-soft); }
.cc-meta span { color: #55617a; }
.cc-enrich { margin-top: 14px; }
.cc-enrich .bar {
  height: 6px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.cc-enrich .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
/* Fully searched reads green: nothing left to look up in this country. */
.cc-enrich .bar span.bar-done { background: linear-gradient(90deg, #2f9e63, #47bd7e); }
.cc-enrich small { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }

/* ── Country header ──────────────────────────────────────── */
.country-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ch-meta { display: flex; gap: 16px; align-items: baseline; }
.ch-cif { font-size: 22px; font-weight: 750; color: var(--navy); }
.ch-period { font-size: 13px; color: var(--muted); }

/* ── Panels ──────────────────────────────────────────────── */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin: 18px 0;
  box-shadow: var(--shadow);
}
.section-h { font-size: 15px; margin: 0 0 12px; color: var(--navy); letter-spacing: .01em; }
.section-h small { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 4px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.panel-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.panel-totals { display: flex; gap: 16px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.panel-totals strong { color: var(--navy); }

/* ── Leads two-up ────────────────────────────────────────── */
/* Stacked, not side by side. Two half-width tables forced every text column
   into a few dozen pixels, which is what made the page scroll sideways -
   each table now gets the full width and can lay its columns out properly. */
.leads-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.leads-grid .panel { margin: 0; }
.lead-high { border-top: 3px solid var(--blue); }
.lead-other { border-top: 3px solid #b9c2d6; }

/* ── Tables ──────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; border-radius: 8px; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid thead th {
  position: sticky; top: 0; background: var(--navy); color: #fff;
  font-weight: 600; font-size: 12px; padding: 9px 11px; text-align: left;
  border-bottom: 2px solid var(--navy);
}
table.grid tbody td {
  padding: 8px 11px; border-bottom: 1px solid var(--line-2);
  /* Text wraps. The table used to be `white-space: nowrap` throughout, so a
     company with a dozen phone numbers stretched the whole page sideways and
     still got truncated. Long unbroken tokens (URLs) break mid-word rather
     than pushing the layout out. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Numbers and short flags stay on one line - they are never long enough to
   cause overflow, and wrapping them just looks broken. */
table.grid tbody td.ta-right,
table.grid tbody td.ta-center { white-space: nowrap; overflow-wrap: normal; }
table.grid thead th { white-space: normal; }
table.grid tbody tr:nth-child(even) { background: #fafbfe; }
table.grid tbody tr:hover { background: var(--pale); }
table.grid .importer { font-weight: 600; min-width: 150px; max-width: 260px; }
table.grid .small { font-size: 12px; color: #55617a; max-width: 200px; }
table.grid .desc { max-width: 240px; color: #45506a; font-size: 12px; }
/* The detailed importer table carries 16 columns - far more than the leads
   tables - so it gets tighter padding and slightly smaller text. Trimming
   4px of padding per side recovers ~128px across the row, which is what
   takes it from overflowing to fitting. */
.item-panel table.grid { font-size: 12.5px; }
.item-panel table.grid thead th { padding: 8px 6px; font-size: 11.5px; }
.item-panel table.grid tbody td { padding: 7px 6px; }
.item-panel table.grid .importer { min-width: 130px; max-width: 200px; }
.item-panel table.grid .small { max-width: 140px; }
.item-panel table.grid .desc { max-width: 170px; }
.item-panel table.grid td.cell-phone,
.item-panel table.grid td.cell-web,
.item-panel table.grid td.cell-address,
.item-panel table.grid td.cell-email { max-width: 130px; font-size: 11.5px; }
.item-panel .emp-list-mini { min-width: 130px; max-width: 190px; font-size: 11.5px; }

/* Phone lists, URLs, addresses and emails: the columns that actually overflow. */
table.grid td.cell-phone { max-width: 170px; font-size: 12px; }
table.grid td.cell-web { max-width: 170px; font-size: 12px; }
table.grid td.cell-address { max-width: 190px; font-size: 12px; }
table.grid td.cell-email { max-width: 170px; font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }
.ta-left { text-align: left; } .ta-right { text-align: right; } .ta-center { text-align: center; }

/* Header cells must honour the same alignment classes as their data cells.
   Without these, `table.grid thead th { text-align: left }` above
   out-specifies a bare `.ta-center` (0,1,3 vs 0,1,0), so every centred or
   right-aligned column had a left-aligned heading sitting over it - visibly
   wrong on any column whose values are narrower than the heading. Scoped to
   thead so the base left-alignment still applies to headers with no class. */
table.grid thead th.ta-left   { text-align: left; }
table.grid thead th.ta-center { text-align: center; }
table.grid thead th.ta-right  { text-align: right; }
.muted { color: var(--muted); }

/* number columns get monospace-ish alignment */
table.grid td.ta-right { font-variant-numeric: tabular-nums; }

/* HIGH-priority (MY/ID) rows — mirrors the Excel light-blue fill */
tr.row-high { background: var(--high) !important; box-shadow: inset 3px 0 0 var(--high-edge); }
tr.row-high:hover { background: #dfeafb !important; }
.tag-high {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  vertical-align: middle;
}

/* total / summary rows */
table.grid tfoot .total-row td { background: var(--pale-2); font-weight: 700; color: var(--navy); border-top: 2px solid var(--blue-2); }
table.summary tbody td { border-bottom: 1px solid var(--line-2); }

/* sortable headers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--blue); }
th.sortable.active { background: var(--blue); }
th .arrow { margin-left: 4px; font-size: 10px; opacity: .9; }

/* contact bits */
.edited { color: var(--warn); margin-left: 4px; cursor: help; font-size: 12px; }

/* Named people inside a table cell: one line each, name + role + direct
   links. Deliberately not truncated to a single summary line - this column
   is the point of the row for a salesperson. */
.emp-list-mini { list-style: none; margin: 0; padding: 0; white-space: normal;
                 min-width: 150px; max-width: 230px; }
.emp-list-mini li { display: flex; align-items: baseline; gap: 5px;
                    flex-wrap: wrap; padding: 1px 0; line-height: 1.35; }
.emp-list-mini li + li { border-top: 1px dotted var(--line); margin-top: 2px; padding-top: 3px; }
.emp-name { font-weight: 650; font-size: 12px; }
.emp-pos { font-size: 11px; color: var(--muted); }
.emp-ico {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: 4px; background: var(--pale-2); color: var(--navy);
  font-size: 10px; font-weight: 700; text-decoration: none; flex: none;
}
.emp-ico:hover { background: var(--blue); color: #fff; text-decoration: none; }
.emp-in { font-style: normal; letter-spacing: -.02em; }
.emp-table { min-width: 640px; }
.emp-table td { white-space: normal; }
.pill { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pill-y { background: #e0f3e9; color: var(--good); }
.pill-n { background: #eef1f6; color: var(--muted); }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 2px solid var(--line); padding-bottom: 10px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 600;
}
.tab:hover { border-color: var(--blue-2); background: var(--pale); text-decoration: none; }
.tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tab small { font-size: 11px; opacity: .7; font-weight: 500; }
.tab.active small { opacity: .85; }

/* ── Pager ───────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; flex-wrap: wrap; }
.pager-info { font-size: 12.5px; color: var(--muted); }
.pager-btns { display: flex; align-items: center; gap: 8px; }
.pager button {
  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; font-weight: 600;
}
.pager button:hover:not([disabled]) { border-color: var(--blue-2); background: var(--pale); }
.pager button[disabled] { opacity: .45; cursor: default; }
.pager-cur { font-size: 12.5px; color: var(--ink-soft); }

.item-panel { min-height: 60px; }
.loading { color: var(--muted); padding: 20px; text-align: center; }

/* ── Search ──────────────────────────────────────────────── */
.search-lead { color: var(--muted); margin: -8px 0 18px; }
.result-count { font-size: 13px; color: var(--ink-soft); margin: 4px 0 12px; }

/* ── Misc ────────────────────────────────────────────────── */
.empty { color: var(--muted); padding: 22px; text-align: center; font-size: 14px; }
.notfound { text-align: center; padding: 60px 20px; }
.btn { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 600; }
.btn:hover { background: var(--blue); text-decoration: none; }
code { background: var(--pale-2); padding: 1px 6px; border-radius: 5px; font-family: var(--mono); font-size: 12.5px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; border-top: 1px solid var(--line); background: #fff; }

/* ── Live run progress ───────────────────────────────────── */
.prog-country { border: 1px solid var(--line); border-radius: 10px;
                padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.prog-running { border-color: var(--blue-2); background: #fbfdff; }
.prog-queued  { opacity: .6; }
.prog-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prog-name { font-weight: 700; color: var(--navy); font-size: 14px; }
.prog-count { font-size: 12px; color: var(--muted); }
.prog-pct { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--navy); }
.prog-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; }
.badge-running  { background: #e5eefb; color: var(--blue); }
.badge-complete { background: #e0f3e9; color: var(--good); }
.badge-queued   { background: #eef1f6; color: var(--muted); }
.badge-started  { background: #fff2d6; color: #9a6b12; }
.prog-bar { height: 6px; background: var(--line); border-radius: 999px;
            overflow: hidden; margin: 8px 0; }
.prog-bar span { display: block; height: 100%;
                 background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.prog-items { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px;
        border: 1px solid var(--line); background: #fff; white-space: nowrap;
        font-variant-numeric: tabular-nums; }
.chip-done    { background: #e0f3e9; border-color: #b6e0c9; color: #14653c; font-weight: 650; }
.chip-empty   { background: #f4f6fa; color: #6b7789; }
.chip-failed  { background: #fbe4e4; border-color: #f3c9c8; color: #98302f; }
.chip-skipped { background: #f4f6fa; color: #99a3b3; text-decoration: line-through; }
.chip-running { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.chip-pending { color: var(--muted); }
.spin { display: inline-block; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.prog-legend { margin: 10px 0 0; }
.joblog-right { display: flex; align-items: center; gap: 12px; }
.follow-toggle { display: flex; align-items: center; gap: 5px; font-size: 11px;
                 color: rgba(255,255,255,.85); cursor: pointer; }
.follow-toggle input { cursor: pointer; }

/* ── Diagnostics ─────────────────────────────────────────── */
.panel-new { border-left: 4px solid var(--warn); background: #fffdf7; }

.health-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-left-width: 4px; border-radius: var(--radius); padding: 16px;
  color: var(--ink); box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.health-card:hover { text-decoration: none; transform: translateY(-2px);
                     box-shadow: 0 8px 26px rgba(20,40,80,.12); }
.health-healthy { border-left-color: var(--good); }
.health-warning { border-left-color: var(--warn); }
.health-blocked { border-left-color: #b03b3b; }
.hc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hc-head h3 { margin: 0; font-size: 16px; color: var(--navy); }
.hc-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
            padding: 2px 8px; border-radius: 999px; letter-spacing: .3px; }
.hc-healthy { background: #e0f3e9; color: var(--good); }
.hc-warning { background: #fff2d6; color: #9a6b12; }
.hc-blocked { background: #fbe4e4; color: #b03b3b; }
.hc-counts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 12.5px; }
.hc-n.blocked { color: #b03b3b; font-weight: 650; }
.hc-n.warning { color: #9a6b12; }
.hc-n.info { color: var(--muted); }
.hc-new { margin-top: 9px; font-size: 12px; font-weight: 700; color: var(--warn); }

.issue { border-left: 4px solid var(--line); }
.issue-info { border-left-color: #b9c2d6; }
.issue-warning { border-left-color: var(--warn); }
.issue-blocked { border-left-color: #b03b3b; }
.issue-new { background: #fffdf7; }
.issue-head { display: flex; justify-content: space-between; gap: 16px;
              align-items: flex-start; flex-wrap: wrap; }
.issue-title { font-size: 17px; margin: 8px 0 4px; color: var(--navy); }
.issue-meta { margin: 0; font-size: 12px; color: var(--muted); }
.issue-when { text-align: right; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.sev-badge { display: inline-block; font-size: 10.5px; font-weight: 700;
             text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
             letter-spacing: .3px; margin-right: 5px; }
.sev-info { background: #eef1f6; color: #55617a; }
.sev-warning { background: #fff2d6; color: #9a6b12; }
.sev-blocked { background: #fbe4e4; color: #b03b3b; }
.sev-new { background: var(--warn); color: #fff; }
.sev-known { background: #e0f3e9; color: var(--good); }
.issue-why, .issue-fix { font-size: 14px; line-height: 1.6; margin: 0 0 4px; max-width: 78ch; }
.issue-fix { color: #24406e; }
.issue-doc { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2);
             font-size: 12px; color: var(--muted); }
.evidence { font-size: 13px; }
.ev-label { margin: 10px 0 4px; font-size: 12px; font-weight: 650; color: var(--ink-soft); }
.ev-box { background: #f7f9fc; border: 1px solid var(--line); border-radius: 7px;
          padding: 9px 11px; margin: 0; word-break: break-word; }
.ev-bad { background: #fdecec; border-color: #f3c9c8; color: #98302f; font-weight: 650; }
.evidence details { margin: 8px 0; }
.evidence summary { cursor: pointer; font-size: 12.5px; color: var(--blue); }
.log-excerpt { margin-top: 10px; }

/* ── Operations console ──────────────────────────────────── */
/* Padding/gap trimmed (was 12px/4px) to fit the "AI Usage" link added
   2026-08-25 back onto one row with .editor-form at 1280px - see the
   .topbar comment above on why that width is the one that matters. */
.topnav { display: flex; gap: 2px; margin-left: 8px; }
.topnav a {
  color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600;
  padding: 7px 9px; border-radius: 8px;
}
.topnav a:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }

.flash { padding: 11px 15px; border-radius: 9px; margin-bottom: 16px; font-size: 14px; }
.flash-ok { background: #e0f3e9; color: #14653c; border: 1px solid #b6e0c9; }
.flash-err { background: #fdecec; color: #98302f; border: 1px solid #f3c9c8; }

.ops-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.ops-grid .panel { margin: 0; }
@media (max-width: 900px) { .ops-grid { grid-template-columns: 1fr; } }

.cost-tag {
  float: right; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 999px; background: #fbe4e4; color: #b03b3b;
  text-transform: uppercase;
}
.cost-tag.free { background: #e0f3e9; color: var(--good); }
.disabled-banner { background: #fbe4e4; color: #b03b3b; border: 1px solid #f2c6c6; border-radius: 8px; padding: 9px 13px; font-size: 13px; font-weight: 600; margin: 4px 0 12px; }

.country-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.pick {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; background: #fff;
}
.pick:hover { border-color: var(--blue-2); background: var(--pale); }
.confirm-line { display: flex; margin-bottom: 12px; background: #fffaf0; border-color: #f0d9a8; }
.enrich-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.enrich-form select, .enrich-form input {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.enrich-form input { width: 190px; }

/* Export-allowance table: collapsed by default so a 50+ country list does
   not push the actual run controls below the fold. The summary line stays
   visible either way so the one number anyone actually needs at a glance -
   how many countries are exhausted right now - never requires opening it. */
.allowance-details summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 8px; font-size: 13px; color: var(--ink-soft); padding: 2px 0;
}
.allowance-details summary::-webkit-details-marker { display: none; }
.allowance-details summary::before {
  content: "▸"; color: var(--blue); font-size: 11px; transition: transform .15s;
}
.allowance-details[open] summary::before { transform: rotate(90deg); }
.allowance-details summary .exhausted-count {
  color: #b03b3b; font-weight: 650;
}
.allowance-details .table-scroll { margin-top: 10px; max-height: 420px; overflow-y: auto; }

.budget-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; width: 170px; }
.budget-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.budget-bar span.bar-full { background: linear-gradient(90deg, #b03b3b, #d05555); }
tr.row-exhausted { background: #fdf4f4 !important; }
tr.row-exhausted:hover { background: #fbe9e9 !important; }
.pick-exhausted { opacity: .55; background: #fdf4f4; border-color: #f0cfcf; cursor: not-allowed; }
/* "ALL" sits first in each picker and is visually separated so it doesn't
   read as just another country. */
.pick-all { background: var(--pale); border-color: var(--blue-2); }
.pick-all:hover { background: var(--pale-2); }

/* ── Country settings ────────────────────────────────────── */
/* An enabled country reads as a solid chip with its own remove control,
   rather than a checkbox: nothing here is "submitted later", each click acts
   immediately, and a checkbox would imply otherwise. */
.pick-on { background: var(--pale); border-color: var(--blue-2); gap: 8px; }
/* An enabled country with a known limitation. Amber, not red: it IS being
   scraped and that is fine - the flag is a reminder for when its dashboard
   looks thinner than expected, not a warning that something is broken. */
.pick-warned { background: #fffaf0; border-color: #e3c07a; }
.pick-flag {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: #c88a2e; color: #fff;
  font-size: 10px; font-weight: 800; cursor: help; flex: none;
}
.inline-form { display: inline; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 11px; text-decoration: underline;
}
.linkish:hover { color: #b03b3b; }
.filter-box {
  width: 100%; max-width: 420px; margin-bottom: 12px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px;
}
#country-table td { vertical-align: top; }
/* The notes column carries the whole reason a country is or isn't usable, so
   give it the room and let it wrap rather than truncating the one thing the
   reader needs. */
#country-table td:nth-child(4) { max-width: 460px; white-space: normal; }
.pick-all strong { letter-spacing: .04em; font-size: 12px; color: var(--navy); }
.pick small { font-size: 10.5px; font-variant-numeric: tabular-nums; }

table.grid.mini { font-size: 12px; margin-top: 10px; }
table.grid.mini thead th { padding: 6px 9px; }
table.grid.mini tbody td { padding: 5px 9px; }
.mini-h { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
          color: var(--muted); margin: 16px 0 6px; }

.panel-running { border-left: 4px solid var(--blue); }
.btn-stop { padding: 8px 15px; border-radius: 8px; border: 0; background: #b03b3b;
            color: #fff; font-weight: 650; font-size: 13px; cursor: pointer; }
.btn-stop:hover { background: #8f2f2f; }
.warn-inline { color: var(--warn); font-size: 12px; }

.joblog-head { display: flex; justify-content: space-between; align-items: center;
               padding: 8px 12px; background: var(--navy); color: #fff;
               border-radius: 8px 8px 0 0; font-size: 12.5px; }
.joblog-state { font-weight: 700; }
.joblog-state.running { color: #7ee2ad; }
.joblog {
  margin: 0; padding: 14px; background: #10192b; color: #d6e2f5;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  max-height: 420px; overflow: auto; border-radius: 0 0 8px 8px;
  white-space: pre-wrap; word-break: break-word;
}
.upload-form { display: flex; flex-direction: column; gap: 4px; }
.upload-form select, .upload-form input[type=file] {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13.5px; margin-bottom: 6px;
}

/* ── Excel download ──────────────────────────────────────── */
.btn-download {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 650;
  background: var(--good); color: #fff; border: 0; white-space: nowrap;
}
.btn-download:hover { background: #18804e; text-decoration: none; color: #fff; }

/* ── Editor identity (top bar) ───────────────────────────── */
.editor-form { display: flex; align-items: center; gap: 8px; }
.signed-in-as { font-size: 12.5px; color: rgba(255,255,255,.85); white-space: nowrap; }
.editor-form button {
  padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: #fff; font-size: 12px; cursor: pointer;
}
.editor-form button:hover { background: rgba(255,255,255,.16); }

/* ── Login page ───────────────────────────────────────────── */
/* Standalone layout, not the dashboard's - see the comment in login.html on
   why it does not extend base.html. */
.login-body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: var(--bg); font-family: var(--sans);
}
.login-card {
  width: min(92vw, 380px); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px;
}
.login-brand { display: flex; justify-content: center; margin-bottom: 18px; }
/* The "AP" fallback stays square; the real logo is the wide banner, so only
   its height is pinned (see .brand-logo above for why width must be auto). */
.login-brand .brand-mark { width: 56px; height: 56px; }
.login-brand .brand-logo { height: 54px; width: auto; max-width: 240px; }
.login-form { display: flex; flex-direction: column; gap: 4px; }
.login-form label { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }
.login-form input {
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.login-form input:focus { outline: none; border-color: var(--blue-2); }

/* ── Importer links & status chips in tables ─────────────── */
.imp-link { font-weight: 600; color: var(--navy); }
.imp-link:hover { color: var(--blue); }
.status-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; vertical-align: middle;
  background: #eef1f6; color: #55617a; letter-spacing: .2px;
}
.status-contact-attempted { background: #e5eefb; color: var(--blue); }
.status-in-contact { background: #fff2d6; color: #9a6b12; }
.status-qualified { background: #e0f0fb; color: #2e6fa3; }
.status-quote-sent { background: #ede4fb; color: #6a3fb0; }
.status-deal-secured { background: #e0f3e9; color: var(--good); }
.status-not-interested { background: #eceef2; color: #8892a6; }
.status-deal-lost-to-competitor { background: #fbe4e4; color: #b03b3b; }

/* ── Importer detail page ────────────────────────────────── */
.detail-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.detail-grid .panel { margin: 0; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.contact-block .cfield { margin-bottom: 16px; }
.cflabel { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
/* Source badge (GlobalWits vs Google) on every contact field's label -
   deliberately not a text color on the VALUE itself, so it stays accessible
   (carries its own shape/text, not just hue) and never gets confused with a
   human-edited value, which is always plain black text with its own
   "edited by" note instead. GlobalWits stays a plain text pill ("GW") since
   there's no appropriate logo to use for it; Google gets its actual mark
   (see macros.html's google_icon), in a small neutral square matching the
   LinkedIn "in" mark's container (.emp-ico) so the two read as the same
   kind of thing - "an external mark identifying a source" - rather than
   two different visual languages. */
.src-badge { display: inline-block; vertical-align: middle; }
/* Replaces the source badge entirely once a human has overridden a field -
   a GlobalWits/Google badge next to a hand-typed value would misleadingly
   imply the value still came from that source. */
.manual-override-tag { font-weight: 700; color: var(--warn); }
.field-error { color: #b03b3b; font-size: 12.5px; font-weight: 600; margin: 4px 0 0; }

/* AI research assistant chat (Part 6) - reuses .note-item's bordered-row
   language (the closest existing analogue to a message bubble in this
   app) rather than inventing new chat-bubble styling from scratch. */
.chat-history { margin-bottom: 14px; max-height: 480px; overflow-y: auto; }
.chat-turn.chat-turn-user { border-left-color: var(--pale-2); }
.chat-turn.chat-turn-assistant { border-left-color: var(--good); background: #f7fbf9; }
.chat-turn.chat-turn-error { border-left-color: #f2c6c6; background: #fdf6f6; }
.chat-sources-toggle { margin-top: 10px; }
.chat-sources-toggle summary { cursor: pointer; font-size: 12px; }
/* Same explicit guard as .cfield-history-toggle - <details> content stayed
   visible when closed without it in this app's rendering. */
.chat-sources-toggle:not([open]) > .chat-sources { display: none; }
.chat-sources { margin: 6px 0 0; padding-left: 20px; font-size: 12px; color: var(--muted); }
.chat-sources li { margin-top: 2px; }
.chat-form { display: flex; gap: 8px; margin-top: 6px; }
.chat-input { flex: 1; }
.chat-preset { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
               padding-bottom: 10px; margin-bottom: 4px;
               border-bottom: 1px dashed var(--line); }
/* .btn-sm is defined further down this file and would otherwise win at
   equal specificity, leaving this button navy like every other one - the
   doubled class makes it order-independent rather than relying on where
   this rule happens to sit. */
.btn-sm.btn-preset { background: var(--good); white-space: nowrap; }
.btn-sm.btn-preset:hover { background: #17804f; }
.chat-thinking { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 6px 0 0; }

/* Standard htmx indicator pattern (htmx.org/docs/#indicators) - hidden
   until the request whose hx-indicator points here is in flight. */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }

/* /ai-usage: a user who has hit today's $/day cap - amber/warn, not the
   blue .row-high (that means "high-priority lead" elsewhere, a different
   semantic this must not borrow). */
tr.row-cap-hit { background: #fef6e9 !important; box-shadow: inset 3px 0 0 var(--warn); }
tr.row-cap-hit:hover { background: #fdecc8 !important; }
.src-badge.src-globalwits { padding: 0 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; background: #eef1f6; color: #55617a; }
.src-badge.src-google { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; background: #f1f3f4; }
.src-badge.src-google .src-ico { display: block; }
/* Shown instead of the single-value badge when GlobalWits and Google both
   have a value for a field AND disagree - both values are shown, each
   tagged with which source it came from, rather than silently picking one
   (GlobalWits winning by precedence doesn't mean GlobalWits was right).
   Same idea and class names in the compact leads/item tables (macros.html's
   contact_cell) and here on the importer detail page. */
.src-both { margin: 0 0 6px; font-size: 14px; overflow-wrap: anywhere; }
.src-tag { font-size: 12px; }
/* Colour-codes the whole "value (Source)" pair (not just the tag) so the
   two disagreeing values group visually at a glance, in the compact leads
   table as much as on the detail page. Both colours are dark/saturated
   enough to clear WCAG AAA (7:1) against a white background on their own -
   navy ~12:1, this green ~8:1 - and are never the ONLY signal either way,
   since the literal "(GlobalWits)"/"(Google)" text is always there too. The
   `a` selector is needed because website/email render as links, which
   otherwise carry their own explicit blue from the base `a` rule and would
   ignore a plain inherited color. */
.src-pair-globalwits, .src-pair-globalwits a { color: var(--navy); }
.src-pair-google, .src-pair-google a { color: #1b5e20; }
.src-cand-val { cursor: pointer; border-bottom: 1px dotted currentColor; }
.src-cand-val:hover { text-decoration: underline; }
.cfrow { display: flex; gap: 8px; flex-wrap: wrap; }
.cfinput { flex: 2; min-width: 180px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.cfinput:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(46,95,163,.12); }
.cfreason { flex: 2; min-width: 180px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--ink-soft); }
.cfreason:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(46,95,163,.12); }
.cfmeta { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.was, .reason { color: var(--ink-soft); font-style: italic; }
.cfield-history-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; }
.cfield-history-toggle { flex: 1; min-width: 0; margin-top: 0; }
.cfield-history-toggle summary { cursor: pointer; }
.cfield-history-toggle:not([open]) > .cfield-history { display: none; }
.cfield-history { margin-top: 8px; }
.cfield-history .note-item { padding: 4px 0 4px 10px; margin-bottom: 2px; }
.cfield-history .note-body { margin-top: 1px; }
.clear-history-form { flex-shrink: 0; }
.btn-link-danger { color: #b03b3b; }
.btn-link-danger:hover { color: #7a2727; }

.btn-sm { padding: 8px 14px; border-radius: 8px; border: 0; background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-sm:hover { background: var(--blue); }
.btn-link { background: none; border: 0; color: var(--blue); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.btn-link:hover { color: var(--navy); }

/* notes / status */
.status-line { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.status-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.status-pill { padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #eef1f6; color: #55617a; }
.status-pill.status-uncontacted { background: #eef1f6; color: #8892a6; }

.note-form { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fbfcfe; margin-bottom: 14px; }
.note-row { margin-bottom: 8px; }
.note-form select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; }
.note-form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; font-family: inherit; resize: vertical; margin-bottom: 8px; }
.note-form textarea:focus, .note-form select:focus { outline: none; border-color: var(--blue-2); }

.note-list { list-style: none; margin: 0; padding: 0; }
.note-item { border-left: 3px solid var(--pale-2); padding: 8px 0 8px 12px; margin-bottom: 6px; }
.note-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.status-chip.status-chip { } /* keep specificity for note chips */
.note-head .status-chip { margin-left: 0; }
.note-by { font-weight: 700; color: var(--ink-soft); }
.note-when { color: var(--muted); }
.note-body { font-size: 13.5px; color: var(--ink); margin-top: 3px; white-space: pre-wrap; }
.small.muted, .muted.small { font-size: 12px; }

@media (max-width: 640px) {
  .globalsearch input { width: 40vw; }
  .brand-text em { display: none; }
  .signed-in-as { display: none; }
  .wrap { padding: 18px 14px 48px; }
}