/* =============================================================
   Resto AI · Overview (agency homepage) — scoped to .rai-overview.
   Reuses the SAME warm-dark token values as .rai-delivery / .rai-reports
   so the look is identical. All Inter (matches the platform / Jesus's
   design system). Hand-written (not from a handoff prototype).
   ============================================================= */
.rai-overview, .rai-overview *, .rai-overview *::before, .rai-overview *::after { box-sizing: border-box; }

.rai-overview {
  /* primitives — resolved hexes from the Overview HANDOFF (tokens-v2) */
  --brand: #FB5F2C;
  --brand-hover: #E54E1E;
  --brand-soft: rgba(251, 95, 44, 0.08);
  --surface-page: #14110d;
  --surface-1: #1a1612;
  --surface-2: #211c16;
  --surface-3: #2a2419;
  --fg-1: #F1ECE2;
  --fg-2: #C9BCA4;
  --fg-3: #998973;
  --fg-muted: #6d6149;
  --border-subtle:  #2a2419;
  --border-default: #3b3327;
  --border-strong:  #5a4d3b;
  --divider: #261f17;
  --green-400: #4FB477; --blue-400: #6CA9F2; --amber-400: #F4A93A; --red-400: #F26B5C;
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,.45), 0 0 0 1px rgba(251, 95, 44, 0.08);
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --page-gradient:
    radial-gradient(ellipse 70% 50% at 92% -5%, rgba(251, 95, 44, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 38% 30% at 0% 95%, rgba(251, 95, 44, 0.04) 0%, transparent 60%);

  font-family: var(--font-ui);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  display: block; width: 100%; min-width: 0;
}

/* More breathing room from the topbar + sides (matches the reference spacing).
   The production .main already gives 32px; we add to it here. */
.rai-overview .ov-page { padding: 26px 20px 52px; max-width: none; min-width: 0; }

/* ── Hero ── */
.rai-overview .ov-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-bottom: 8px;
}
.rai-overview .ov-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: .12em;
  color: var(--brand); margin-bottom: 14px;
}
.rai-overview .ov-eyebrow .crumb-muted { color: var(--fg-3); }
.rai-overview .ov-eyebrow .crumb-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-muted); }
.rai-overview .ov-hero h1 {
  margin: 0; font: 700 40px/1.08 var(--font-ui); letter-spacing: -.025em; color: var(--fg-1);
  max-width: 920px;
}
.rai-overview .ov-hero h1 em { font-style: italic; color: var(--brand); }
.rai-overview .ov-sub { margin: 12px 0 0; font: 400 15px var(--font-ui); color: var(--fg-3); }
.rai-overview .ov-hero-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 4px; }

/* shared buttons */
.rai-overview .btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px var(--font-ui); padding: 9px 15px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; transition: all .15s cubic-bezier(0.22,1,0.36,1);
  white-space: nowrap;
}
.rai-overview .btn svg { width: 14px; height: 14px; }
.rai-overview .btn-secondary { background: var(--surface-2); color: var(--fg-1); border-color: var(--border-default); }
.rai-overview .btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.rai-overview .btn-primary { background: var(--brand); color: #fff; }
.rai-overview .btn-primary:hover { background: var(--brand-hover); }

/* ── Stat cards ── */
.rai-overview .ov-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px;
}
@media (max-width: 800px) { .rai-overview .ov-stats { grid-template-columns: 1fr; } }
/* KPI cards — exact HANDOFF spec: flat surface-1, warm radial glow ::before
   (top-left), number weight 600 clamp(54–92px), label 14px below, sub 4px
   below, content top-aligned, hover lifts + brightens the border. */
