/* ============================================================
   Header account switcher (H2, ui-release WS-HOME-IA)
   ------------------------------------------------------------
   The internal admin/AM entity switcher living in the header's
   PlantSelector slot (components/layout/plant_selector.dart). It
   reuses the .plant-selector__* trigger/dropdown/option chrome
   from voltgrid.css and adds the account-list specifics: the
   filter input + rows, matching the dashboard "My accounts"
   design so it reads as ONE switcher concept everywhere.

   The former /accounts pages' .am-* rules that used to live here
   were dead code (pages deleted; zero Dart references — see
   docs/agent/ui-release/reports/HeaderDropdown.json) and have
   been removed.

   Doctrine: fluid rem only — no width media queries, no px.
   ============================================================ */

/* ── WS-SWITCHER-2 (N6): switching lives under the profile menu ──────
   The standalone header pill dropdown is retired; the switcher section
   (.acct-menu) renders INSIDE the profile icon's .account-dropdown.
   Widen that dropdown only when the section is present (external buyers
   keep the slim menu). */
.account-dropdown:has(.acct-menu) {
  min-width: min(19rem, calc(88 * var(--vwx)));
  max-width: min(23rem, calc(94 * var(--vwx)));
  /* Short viewports (853×480 goal): the menu can outgrow the fold and its
     lower rows become unreachable (the base dropdown is overflow:hidden).
     Cap it under the header and let the MENU scroll — a popover scrolling
     internally is the sanctioned exception to the page-owns-overflow rule
     (same as .acct-flyout). */
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── VIEW AS block (Figma 19924:238547 / 19924:238325) ────────────────────
   The section's own top padding and bottom rule are gone: the redesigned
   .account-dropdown (main.css) owns the 1rem card padding and emits real
   .account-dropdown__divider elements around this section. No horizontal
   padding either — the card's padding already insets it.

   The company LIST is no longer here: "Switch company" opens .acct-flyout
   below, a second card beside the menu. The retired inline picker's rules
   (.acct-menu__picker/.acct-switcher__filter/__list/__empty/__frame-badge,
   .acct-menu__switch/__exit/__viewing*) went with their emitters — class↔CSS
   drift rule, LEARNINGS. */
.acct-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* the button row is right-aligned */
  gap: 0.5rem;
}

.acct-menu__label {
  align-self: stretch;
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 700;
  color: #737373;
}

/* One line, ellipsised — company names run long and the card must not grow.
   The full name is on the element's title attribute. */
.acct-menu__company {
  align-self: stretch;
  font-size: 0.875rem;
  line-height: 1.375rem;
  font-weight: 700;
  color: #3d3d3d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-menu__actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem; /* design's 24px, less the 8px column gap */
}

/* Outlined neutral button (Figma SEButton, neutral/outlined). Local to the
   account menu: there is no shared button primitive in this codebase yet,
   and one dropdown is not the place to start a button system. */
.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 2rem;
  padding: 0 1rem 0 0.75rem;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  background: #fff;
  color: #262626;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.375rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.acct-btn:hover {
  background: #f7f7f7;
  border-color: #e5e5e5;
}

/* ── Company picker flyout (Figma "Checkout Menu" 19924:238404) ───────────
   A second card: search field over a divider-separated list of companies.
   Rendered as a SIBLING of .account-dropdown (see header.dart) because the
   dropdown clips its children.

   Placement is set by measurement in header.dart — 'left'/'right' sit next
   to the card, 'inline' means neither side had room so it takes the card's
   own slot. That keeps the narrow-viewport behaviour out of a width media
   query (doctrine above). */
.acct-flyout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
  padding: 1rem;
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 0.75rem;
  box-shadow:
    0 0.875rem 1.75rem rgba(0, 0, 0, 0.1),
    0 0.375rem 0.75rem rgba(0, 0, 0, 0.09);
  z-index: 1001;
  overscroll-behavior: contain;
}

/* Floating sides. Anchored to .account-selector-wrap like the dropdown
   itself, NOT to the viewport: .site-header and .header-main both carry
   backdrop-filter + will-change:transform, so they are the containing block
   for any position:fixed descendant — viewport coordinates would land in the
   wrong place (CLAUDE.md stacking traps).

   The wrap's right edge IS the dropdown's right edge (the card hangs left
   from `right: 0`), so 'right' only needs to clear the wrap, while 'left'
   has to clear the whole card — hence --acct-drop-w, measured in
   header.dart because that width is fluid. */
