/* TapDex live CRM — visual language identical to data/match-enrich/out/bbg-demo.html */

:root {
  --bg: #fafaf7;
  --card: #fff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --border: #e6e4dc;
  --accent: #2d4f2d;       /* deep green */
  --warn: #b56b00;
  --danger: #9b2222;
  --info: #1a4a7a;
  --good: #2d6a3a;
  --row-hover: #f4f4ef;

  --hot:  #9b2222;
  --warm: #b56b00;
  --tied: #6b5111;
  --dead: #888;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.45;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 22px 24px 60px; }

h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
h1 .tag {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); background: rgba(45,79,45,0.08);
  padding: 3px 8px; border-radius: 3px; margin-left: 10px; vertical-align: middle;
}
.sub-h { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ─────────── filter bar (matches static demo) ─────────── */

.filterbar {
  margin: 18px 0 12px;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.filter-row { display:flex; gap: 6px; flex-wrap: wrap; }
.fbtn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 14px; min-width: 96px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  cursor: pointer; font-family: inherit; font-size: inherit; color: inherit;
  transition: all 0.12s ease;
}
.fbtn:hover { background: #f5f4ec; border-color: #c9c7bd; }
.fbtn.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.fbtn.active .fnum { color: #fff; }
.fbtn.active .flbl { color: #d6d6d6; }
.fnum { font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.flbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.fbtn.tier-hot  .fnum { color: var(--hot); }
.fbtn.tier-warm .fnum { color: var(--warm); }
.fbtn.tier-tied .fnum { color: var(--tied); }
.fbtn.tier-dead .fnum { color: var(--dead); }
.fbtn.ch-on  .fnum { color: var(--accent); }
.fbtn.ch-off .fnum { color: var(--warm); }
.fbtn.ch-non .fnum { color: var(--dead); }
.fbtn.deal-draught  .fnum { color: var(--accent); }
.fbtn.deal-packaged .fnum { color: #1a4a7a; }
.fbtn.deal-retail   .fnum { color: var(--warm); }
.fbtn.deal-non      .fnum { color: var(--dead); }
.fbtn.acq-clean     .fnum { color: var(--accent); }
.fbtn.acq-displace  .fnum { color: var(--hot); }
.fbtn.acq-defend    .fnum { color: var(--warm); }
.fbtn.acq-skip      .fnum { color: var(--dead); }
.fbtn.acq-unknown   .fnum { color: var(--info); }

/* Acquisition badge on cards */
.acq-badge { display: inline-block; font-size: 9px; font-weight: 700;
              text-transform: uppercase; letter-spacing: 0.05em;
              padding: 2px 7px; border-radius: 3px; margin-left: 8px;
              vertical-align: middle; }
.acq-free_clean_slate       { background: var(--accent); color: white; }
.acq-free_competitor_aligned { background: var(--hot); color: white; }
.acq-free_abi_present       { background: var(--warm); color: white; }
.acq-pubco_tied             { background: var(--dead); color: white; }
.acq-wetherspoon            { background: #444; color: white; }
.acq-inconclusive           { background: #e6f0ff; color: var(--info); }

.opp-figure { font-size: 11px; color: var(--accent); font-weight: 600; margin-left: 6px; }
.fbtn.spec   .fnum { color: var(--info); }
.fbtn.spec.rescue .fnum { color: var(--danger); }
.fbtn.spec.rescue { border-color: #f0c2bf; }
.card.hidden { display: none; }
.section.empty { display: none; }

/* secondary filters: search, council, country */
.subfilter {
  display: flex; gap: 8px; align-items: center; margin: 4px 0 8px;
  font-size: 12px; flex-wrap: wrap;
}
.subfilter input, .subfilter select {
  font: inherit; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card); min-width: 140px;
}
.subfilter input:focus, .subfilter select:focus { outline: none; border-color: var(--accent); }
.subfilter label { color: var(--muted); margin-right: 2px; font-size: 11px; }
.subfilter button {
  font: inherit; padding: 5px 12px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--accent); color: white; cursor: pointer;
}
.subfilter button.secondary { background: var(--card); color: var(--accent); }
.subfilter .info { margin-left: auto; color: var(--muted); font-size: 11px; }

/* ─────────── stats topline ─────────── */

.topline {
  margin: 14px 0 24px;
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 5px;
}
.topline .item { display: flex; align-items: baseline; gap: 6px; }
.topline .item .num { font-size: 18px; font-weight: 600; }
.topline .item .lbl { color: var(--muted); font-size: 11px; }
.topline .item.hot  .num { color: var(--hot); }
.topline .item.warm .num { color: var(--warm); }
.topline .item.tied .num { color: var(--tied); }
.topline .item.dead .num { color: var(--dead); }

/* ─────────── tier sections ─────────── */

details.section { margin-bottom: 22px; }
details.section summary { display:flex; align-items:baseline; gap:16px; cursor:pointer; padding: 10px 0; border-bottom: 2px solid var(--border); }
details.section summary::-webkit-details-marker { display:none; }
details.section h2 { margin:0; font-size:18px; font-weight:600; letter-spacing:-0.01em; }
details.section h2 .count { font-size:14px; color:var(--muted); font-weight:400; margin-left: 6px; }
details.section .section-sub { font-size: 12px; color: var(--muted); }
details.hot summary { border-bottom-color: var(--hot); }
details.hot h2 { color: var(--hot); }
details.warm summary { border-bottom-color: var(--warm); }
details.warm h2 { color: var(--warm); }
details.tied summary { border-bottom-color: var(--tied); }
details.tied h2 { color: var(--tied); }
details.dead summary { border-bottom-color: var(--dead); }
details.dead h2 { color: var(--dead); }

/* ─────────── cards (matches static demo) ─────────── */

.card { background: var(--card); border: 1px solid var(--border); border-radius: 6px;
         padding: 14px 18px; margin: 10px 0; border-left-width: 4px; overflow: hidden; }
.card-hot  { border-left-color: var(--hot); }
.card-warm { border-left-color: var(--warm); }
.card-tied { border-left-color: var(--tied); background: #fafaf5; }
.card-dead { border-left-color: var(--dead); background: #f6f6f6; opacity: 0.85; }

/* hero photo (mirrors static demo: 180px float-right with grayscale on DEAD) */
.card-photo { float: right; width: 180px; margin: 0 0 10px 14px; }
.card-photo img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px;
                   border: 1px solid var(--border); display: block; background: #eee; }
.card-photo.placeholder { width: 180px; height: 120px; background: #efece2; border-radius: 4px;
                            border: 1px solid var(--border); display: flex; align-items: center;
                            justify-content: center; color: var(--muted); font-size: 11px; font-style: italic; }
.card-dead .card-photo img { opacity: 0.55; filter: grayscale(0.6); }
@media (max-width: 640px) {
  .card-photo { float: none; width: 100%; margin: 0 0 10px 0; }
  .card-photo img { height: 160px; }
}

/* FSA Food Hygiene rating chip */
.fsa { font-size: 11px; padding: 2px 7px; border-radius: 3px; background: var(--bg);
        border: 1px solid var(--border); font-weight: 500; }
.fsa.good { background:#d6ead6; color:#2d4f2d; border-color:#b9d2af; }
.fsa.ok { background:#fff4d6; color:#855e10; border-color:#ebd8a2; }
.fsa.bad { background:#fce5e0; color:#9b2222; border-color:#e6b2b2; }
.fsa.exempt { background:#ebebeb; color:#555; border-color:#ddd; }

/* Companies House status chip */
.ch { font-size: 11px; padding: 2px 7px; border-radius: 3px; text-decoration: none; }
.ch.active { background:#d6ead6; color:#2d4f2d; border:1px solid #b9d2af; }
.ch.dissolved { background:#fce5e0; color:#9b2222; border:1px solid #e6b2b2; }
.ch.unknown { background:#e6f0ff; color:#1a4a7a; border:1px solid #cdddee; }
a.ch:hover { text-decoration: underline; }

/* compliance flag chips (TPS / CTPS / DNC / mobile) */
.comp-flag { font-size: 10px; font-weight: 600; text-transform: uppercase;
              letter-spacing: 0.04em; padding: 2px 7px; border-radius: 3px; margin-right: 4px; }
.comp-dnc  { background:#fce5e0; color:#9b2222; }
.comp-tps  { background:#fde8c2; color:#7a4810; }
.comp-ctps { background:#fde8c2; color:#7a4810; }
.comp-mob  { background:#e6f0ff; color:#1a4a7a; }

.card-head { display:flex; align-items:flex-start; gap:12px; }
.rownum { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; min-width:24px; padding-top:3px; }
.title-block { flex:1; }
.title { font-weight:600; font-size:16px; }
.gmaps-link { font-size:11px; color:var(--accent); text-decoration:none; margin-left:8px; font-weight:400; }
.gmaps-link:hover { text-decoration:underline; }
.sub { font-size:12px; color:var(--muted); margin-top: 2px; }
.trade-chip { display:inline-block; font-size: 10px; font-weight: 700;
               text-transform: uppercase; letter-spacing: 0.05em;
               padding: 2px 7px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }
.trade-on { background:#2d4f2d; color:#fff; }
.trade-off { background:#7a4810; color:#fff; }
.trade-non { background:#bdbdbd; color:#fff; }
.venue-pill { display:inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 3px; margin-left:8px; vertical-align: middle; }
.venue-pub { background:#dbe7d5; color:#2d4f2d; }
.venue-hotel { background:#fde7c3; color:#7a4810; }
.venue-restaurant { background:#fce0e0; color:#7a2424; }
.venue-cafe { background:#efe2cf; color:#6a4a1a; }
.venue-club { background:#d6e0ee; color:#1a4a7a; }
.venue-shop { background:#ebebeb; color:#444; }
.venue-other { background:#f3f3f3; color:#888; }

/* contact lines */
.contact-line { margin: 10px 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.contact-line .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.contact-name { font-weight:600; font-size:15px; }
.contact-sub { font-size:11px; color:var(--muted); }

.meta { font-size:12px; color:var(--text); margin: 4px 0; }
.meta .k { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; margin-right:6px; }

/* chip row (alcohol, late-night, places rating, hours, etc.) */
.chips { margin-top: 8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:10px; background:var(--bg); border:1px solid var(--border); }
.badge.alc { background:#fce8c0; color:#856220; border-color:#ebd8a2; }
.badge.late { background:#efe3f5; color:#58366b; border-color:#d8c6e6; }
.badge.guinndex { background:#e6f0ff; color:#1a4a7a; border-color:#cdddee; }
.badge.distress { background:#fce5e0; color:#9b2222; border-color:#e6b2b2; }
.places-rating { font-size: 11px; padding: 2px 7px; border-radius: 3px; background: #fff4d6; color: #855e10; border: 1px solid #ebd8a2; font-weight: 500; }
.places-link { font-size: 11px; padding: 2px 7px; border-radius: 3px; background: var(--bg); color: var(--accent); text-decoration: none; border: 1px solid var(--border); }
.gx-confirmed { font-size: 12px; padding: 3px 9px; border-radius: 4px; background: var(--accent); color: white; font-weight: 600; }
.hours { font-size: 11px; color: var(--muted); }
.dps-current { display: inline-block; font-size: 9px; font-weight: 600; text-transform: uppercase;
                letter-spacing: 0.05em; padding: 1px 5px; border-radius: 2px;
                background: var(--accent); color: #fff; margin-left: 4px; vertical-align: middle; }
.side-flag { font-size: 11px; padding: 2px 7px; border-radius: 3px; margin-right: 4px; }
.flag-fresh { background: #efe3f5; color: #58366b; border: 1px solid #d8c6e6; }
.flag-dps { background: #fff4cc; color: #6b4d00; border: 1px solid #ead999; font-weight: 600; }

/* activity hours (collapsible) */
details.actfull { margin-top: 8px; font-size: 12px; }
details.actfull summary { cursor: pointer; color: var(--muted); padding: 4px 0; list-style: none; outline: none; }
details.actfull summary::before { content: "▸ "; }
details.actfull[open] summary::before { content: "▾ "; }
details.actfull summary::-webkit-details-marker { display: none; }
details.actfull .actfull-section { margin-top: 6px; padding-left: 14px; }
details.actfull .actfull-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
                                  color: var(--muted); font-weight: 600; margin-top: 6px; }
details.actfull ul { margin: 4px 0 0 0; padding-left: 18px; }
details.actfull li { margin: 2px 0; }

.why { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; font-style: italic; color: var(--muted); }

.sources { font-size: 11px; color: var(--muted); margin-top: 10px;
           padding-top: 8px; border-top: 1px dashed var(--border); line-height: 1.7; }
.sources .src { display: inline-block; margin-right: 4px; }
.sources a { color: var(--muted); text-decoration: underline; }
.sources code { background: #f3f3ef; padding: 0 4px; border-radius: 2px; font-size: 10px; }
code.pc { font-family: ui-monospace, monospace; font-size: 11px; }

.paginator {
  margin-top: 24px; display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--muted);
}
.paginator button {
  font: inherit; padding: 5px 14px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); cursor: pointer;
}
.paginator button:disabled { color: var(--muted); cursor: not-allowed; }

.loading { color: var(--muted); padding: 20px 0; text-align: center; font-style: italic; }

/* card is clickable */
.card { cursor: pointer; transition: box-shadow 0.12s ease; }
.card:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.08); }
.card a { cursor: auto; }  /* don't override nested link cursors */

/* ──────────── detail view ──────────── */

.back-link {
  display: inline-block; margin-bottom: 14px; font-size: 13px;
  color: var(--accent); text-decoration: none; font-weight: 500;
}
.back-link:hover { text-decoration: underline; }

.detail-hero {
  width: 100%; height: 320px; border-radius: 6px; overflow: hidden;
  margin-bottom: 14px; background: #efece2;
  border: 1px solid var(--border); position: relative;
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-style: italic;
}
.detail-hero.dead img { opacity: 0.6; filter: grayscale(0.5); }

.detail-head { margin-bottom: 22px; }
.detail-head h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.detail-head .h-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
.detail-head .h-sub { color: var(--muted); font-size: 13px; }
.detail-head .h-sub code { font-family: ui-monospace, monospace; }

.tier-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 3px; color: #fff;
}
.tier-badge.HOT  { background: var(--hot); }
.tier-badge.WARM { background: var(--warm); }
.tier-badge.TIED { background: var(--tied); }
.tier-badge.DEAD { background: var(--dead); }

.quickstats {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 22px;
}
.quickstats .qs { display: flex; flex-direction: column; gap: 2px; }
.quickstats .qs .num { font-size: 18px; font-weight: 600; line-height: 1; }
.quickstats .qs .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* sections in detail view */
section.detail-block {
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  padding: 16px 20px; margin-bottom: 16px;
}
section.detail-block h2 {
  font-size: 13px; font-weight: 600; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
section.detail-block.empty { display: none; }

.kv-grid {
  display: grid; grid-template-columns: 140px 1fr; gap: 8px 18px;
  font-size: 13px;
}
.kv-grid .k { color: var(--muted); font-size: 11px; text-transform: uppercase;
                letter-spacing: 0.05em; padding-top: 3px; }
.kv-grid .v { color: var(--text); }
.kv-grid .v code { font-family: ui-monospace, monospace; font-size: 11px;
                    background: var(--bg); padding: 1px 5px; border-radius: 3px; }
.kv-grid .v a { color: var(--accent); }
.kv-grid ul { margin: 0; padding-left: 18px; }
.kv-grid ul li { margin: 3px 0; }

.history-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.history-table th, .history-table td {
  padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border);
}
.history-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600;
}
.history-table tr:last-child td { border-bottom: none; }
.history-table .pill {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.history-table .pill.granted  { background: #d6ead6; color: var(--accent); }
.history-table .pill.pending  { background: #fff4d6; color: #855e10; }
.history-table .pill.refused  { background: #fce5e0; color: var(--danger); }
.history-table .pill.withdrawn { background: #ebebeb; color: #555; }

.detail-block .activity-grid {
  font-size: 12px; line-height: 1.6;
}
.detail-block .activity-grid li { margin: 2px 0; }

.detail-block .hours-grid {
  display: grid; grid-template-columns: 90px 1fr; gap: 4px 14px;
  font-size: 12px;
}
.detail-block .hours-grid .day { color: var(--muted); }

.detail-footer {
  font-size: 11px; color: var(--muted); text-align: center; margin-top: 20px;
}

/* ──────────── header / map ──────────── */

.header-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.view-toggle {
  display: inline-block; padding: 7px 14px; background: var(--accent); color: white;
  text-decoration: none; border-radius: 4px; font-size: 13px; font-weight: 500;
}
.view-toggle:hover { background: #214021; }

#view-map { width: 100vw; height: 100vh; display: flex; flex-direction: column;
              position: fixed; top: 0; left: 0; background: var(--bg); }
.map-topbar { display: flex; align-items: center; gap: 16px; padding: 10px 18px;
                background: var(--card); border-bottom: 1px solid var(--border);
                font-size: 13px; }
.map-topbar .back-link { margin: 0; }
.map-title { font-weight: 600; }
.map-counts { color: var(--muted); margin-left: auto; }
.map-counts .hot  { color: var(--hot); font-weight: 600; }
.map-counts .warm { color: var(--warm); font-weight: 600; }
.map-counts .tied { color: var(--tied); font-weight: 600; }
.map-counts .dead { color: var(--dead); font-weight: 600; }
#map-container { flex: 1; min-height: 0; }
.leaflet-popup-content { font-family: inherit; font-size: 13px; }
.leaflet-popup-content a.popup-link {
  display: inline-block; margin-top: 4px; padding: 3px 10px;
  background: var(--accent); color: white; text-decoration: none;
  border-radius: 3px; font-size: 12px;
}
.leaflet-popup-content .pop-tier {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 6px; border-radius: 3px; color: white;
}
.pop-tier.HOT  { background: var(--hot); }
.pop-tier.WARM { background: var(--warm); }
.pop-tier.TIED { background: var(--tied); }
.pop-tier.DEAD { background: var(--dead); }

/* ── On tap (chain menu scrape) ── */
.blk-sub { font-weight: 400; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.taps-stats { display: flex; gap: 26px; margin-bottom: 14px; }
.taps-stats .qs { display: flex; flex-direction: column; gap: 2px; }
.taps-stats .qs .num { font-size: 18px; font-weight: 600; line-height: 1; }
.taps-stats .qs .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.taps-stats .qs.abi .num { color: #9a7400; }
.brewer-groups { display: flex; flex-direction: column; gap: 8px; }
.brewer-group { border: 1px solid var(--border); border-radius: 7px; padding: 8px 11px; background: var(--card); }
.brewer-group.abi { border-color: #d9b65a; background: #fdf7e6; }
.brewer-group.uncl { opacity: 0.72; }
.bg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.bg-name { font-weight: 600; font-size: 13px; }
.bg-count { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; }
.brewer-group.abi .bg-count { background: #f2e2b0; border-color: #d9b65a; color: #6b5111; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.brand-chip { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.brewer-group.abi .brand-chip { background: #fff; border-color: #e4d196; }