/* Targeted dark-theme extensions for guest, host and booking surfaces.
   Loaded after lodging-theme.css. Keep every declaration behind the theme
   attribute so the approved light appearance remains unchanged. */

html[data-lodging-theme="dark"] {
  --ring: #54b9ef;
  --secondary: #2b3a4a;
  --secondary-foreground: #f4f7fb;
  --accent: #2b3a4a;
  --accent-foreground: #f4f7fb;
  --popover-foreground: #f4f7fb;
}

html[data-lodging-theme="dark"] body {
  background-color: var(--lodging-page);
  color: var(--lodging-text);
}
html[data-lodging-theme="dark"] :is(
  .text-primary,
  .text-triplar-blue,
  [class~="text-[#005f87]"],
  [class~="text-[#005F87]"]
) {
  color: #63c9f3;
}
/* Loading placeholders must not flash bright white while the route is loading. */
html[data-lodging-theme="dark"] .animate-shimmer {
  background-image: linear-gradient(90deg, #22303f 25%, #354252 50%, #22303f 75%);
}

/* Navigation and shared public chrome. Logos, imagery and brand-colored
   controls are deliberately left untouched. */
html[data-lodging-theme="dark"] header[data-triplar-header="true"],
html[data-lodging-theme="dark"] .mobile-nav,
html[data-lodging-theme="dark"] footer.mobile-nav {
  color: var(--lodging-text);
  border-color: var(--lodging-border);
}

html[data-lodging-theme="dark"] header[data-triplar-header="true"] :is(
  button:not([class*="bg-triplar"]):not([class*="bg-blue"]),
  a.rounded-full
):hover {
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] :is(
  [data-radix-menu-content],
  [data-radix-dropdown-menu-content],
  [data-radix-select-content],
  [data-radix-popover-content],
  [data-radix-hover-card-content],
  [data-radix-context-menu-content]
) {
  background-color: var(--lodging-card);
  color: var(--lodging-text);
  border-color: var(--lodging-border);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.34);
}

html[data-lodging-theme="dark"] :is(
  [role="menuitem"],
  [role="option"],
  [role="radio"],
  [role="checkbox"]
) {
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] :is(
  [role="menuitem"],
  [role="option"]
):is(:hover, :focus, [data-highlighted]) {
  background-color: var(--lodging-surface);
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] :is(
  button,
  a,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline-color: #54b9ef;
}

/* Landing/home: retain hero photos and strong TripLar-blue promotional
   sections while tuning the supporting light content panels. */
html[data-lodging-theme="dark"] .triplar-public-page > :is(section, div) :is(
  .bg-blue-50,
  .from-blue-50,
  .to-white
) {
  --tw-gradient-to: var(--lodging-page) var(--tw-gradient-to-position);
}

html[data-lodging-theme="dark"] .triplar-public-page :is(
  .bg-gradient-to-br.from-blue-50.to-white
) {
  background-image: linear-gradient(135deg, var(--lodging-surface), var(--lodging-page));
}

/* Authentication screens use an inline photograph for the outer backdrop;
   only the card/form surfaces and their secondary copy are changed. */
html[data-lodging-theme="dark"] .min-h-screen.relative.flex.flex-col.items-center.justify-center > .relative.z-10.w-full.max-w-sm > .bg-white {
  background-color: var(--lodging-card);
  color: var(--lodging-text);
  border-color: var(--lodging-border);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.34);
}

