/* ═══════════════════════════════════════════════════════════
   BidDrop UI polish — one consistent look across app screens.
   Loaded after the inline styles. Scoped to #main-app and kept away from
   postcard, proposal and estimate previews (homeowner-facing designs).
   ═══════════════════════════════════════════════════════════ */

/* ── 1. One type family ───────────────────────────────────── */
:root{ --font-h:'Barlow',sans-serif; }
#main-app{ -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1; }

/* Headings: weight, not a second font, carries emphasis. */
#main-app :is(h1,h2,h3,.ph-title,.hs-title){ font-family:var(--font-b); letter-spacing:-.01em; }

/* ── 2. Sentence case: stop forcing ALL CAPS on app chrome ── */
#main-app :is(.tab-btn,.nav-menu-item,#nav-menu-btn,.bnav-btn,.fchip,.mtool-btn,.fl,.stab-card-hdr,.bd-sb-section,.int-badge,.hs-col-name){
  text-transform:none!important; letter-spacing:normal!important;
}
#main-app [style*="text-transform:uppercase"]:not(:is([id*="preview"] *,[class*="preview"] *,[class*="postcard"] *,[id*="proposal"] *,[id*="pc-"] *)),
#main-app [style*="text-transform: uppercase"]:not(:is([id*="preview"] *,[class*="preview"] *,[class*="postcard"] *,[id*="proposal"] *,[id*="pc-"] *)){
  text-transform:none!important; letter-spacing:.01em!important;
}

/* ── 3. Readable minimum size (no more 9–10px text) ───────── */
#main-app :is([style*="font-size:9px"],[style*="font-size: 9px"],[style*="font-size:10px"],[style*="font-size: 10px"],[style*="font-size:8px"]):not(:is([id*="preview"] *,[class*="preview"] *,[class*="postcard"] *,[id*="proposal"] *,[id*="pc-"] *,svg *,.leaflet-marker-icon *,.leaflet-marker-icon)){
  font-size:11.5px!important;
}
#main-app .bnav-btn{ font-size:11px!important; font-weight:700!important; }

/* ── 4. Calm the glows and heavy shadows ──────────────────── */
#app-brand-img, .bd-sb-brand-logo{ filter:none!important; }
#main-app [style*="box-shadow"][style*="242,92,5"]:not(:is([id*="preview"] *,[class*="preview"] *)){ box-shadow:none!important; }
#main-app [style*="text-shadow"]:not(:is([id*="preview"] *,[class*="preview"] *,[class*="postcard"] *)){ text-shadow:none!important; }

/* ── 5. Buttons: one primary color, quiet secondary ───────── */
#main-app :is(button,.btn){ transition:background-color .15s,border-color .15s,color .15s,opacity .15s; }
#main-app :is(button,.btn):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#main-app :is(button,.btn):disabled{ opacity:.55; cursor:default; }

/* Storm panel: off-brand purple/green/violet buttons → brand primary;
   rainbow section titles → regular text. */
#storm-panel button:is([style*="background:#6366F1"],[style*="background:#6366f1"],[style*="background:#818cf8"],[style*="background:#34d399"]){
  background:var(--accent)!important; color:#fff!important;
}
#storm-panel :is(div,span):is([style*="color:#60a5fa"],[style*="color:#34d399"],[style*="color:#818cf8"],[style*="color:#6366F1"],[style*="color:#a78bfa"]){
  color:var(--text)!important;
}
#storm-panel [style*="border-bottom:2px solid #6366F1"]{ border-bottom-color:var(--accent)!important; color:var(--accent)!important; }
#storm-panel #storm-draw-hint{ color:var(--mid)!important; }

/* ── 6. Map toolbar: icon + label, compact ────────────────── */
#main-app .mtool-btn{ display:inline-flex!important; align-items:center; gap:7px; font-weight:600!important; }
#main-app .mtool-btn svg{ flex-shrink:0; }

/* ── 7. Sidebar / dock icons (line icons replace emoji) ───── */
.bd-icon{ display:inline-block; vertical-align:middle; flex-shrink:0; }
#bd-sidebar .bd-nav5-head .bd-snav-icon{ display:inline-flex; align-items:center; justify-content:center; width:20px; color:var(--mid); }
#bd-sidebar .bd-nav5-active .bd-nav5-head .bd-snav-icon{ color:var(--accent); }
.bottom-nav .bnav-btn .bicon{ display:flex; align-items:center; justify-content:center; height:24px; }
.bottom-nav .bnav-btn .bicon svg{ width:22px; height:22px; }

/* ── 8. Inputs and selects: one height, one radius ────────── */
#main-app :is(input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],select,textarea):not(:is([id*="preview"] *,[class*="preview"] *)){
  border-radius:8px;
}
#main-app :is(input,select,textarea):focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ── 9. Scrollbars that don't shout ───────────────────────── */
#main-app *{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

/* ── 10. Remaining one-offs ───────────────────────────────── */
#main-app :is(.stab-save-btn,.btn-primary){ box-shadow:none!important; text-transform:none!important; letter-spacing:normal!important; }
#main-app .stab-tab{ text-transform:none!important; letter-spacing:normal!important; }
#storm-panel button:is([style*="background:#F59E0B"],[style*="background:#f59e0b"]){
  background:var(--card2)!important; color:var(--text)!important; border:1px solid var(--border)!important;
}
/* Address search: center it over the visible map when the storm panel is docked. */
@media (min-width:1181px){
  body.storm-open #tab-map .map-search-wrap{ left:494px!important; transform:none!important; width:320px!important; max-width:calc(100% - 820px)!important; min-width:220px; }
  body.storm-open.storm-collapsed #tab-map .map-search-wrap{ left:200px!important; max-width:calc(100% - 520px)!important; }
}


