/* coverage.css -- the "Coverage map" screen (Private Bank). Every rule is scoped
   under #coverage-tab. Layout follows docs/design/private-bank/screenshots/05-coverage-map.png:
   toggles, map + three stat cards, then the missed-pockets list with the redraw action.
   Tokens come from shell.css; fallbacks keep it right if they have not loaded. */

#coverage-tab.tab-content { overflow-y: auto; overflow-x: hidden; align-items: stretch; gap: 20px; }
#coverage-tab *, #coverage-tab *::before, #coverage-tab *::after { box-sizing: border-box; }
#coverage-tab > * { min-width: 0; }

#coverage-tab .cv-head { display: block; }
#coverage-tab .cv-state, #coverage-tab .cv-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#coverage-tab [hidden] { display: none !important; }

#coverage-tab .cv-card { background: var(--pb-surface, #fffdf8); border: 1px solid var(--pb-line, rgba(20,33,61,.11)); border-radius: 14px; min-width: 0; }
#coverage-tab .cv-state .cv-card { padding: 24px; max-width: 640px; }
#coverage-tab .cv-state h3 { margin: 0 0 8px; font: 600 22px/1.25 var(--pb-display, 'Space Grotesk', sans-serif); color: var(--pb-ink, #14213d); }
#coverage-tab .cv-state p { margin: 0 0 14px; font: 400 17px/1.5 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-2, #2c3a52); }
#coverage-tab .cv-muted { color: var(--pb-ink-3, #4b5363); font: 400 16px/1.5 var(--pb-body, Inter, sans-serif); margin: 0; }
#coverage-tab .cv-pad { padding: 18px 24px; }

/* controls */
#coverage-tab .cv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
#coverage-tab .cv-pick { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--pb-mono, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--pb-ink-4, #6b6558); }
#coverage-tab .cv-pick select {
  min-height: 44px; max-width: 100%; font: 400 16px/1.3 var(--pb-body, Inter, sans-serif); color: var(--pb-ink, #14213d);
  background: var(--pb-surface-2, #f1ece1); border: 1px solid var(--pb-line-strong, rgba(20,33,61,.18)); border-radius: 12px; padding: 8px 12px;
}
#coverage-tab .cv-pick select:focus-visible { outline: none; border-color: var(--pb-brand, #8c2f39); box-shadow: var(--pb-focus, 0 0 0 3px rgba(140,47,57,.18)); }
#coverage-tab .cv-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
#coverage-tab .cv-tgl {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; cursor: pointer;
  background: var(--pb-surface, #fffdf8); border: 1px solid var(--pb-line-strong, rgba(20,33,61,.18)); border-radius: 12px;
  font: 600 15px/1.2 var(--pb-display, 'Space Grotesk', sans-serif); color: var(--pb-ink, #14213d);
}
#coverage-tab .cv-tgl input { width: 18px; height: 18px; accent-color: var(--pb-brand, #8c2f39); }
#coverage-tab .cv-tgl:has(input:disabled) { opacity: .55; cursor: not-allowed; }
#coverage-tab .cv-hint { font: 400 14px/1.4 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-4, #6b6558); }

/* map + stats */
#coverage-tab .cv-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#coverage-tab .cv-mapcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#coverage-tab .cv-map { height: 480px; width: 100%; border: 1px solid var(--pb-line, rgba(20,33,61,.11)); border-radius: 14px; overflow: hidden; background: var(--pb-surface-3, #efe9dc); }
#coverage-tab .cv-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 14px/1.3 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-3, #4b5363); }
#coverage-tab .cv-key { display: inline-flex; align-items: center; gap: 7px; }
#coverage-tab .cv-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
#coverage-tab .cv-key i.cv-dot { border-radius: 50%; background: var(--pb-ink, #14213d); }
#coverage-tab .cv-stats { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#coverage-tab .cv-stat { padding: 18px 22px; }
#coverage-tab .cv-stat-label { font: 500 13px/1.3 var(--pb-mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--pb-ink-4, #6b6558); }
#coverage-tab .cv-stat--good .cv-stat-label { color: var(--pb-good, #1f6b4a); }
#coverage-tab .cv-stat--warn .cv-stat-label { color: var(--pb-warn, #a87a26); }
#coverage-tab .cv-stat--bad .cv-stat-label { color: var(--pb-brand, #8c2f39); }
#coverage-tab .cv-stat-big { margin: 6px 0 4px; font: 700 38px/1.1 var(--pb-display, 'Space Grotesk', sans-serif); letter-spacing: -.02em; color: var(--pb-ink, #14213d); }
#coverage-tab .cv-stat-detail { margin: 0; font: 400 16px/1.45 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-3, #4b5363); }
#coverage-tab .cv-note { margin: 0; font: 400 14px/1.45 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-4, #6b6558); }

/* pockets */
#coverage-tab .cv-pockets { overflow: hidden; }
#coverage-tab .cv-card-head { padding: 20px 24px 14px; }
#coverage-tab .cv-card-head h3 { margin: 0; font: 600 22px/1.25 var(--pb-display, 'Space Grotesk', sans-serif); color: var(--pb-ink, #14213d); }
#coverage-tab .cv-list { list-style: none; margin: 0; padding: 0; }
#coverage-tab .cv-list li { border-top: 1px solid var(--pb-line, rgba(20,33,61,.11)); }
#coverage-tab .cv-pocket {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .8fr) auto; gap: 8px 16px; align-items: baseline; width: 100%; min-height: 56px;
  padding: 14px 24px; background: none; border: 0; text-align: left; cursor: pointer; font: 400 16px/1.35 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-2, #2c3a52);
}
#coverage-tab .cv-pocket:hover { background: var(--pb-surface-2, #f1ece1); }
#coverage-tab .cv-pocket:focus-visible { outline: none; box-shadow: inset var(--pb-focus, 0 0 0 3px rgba(140,47,57,.18)); }
#coverage-tab .cv-pocket b { font: 600 17px/1.3 var(--pb-display, 'Space Grotesk', sans-serif); color: var(--pb-ink, #14213d); }
#coverage-tab .cv-mi { font: 500 14px/1.3 var(--pb-mono, monospace); color: var(--pb-ink-4, #6b6558); text-align: right; }
#coverage-tab .cv-redraw {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 18px 24px; border-top: 1px solid var(--pb-line, rgba(20,33,61,.11)); background: var(--pb-surface, #fffdf8);
}
#coverage-tab .cv-redraw p { margin: 0; flex: 1 1 320px; font: 400 16px/1.45 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-2, #2c3a52); }
#coverage-tab .cv-btnrow { display: flex; flex-wrap: wrap; gap: 10px; }

