/*
 * Plain CSS that must load even if the Tailwind build is missing —
 * floorplan transforms, GPU compositing hints, kiosk tap-target floor,
 * the kiosk app shell (.floorplan-screen) and modal scaffolding.
 * Brand colors and typography live in app/assets/tailwind/application.css.
 */

html, body {
  margin: 0;
  background-color: #0e3046;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ===========================================================
 * Kiosk app shell
 *
 * .floorplan-screen fills the viewport, stacked as:
 *   header (logo) -> floorplan (flex:1) -> bottom bar
 * --background comes from inline style, sourced from bg.svg in
 * the screen template.
 * =========================================================== */

.floorplan-screen {
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(0.75rem, 4vw, 2.5rem);
  background: var(--background) center / cover no-repeat #0e3046;
  color: #f8fafc;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.floorplan-screen__header {
  display: flex;
  justify-content: center;
  padding-block: 0.25rem;
  flex: 0 0 auto;
}
.floorplan-screen__logo {
  height: clamp(3.5rem, 8vw, 7rem);
  width: auto;
}

/* The .floorplan container fills the vertical space left over by the
   header + bottom bar. The SVG inside is absolutely positioned and
   stretched to fill the container box — Safari doesn't reliably honour
   `height: 100%` on a flex-child SVG without explicit dimensions, but
   `position: absolute; inset: 0` is unambiguous. The viewBox content
   is centred inside that box by the SVG's intrinsic
   preserveAspectRatio="xMidYMid meet", so on a portrait kiosk the map
   sits at full width with breathing room above and below. Sizing the
   SVG to the full container (rather than to the natural aspect) lets
   zoom-in transforms expand into that breathing room instead of being
   clipped by the SVG element box. */
.floorplan-screen > .floorplan {
  flex: 1 1 0;
  position: relative;
  width: 100%;
  min-height: 0;
  background: none;
  overflow: hidden;
}
.floorplan-screen > .floorplan svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Bottom action bar:
   [Key] [Search]              [+] [−] [↺]
   Left group lives in .floorplan-screen__actions, right group is
   the .floorplan-controls FloorplanControlsComponent renders. */
.floorplan-screen__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.floorplan-screen__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.floorplan-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(15, 60, 85, 0.85);
  color: #f8fafc;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  transition: background-color 120ms ease, transform 120ms ease;
}
.floorplan-fab:hover  { background: rgba(20, 70, 104, 0.95); }
.floorplan-fab:active { transform: translateY(1px); }

.floorplan-fab--primary {
  background: #c99a23;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
.floorplan-fab--primary:hover { background: #e2b53f; }

.floorplan-fab--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: none;
  box-shadow: none;
}
.floorplan-fab--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.floorplan-fab__label { line-height: 1; }

/* ===========================================================
 * Floorplan SVG container
 * =========================================================== */

.floorplan {
  overflow: hidden;
  transform: translateZ(0);
}

#floorplan-viewport {
  will-change: transform;
}

/* Floorplan zoom/reset controls — rendered into the right side of the
   bottom bar (.floorplan-screen__bar) rather than overlaid on the SVG. */
.floorplan-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(15, 60, 85, 0.85);
  padding: 0.375rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

.floorplan-controls__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.floorplan-controls__btn:hover  { background-color: rgba(255, 255, 255, 0.18); }
.floorplan-controls__btn:active { background-color: rgba(255, 255, 255, 0.28); }

.mode-kiosk .floorplan-controls__btn {
  width: 4rem;
  height: 4rem;
  font-size: 1.75rem;
}
.mode-kiosk [data-kiosk-tap="true"] {
  min-height: 4rem;
  padding-inline: 1.5rem;
  font-size: 1.0625rem;
}

/* ===========================================================
 * Native <dialog> modals
 *
 * .floorplan-dialog--corner: small top-right card (the key).
 * .floorplan-dialog--sheet:  full-width bottom sheet (search + detail).
 * =========================================================== */

.floorplan-dialog {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0e3046;
}
.floorplan-dialog::backdrop {
  background: rgba(14, 48, 70, 0.55);
  backdrop-filter: blur(2px);
}

.floorplan-dialog__card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  max-width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}

.floorplan-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #d4e6f1;
}
.floorplan-dialog__header--sheet {
  border-bottom: 0;
  padding: 0.5rem 1rem 0.25rem;
  justify-content: flex-end;
  position: relative;
}

.floorplan-dialog__title {
  margin: 0;
  font-family: var(--font-display, "Inter", sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
}

.floorplan-dialog__close {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  color: #155680;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.floorplan-dialog__close:hover { background: #eef5fa; }
.mode-kiosk .floorplan-dialog__close { width: 3.25rem; height: 3.25rem; font-size: 1.75rem; }

.floorplan-dialog__handle {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: #d4e6f1;
}

.floorplan-dialog__footnote {
  padding: 0 1.25rem 1rem;
  margin: 0;
  font-size: 0.75rem;
  color: #4488b5;
}

/* Key dialog — small floating card top-right. */
.floorplan-dialog--corner {
  position: fixed;
  inset: auto;
  top: max(env(safe-area-inset-top, 0px), 1rem);
  right: max(env(safe-area-inset-right, 0px), 1rem);
  width: min(20rem, calc(100vw - 2rem));
}
.floorplan-dialog--corner .floorplan-dialog__card { border-radius: 0.875rem; }

.floorplan-key-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.floorplan-key-list li { display: flex; align-items: center; gap: 0.75rem; }
.floorplan-key-swatch {
  flex: none;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.floorplan-key-dim { color: #4488b5; }

/* Search / detail dialog — bottom sheet pinned to the bottom of the
   screen, full width on mobile + portrait kiosk, centred & inset
   in landscape. */
.floorplan-dialog--sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
}
.floorplan-dialog--sheet .floorplan-dialog__card {
  border-radius: 1.25rem 1.25rem 0 0;
  max-height: 88vh;
  max-height: 88dvh;
}
.floorplan-dialog__card--sheet > turbo-frame { display: block; overflow-y: auto; }

@media (orientation: landscape) and (min-width: 1000px) {
  .floorplan-dialog--sheet { inset: auto; left: 50%; bottom: 1.5rem; transform: translateX(-50%); width: min(46rem, 90vw); }
  .floorplan-dialog--sheet .floorplan-dialog__card { border-radius: 1.25rem; }
}

/* ===========================================================
 * Exhibitor modal content
 * =========================================================== */

.exhibitor-search > label {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding-block: 0.5rem;
  margin-block-start: -0.5rem;
  z-index: 1;
}

.exhibitor-modal-back {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-bottom: 1px solid #eef5fa;
  z-index: 1;
}
.exhibitor-modal-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: #155680;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
}
.exhibitor-modal-back__link:hover { background: #eef5fa; color: #124668; }
.mode-kiosk .exhibitor-modal-back__link { min-height: 3.5rem; padding-inline: 1rem; font-size: 1rem; }

/* Dev-only path-id overlay hint. */
.floorplan-dev-hint {
  position: fixed;
  bottom: 0.75rem;
  left: 0.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: #fde68a;
  background: rgba(14, 48, 70, 0.85);
  border-radius: 0.5rem;
  z-index: 6;
}
.floorplan-dev-hint code { font-family: ui-monospace, SFMono-Regular, monospace; }