/* shell.css — shared logged-in app shell for DevelopmentIntelligence.ai
   Requires di.css to be loaded first (token source of truth).
   Adds strategy palette extensions + sidebar, topbar, kpi, card, panel, chip. */

/* ─── Extended strategy palette (adds the four tokens di.css omits) ──────── */
:root {
  --strat-teardown:    #D97706;
  --strat-value:       #2563EB;
  --strat-rental:      #16A34A;
  --strat-multifamily: #0F766E;
  --strat-office:      #475569;
  --strat-retail:      #DB2877;
  --strat-industrial:  #7C5E3B;
  --strat-cre:         #7C3AED;
}

/* ─── App chrome grid ────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
}

/* ─── Sidebar (.side) ────────────────────────────────────────────────────── */
/* A hidden sidebar/topbar must actually hide. .side sets display:flex, which (equal
   specificity, author > UA) overrides the [hidden] attribute — so on /analyze's
   anonymous view the empty sidebar rendered at height:100vh and pushed the analyzer
   below the fold. This keeps [hidden] authoritative until the authed JS clears it. */
.side[hidden], .topbar[hidden] { display: none !important; }
.side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Brand lockup inside sidebar */
.side .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 16px;
}
.side .brand .dot {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--primary);
  display: inline-block;
  flex-shrink: 0;
}

/* Market switcher */
.mkt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.mkt:hover { border-color: var(--primary); }

/* Nav groups + links */
.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 2px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.nav a .ic {
  width: 17px;
  text-align: center;
  opacity: .8;
  flex-shrink: 0;
}
.nav a.on {
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 700;
}
.nav a.on .ic { opacity: 1; }
.nav .grp {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  margin: 14px 11px 6px;
  font-weight: 600;
}

/* Account footer in sidebar */
.acct {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-top: 1px solid var(--line);
}
.av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

/* Badge — override di.css version to add the compact sidebar PRO/Upgrade style */
.badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .03em;
  text-decoration: none;
  display: inline-block;
}
a.badge:hover { background: var(--primary); color: #fff; }

/* ─── Shell main wrapper ─────────────────────────────────────────────────── */
.shell-main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* prevent grid blowout */
}

/* ─── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px 14px;
  gap: 16px;
}
.topbar h1 {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -.02em;
  margin: 0 0 2px;
  font-weight: 700;
}
.topbar .sub {
  color: var(--ink-faint);
  font-size: 12.5px;
}
/* Command palette — a REAL address-search input (type → analyzer), not a
   decorative pill. The wrapper positions the input, the ⌘K hint, and the
   suggestions dropdown. */
.topbar .search {
  position: relative;
  width: 330px;
  flex-shrink: 0;
}
.topbar .search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 32px 9px 13px;
  font-size: 13.5px;
  font-family: var(--font-sans);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.topbar .search input::placeholder { color: var(--ink-faint); }
.topbar .search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.topbar .search .kbd {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink-faint);
  pointer-events: none;
}
.topbar .search input:focus ~ .kbd,
.topbar .search input:not(:placeholder-shown) ~ .kbd { display: none; }
.topbar .search ul {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
}
.topbar .search ul:empty { display: none; }
.topbar .search li {
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .search li:hover,
.topbar .search li.active { background: var(--surface-2); }

/* Market switcher as a native select (value = the county key the server uses) */
select.mkt {
  appearance: auto;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink);
}

/* Owner-only tier preview switcher (sits below the nav) */
.viewas {
  margin: 6px 4px 0;
  padding: 9px 8px 0;
  border-top: 1px dashed var(--line);
}
.viewas label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 5px;
}
.viewas select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
}

/* Fixed "previewing as X" banner shown while view-as is active */
#viewas-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--ink, #0f172a);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 9px 14px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
#viewas-banner b { color: var(--strat-rental, #16A34A); }
#viewas-banner button {
  margin-left: 12px;
  background: #fff;
  color: var(--ink, #0f172a);
  border: 0;
  border-radius: 7px;
  padding: 4px 12px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}

/* ─── KPI strip ──────────────────────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.kpi .l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  font-weight: 600;
}
.kpi .n {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 6px;
}
.kpi .d {
  font-size: 11.5px;
  margin-top: 3px;
  font-weight: 600;
}
.up   { color: var(--good); }
.muted { color: var(--ink-faint); }

/* ─── Section header (.sec) ─────────────────────────────────────────────── */
.sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 12px;
  gap: 10px;
  flex-wrap: wrap;
}
.sec h2 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0;
  letter-spacing: -.01em;
}
.sec a {
  color: var(--primary-700);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}
.sec a:hover { text-decoration: underline; }
.sec .why {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 500;
  flex: 1;
}

/* ─── Deal card feed ─────────────────────────────────────────────────────── */
.feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.deal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.deal-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.deal-card .ph {
  height: 96px;
  background: linear-gradient(135deg, #eef2f0, #e4ebe8);
  position: relative;
}
.deal-card .chip {
  position: absolute;
  top: 9px;
  left: 9px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}
.deal-card .match {
  position: absolute;
  top: 9px;
  right: 9px;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-700);
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.deal-card .b { padding: 11px 13px; }
.deal-card .addr { font-weight: 600; font-size: 13px; }
.deal-card .city { color: var(--ink-faint); font-size: 11.5px; margin-top: 1px; }
.deal-card .stats {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.deal-card .stats .s .v { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.deal-card .stats .s .k {
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Strategy chip (standalone, used outside deal-card) */
.chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ─── Two-column layout (.two) ───────────────────────────────────────────── */
.two {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}

/* ─── Panel ──────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

/* ─── CTA banner ─────────────────────────────────────────────────────────── */
.cta {
  margin-top: 22px;
  background: linear-gradient(100deg, var(--primary), var(--primary-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cta h3 {
  font-family: var(--font-display);
  margin: 0 0 3px;
  font-size: 18px;
  color: #fff;
}
.cta p { margin: 0; opacity: .85; font-size: 13px; }
.cta .btn {
  background: #fff;
  color: var(--primary-700);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.cta .btn:hover { opacity: .92; }

/* ─── Bar chart + legend (Market Pulse panel) ────────────────────────────── */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 90px;
  margin: 14px 0 6px;
}
.bars .bar { flex: 1; border-radius: 6px 6px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ink-soft); }
.legend i {
  width: 9px; height: 9px; border-radius: 3px;
  display: inline-block; margin-right: 5px; vertical-align: middle;
}

/* ─── Activity feed rows ─────────────────────────────────────────────────── */
.act {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.act:last-child { border-bottom: 0; }
.act .tg {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
}

/* Mobile bottom tab bar — hidden on desktop, shown when the sidebar collapses. */
.botnav { display: none; }

/* ─── Responsive: collapse sidebar under 820px ───────────────────────────── */
@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
  }
  .side {
    display: none;
  }
  .botnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .botnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; text-decoration: none; color: var(--ink-soft);
    font-size: 10.5px; font-weight: 600;
  }
  .botnav a.on { color: var(--primary); }
  .botnav .bic { font-size: 18px; line-height: 1; }
  .shell-main { padding-bottom: 60px; }
  .topbar {
    flex-wrap: wrap;
    padding: 14px 16px 10px;
  }
  .topbar .search {
    width: 100%;
    flex-shrink: unset;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .feed {
    grid-template-columns: 1fr;
  }
  .two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .kpis {
    grid-template-columns: 1fr;
  }
}