.acct-flyout--left,
.acct-flyout--right {
  position: absolute;
  top: 100%;
  margin-top: var(--spacing-2);
  width: min(17.5rem, calc(88 * var(--vwx)));
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

.acct-flyout--left {
  right: calc(var(--acct-drop-w, 17.5rem) + 0.5rem);
  animation: acct-flyout-in-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.acct-flyout--right {
  left: calc(100% + 0.5rem);
  animation: acct-flyout-in-right 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Directional: each side starts nudged TOWARDS the menu and settles out to
   its offset, so the picker reads as sliding out from behind the card that
   spawned it rather than just appearing. Inline has no card to emerge from
   — it takes the menu's own slot, so it drops in like the menu does. */
@keyframes acct-flyout-in-left {
  from {
    opacity: 0;
    transform: translateX(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes acct-flyout-in-right {
  from {
    opacity: 0;
    transform: translateX(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* No room either side (phones): take the dropdown's slot instead. */
.acct-flyout--inline {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-2);
  width: min(19rem, calc(88 * var(--vwx)));
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  /* Same drop-in as the menu it replaces — and vertical-only for the same
     measurement reason (header.dart falls back to measuring THIS element
     when the menu is not rendered). */
  animation: acct-menu-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vestibular safety: the open animations are decorative — both surfaces are
   fully usable without them. Must sit AFTER the --inline rule above: same
   specificity, so source order decides. Covers .account-dropdown's
   acct-menu-in (main.css) too. */
@media (prefers-reduced-motion: reduce) {
  .account-dropdown,
  .acct-flyout,
  .acct-flyout--inline {
    animation: none;
  }
}

.acct-flyout__back {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  color: #737373;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.375rem;
  cursor: pointer;
}

.acct-flyout__back:hover {
  color: #3d3d3d;
}

/* One connected, mutually exclusive grouping control in both contexts. */
:root {
  --account-tab-height: 2rem;
  --account-control-height: calc(var(--account-tab-height) + 0.375rem + 2px);
}
.account-group-tabs {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 0.1875rem;
  gap: 0;
  box-sizing: border-box;
  min-height: var(--account-control-height);
  border: 1px solid #ebebeb;
  border-radius: 0.625rem;
  background: #fafafa;
}
.account-group-tabs::before {
  content: '';
  position: absolute;
  inset-block: 0.1875rem;
  left: 0.1875rem;
  width: calc((100% - 0.375rem) / 3);
  border-radius: 0.4375rem;
  background: #262626;
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 150ms ease;
}
.account-group-tabs:has(input[value="region"]:checked)::before { transform: translateX(100%); }
.account-group-tabs:has(input[value="entity"]:checked)::before { transform: translateX(200%); }
.account-group-tabs:has(input:checked:hover:not(:disabled))::before { background: #3d3d3d; }
.account-group-tabs:has(input:checked:active:not(:disabled))::before { background: #1a1a1a; }
.account-group-tabs:has(input:checked:disabled)::before { background: #d5d5d5; }
.account-group-tabs__tab { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.acct-flyout .account-group-tabs { width: 100%; }
.account-group-tabs__tab input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.account-group-tabs__tab > span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--account-tab-height);
  padding: 0.25rem 0.875rem;
  border-radius: 0.4375rem;
  color: #525252;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.account-group-tabs__tab input:hover:not(:disabled) + span { background: #f2f2f2; color: #262626; }
.account-group-tabs__tab input:active:not(:disabled) + span { background: #ebebeb; }
.account-group-tabs__tab input:checked + span,
.account-group-tabs__tab input:checked:hover:not(:disabled) + span,
.account-group-tabs__tab input:checked:active:not(:disabled) + span { background: transparent; color: #fff; }
.account-group-tabs__tab input:focus-visible + span { outline: 2px solid #737373; outline-offset: 2px; }
.account-group-tabs__tab input:disabled { cursor: not-allowed; }
.account-group-tabs__tab input:disabled + span { color: #9e9e9e; }
.account-group-tabs__tab input:checked:disabled + span { color: #666; }
.account-group-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: #737373;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.account-group-chevron svg { width: 100%; height: 100%; }
.account-group-chevron.is-open { transform: rotate(90deg); }
@media (pointer: coarse) {
  :root { --account-tab-height: 44px; }
  .account-group-tabs__tab > span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .account-group-tabs::before,
  .account-group-tabs__tab > span,
  .account-group-chevron { transition: none; }
}

.acct-flyout__search-form {
  box-sizing: border-box;
  height: var(--account-control-height);
  min-height: var(--account-control-height);
  padding-block: 0.375rem;
  background: #fafafa;
}
.acct-flyout__search-form:focus-within { border-color: #737373; box-shadow: none; }
.acct-flyout__list { display: flex; flex-direction: column; gap: 0; }
.acct-flyout__row,
.acct-flyout__group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-bottom: 1px solid #ebebeb;
  background: #fff;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #3d3d3d;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background-color 150ms ease;
}
.acct-flyout__row { font-weight: 400; }
.acct-flyout__group {
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  border-bottom-color: transparent;
  background: #fafafa;
  color: #262626;
  font-weight: 600;
}
.acct-flyout__group[aria-expanded="true"] { background: #f7f7f7; }
.acct-flyout__row:hover { background: #f7f7f7; color: #262626; text-decoration: none; }
.acct-flyout__group:hover { background: #f2f2f2; }
.acct-flyout__row:active, .acct-flyout__group:active { background: #ebebeb; }
.acct-flyout__row:focus-visible, .acct-flyout__group:focus-visible {
  outline: 2px solid #737373;
  outline-offset: -2px;
}
.acct-flyout__row--nested { padding-left: 1.25rem; }
.acct-flyout__group-title { flex: 1; min-width: 0; }
.acct-flyout__group-code { font-size: 0.75rem; font-weight: 400; color: #666; }
.acct-flyout__group-count {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #666;
  font-variant-numeric: tabular-nums;
}
.acct-flyout__empty { padding: 0.75rem; font-size: 0.875rem; line-height: 1.375rem; color: #666; }

/* A brief reveal ties child rows to the group that was just opened. */
@keyframes account-rows-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.acct-flyout__row--nested,
.dash-acct-tr.is-nested { animation: account-rows-reveal 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .acct-flyout__row--nested,
  .dash-acct-tr.is-nested { animation: none; }
}