/* ── 11. Empty states: say what goes here and offer one next step ── */
.bd-empty{ text-align:center; padding:44px 20px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px; }
.bd-empty-title{ font-size:15px; font-weight:700; color:var(--text); }
.bd-empty-sub{ font-size:13px; line-height:1.5; max-width:360px; }
.bd-empty-btn{ margin-top:8px; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; }
.bd-empty-btn:hover{ filter:brightness(1.08); }

/* ── 12. Loading placeholders instead of "Loading…" ───────── */
.bd-skel{ display:flex; flex-direction:column; gap:10px; padding:16px; }
.bd-skel-row{ height:14px; border-radius:6px; background:linear-gradient(90deg,var(--card2) 0%,var(--border) 50%,var(--card2) 100%); background-size:200% 100%; animation:bdSkel 1.2s ease-in-out infinite; }
.bd-skel-row:nth-child(2n){ width:82%; } .bd-skel-row:nth-child(3n){ width:64%; }
@keyframes bdSkel{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@media (prefers-reduced-motion:reduce){ .bd-skel-row{ animation:none; } }

/* ── 13. Results: rankings table ──────────────────────────── */
#main-app #lbt-podium{ gap:10px; }
@media (max-width:768px){
  #main-app .lbt-grid{ grid-template-columns:30px minmax(0,1fr) repeat(3,46px)!important; padding:10px 12px!important; }
  #main-app .lbt-grid > :nth-child(5), #main-app .lbt-grid > :nth-child(7){ display:none!important; }
  #main-app .lbt-row > :nth-child(n+3){ font-size:14px!important; }
}

/* ── 14. Lists & contacts: even stats, cards on phones ────── */
#main-app #contacts-stats{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px!important; }
#main-app #contacts-stats > div{ padding:12px 16px!important; }
@media (max-width:768px){
  #main-app #contacts-stats{ grid-template-columns:1fr 1fr; }
  #main-app #contacts-table thead{ display:none; }
  #main-app #contacts-table, #main-app #contacts-table tbody{ display:block; }
  #main-app #contacts-table tr{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; column-gap:8px; row-gap:4px; padding:12px 14px; }
  #main-app #contacts-table td{ padding:0!important; border:0!important; min-width:0; }
  #main-app #contacts-table td:nth-child(1){ grid-row:1 / span 3; padding-top:2px!important; }
  #main-app #contacts-table td:nth-child(2){ grid-column:2; grid-row:1; font-weight:700; }
  #main-app #contacts-table td:nth-child(4){ grid-column:3; grid-row:1; justify-self:end; }
  #main-app #contacts-table td:nth-child(3){ grid-column:2 / span 2; grid-row:2; white-space:normal!important; color:var(--mid); }
  #main-app #contacts-table td:nth-child(5){ grid-column:2; grid-row:3; color:var(--muted); font-size:12px!important; }
  #main-app #contacts-table td:nth-child(8){ grid-column:3; grid-row:3; justify-self:end; color:var(--muted); font-size:12px!important; }
  #main-app #contacts-table tbody td:nth-child(4), #main-app #contacts-table tbody td:nth-child(5), #main-app #contacts-table tbody td:nth-child(8){ display:block!important; }
  #main-app #contacts-table tbody td:nth-child(6), #main-app #contacts-table tbody td:nth-child(7){ display:none!important; }
  #main-app #contacts-table td:nth-child(9){ grid-column:2 / span 2; grid-row:4; margin-top:6px; }
  #main-app #contacts-table tbody td:nth-child(9) div{ flex-direction:row!important; flex-wrap:wrap; gap:6px!important; }
  #main-app #contacts-table tbody td:nth-child(9) button{ font-size:12px!important; padding:6px 12px!important; width:auto!important; }
}

/* ── 15. Light mode: soften shadows tuned for the dark theme ── */
body.light #main-app .hs-card, body.light .hc-sheet{ box-shadow:0 1px 3px rgba(15,23,42,.08)!important; }
body.light #storm-panel{ box-shadow:none!important; }
/* The wordmark's "Bid" is white; on the light theme flip white→dark while
   keeping the orange close to brand. */
body.light :is(#app-brand-img,.bd-sb-brand-logo){ filter:invert(1) hue-rotate(180deg) saturate(1.15)!important; }

/* ── 16. Nearby campaign dialogs (.modal-overlay had no styles, so they
       rendered at the bottom of the page instead of as a dialog) ── */
.modal-overlay{ position:fixed; inset:0; background:rgba(5,8,14,.65); align-items:center; justify-content:center; padding:16px; box-sizing:border-box; overflow-y:auto; }
.modal-overlay .modal-box{ max-height:92vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.5); border:1px solid var(--border); box-sizing:border-box; }

/* Neighborhoods: a wider list on desktop so the team panel fits */
@media (min-width:769px){ #tab-zones > div:first-child{ width:340px!important; max-width:360px!important; } }