/* ─── 1. CSS Custom Properties ─────────────────────────────────────────── */
:root {
  --bg:            #0d0f14;
  --surface:       #161a23;
  --ring-track:    #1e2430;
  --ring-border:   #252d3d;
  --text-primary:  #e8e6df;
  --text-muted:    #4a5160;
  --text-dim:      #2e3440;
  --needle:        #f0c040;
  --needle-glow:   rgba(240, 192, 64, 0.15);
  --font-mono:     'DM Mono', monospace;
  --font-sans:     'DM Sans', sans-serif;
  --tooltip-bg:    #1e2430;
  --tooltip-border:#2e3a50;
}

/* ─── 2. Reset & Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ─── 3. Layout ─────────────────────────────────────────────────────────── */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid var(--ring-track);
  flex-shrink: 0;
}

.header-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.header-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.clock-wrap {
  width: 100%;
  max-width: 560px;
}

#clock-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.footer {
  padding: 20px 32px 28px;
  border-top: 1px solid var(--ring-track);
  flex-shrink: 0;
}

/* ─── 4. Tooltip ────────────────────────────────────────────────────────── */
.tooltip {
  position: fixed;
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-border);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
  white-space: nowrap;
  max-width: 280px;
}

.tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.tooltip-label {
  font-weight: 500;
  color: var(--text-primary);
  display: block;
  margin-bottom: 3px;
}

.tooltip-time {
  color: var(--text-muted);
}

/* ─── 5. Legend ─────────────────────────────────────────────────────────── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-swatch.point {
  border-radius: 50%;
}

/* ─── 6. SVG Interaction ────────────────────────────────────────────────── */
.event-arc, .event-dot {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.event-arc:hover, .event-dot:hover {
  opacity: 1 !important;
  filter: brightness(1.25);
}

/* ─── 7. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .header { padding: 14px 20px; }
  .footer { padding: 16px 20px 24px; }
  .main   { padding: 20px 16px; }

  .legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* ─── 8. Controls Bar ───────────────────────────────────────────────────── */
.controls-bar {
  padding: 14px 32px;
  border-bottom: 1px solid var(--ring-track);
}

.controls-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.controls-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.controls-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.controls-input {
  background: var(--surface);
  border: 1px solid var(--ring-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
  min-width: 200px;
}

.controls-input:focus {
  border-color: #3a4a6a;
}

.controls-input--date {
  min-width: 150px;
  color-scheme: dark;
}

.controls-btn {
  background: var(--surface);
  border: 1px solid var(--ring-border);
  border-radius: 6px;
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.controls-btn:hover {
  border-color: #3a4a6a;
  background: #1e2430;
}

.controls-btn:active {
  transform: scale(0.98);
}

.controls-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-top: 8px;
  min-height: 16px;
  transition: color 0.2s ease;
}

.controls-status--loading { color: #4a5160; }
.controls-status--success { color: #3B6D11; }
.controls-status--error   { color: #993C1D; }

@media (max-width: 480px) {
  .controls-bar { padding: 12px 20px; }
  .controls-form { flex-direction: column; align-items: stretch; }
  .controls-input { min-width: unset; width: 100%; }
  .controls-btn { width: 100%; }
}


/* ─── 9. Autocomplete Dropdown ──────────────────────────────────────────── */
.autocomplete-wrap {
  position: relative;
}

.city-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--ring-border);
  border-radius: 6px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.city-dropdown.open {
  display: block;
}

.city-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  gap: 12px;
  transition: background 0.1s ease;
}

.city-option:hover,
.city-option.focused {
  background: var(--ring-track);
}

.city-option-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
}

.city-option-name strong {
  color: #f0c040;
  font-weight: 500;
}

.city-option-country {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Scrollbar styling for dropdown */
.city-dropdown::-webkit-scrollbar {
  width: 4px;
}
.city-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.city-dropdown::-webkit-scrollbar-thumb {
  background: var(--ring-border);
  border-radius: 2px;
}


/* ─── 10. Legend Groups ──────────────────────────────────────────────────── */
.legend-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  align-self: center;
  padding-right: 4px;
}

.legend-sep {
  width: 1px;
  height: 14px;
  background: var(--ring-border);
  align-self: center;
  flex-shrink: 0;
}