/* ===================================================================
   modal.css — shared modal styling

   Today this file holds only the Google Business location modal, scoped
   by id. The generic modal chrome (.modal-overlay, .modal-content,
   .modal-footer) currently lives in onboarding.css with unscoped
   !important rules and applies app-wide; moving it here is a separate
   job. Load this AFTER onboarding.css.
   =================================================================== */

/* onboarding.css sets overflow:hidden with no height cap, so a long
   location list grows past the viewport and clips the footer — the
   Cancel and Save buttons become unreachable. Cap the modal and let
   only the body scroll, so header and footer stay put. */
#googleLocationModal .modal-content {
  display:flex !important;
  flex-direction:column !important;
  max-width:520px !important;
  max-height:85vh !important;
  overflow:hidden !important;
}

#googleLocationModal .modal-body {
  overflow-y:auto !important;
  min-height:0;               /* lets the flex child actually shrink */
}

#googleLocationModal .modal-header,
#googleLocationModal .modal-footer { flex-shrink:0; }

/* Saving a location selection is not destructive; onboarding.css paints
   every .modal-footer .save-button with the danger colour. */
#googleLocationModal .modal-footer .save-button {
  background:var(--ob-btn) !important;
  color:var(--ob-btntx) !important;
}

/* main.css styles the list with the old neon palette (--primary-blue
   borders, cyan glow). */
#googleLocationModal .location-option {
  background:var(--ob-surface) !important;
  border:1px solid var(--ob-line2) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transform:none !important;
}
#googleLocationModal .location-option:hover {
  background:var(--ob-surface2) !important;
  box-shadow:none !important;
  transform:none !important;
}
#googleLocationModal .location-option input[type="checkbox"] {
  accent-color:var(--ob-accent) !important;
  border:none !important;
  filter:none !important;
}
#googleLocationModal .location-info strong { color:var(--ob-ink) !important; }
#googleLocationModal .location-address,
#googleLocationModal .account-badge { color:var(--ob-ink3) !important; }

/* The account name adds noise and isn't needed to pick a location. */
#googleLocationModal .account-badge { display:none !important; }

/* main.css glows the title with the old neon palette. */
#googleLocationModal .location-info strong { text-shadow:none !important; }

/* onboarding.css doesn't lay the header out as a row, so the close
   button drops under the title; main.css colours it for the dark theme,
   which leaves it near-invisible on the light background. */
#googleLocationModal .modal-header {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
}
#googleLocationModal .modal-close {
  color:var(--ob-ink3) !important;
  flex-shrink:0;
  line-height:0;
}
#googleLocationModal .modal-close:hover { color:var(--ob-ink) !important; }

/* The text block is centered inside the row, leaving it detached from
   the checkbox. Line it up on the left instead. */
#googleLocationModal .location-info {
  align-items:flex-start !important;
  text-align:left !important;
}