/* gmp-autocomplete.css — bug #319, #320

   Re-skin the <gmp-place-autocomplete> web component (Google Maps Places v3)
   so it matches HomeAtlas's aesthetic instead of Google's default Roboto blue.

   The element exposes shadow-DOM ::part() hooks for the dropdown / items,
   so we can theme it without forking the component. The component's own
   <input> sits in light DOM and inherits page styles directly.

   Where used:
   - profile homes editor (modern + legacy)
   - chat-genie planner steps (event_kickoff, event_preferences, address)
   - any other surface that mounts a PlaceAutocompleteElement
*/

/* Outer wrapper — keep the input full-width and rounded to match the rest of the form.
   Also pin the colour-scheme so the embedded web component doesn't inherit a
   user-agent dark scheme and render its placeholder/dropdown as a black slab
   when the app is in light mode (#362). */
.gmp-autocomplete-wrap {
  width: 100%;
  display: block;
  color-scheme: light;
}
.dark .gmp-autocomplete-wrap {
  color-scheme: dark;
}

.gmp-autocomplete-wrap gmp-place-autocomplete {
  width: 100%;
  display: block;
  --gmpx-color-primary: #2EB6B1;
  --gmpx-color-on-primary: #ffffff;
  --gmpx-color-surface: #ffffff;
  --gmpx-color-on-surface: #0f172a;
  --gmpx-color-on-surface-variant: #64748b;
  --gmpx-color-outline: rgba(148, 163, 184, 0.4);
  --gmpx-font-family-base: inherit;
  --gmpx-font-family-headings: inherit;
  --gmpx-fixed-panel-width-row-layout: 100%;
  --gmpx-fixed-panel-height-column-layout: auto;
}

.dark .gmp-autocomplete-wrap gmp-place-autocomplete {
  --gmpx-color-surface: #0f172a;
  --gmpx-color-on-surface: #f1f5f9;
  --gmpx-color-on-surface-variant: #cbd5e1;
  --gmpx-color-outline: rgba(71, 85, 105, 0.6);
}

/* Style the <input> the component renders in light DOM. The component
   labels its own input — we target descendants so we don't need to
   reach into the shadow DOM. */
.gmp-autocomplete-wrap gmp-place-autocomplete input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dark .gmp-autocomplete-wrap gmp-place-autocomplete input {
  background: #1e293b;
  color: #f1f5f9;
  border-color: rgba(71, 85, 105, 0.6);
}
.gmp-autocomplete-wrap gmp-place-autocomplete input:focus {
  outline: none;
  border-color: #2EB6B1;
  box-shadow: 0 0 0 3px rgba(46, 182, 177, 0.2);
}

/* Predictions dropdown — these are exposed shadow DOM ::part() names. */
gmp-place-autocomplete::part(prediction-list) {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
  margin-top: 4px;
  padding: 4px 0;
  z-index: 60;
}
.dark gmp-place-autocomplete::part(prediction-list) {
  background: #0f172a;
  border-color: rgba(71, 85, 105, 0.6);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

gmp-place-autocomplete::part(prediction-item) {
  padding: 10px 14px;
  font-size: 14px;
  color: #0f172a;
  border-radius: 8px;
  margin: 2px 4px;
}
.dark gmp-place-autocomplete::part(prediction-item) {
  color: #f1f5f9;
}
gmp-place-autocomplete::part(prediction-item-selected),
gmp-place-autocomplete::part(prediction-item):hover {
  background: rgba(46, 182, 177, 0.12);
  color: #0f766e;
}
.dark gmp-place-autocomplete::part(prediction-item-selected),
.dark gmp-place-autocomplete::part(prediction-item):hover {
  background: rgba(46, 182, 177, 0.22);
  color: #5eead4;
}
gmp-place-autocomplete::part(prediction-item-icon) {
  color: #2EB6B1;
}
gmp-place-autocomplete::part(prediction-item-main-text) {
  font-weight: 600;
}
gmp-place-autocomplete::part(prediction-item-secondary-text) {
  color: #64748b;
  font-size: 12px;
}
.dark gmp-place-autocomplete::part(prediction-item-secondary-text) {
  color: #94a3b8;
}
gmp-place-autocomplete::part(prediction-item-match) {
  color: #2EB6B1;
  font-weight: 700;
}

/* When mounted inside the chat-genie planner step, the dropdown can collide
   with the panel's own scroll container; raise the z-index so it floats over
   neighbouring planner cards. */
.chat-genie-planner-panel .gmp-autocomplete-wrap gmp-place-autocomplete::part(prediction-list),
#chat-genie-overlay .gmp-autocomplete-wrap gmp-place-autocomplete::part(prediction-list) {
  z-index: 1000;
}

