/* ============================================================
   Dropdown / menu — shared floating menu surface
   ------------------------------------------------------------
   The app-wide dropdown: topbar language menu + superadmin customer
   switcher, the surveys/analytics/survey-taker view + language menus,
   and login's language menu (which re-points the --dd-* tokens for the
   dark hero — see pages/login.css). Extracted from the styles.css
   monolith and rebrand-tokenized; mirrors the shipped place-selector.css
   dropdown so the app's menus share one language.

   Behavior/JS contract (unchanged): `.dropdown-menu` toggles with `.open`;
   options are `.dropdown-option` (+ `.active` for the current item);
   mutual-close on document click is wired in the page/topbar JS.

   Options are FLAT ROWS, never pills — only the menu container is rounded.
   ============================================================ */
:root{
  --dd-bg: var(--color-surface);
  --dd-border: var(--color-border);
  --dd-radius: var(--radius-sm);
  --dd-shadow: 0 4px 12px color-mix(in srgb, var(--th-ink) 15%, transparent);
  --dd-item-fs: var(--fs-sm);
  --dd-item-fg: var(--color-text);
  --dd-item-hover: color-mix(in srgb, var(--color-action) 12%, transparent);
  --dd-item-selected: var(--color-selected-bg);
}

/* Surface */
.dropdown-menu{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-3xs);
  background: var(--dd-bg);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow);
  overflow: hidden;
  z-index: 100;}
.dropdown-menu.open{ display: block; }

/* Trigger anchors (structural — give the absolute menu a positioning parent) */
.view-selector,
.lang-selector{ position: relative; }

/* Size variants */
.view-menu{ min-width: 140px; }
.lang-menu{
  min-width: 160px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;}

/* Option — a flat full-width row (NOT a pill). Element-agnostic:
   consumers use <div>, <a>, and <button>, so reset button chrome. */
.dropdown-option{
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--dd-item-fs);
  color: var(--dd-item-fg);
  transition: background-color var(--dur-quick) var(--ease);}
.dropdown-option:hover{ background: var(--dd-item-hover); }
.dropdown-option.active{
  background: var(--dd-item-selected);
  font-weight: var(--fw-semibold);}
.dropdown-option svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;}

/* Legacy compact language trigger (survey-taker; emoji flag) — kept until
   input_sheet migrates. The shared language switcher below supersedes it. */
.lang-dropdown{ font-size: var(--fs-sm); }
.lang-dropdown span:not(.lang-flag){ display: none; }
.lang-flag{ font-size: var(--fs-base); }

/* ---------- Language switcher (shared control) ----------
   Trigger sits on dark backdrops (dark topbar bar + login photo hero), so it's
   a translucent light pill. The menu is the standard .dropdown-menu above. */
.lang-switcher{ position: relative; }
.lang-switcher__toggle{
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--th-white) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--th-white) 20%, transparent);
  color: var(--th-white);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease);}
.lang-switcher__toggle:hover{ background: color-mix(in srgb, var(--th-white) 18%, transparent); }
.lang-switcher__name{ white-space: nowrap; }
.lang-switcher__chevron{ flex-shrink: 0; }
.lang-switcher__flag{
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--th-ink) 12%, transparent);}