/* 08_manual_review_event — light theme, mirrors 10_dashboard. No dark palette. */
:root {
  --text-secondary: #6b7280;
}
* { box-sizing: border-box; }
body { font-family:-apple-system,"Segoe UI",Roboto,sans-serif; margin:0; background:#f5f6f8; color:#1f2937; font-size:15px; }
.wrap { max-width:none; margin:0; padding:16px 20px 90px; }

/* Left side nav shell */
.layout { display:flex; align-items:flex-start; width:100%; }
.sidenav { position:sticky; top:0; align-self:flex-start; width:150px; flex:none; min-height:100vh;
  background:#fff; border-right:1px solid #e5e7eb; padding:16px 10px; display:flex; flex-direction:column; gap:16px; }
.sidenav .brand { font-size:22px; font-weight:800; color:#111827; line-height:1.1; }
.sidenav .brand small { display:block; font-size:18px; font-weight:700; color:#374151; margin-top:3px; }
.side-group { display:flex; flex-direction:column; gap:5px; }
.side-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#9ca3af; margin-bottom:2px; }
.sidenav .divider { height:1px; background:#f1f3f5; }
.sidenav .navbtn { display:block; width:100%; text-align:left; margin:0; font-size:14px; padding:6px 10px; }
.sidenav .badges { flex-direction:column; align-items:stretch; gap:5px; justify-content:flex-start; }
.sidenav .badge { text-align:center; font-size:12px; }
.sidenav .user { display:flex; flex-direction:column; gap:6px; align-items:stretch; font-size:13px; }
.sidenav .user .user-label { color:#6b7280; }
.sidenav .user .user-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:#111827; }
.sidenav .user button { width:100%; margin:0; padding:5px 8px; font-size:12px; font-weight:600; text-align:center; }
.main { flex:1; min-width:0; }

/* Header */
.top { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:8px; }
.top h1 { margin:0; font-size:26px; font-weight:700; }
.top .sub { font-size:13px; color:#6b7280; }
.navbtn {
  display:inline-block;
  font-size:14px;
  font-weight:600;
  padding:4px 12px;
  margin-left:6px;
  color:#2563eb;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:6px;
  text-decoration:none;
  cursor:pointer;
}
.navbtn:hover { background:#dbeafe; }
.navbtn.active {
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  cursor:default;
}
.navbtn.active:hover { background:#2563eb; }
.badges { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.badge { padding:4px 10px; border-radius:4px; font-size:12px; font-weight:600; }
.badge.dry { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }
.badge.live { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.badge.stop { background:#7f1d1d; color:#fff; border:1px solid #991b1b; }
.badge.dry-unset { background:#fef3c7; color:#92400e; border:1px solid #fbbf24; }
.user { font-size:13px; color:#374151; }
.user button { margin-left:8px; padding:3px 10px; border:1px solid #d1d5db; background:#fff; border-radius:4px; cursor:pointer; font-size:12px; }
.user a { text-decoration:none; }

/* Controls */
.controls { display:flex; justify-content:space-between; align-items:center; margin:20px 0 0; gap:16px; flex-wrap:wrap; }
.page-pick { display:flex; align-items:center; gap:8px; font-size:14px; }
.page-pick select { padding:6px 10px; font-size:14px; border:1px solid #d1d5db; border-radius:4px; background:#fff; }
.date-range input[type="date"] { padding:5px 8px; font-size:14px; border:1px solid #d1d5db; border-radius:4px; background:#fff; }
.date-range .btn-secondary { padding:5px 12px; }
.trunc-note { margin:8px 0; padding:6px 10px; background:#fef3c7; border:1px solid #fcd34d; border-radius:6px; color:#92400e; font-size:13px; }
.mode-tag { font-size:11px; padding:2px 8px; background:#eef2ff; color:#4338ca; border-radius:10px; margin-left:4px; }
.mode-tag.rule { background:#e0e7ff; color:#3730a3; }

/* Tabs */
.tabs { display:flex; gap:0; border-bottom:1px solid #e5e7eb; margin-top:12px; }
.tab { flex:0 0 128px; box-sizing:border-box; text-align:center; padding:10px 0; cursor:pointer; font-size:14px; color:#6b7280; border-bottom:2px solid transparent; user-select:none; }
.tab.active { color:#111827; border-bottom-color:#2563eb; font-weight:600; }
.tab .count { display:inline-block; min-width:24px; box-sizing:border-box; text-align:center; font-variant-numeric:tabular-nums; margin-left:6px; font-size:11px; padding:1px 6px; background:#e5e7eb; border-radius:8px; color:#374151; }
.tab-link { text-decoration:none; color:inherit; }

/* Two-column body — left panel is a FIXED width so column positions never
   shift between pages, tabs, or data sets. 908 + 24 gap + 520 = 1452 (.wrap). */
.body { display:grid; grid-template-columns:862px minmax(0,1fr); gap:20px; margin-top:16px; align-items:start; justify-content:start; }
.left-col { min-width:0; }

/* Deterministic columns: widths come from the <th> styles only, never from row
   content. Applied per-table via class so the /ads stats table is untouched. */
table.fixed-cols { table-layout:fixed; width:100%; }
table.fixed-cols th { overflow:hidden; }
table.fixed-cols th, table.fixed-cols td { padding:9px 5px; }

/* Name column (was ID): 20-char budget with ellipsis; ×N / Lead-form badges sit
   outside the clipped span so they stay visible. Full name + old ID on hover. */
.name-cell .name-text { display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.right-col { position:sticky; top:16px; }

/* Table */
table { width:max-content; max-width:100%; border-collapse:collapse; background:#fff; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; }
th, td { padding:9px 8px; text-align:left; font-size:14px; border-bottom:1px solid #f1f3f5; white-space:nowrap; }
th { background:#fafbfc; font-weight:600; color:#374151; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; }
tr:last-child td { border-bottom:none; }
tr.row-clickable { cursor:pointer; }
tr.row-clickable:hover { background:#f9fafb; }
tr.row-selected { background:#eff6ff !important; }
tr.row-open { background:#dbeafe !important; box-shadow:inset 3px 0 0 #2563eb; }
.id-cell { font-family:ui-monospace,"SF Mono",monospace; font-weight:600; color:#6b7280; }

/* Adset / Ad columns: 15ch ellipsis with title hover */
.ad-cell { max-width:15ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-cell { max-width:230px; overflow:hidden; text-overflow:ellipsis; }
.note { font-size:12px; color:#6b7280; margin-top:8px; font-style:italic; }

/* Graded-by tags (Script / Guard / AI T1 / AI T2) */
.by-tag { display:inline-block; padding:1px 7px; border-radius:4px; font-size:11px; font-weight:600; }
.by-script { background:#f3f4f6; color:#4b5563; }
.by-07guard { background:#fef3c7; color:#92400e; }
.by-ait1   { background:#dbeafe; color:#1d4ed8; }
.by-ait2   { background:#ede9fe; color:#5b21b6; }

/* Grade pills */
.pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; }
.pill.sales_call { background:#ede9fe; color:#5b21b6; }
.pill.contact   { background:#cffafe; color:#155e75; }
.pill.purchase  { background:#ede9fe; color:#5b21b6; }
.pill.schedule  { background:#dbeafe; color:#1e40af; }
.pill.lead      { background:#d1fae5; color:#065f46; }
.pill.spam      { background:#fee2e2; color:#991b1b; }
.pill.no_action { background:#e5e7eb; color:#374151; }
.pill.expired   { background:#ffedd5; color:#9a3412; }

/* Send Log: lead-form source tag + sales letter */
.src-lead { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; background:#eef2ff; color:#4338ca; vertical-align:middle; }
/* Lead form tab: every row is a lead — the source chip is redundant there. */
#tbody.hide-src-lead .src-lead { display:none; }
.sales-letter { display:inline-block; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700; background:#f3f4f6; color:#374151; }

/* Next (what-if) tags */
.next { font-size:11px; font-weight:600; }
.next-auto        { color:#166534; }
.next-autorule    { color:#3730a3; }
.next-humanreview { color:#92400e; }

/* Drawer */
.drawer { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:18px; box-shadow:0 4px 12px rgba(0,0,0,.05); min-height:120px; }
.drawer-empty { text-align:center; color:#9ca3af; padding:60px 20px; font-size:13px; }
.drawer h3 { margin:0 0 10px; font-size:17px; overflow:hidden; display:flex; align-items:center; }
.drawer h3 .hdr-regrade { margin-left:6px; }
.drawer h3 .hdr-2line { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.drawer .meta { font-size:12px; color:#6b7280; margin-bottom:14px; }
.drawer .close-btn { float:right; cursor:pointer; color:#9ca3af; font-size:18px; line-height:1; background:none; border:none; padding:0; }
.drawer .copy-btn { float:right; margin-right:8px; cursor:pointer; color:#374151; font-size:11px; line-height:1.4; background:#fff; border:1px solid #d1d5db; border-radius:4px; padding:2px 8px; }
.drawer .copy-btn.copied { color:#16a34a; border-color:#16a34a; }
.audit { background:#f3f4f6; border-left:3px solid #6b7280; padding:9px 11px; font-size:13px; margin-bottom:12px; border-radius:4px; font-weight:500; }
.audit .lbl { color:#6b7280; font-weight:400; }
.drawer-label { font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:12px 0 6px; }
.rationale { background:#fef9c3; border-left:3px solid #eab308; padding:8px 11px; font-size:13px; margin-bottom:12px; border-radius:4px; line-height:1.5; }
.thread-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#6b7280; margin:0 0 4px; }
.thread { background:#f9fafb; border-radius:6px; padding:10px; margin-bottom:14px; max-height:calc(100vh - 260px); overflow-y:auto; }
.msg { margin:11px 0; max-width:82%; }
.msg.lead { margin-right:auto; }
.msg.page { margin-left:auto; text-align:right; }
.bubble { padding:7px 11px; border-radius:12px; font-size:13px; line-height:1.4; display:inline-block; text-align:left; word-break:break-word; white-space:pre-wrap; }
.msg.lead .bubble { background:#fff; border:1px solid #e5e7eb; border-bottom-left-radius:4px; }
.msg.page .bubble { background:#2563eb; color:#fff; border-bottom-right-radius:4px; }
.msg .ts { font-size:10px; color:#9ca3af; margin-top:2px; }
.bubble .bubble-media { display:block; max-width:240px; max-height:280px; width:auto; height:auto; border-radius:8px; }

/* Approval Gate only: left table capped at 18 rows (scrolls inside, header pinned);
   right drawer height locked to the left column's height; transcript scrolls inside.
   Row math: td 20px line + 18px padding + 1px border = 39px; th 16+18+1 = 35px. */
.page-gate .body { align-items:stretch; }
.page-gate .tbl-box { background:#fff; border:1px solid #e5e7eb; border-radius:6px; overflow-y:auto; max-height:calc(35px + 18 * 39px); }
.page-gate .tbl-box table { border:none; border-radius:0; min-width:100%; max-width:none; overflow:visible; }
.page-gate thead th { position:sticky; top:0; z-index:1; line-height:16px; box-shadow:0 1px 0 #e5e7eb; }
.page-gate #tbody td { line-height:20px; }
.page-gate .right-col { position:relative; top:auto; height:calc(35px + 18 * 39px); }
.page-gate .drawer-empty { padding:12px 20px; }
.page-gate .drawer { position:absolute; inset:0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; }
.page-gate #drawerContent { flex:1; min-height:0; flex-direction:column; }
.page-gate #drawerContent .close-btn { position:absolute; top:12px; right:14px; }

/* Lead-row drawer: no transcript to scroll — panel fits its content. */
.page-gate .drawer.drawer-lead { position:static; inset:auto; height:auto; overflow:visible; }
.page-gate .drawer.drawer-lead #drawerContent { flex:none; }
.page-gate .thread { flex:1; min-height:0; max-height:none; }
.drawer .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.tbl-loading, .tbl-empty { text-align:center; color:#9ca3af; padding:24px; font-size:13px; }

/* Buttons */
.btn-primary, .btn-secondary { padding:7px 16px; font-size:13px; border-radius:4px; cursor:pointer; border:1px solid #d1d5db; background:#fff; color:#374151; }
.btn-primary { background:#2563eb; color:#fff; border-color:#2563eb; }
.btn-primary:disabled { background:#93c5fd; border-color:#93c5fd; cursor:not-allowed; }

/* Dispatch commit buttons — orange (action bar + confirm modal) */
#btnDispatch, #modalConfirm { background:#f59e0b; border-color:#f59e0b; }
#btnDispatch:hover, #modalConfirm:hover { background:#d97706; border-color:#d97706; }

/* Floating action bar — centered, same level as the inline search bar */
.actionbar { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:none;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.12);
  padding:12px 18px; align-items:center; gap:18px; z-index:50; white-space:nowrap; }
.actionbar.visible { display:flex; }
.actionbar-btns { display:flex; gap:8px; }

/* Confirm modal */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index:100; }
.modal-overlay.active { display:flex; }
.modal-card { background:#fff; border-radius:10px; width:440px; max-width:92vw; box-shadow:0 12px 40px rgba(0,0,0,.2); overflow:hidden; }
.modal-head { padding:16px 20px; font-size:16px; font-weight:700; border-bottom:1px solid #e5e7eb; }
.modal-body { padding:18px 20px; font-size:13px; color:#374151; }
.modal-foot { padding:14px 20px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid #e5e7eb; }
.summary { margin-top:12px; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; }
.summary-item { display:flex; justify-content:space-between; padding:7px 12px; border-bottom:1px solid #f1f3f5; }
.summary-item:last-child { border-bottom:none; }
.modal-warn { margin-top:12px; font-size:12px; color:#b91c1c; font-weight:500; }

/* Group-by-customer badge (×N) */
.group-badge { display:inline-block; margin-left:5px; padding:1px 5px; background:#dbeafe; color:#1d4ed8; border-radius:8px; font-size:10px; font-weight:700; vertical-align:middle; }

/* Combined-thread session divider */
.thread-divider { text-align:center; font-size:11px; color:#9ca3af; padding:8px 0 4px; font-family:ui-monospace,"SF Mono",monospace; border-top:1px solid #e5e7eb; margin:8px 0 4px; }
.thread-divider:first-child { border-top:none; margin-top:0; }

/* Drawer session-combined note */
.session-combined-note { font-size:12px; color:#6b7280; font-weight:400; }

/* Leads-specific */
.pill.warn { background:#fef3c7; color:#92400e; border:1px solid #fbbf24; }
.lead-fields { margin-bottom:12px; }
.field-row { display:flex; gap:8px; padding:4px 0; border-bottom:1px solid #f1f3f5; font-size:13px; }
.field-row:last-child { border-bottom:none; }
.field-name { color:#6b7280; min-width:110px; flex-shrink:0; }
.field-value { font-weight:500; word-break:break-all; }
.flag { color:#dc2626; font-weight:600; margin-left:8px; font-size:12.5px; }

/* Grade picker — old layout (kept for conversation path) */
.grade-picker { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; font-size:13px; }
.grade-picker label { display:flex; align-items:center; gap:4px; cursor:pointer; }

/* Grade picker — sales-grade cards (A–F/S) — compact */
.grade-list { display:flex; flex-direction:column; gap:3px; }
.grade-item { display:flex; align-items:flex-start; gap:8px; border:1px solid #e5e7eb; border-radius:6px; padding:5px 10px; cursor:pointer; transition:background .1s, border-color .1s; }
.grade-item:hover { background:#f9fafb; }
.grade-item input { margin-top:3px; accent-color:#2563eb; }
.grade-item.selected { border-color:#2563eb; background:#eff6ff; }
/* min-width, not width: every grade was one character until SPAM (2026-08-01),
   which overflows a fixed 16px box into the definition text beside it. */
.g-letter { font-weight:700; font-size:14px; min-width:16px; flex:none; }
.g-def { font-size:13px; line-height:1.35; }
.g-arrow { color:#9a3412; background:#ffedd5; font-weight:600; padding:1px 7px; border-radius:4px; }
.f-grid { display:grid; grid-template-columns:repeat(5,max-content); column-gap:8px; row-gap:0; }
.f-grid .p { color:#9ca3af; }
.g-event { margin-left:auto; flex:none; font-size:10.5px; padding:1px 7px; border-radius:999px; align-self:center; }
.ev-send { background:#e5e7eb; color:#374151; border:1px solid #d1d5db; }
.ev-none { background:#f9fafb; color:#9ca3af; border:1px solid #f3f4f6; }

/* Grade picker actions */
.grade-list + .actions { margin-top:10px; display:flex; gap:8px; justify-content:flex-end; }
.btn { padding:8px 18px; border-radius:8px; font-size:14px; cursor:pointer; border:1px solid #d1d5db; background:#fff; }
.btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.btn.primary:disabled { opacity:.45; cursor:not-allowed; }

/* Login */
.login-container { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.08); padding:36px 32px; width:360px; max-width:92vw; }
.login-header { text-align:center; margin-bottom:24px; }
.brand-logo { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#2563eb,#7c3aed); }
.login-title { margin:14px 0 0; font-size:20px; font-weight:700; }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }
.form-input { width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; }
.form-input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.login-btn { width:100%; margin-top:8px; }
.error-banner { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; border-radius:6px; padding:9px 12px; font-size:13px; margin-bottom:16px; }

/* Inline name search bar (Phase 1 — layout only) */
.page-search { margin: 10px 0; display: flex; align-items: center; gap: 8px; position: relative; }
.page-search-input { flex: 0 1 420px; padding: 7px 10px 7px 34px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; background-size: 16px 16px; }
.page-search-note { font-size: 13px; color: #6b7280; }

/* Bucket tag — Review Waiting vs Send Log, in the inline-search "Where" column
   and drawer title. Mirrors the inline styles in search.ejs so the Send Log /
   Review Waiting pages (which load only style.css) render them identically. */
.bucket-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.bucket-review_waiting { background: #e0f2fe; color: #075985; }
.bucket-send_log       { background: #f1f5f9; color: #475569; }
.bucket-lead           { background: #fef3c7; color: #92400e; }

/* Sales draft block — the grade + call note captured on the mobile /m surface,
   shown in both desktop drawers above the grade control. Read-only here; the
   admin's own selection is what dispatch sends. */
.sales-draft { margin-top:12px; padding:8px 10px; border:1px solid #e5e7eb; border-left:3px solid #FF9200; border-radius:6px; background:#fffbf5; }
.sales-draft-hd { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#6b7280; display:flex; align-items:center; gap:6px; }
.sales-draft-reason { font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; color:#b45309; }
.sales-draft-by { margin-left:auto; font-weight:500; text-transform:none; letter-spacing:0; color:#9ca3af; }
.sales-draft-note { margin-top:6px; font-size:13px; line-height:1.45; color:#374151; white-space:pre-wrap; }

/* Send Log note column — one truncated line, full text on hover. */
.note-cell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#4b5563; font-size:13px; }