/* Defensive overrides: the v3 component started shipping a fullscreen mobile
   overlay that defaults to a black backdrop on iOS. Re-skin it to match the
   app's surface colours so the suggestions stay legible (#362). */
gmp-place-autocomplete::part(input) {
  background: #ffffff;
  color: #0f172a;
}
.dark gmp-place-autocomplete::part(input) {
  background: #1e293b;
  color: #f1f5f9;
}
gmp-place-autocomplete::part(prediction-overlay) {
  background: rgba(15, 23, 42, 0.18);
}
.dark gmp-place-autocomplete::part(prediction-overlay) {
  background: rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) {
  gmp-place-autocomplete::part(prediction-list) {
    border-radius: 16px;
    margin: 4px;
  }
}

/* Bug #658: more recent Google Maps Places v3 releases stopped exposing the
   ::part(input) hooks on every render path — particularly the mobile full-
   screen sheet, which reverted to a dark backdrop with a black input. Add
   defensive overrides that target the component's own shadow-DOM hosts and
   the surrounding wrapper so the field is always rounded, light, and
   readable regardless of the variant Google ships. */
gmp-place-autocomplete,
gmp-place-autocomplete::part(main) {
  background: transparent;
  color: #0f172a;
}
.dark gmp-place-autocomplete,
.dark gmp-place-autocomplete::part(main) {
  color: #f1f5f9;
}
/* Catch any nested <input>s (shadow-DOM piercing isn't possible from light
   DOM, but Google renders the input in light DOM and we already style it
   above — this rule covers older browsers that hoist the input outside the
   wrapper, e.g. legacy Safari). */
input.pac-target-input,
gmp-place-autocomplete > input,
.gmp-autocomplete-wrap > input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dark input.pac-target-input,
.dark gmp-place-autocomplete > input,
.dark .gmp-autocomplete-wrap > input {
  background: #1e293b;
  border-color: rgba(71, 85, 105, 0.6);
  color: #f1f5f9;
}
input.pac-target-input:focus,
gmp-place-autocomplete > input:focus,
.gmp-autocomplete-wrap > input:focus {
  outline: none;
  border-color: #2EB6B1;
  box-shadow: 0 0 0 3px rgba(46, 182, 177, 0.2);
}

/* The classic PAC dropdown (rendered as a portaled .pac-container) still
   appears for some legacy paths and inherits Google's default white-on-blue
   styling. Re-skin it to match the rest of HomeAtlas. */
.pac-container {
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15) !important;
  background: #ffffff !important;
  padding: 4px 0 !important;
  margin-top: 4px !important;
  font-family: inherit !important;
  color: #0f172a !important;
  z-index: 1000 !important;
}
.pac-container .pac-item {
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  border-top: 0 !important;
  border-radius: 8px !important;
  margin: 2px 4px !important;
}
.pac-container .pac-item:hover,
.pac-container .pac-item-selected {
  background: rgba(46, 182, 177, 0.12) !important;
  color: #0f766e !important;
}
.pac-container .pac-item-query { color: #0f172a !important; font-weight: 600 !important; }
.pac-container .pac-matched { color: #2EB6B1 !important; font-weight: 700 !important; }
.pac-icon { filter: invert(60%) sepia(35%) saturate(495%) hue-rotate(135deg); }
.dark .pac-container {
  background: #0f172a !important;
  border-color: rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9 !important;
}
.dark .pac-container .pac-item { color: #f1f5f9 !important; }
.dark .pac-container .pac-item-query { color: #f1f5f9 !important; }
.dark .pac-container .pac-item:hover,
.dark .pac-container .pac-item-selected {
  background: rgba(46, 182, 177, 0.22) !important;
  color: #5eead4 !important;
}