.rai-overview .ov-stat {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: 14px; padding: 36px 32px 32px;
  display: flex; flex-direction: column;
  transition: border-color .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1);
}
.rai-overview .ov-stat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(800px 200px at 0% 0%, rgba(251,95,44,0.05), transparent 60%);
}
.rai-overview .ov-stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.rai-overview .ov-stat-val { position: relative; font: 600 clamp(54px, 6.2vw, 92px)/0.95 var(--font-ui); letter-spacing: -.04em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.rai-overview .ov-stat-accent .ov-stat-val { color: var(--brand); }
.rai-overview .ov-stat-label { position: relative; font: 600 13px var(--font-ui); letter-spacing: -.005em; color: var(--fg-1); margin-top: 14px; }
.rai-overview .ov-stat-sub { position: relative; font: 400 12px var(--font-ui); color: var(--fg-3); margin-top: 4px; }

/* ── Panels (map / lower grid) ── */
.rai-overview .ov-panel {
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); margin-top: 16px; overflow: hidden;
}
.rai-overview .ov-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px 0;
}
.rai-overview .ov-panel-head h3 { margin: 0; font: 700 17px var(--font-ui); letter-spacing: -.01em; color: var(--fg-1); }
.rai-overview .ov-panel-sub { font: 400 13px var(--font-ui); color: var(--fg-3); margin-top: 3px; }