html[data-lodging-theme="dark"] .min-h-screen.relative.flex.flex-col.items-center.justify-center > .relative.z-10.w-full.max-w-sm :is(
  .text-gray-900,
  .text-gray-800,
  .text-gray-700
) {
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .min-h-screen.relative.flex.flex-col.items-center.justify-center > .relative.z-10.w-full.max-w-sm :is(
  .text-gray-600,
  .text-gray-500,
  .text-gray-400
) {
  color: var(--lodging-muted);
}

html[data-lodging-theme="dark"] .min-h-screen.relative.flex.flex-col.items-center.justify-center > .relative.z-10.w-full.max-w-sm :is(
  button.border-gray-200,
  input,
  [role="combobox"]
) {
  border-color: var(--lodging-border);
  background-color: var(--lodging-surface);
  color: var(--lodging-text);
}

/* Booking forms and checkout shells use custom teal legacy tokens that are
   outside the shared slate/gray utility mapping. Preserve branded blue CTAs. */
html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) {
  background-color: var(--lodging-page);
  background-image: radial-gradient(circle at 8% 0%, rgb(8 126 185 / 0.12), transparent 30rem);
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .hotel-checkout-theme[class~="bg-[#f7f9f6]"] {
  background-color: var(--lodging-page) !important;
  color: var(--lodging-text) !important;
}

html[data-lodging-theme="dark"] .hotel-checkout-theme :is(
  [class~="bg-[#f7f9f6]/95"],
  [class~="bg-[#fffdf9]"]
) {
  background-color: var(--lodging-card) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) :is(
  .booking-card,
  .bg-white:not(.booking-primary):not([data-pix-qr]):not(.pix-qr-surface),
  .bg-white\/95:not(.booking-primary),
  .bg-white\/90:not(.booking-primary)
) {
  background-color: var(--lodging-card);
  color: var(--lodging-text);
  border-color: var(--lodging-border);
}

html[data-lodging-theme="dark"] .booking-shell.mobile-component .booking-card,
html[data-lodging-theme="dark"] .booking-shell .mobile-component .booking-card {
  background-color: var(--lodging-card) !important;
  color: var(--lodging-text);
  border-color: var(--lodging-border);
}

html[data-lodging-theme="dark"] .booking-shell :is(.booking-mobile-header, .booking-mobile-footer) {
  background-color: rgb(25 35 47 / 0.97) !important;
  color: var(--lodging-text);
  border-color: var(--lodging-border) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) :is(
  [class~="bg-[#edf5f2]"],
  [class~="bg-[#dbe5e1]"],
  [class~="bg-[#edf5f2]/80"]
) {
  background-color: #20374a !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) :is(
  [class~="text-[#182a35]"],
  [class~="text-[#123d4a]"],
  [class~="text-[#0f6b68]"],
  [class~="text-[#42616a]"]
) {
  color: var(--lodging-text) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) :is(
  [class~="text-[#60747a]"],
  [class~="text-[#8aa09b]"]
) {
  color: var(--lodging-muted) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) :is(
  [class~="border-[#123d4a]/10"],
  [class~="border-[#123d4a]/15"],
  [class~="border-[#0f6b68]/15"],
  [class~="border-[#b8c9c5]"],
  [class~="border-[#d9e2df]"]
) {
  border-color: var(--lodging-border) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) :is(
  [class~="hover:bg-[#edf5f2]"],
  [class~="active:bg-[#edf5f2]"]
):is(:hover, :active) {
  background-color: #29445a !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme, .booking-payment-modal) :is(
  input,
  select,
  textarea,
  [role="combobox"]
) {
  color: var(--lodging-text);
  background-color: var(--lodging-surface);
  border-color: var(--lodging-border);
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme) :is(.booking-calendar, .calendar-wrapper, .triplar-calendar, .triplar-double, .rdrCalendarWrapper, .rdrMonth) {
  color: var(--lodging-text);
  background-color: var(--lodging-card) !important;
  border-color: var(--lodging-border) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme) :is(.rdrMonthName, .rdrWeekDay, .rdrDayNumber span, .rdp-head_cell) {
  color: var(--lodging-muted) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme) :is(.rdrDay:not(.rdrDayDisabled):not(.rdrDayPassive):hover .rdrDayNumber span, .rdp-day:not([disabled]):hover) {
  background-color: var(--lodging-surface) !important;
  color: var(--lodging-text) !important;
}

html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme) :is(.rdrDayStartEdge .rdrDayNumber span, .rdrDayEndEdge .rdrDayNumber span, .rdp-day_selected:not([disabled])) {
  background-color: #087eb9 !important;
  color: #fff !important;
}

/* Keep the machine-readable payment code on a clean white backing. This is
   the actual alt text used by HotelCheckout's PIX image. */
html[data-lodging-theme="dark"] :is(.booking-shell, .hotel-checkout-theme) img[alt="QR Code PIX"] {
  background-color: #fff;
  padding: 0.45rem;
}

/* Host shell: its deep blue sidebar is already branded/dark. Limit changes to
   the light top bar, account menu and any host-owned popovers. */
html[data-lodging-theme="dark"] .admin-layout > header.bg-white {
  background-color: var(--lodging-card);
  color: var(--lodging-text);
  border-color: var(--lodging-border);
}

html[data-lodging-theme="dark"] .admin-layout > header :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500) {
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .admin-layout > header [class*="w-56"].bg-white {
  background-color: var(--lodging-card);
  border-color: var(--lodging-border);
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .admin-layout > header [class*="w-56"] :is(.text-gray-900, .text-gray-700, .text-gray-600, .text-gray-500) {
  color: var(--lodging-text);
}

/* Conversations: shell and common message-list panes only; do not touch
   embedded photos or colored sent-message bubbles. */
html[data-lodging-theme="dark"] .chat-layout-shell {
  background-color: var(--lodging-page);
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .chat-layout-shell :is(input, textarea, [contenteditable="true"]) {
  color: var(--lodging-text);
  background-color: var(--lodging-surface);
  border-color: var(--lodging-border);
}

/* Cookie consent uses bespoke component classes and does not inherit utility
   token colors. Its blue accent and primary consent action stay unchanged. */
html[data-lodging-theme="dark"] .privacy-drawer[data-testid="privacy-drawer"] {
  background-color: var(--lodging-card);
  color: var(--lodging-text);
  border: 1px solid var(--lodging-border);
  box-shadow: 0 24px 72px rgb(0 0 0 / 0.46);
}

html[data-lodging-theme="dark"] .privacy-drawer :is(
  .privacy-drawer__title,
  .privacy-drawer__category-heading h3
) {
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .privacy-drawer :is(
  .privacy-drawer__intro,
  .privacy-drawer__legal,
  .privacy-drawer__category-copy p,
  .privacy-drawer__eyebrow
) {
  color: var(--lodging-muted);
}

html[data-lodging-theme="dark"] .privacy-drawer :is(
  .privacy-drawer__category,
  .privacy-drawer__button--secondary
) {
  background-color: var(--lodging-surface);
  border-color: var(--lodging-border);
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .privacy-drawer :is(
  .privacy-drawer__close,
  .privacy-drawer__configure,
  .privacy-drawer__back
) {
  color: var(--lodging-muted);
  border-color: var(--lodging-border);
}

html[data-lodging-theme="dark"] .privacy-drawer :is(
  .privacy-drawer__close,
  .privacy-drawer__configure,
  .privacy-drawer__back,
  .privacy-drawer__button--secondary
):is(:hover, :focus-visible) {
  background-color: #29445a;
  color: var(--lodging-text);
}

html[data-lodging-theme="dark"] .privacy-drawer__mark {
  background-color: #20374a;
  color: #70c8f2;
}