/* "Filter by area" — the funnel dropdown right of the topbar tabs.
   Structure and behaviour: views/week/widgets/area_filter_control.js.

   Deliberately borrows the Views dropdown's shell (`.topbar-views-*` in
   styles/layout.css) so two menus in the same bar do not look like two
   different apps — and on a desktop the rows live INSIDE the Views dropdown
   (js/app-shell/views_placement.js). What is new here is the submenu, which
   opens LEFT. */

/* First child of `.topbar-actions`, held at that group's LEFT edge — which is
   immediately right of the tab strip — while `margin-right: auto` pushes the
   panel buttons on to the far end where they were.
   Living inside `.topbar-actions` rather than beside it is load-bearing: the
   tabs are centred by `.topbar-left` and `.topbar-actions` each taking `flex:
   1 1 0` either side of them, and a fourth top-level item in that row is width
   taken off one side only. Measured: it dragged the tab strip 80px left and
   straight under the Views dropdown. */
.topbar-area-filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 12px;
  margin-right: auto;
}

.topbar-area-filter-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  font-size: 12px;
}

.topbar-area-filter-summary::-webkit-details-marker {
  display: none;
}

.topbar-area-filter-summary::after {
  content: "▾";
  font-size: 11px;
  color: var(--text-secondary);
}

.topbar-area-filter-wrap[open] .topbar-area-filter-summary::after {
  content: "▴";
}

/* Something is hidden. Without this the only clue that a goal is missing from
   the week is that it is missing from the week. */
.topbar-area-filter-wrap--active .topbar-area-filter-summary {
  border-color: var(--tab-active-border);
  color: var(--tab-active-border);
}

/* The drop-down card. A wrapper rather than the rows themselves, so the rows
   (`#goal-filter-panel` / `#area-filter-panel`) can leave it whole: on a
   desktop they join the Views dropdown (js/app-shell/views_placement.js) and
   this card stays behind, empty, in a hidden button. */
.topbar-filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--panel-bg, rgba(18, 24, 38, 0.98));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
}

.topbar-area-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Filter rows inside the Views dropdown ──────────────────────────────
   On a desktop js/app-shell/views_placement.js lends them to the Views card
   (`.topbar-lent-to-views`) and hides this button (styles/layout.css). */
/* Last in the Views card whatever order its own rows mounted in (the
   capture-mode group is `order: 1`), and headed, because two lists of
   switches stacked with no label read as one list. */
.topbar-area-filter-panel.topbar-lent-to-views {
  order: 2;
  margin: 0 -8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.topbar-area-filter-panel.topbar-lent-to-views::before {
  content: "Filter";
  padding: 0 8px 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.75;
}

.af-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  outline: none;
}

.af-row:hover,
.af-row:focus-visible,
.af-row:focus-within {
  background: rgba(255, 255, 255, 0.06);
}

.af-row-lead {
  display: flex;
  align-items: center;
  width: 12px;
  color: var(--text-secondary);
}

.af-row-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.af-swatch {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--text-secondary);
}

.af-switch {
  position: relative;
  flex: none;
  cursor: pointer;
}

.af-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.af-switch input:checked + .topbar-toggle {
  background: var(--tab-active-border);
}

.af-switch input:checked + .topbar-toggle::after {
  transform: translateX(22px);
}

.af-switch input:disabled + .topbar-toggle {
  opacity: 0.45;
  cursor: default;
}

/* The submenu. `right: 100%` puts it on the LEFT of the row — this menu hangs
   off the right end of the topbar, so opening the other way would run it off
   screen. The negative margin overlaps the parent's padding by a pixel so the
   pointer never crosses a dead gap on its way across, which would close the
   submenu mid-travel. */
.af-flyout {
  position: absolute;
  top: -6px;
  right: calc(100% - 1px);
  min-width: 210px;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  margin-right: 4px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--panel-bg, rgba(18, 24, 38, 0.98));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 21;
}

.af-row:hover > .af-flyout,
.af-row:focus-within > .af-flyout {
  display: flex;
}

.af-row--sub {
  padding: 5px 6px;
}

.af-row--sub .af-row-label {
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
}

.af-empty {
  margin: 0;
  padding: 6px;
  font-size: 11px;
  color: var(--text-muted, var(--text-secondary));
}

/* When the topbar stacks (`data-topbar-stacked`, js/app-shell/topbar_fit.js),
   and on a phone, this button — or the Views button holding these rows — starts
   its line at the LEFT edge, so everything that opened left would run off
   screen. Mirror it. `:where` keeps these at the specificity the media query
   they replace had, so the phone block below still wins. */
:where(html[data-device='phone'], .topbar[data-topbar-stacked]) .topbar-filter-popover {
  right: auto;
  left: 0;
}

:where(html[data-device='phone'], .topbar[data-topbar-stacked]) .af-flyout {
  right: auto;
  left: calc(100% - 1px);
  margin-right: 0;
  margin-left: 4px;
}

:where(html[data-device='phone'], .topbar[data-topbar-stacked]) .af-row-lead svg {
  transform: scaleX(-1);
}

/* On a phone the topbar collapses into the drawer and there is no room to the
   side of anything, so the submenu stacks under its row instead of beside it. */
@media (max-width: 720px) {
  .topbar-filter-popover {
    right: auto;
    left: 0;
  }

  .af-flyout {
    position: static;
    max-width: none;
    margin: 4px 0 0;
    box-shadow: none;
  }
}