/*
 * timezone-picker.css — world-map timezone picker (int_lms).
 *
 * Colour lives here rather than in the generated SVG so one asset serves both themes;
 * build_timezone_map deliberately emits paths with no fill or stroke of their own.
 *
 * Colours come from design-system/tokens.css (--color-*), which app/base.html loads.
 * NOT Bootstrap's --bs-* — this app does not define them, so every var(--bs-…) here
 * silently resolved to its fallback and the picker came up Bootstrap blue inside a
 * brand-brown app.
 *
 * CSP forbids style="" attributes, so every state the JS drives is a class toggle.
 */

/* ── Trigger ──────────────────────────────────────────────────────────────── */

.tz-trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
}

.tz-trigger .tz-trigger-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The native select stays in the DOM as the value holder and the form control, so a
   failed enhancement leaves a working field. Hidden visually, not with display:none —
   a display:none select is skipped by some validation UIs. */
.tz-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Map ──────────────────────────────────────────────────────────────────── */

.tz-map {
  position: relative;
  width: 100%;
  /* The ocean. Deliberately darker than the land so the continents read as land at a
     glance — the first cut used two near-identical greys and the map vanished. */
  background: var(--color-surface-sunken, #ECEAE4);
  border: 1px solid var(--color-border, #DDD9D1);
  border-radius: .375rem;
}

.tz-map-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Only the map scrolls under its own corners; the tooltip must be free to overhang
     the frame, so the clipping lives here and not on .tz-map. */
  border-radius: .375rem;
  overflow: hidden;
}

.tz-map-svg path {
  fill: var(--color-surface, #fff);
  stroke: var(--color-border-strong, #C8C3B8);
  stroke-width: 0.6;
  /* The paths are the hit targets; without this the 1px strokes are all you can hit. */
  cursor: pointer;
  transition: fill .08s linear;
}

.tz-map-svg path:hover {
  fill: var(--color-accent, #D97706);
}

.tz-map-svg path.tz-selected,
.tz-map-svg path.tz-selected:hover {
  fill: var(--color-primary, #7B5F5F);
}

/* Zones the simplified boundaries dropped have no path to highlight. The note below the
   map says so rather than leaving the map looking merely unresponsive. */
.tz-map-note {
  padding: .35rem .6rem;
  border-top: 1px solid var(--color-border, #DDD9D1);
  background: var(--color-surface, #fff);
  border-radius: 0 0 .375rem .375rem;
}

.tz-map-tip {
  position: absolute;
  top: 0;
  left: 0;
  padding: .15rem .4rem;
  font-size: .75rem;
  line-height: 1.3;
  color: #fff;
  background: var(--color-bg-hero, #2C2321);
  border-radius: .2rem;
  pointer-events: none;
  white-space: nowrap;
  /* Above the modal body, so a label for Japan or New Zealand can overhang the map's
     right edge instead of being sliced off by it. */
  z-index: 2;
  /* Positioned by CSS custom properties the JS sets. The JS also flips the anchor near
     the right edge, which a transform alone cannot do — see positionTip(). */
  transform: translate(calc(var(--tz-tip-x, 0) * 1px), calc(var(--tz-tip-y, 0) * 1px));
}

/* Flipped to sit to the LEFT of the cursor when the label would otherwise run off the
   map's right-hand side. */
.tz-map-tip.tz-tip-flip {
  transform: translate(calc(var(--tz-tip-x, 0) * 1px), calc(var(--tz-tip-y, 0) * 1px))
             translateX(-100%);
}

/* ── Option list ──────────────────────────────────────────────────────────── */

.tz-list {
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border, #DDD9D1);
  border-radius: .375rem;
}

.tz-option {
  padding: .35rem .6rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.tz-option:hover,
.tz-option.tz-active {
  background: var(--color-surface-raised, #F4F3EE);
}

.tz-option.tz-selected {
  background: var(--color-primary, #7B5F5F);
  color: #fff;
}

.tz-option-empty {
  padding: .6rem;
  cursor: default;
}

.tz-option-empty:hover {
  background: transparent;
}