/* ═══════════════════════════════════════════════════════════
   ATLAS — Direction Selector
   Dropdown in topbar between brand and status indicator.
   ═══════════════════════════════════════════════════════════ */

.dir-selector {
  position: relative;
  margin: 0 8px;
  flex-shrink: 0;
}

.dir-selector__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--ui-glass-2, rgba(10,16,30,.52));
  border: 1px solid var(--ui-border, rgba(0,242,255,.14));
  border-radius: 4px;
  color: var(--ui-text, rgba(255,255,255,.92));
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.dir-selector__btn:hover {
  background: rgba(0, 242, 255, .1);
  border-color: var(--ui-border-strong, rgba(0, 242, 255, .22));
  box-shadow: 0 0 12px rgba(0, 242, 255, .18);
}
.dir-selector__btn[aria-expanded="true"] {
  background: rgba(0, 242, 255, .15);
  border-color: rgba(0, 242, 255, .5);
  color: var(--ui-accent, rgba(0, 242, 255, .92));
  text-shadow: 0 0 6px rgba(0, 242, 255, .5);
}

.dir-selector__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dir-color, #00d4ff);
  box-shadow:
    0 0 5px var(--dir-color, #00d4ff),
    0 0 10px var(--dir-color, #00d4ff);
  flex-shrink: 0;
}

.dir-selector__short {
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ui-accent, rgba(0, 242, 255, .92));
  text-shadow: 0 0 6px rgba(0, 242, 255, .4);
}

.dir-selector__label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--ui-text-2, rgba(255, 255, 255, .72));
  font-size: 11px;
  text-transform: none;
}

.dir-selector__caret {
  font-size: 9px;
  opacity: .6;
  margin-left: 2px;
  transition: transform .2s;
}
.dir-selector__btn[aria-expanded="true"] .dir-selector__caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* ─── Dropdown menu ─── */
.dir-selector__menu {
  position: fixed;
  top: var(--dir-menu-top, 60px);
  left: var(--dir-menu-left, 20px);
  min-width: 280px;
  background: rgba(7, 14, 28, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 242, 255, .28);
  border-radius: 4px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .6),
    0 0 24px rgba(0, 242, 255, .12),
    inset 0 0 40px rgba(0, 242, 255, .03);
  padding: 6px 0;
  z-index: 6000;
  animation: dir-menu-in .18s ease-out;
}

@keyframes dir-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dir-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: var(--ui-text-2, rgba(255, 255, 255, .72));
  transition: background .12s, color .12s;
  border-left: 3px solid transparent;
  user-select: none;
}
.dir-option:hover:not(.is-disabled) {
  background: rgba(0, 242, 255, .08);
  color: var(--ui-text, rgba(255, 255, 255, .92));
  border-left-color: rgba(0, 242, 255, .4);
}
.dir-option.is-active {
  background: rgba(0, 242, 255, .12);
  color: var(--ui-accent, rgba(0, 242, 255, .92));
  border-left-color: var(--dir-color, rgba(0, 242, 255, .92));
}
.dir-option.is-active .dir-option__short,
.dir-option.is-active .dir-option__label {
  text-shadow: 0 0 6px rgba(0, 242, 255, .5);
}
.dir-option.is-disabled {
  opacity: .38;
  cursor: not-allowed;
}
.dir-option.is-disabled .dir-option__count {
  color: rgba(255, 255, 255, .3);
}

.dir-option__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dir-option:not(.is-disabled) .dir-option__dot {
  box-shadow:
    0 0 6px var(--dir-color),
    0 0 12px var(--dir-color);
}

.dir-option__short {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  min-width: 36px;
  color: var(--dir-color, #00d4ff);
}

.dir-option__label {
  flex: 1;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .3px;
  font-size: 12px;
}

.dir-option__count {
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: 10px;
  color: var(--ui-text-dim, rgba(255, 255, 255, .56));
  font-weight: 700;
}

.dir-option__count::after {
  content: " CH";
  font-size: 8px;
  opacity: .6;
  margin-left: 2px;
}

.dir-option__divider {
  height: 1px;
  margin: 4px 12px;
  background: linear-gradient(90deg, transparent, rgba(0, 242, 255, .25), transparent);
}

.dir-menu__header {
  padding: 6px 16px 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ui-text-dim, rgba(255, 255, 255, .56));
  border-bottom: 1px solid rgba(0, 242, 255, .14);
  margin-bottom: 4px;
}

/* ═══════════════════════════════════
   Mobile — full-width bottom sheet style dropdown
   ═══════════════════════════════════ */
@media (max-width: 980px) {
  .dir-selector {
    margin: 0 4px;
  }
  .dir-selector__btn {
    padding: 5px 8px;
    font-size: 10px;
    gap: 6px;
  }
  .dir-selector__label {
    display: none;
  }
  .dir-selector__short {
    font-size: 10px;
  }
  .dir-selector__menu {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 60px;
    width: auto;
    min-width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
  }
  .dir-option {
    padding: 12px 16px;
    font-size: 14px;
  }
  .dir-option__label {
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .dir-selector__btn {
    padding: 4px 6px;
    gap: 4px;
  }
  .dir-selector__short {
    font-size: 9px;
    letter-spacing: 1px;
  }
}