/* phones: map on top, panels stacked below, no sideways scroll */
@media (max-width: 900px) {
  #coverage-tab.tab-content { padding: 20px 16px 24px; gap: 16px; }
  #coverage-tab .pb-h1 { font-size: 30px; }
  #coverage-tab .pb-sub { font-size: 16px; }
  #coverage-tab .cv-grid { grid-template-columns: minmax(0, 1fr); }
  #coverage-tab .cv-map { height: 320px; }
  #coverage-tab .cv-pick { flex-direction: column; align-items: stretch; width: 100%; gap: 6px; }
  #coverage-tab .cv-pocket { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  #coverage-tab .cv-pocket b { grid-column: 1 / -1; }
  #coverage-tab .cv-card-head, #coverage-tab .cv-redraw, #coverage-tab .cv-pad { padding-left: 16px; padding-right: 16px; }
  #coverage-tab .cv-redraw .pb-btn { width: 100%; }
  #coverage-tab .cv-btnrow { width: 100%; }
  #coverage-tab .cv-btnrow .pb-btn { flex: 1 1 140px; }
  #coverage-tab .cv-stat-big { font-size: 32px; }
}

/* global button styles in styles.css are heavier than this screen wants */
#coverage-tab .pb-btn--primary { background: var(--pb-brand, #8c2f39); color: #fffdf8; }
#coverage-tab .pb-btn--secondary { background: var(--pb-surface-2, #f1ece1); color: var(--pb-ink, #14213d); border: 1px solid var(--pb-line-strong, rgba(20,33,61,.18)); box-shadow: none; }
#coverage-tab .pb-btn--secondary:hover { background: var(--pb-surface-3, #efe9dc); }
#coverage-tab .cv-pocket { box-shadow: none; border-radius: 0; }

#coverage-tab .cv-key i.cv-ring { border-radius: 3px; background: transparent; border: 2px solid #14213d; }
#coverage-tab .cv-stat-sub { margin: 4px 0 0; font: 400 14px/1.4 var(--pb-body, Inter, sans-serif); color: var(--pb-ink-4, #6b6558); }
#coverage-tab .cv-stat-sub:empty { display: none; }
#coverage-tab .cv-nobuyers { padding: 16px 24px; }