/* ── Interactive Mapbox map ── */
.rai-overview .ov-map-panel { padding: 0; overflow: hidden; }
.rai-overview .ov-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; flex-wrap: wrap; }
.rai-overview .ov-map-title h3 { margin: 0; font: 700 17px var(--font-ui); color: var(--fg-1); letter-spacing: -.01em; }
.rai-overview .ov-map-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rai-overview .ovm-tab { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font-ui); color: var(--fg-3); background: var(--surface-2); border: 1px solid var(--border-default); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: all .14s cubic-bezier(0.22,1,0.36,1); }
.rai-overview .ovm-tab:hover { color: var(--fg-1); }
.rai-overview .ovm-tab.on { color: var(--brand); border-color: var(--border-strong); background: var(--brand-soft); }
.rai-overview .ovm-tab-n { font: 700 11px var(--font-ui); color: var(--fg-muted); }
.rai-overview .ovm-tab.on .ovm-tab-n { color: var(--brand); }
.rai-overview .ov-map { height: 480px; width: 100%; position: relative; background: #14110D; }
.rai-overview .ov-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 22px; border-top: 1px solid var(--divider); flex-wrap: wrap; }
.rai-overview .ov-map-foot-stats { display: flex; gap: 22px; font: 400 12px var(--font-ui); color: var(--fg-3); }
.rai-overview .ov-map-foot-stats b { color: var(--fg-1); font-weight: 700; }
.rai-overview .ov-map-styles { display: flex; gap: 2px; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 3px; }
.rai-overview .ovm-style { font: 600 11px var(--font-ui); color: var(--fg-3); background: transparent; border: none; border-radius: 6px; padding: 5px 11px; cursor: pointer; }
.rai-overview .ovm-style.on { background: var(--brand); color: #fff; }

/* pins — OUTER el is positioned by Mapbox (transform every frame) → it must
   have NO transition/transform of its own (otherwise pins drift while panning).
   The INNER dot carries the visual + glow + hover scale. */
.rai-overview .ovm-pin { width: 15px; height: 15px; }
.rai-overview .ovm-pin-dot {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  background: var(--pin, #FB5F2C); border: 2px solid rgba(20,17,13,.85);
  box-shadow: 0 0 0 1px var(--pin, #FB5F2C), 0 0 13px 1px var(--pin, #FB5F2C), 0 1px 5px rgba(0,0,0,.6);
  cursor: pointer; transition: transform .12s ease; transform-origin: center;
}
.rai-overview .ovm-pin:hover { z-index: 6; }
.rai-overview .ovm-pin:hover .ovm-pin-dot { transform: scale(1.5); }

/* Mapbox logo + attribution hidden per request (account owner's call). */
.rai-overview .mapboxgl-ctrl-logo,
.rai-overview .mapboxgl-ctrl-attrib,
.rai-overview .mapboxgl-ctrl-bottom-left { display: none !important; }

/* popup (override Mapbox defaults, on-brand) */
.rai-overview .mapboxgl-popup-content { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: 14px; padding: 0; overflow: hidden; box-shadow: var(--shadow-md); width: 280px; }
.rai-overview .mapboxgl-popup-tip { display: none; }
.rai-overview .mapboxgl-popup-close-button { color: var(--fg-3); font-size: 17px; padding: 2px 8px; }
.rai-overview .mapboxgl-ctrl-group { background: var(--surface-2); border: 1px solid var(--border-default); }
.rai-overview .mapboxgl-ctrl-group button + button { border-top: 1px solid var(--divider); }
.rai-overview .ovm-pop-head { display: flex; gap: 10px; align-items: flex-start; }
.rai-overview .ovm-pop-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.rai-overview .ovm-pop-name { font: 700 14px var(--font-ui); color: var(--fg-1); }
.rai-overview .ovm-pop-type { font: 400 11px var(--font-ui); color: var(--fg-3); }
.rai-overview .ovm-pop-loc { font: 600 12px var(--font-ui); color: var(--brand); margin-top: 8px; }
.rai-overview .ovm-pop-row { font: 400 12px var(--font-ui); color: var(--fg-2); margin-top: 4px; line-height: 1.45; }
.rai-overview .ovm-pop-hours { color: var(--fg-3); font-size: 11px; }
/* rich (Google Places) popup */
.rai-overview .ovm-pop-photo { height: 116px; background-size: cover; background-position: center; background-color: var(--surface-2); }
.rai-overview .ovm-pop-body { padding: 13px 15px 15px; }
.rai-overview .ovm-pop-rating { display: flex; align-items: center; gap: 8px; margin-top: 9px; font: 600 12.5px var(--font-ui); }
.rai-overview .ovm-stars { color: #F4A93A; }
.rai-overview .ovm-rev { color: var(--fg-3); font-weight: 400; font-size: 12px; }
.rai-overview .ovm-open { font: 600 10px var(--font-ui); padding: 2px 7px; border-radius: 999px; }
.rai-overview .ovm-open.is-open { color: #4FB477; background: rgba(79,180,119,.15); }
.rai-overview .ovm-open.is-closed { color: #F26B5C; background: rgba(242,107,92,.15); }
.rai-overview .ovm-pop-loading { font: 400 12px var(--font-ui); color: var(--fg-3); margin-top: 9px; }
.rai-overview .ovm-pop-actions { display: flex; gap: 8px; margin-top: 12px; }
.rai-overview .ovm-pop-btn { display: inline-flex; align-items: center; font: 600 12px var(--font-ui); color: #fff; background: var(--brand); padding: 7px 12px; border-radius: 8px; text-decoration: none; }
.rai-overview .ovm-pop-btn:hover { background: var(--brand-hover); }
.rai-overview .ovm-pop-btn.ghost { color: var(--fg-1); background: var(--surface-2); border: 1px solid var(--border-default); }
.rai-overview .ovm-pop-btn.ghost:hover { background: var(--surface-3); }

/* lower grid: portfolio health + AI tasks */
.rai-overview .ov-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) { .rai-overview .ov-lower { grid-template-columns: 1fr; } }
.rai-overview .ov-lower .ov-panel { margin-top: 0; min-height: 280px; }
.rai-overview .ov-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 56px 28px;
}
.rai-overview .ov-empty-h { font: 600 14px var(--font-ui); color: var(--fg-2); }
.rai-overview .ov-empty-s { font: 400 12.5px var(--font-ui); color: var(--fg-3); max-width: 420px; line-height: 1.5; }
.rai-overview [data-ov-health], .rai-overview [data-ov-tasks] { padding-bottom: 18px; display: flex; flex-direction: column; }

/* shared health-band palette (great / good / watch / risk) → --bc */
.rai-overview .ov-band-great { --bc: var(--green-400); }
.rai-overview .ov-band-good  { --bc: var(--blue-400); }
.rai-overview .ov-band-watch { --bc: var(--amber-400); }
.rai-overview .ov-band-risk  { --bc: var(--red-400); }

/* ── Portfolio health ── */
.rai-overview .ov-health-avg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 7px 10px; border-radius: 12px; background: color-mix(in srgb, var(--bc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 38%, transparent); }
.rai-overview .ov-health-avg-n { font: 700 24px var(--font-ui); line-height: 1; letter-spacing: -.02em; color: var(--bc); font-variant-numeric: tabular-nums; }
.rai-overview .ov-health-avg-l { font: 600 9px var(--font-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--fg-3); margin-top: 3px; }
.rai-overview .ov-health-bar { display: flex; gap: 3px; margin: 18px 24px 0; height: 10px; }
.rai-overview .ov-hseg { background: var(--bc); border-radius: 3px; min-width: 6px; box-shadow: 0 0 10px color-mix(in srgb, var(--bc) 50%, transparent); }
.rai-overview .ov-health-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 11px 24px 0; }
.rai-overview .ov-hleg { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px var(--font-ui); color: var(--fg-3); }
.rai-overview .ov-hleg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 6px var(--bc); }
.rai-overview .ov-hrow-label { font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin: 20px 24px 9px; }
.rai-overview .ov-health-list { display: flex; flex-direction: column; gap: 8px; padding: 0 24px; }
.rai-overview .ov-hrow { display: flex; align-items: center; gap: 13px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-left: 3px solid var(--bc); border-radius: 10px; }
.rai-overview .ov-hrow-score { font: 700 20px var(--font-ui); color: var(--bc); min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rai-overview .ov-hrow-body { flex: 1; min-width: 0; }
.rai-overview .ov-hrow-top { display: flex; align-items: center; gap: 9px; }
.rai-overview .ov-hrow-name { font: 600 13.5px var(--font-ui); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rai-overview .ov-hrow-band { font: 600 10px var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--bc); background: color-mix(in srgb, var(--bc) 13%, transparent); padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
.rai-overview .ov-hrow-flags { font: 400 11.5px var(--font-ui); color: var(--fg-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rai-overview .ov-hrow-clear { display: flex; align-items: center; gap: 9px; padding: 14px 16px; margin: 0 0; font: 500 12.5px var(--font-ui); color: var(--fg-2); background: color-mix(in srgb, var(--green-400) 9%, transparent); border: 1px solid color-mix(in srgb, var(--green-400) 24%, transparent); border-radius: 10px; }
.rai-overview .ov-hrow-clear svg { color: var(--green-400); flex-shrink: 0; }
.rai-overview .ov-leaders { margin: auto 24px 0; padding-top: 16px; }
.rai-overview .ov-leaders-h { font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 9px; }
.rai-overview .ov-leaders-row { display: flex; flex-wrap: wrap; gap: 7px; }
.rai-overview .ov-leader { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--font-ui); color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 12px 5px 9px; }
.rai-overview .ov-leader b { color: var(--fg-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.rai-overview .ov-leader-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 6px var(--bc); }

/* ── AI agent tasks ── */
.rai-overview .ov-task-total { font: 700 26px var(--font-ui); line-height: 1; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(251,95,44,.4); }
.rai-overview .ov-task-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 24px 0; }
.rai-overview .ov-tchip { font: 500 11.5px var(--font-ui); color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--border-default); border-radius: 999px; padding: 5px 11px; }
.rai-overview .ov-tchip b { color: var(--fg-1); font-weight: 700; }
.rai-overview .ov-task-feed { display: flex; flex-direction: column; gap: 7px; padding: 15px 24px 2px; max-height: 372px; overflow-y: auto; }
.rai-overview .ov-task { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-left: 3px solid var(--tc, var(--border-strong)); border-radius: 10px; transition: border-color .14s ease, background .14s ease; cursor: default; }
.rai-overview .ov-task:hover { background: var(--surface-3); }
.rai-overview .ov-task-critical { --tc: var(--red-400); }
.rai-overview .ov-task-high { --tc: var(--amber-400); }
.rai-overview .ov-task-normal { --tc: var(--blue-400); }
.rai-overview .ov-task-ic { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); flex-shrink: 0; }
.rai-overview .ov-task-main { flex: 1; min-width: 0; }
.rai-overview .ov-task-title { font: 600 13px var(--font-ui); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rai-overview .ov-task-meta { font: 400 11.5px var(--font-ui); color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rai-overview .ov-task-cta { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px var(--font-ui); color: var(--fg-3); flex-shrink: 0; }
.rai-overview .ov-task:hover .ov-task-cta { color: var(--brand); }

/* ── loading skeleton ── */
.rai-overview .ov-skel { padding: 22px 24px 4px; }
.rai-overview .ov-skel-bar { height: 12px; width: 60%; border-radius: 7px; }
.rai-overview .ov-skel-row { height: 44px; border-radius: 10px; margin-top: 11px; }
.rai-overview .ov-skel-bar, .rai-overview .ov-skel-row { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: ovShimmer 1.4s ease infinite; }
@keyframes ovShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }