/* ============================================================
   Dropdown Host — Unified Panel Positioning & Animation
   ============================================================
   Coordinates all nav dropdown panels through a single container.
   Replaces per-dropdown positioning with centralized layout.
   ============================================================ */

/* No backdrop element — dropdowns use click-outside detection (mousedown on document) */

/* ---- Panel container (the single shared wrapper) ---- */
/* Glassmorphism: translucent surface with blur. Sized by JS inline width, never full-page. */
.dh-panel {
  position: fixed;
  z-index: 500000;
  background: color-mix(in srgb, var(--theme-surface, #f8f9fa) 50%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  color: var(--theme-text, #1a1a1a);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  overflow: hidden;
  max-height: calc(100vh - var(--nav-total-height, 95px) - var(--week-card-height, 50vh) - 16px);
  display: flex;
  flex-direction: column;
  /* JS sets inline width per panel — do NOT override with auto/fit-content.
     max-height uses content area height (viewport - nav - footer) not 80vh,
     so panels don't extend into the week calendar. */
  /* Contain backdrop-filter to this element — prevents blur from leaking outside */
  isolation: isolate;
}

/* ---- Open state ---- */
.dh-panel.dh-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---- Closing animation (slightly faster) ---- */
.dh-panel.dh-closing {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
}

/* ---- Portal targets (per-panel content divs) ---- */
/* All children must be transparent to prevent stacking semi-transparent layers */
.dh-portal {
  display: none;
  background: transparent !important;
}
.dh-portal.dh-portal-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dh-panel > *,
.dh-panel .dh-drag-handle,
.dh-portal > * {
  background: transparent !important;
}

/* ---- Drag handle ---- */
.dh-panel.dh-draggable .dh-drag-handle {
  cursor: grab;
}
.dh-panel.dh-dragging {
  transition: none;
  user-select: none;
}
.dh-panel.dh-dragging .dh-drag-handle {
  cursor: grabbing;
}

/* ---- Close button (X) — shown only in floating mode ---- */
.dh-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-text, #cdd6f4) 15%, transparent);
  color: var(--theme-text, #cdd6f4);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.dh-close-btn:hover {
  background: color-mix(in srgb, var(--theme-text, #cdd6f4) 25%, transparent);
}
/* Show close button when panel is floating */
.dh-panel.dh-floating .dh-close-btn {
  display: flex;
}

/* ---- Floating mode visual cue ---- */
.dh-panel.dh-floating {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ---- Hover target highlight (subtle glow on nav buttons) ---- */
.nav-icon-btn.dh-hover-target {
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Desktop: constrain to content area (don't overlap calendar) ---- */
@media (min-width: 480px) {
  .dh-panel {
    max-width: calc(100vw - var(--month-card-width, 416px) - 32px);
  }
  body.calendar-hidden .dh-panel {
    max-width: calc(100vw - 32px);
  }
}

/* ---- Phone portrait: full-width below nav ---- */
@media (max-width: 479px) {
  .dh-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    border-radius: 0 0 12px 12px;
    max-height: calc(100vh - var(--nav-total-height, 80px) - 8px);
    overflow-y: auto;
  }
}

/* ---- Phone landscape: full-width below nav (same as portrait, not side panel) ---- */
@media (orientation: landscape) and (max-height: 500px) {
  .dh-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    border-radius: 0 0 12px 12px;
    max-height: calc(100vh - var(--nav-total-height, 48px) - 8px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Override JS-injected landscape styles — theme menu must NOT break out of .dh-panel */
  .dh-panel #color-scheme-dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-height: none !important;
    max-width: none !important;
    z-index: auto !important;
    overflow: visible !important;
  }
  /* Horizontal layout in landscape — toggles left, grid right (plenty of width) */
  .dh-panel .theme-layout-wrap {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  .dh-panel .theme-toggles-col {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: max-content !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(128,128,128,0.15) !important;
  }
  .dh-panel .theme-grid-col {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* ---- Theme grid: fixed square size, never overflow panel ---- */
.dh-panel #scheme-grid {
  grid-template-columns: repeat(8, 38px) !important;
  gap: 2px !important;
  justify-content: center !important;
}
.dh-panel #scheme-grid .scheme-preview {
  width: 38px !important;
  height: 38px !important;
}
/* Landscape: smaller squares so all 8 rows fit vertically */
@media (orientation: landscape) and (max-height: 500px) {
  .dh-panel #scheme-grid {
    grid-template-columns: repeat(8, 30px) !important;
  }
  .dh-panel #scheme-grid .scheme-preview {
    width: 30px !important;
    height: 30px !important;
  }
  .dh-panel #scheme-grid .scheme-preview .scheme-letter {
    font-size: 14px !important;
  }
}

/* ---- Glassmorphism for non-DropdownHost panels ---- */
/* Theme dropdown — transparent on structural elements only.
   Must beat theme-application.css rule: .dropdown-menu { background: var(--theme-surface) }
   DO NOT clear background on buttons, scheme-preview squares, tooltip popups, or toggle knob. */
.dh-panel #color-scheme-dropdown-menu,
.dh-panel #color-scheme-dropdown-menu > div,
.dh-panel .dropdown-menu,
.dh-panel .theme-layout-wrap,
.dh-panel .theme-toggles-col,
.dh-panel .theme-grid-col,
.dh-panel .theme-name-header,
.dh-panel #theme-tooltips-slot,
.dh-panel #color-scheme-options {
  background: transparent !important;
  background-color: transparent !important;
}
/* Remove excess padding from theme menu inside DropdownHost */
.dh-panel #color-scheme-dropdown-menu {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
}

/* Override theme-application.css: #color-scheme-selector-btn { background: none !important }
   Must show nav-active highlight AND gradient preview when panel is open */
#color-scheme-selector-btn.nav-active {
  background: rgba(255, 255, 255, 0.2) !important;
}
/* Show gradient theme preview on the button when the DropdownHost theme panel is open
   (replaces the old .color-scheme-dropdown.expanded selector) */
.dh-panel.dh-open[aria-label="Theme"] ~ * #color-scheme-selector-btn,
#color-scheme-selector-btn.nav-active {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Account dropdown — force transparent on ALL children (inline styles set bg via JS) */
#account-dropdown {
  background: color-mix(in srgb, var(--theme-surface, #f8f9fa) 50%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
#account-dropdown > *,
#account-dropdown > div,
#account-dropdown > a {
  background: transparent !important;
}

/* Search results panel */
[class*="nav-dropdown-panel"] {
  background: color-mix(in srgb, var(--theme-surface, #f8f9fa) 50%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

/* Hamburger overlay — override mobile-nav.css background + add blur.
   Uses !important to beat the existing background rule. */
#mobile-hamburger-overlay,
#mobile-hamburger-overlay.open {
  background: color-mix(in srgb, var(--theme-background, #f5f5f5) 75%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

/* ---- Theme horizontal layout when calendar is visible on tablet/desktop ---- */
/* Only apply on viewports wide enough for side-by-side (not phone portrait) */
@media (min-width: 480px) {
  body:not(.calendar-hidden) .theme-layout-wrap {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  body:not(.calendar-hidden) .theme-toggles-col {
    min-width: 0;
    flex: 0 0 auto;
    width: max-content;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    border-right: 1px solid rgba(128,128,128,0.15);
  }
  body:not(.calendar-hidden) .theme-grid-col {
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
  }
  /* Show the label in the toggles column */
  body:not(.calendar-hidden) .theme-select-label {
    display: block !important;
  }
}
/* CVD buttons: equal-width, allow sub-label to wrap */
.cvd-toggle-btn {
  white-space: normal !important;
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.cvd-toggle-btn .cvd-sub {
  white-space: normal !important;
  display: block !important;
}

/* ---- Login form inside DropdownHost ---- */
/* Override checkout-modal styles for glassmorphism panels */
.dh-panel .checkout-form-group {
  margin-bottom: 10px !important;
}
.dh-panel .checkout-form-group label {
  color: var(--theme-text, #cdd6f4) !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
}
.dh-panel .checkout-form-group input:not([type="checkbox"]),
.dh-panel .checkout-form-group textarea {
  background: transparent !important;
  color: var(--theme-text, #cdd6f4) !important;
  border-color: color-mix(in srgb, var(--theme-text, #cdd6f4) 25%, transparent) !important;
  font-size: 16px !important; /* Prevents iOS Safari auto-zoom on focus */
  padding: 8px 10px !important;
}
.dh-panel .checkout-form-group input:focus {
  border-color: var(--theme-primary, #cba6f7) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary, #cba6f7) 20%, transparent) !important;
}
.dh-panel .checkout-form-group input::placeholder {
  color: color-mix(in srgb, var(--theme-text, #cdd6f4) 35%, transparent) !important;
}
/* Override browser autofill styling (Chrome/WebKit force solid light-blue bg) */
.dh-panel .checkout-form-group input:-webkit-autofill,
.dh-panel .checkout-form-group input:-webkit-autofill:hover,
.dh-panel .checkout-form-group input:-webkit-autofill:focus,
.dh-panel .checkout-form-group input:autofill {
  -webkit-text-fill-color: var(--theme-text, #cdd6f4) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--theme-surface, #446565) inset !important;
  box-shadow: 0 0 0 1000px var(--theme-surface, #446565) inset !important;
  border-color: color-mix(in srgb, var(--theme-text, #cdd6f4) 25%, transparent) !important;
  caret-color: var(--theme-text, #cdd6f4) !important;
}
.dh-panel .checkout-submit-btn {
  background: var(--theme-primary, #cba6f7) !important;
  color: var(--theme-text-on-primary, #1e1e2e) !important;
  padding: 10px !important;
  margin-top: 10px !important;
}
.dh-panel .checkout-submit-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}
.dh-panel #auth-modal-title {
  font-size: 1rem !important;
  margin-bottom: 12px !important;
}

/* Login panel: 2-column layout on desktop when calendar is visible */
@media (min-width: 640px) {
  body:not(.calendar-hidden) .dh-login-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 12px;
    align-items: start;
    padding: 12px 16px !important;
  }
  body:not(.calendar-hidden) .dh-login-wrapper > #auth-modal-title {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body:not(.calendar-hidden) .dh-login-wrapper > #login-error {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body:not(.calendar-hidden) .dh-login-wrapper > #login-form {
    grid-column: 1;
    grid-row: 3 / 5;
  }
  body:not(.calendar-hidden) .dh-login-wrapper > .dh-login-divider {
    grid-column: 2;
    grid-row: 3 / 5;
    flex-direction: column !important;
    margin: 0 !important;
    align-self: stretch;
    gap: 8px !important;
  }
  body:not(.calendar-hidden) .dh-login-wrapper > .dh-login-divider > div {
    width: 1px !important;
    height: auto !important;
    flex: 1 !important;
  }
  body:not(.calendar-hidden) .dh-login-wrapper > button {
    grid-column: 3;
    margin-bottom: 8px;
  }
}

/* Login panel: mobile portrait — taller to prevent misclicks behind */
@media (max-width: 479px) {
  .dh-login-form {
    min-height: 70vh;
  }
}

/* Login panel: landscape — constrained width, not full-width */
@media (orientation: landscape) and (max-height: 600px) {
  .dh-panel:has(.dh-login-form) {
    width: 400px !important;
    max-width: 50vw !important;
    left: auto !important;
    right: 8px !important;
  }
}

/* ---- Reduced motion: disable all transitions ---- */
@media (prefers-reduced-motion: reduce) {
  .dh-panel,
  .dh-panel.dh-open,
  .dh-panel.dh-closing {
    transition: none;
  }
}
/* cache-bust 1774203137 */