/* Two hosts share this file. `.topbar-days-option` is a ROW INSIDE the Views
   panel — the goals tabs' period-count controls
   (js/long-term-goals/period_count_control.js) — and its menu is a hover flyout
   to the right of the panel. `.topbar-days-standalone` is the Calendar's Days
   picker, which moved out of that panel on 2026-08-09 and is a topbar dropdown
   of its own on a phone: click to open, menu below the trigger. On a desktop
   it is back in the Views card as a row (2026-09-28, below). Everything between the
   trigger and the menu items is deliberately common, so the two still read as
   the same control in two places. */
.topbar-days-option {
  position: relative;
  cursor: default;
}

.topbar-days-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(var(--overlay-rgb), 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12px;
  white-space: nowrap;
  user-select: none;
}

.topbar-days-caret {
  font-size: 11px;
  color: var(--text-secondary);
}

.topbar-days-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: -10px;
  margin: 0;
  padding: 8px 8px 8px 16px;
  list-style: none;
  min-width: 260px;
  border-radius: 12px;
  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);
  z-index: 25;
  background-clip: padding-box;
}

.topbar-days-option::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 100%;
  width: 10px;
  pointer-events: auto;
}

.topbar-days-option:hover > .topbar-days-menu,
.topbar-days-option:focus-within > .topbar-days-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar-days-option-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-days-option-item:hover,
.topbar-days-option-item:focus-visible {
  background: rgba(var(--overlay-rgb), 0.08);
  outline: none;
}

.topbar-days-option-item.is-selected {
  background: rgba(74, 158, 255, 0.22);
}

/* ── Standalone topbar dropdown (Calendar tab) ───────────────────────────── */

/* The wrap is static markup in index.html; router.js writes `display` on it per
   tab, so this rule must not set `display` — an inline style would win anyway,
   and the two would then disagree about the Calendar. Same shape as
   `.topbar-views-wrap` beside it (styles/layout.css). */
.topbar-days-wrap {
  position: relative;
  align-items: center;
  margin-left: 8px;
}

.topbar-days-standalone,
.topbar-days-standalone-inner {
  position: relative;
  display: flex;
  align-items: center;
}

/* Matched to `.topbar-views-summary`: out here it is a topbar button standing
   next to Views, not a value at the end of a panel row. */
.topbar-days-wrap .topbar-days-trigger {
  padding: 6px 12px;
  border-radius: 12px;
  /* Inherited size and an explicit 24px line box, both copied from
     `.topbar-views-summary`: the panel row's 12px/normal made this button 29px
     tall next to a 38px one, and two topbar buttons of different heights read
     as a mistake before they read as a hierarchy. */
  font-size: inherit;
  line-height: 24px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.topbar-days-wrap .topbar-days-menu {
  top: calc(100% + 8px);
  left: 0;
  padding: 8px;
  min-width: 220px;
}

/* On loan to the Views dropdown on a desktop (js/app-shell/views_placement.js):
   a "Days" row at the TOP of the card — it is the shape of the grid, the first
   thing the rest of the card is about — reading like the goal boards' own Days
   row. Its menu drops below the trigger, right-aligned inside the card, rather
   than beside it where it would cover the label. Ids beat the Views card's
   `.topbar-days-menu` rules, which are for the boards' hover flyouts. */
#days-control-wrap.topbar-lent-to-views {
  order: -1;
  justify-content: space-between;
  gap: 12px;
}

#days-control-wrap.topbar-lent-to-views::before {
  content: "Days";
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

#days-control-wrap.topbar-lent-to-views .topbar-days-trigger {
  cursor: pointer;
}

#days-control-wrap.topbar-lent-to-views .topbar-days-menu {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  padding: 8px;
  min-width: 220px;
}

/* Click-opened, not hover-opened — see the React island, which owns `is-open`.
   The hover rules above are keyed to `.topbar-days-option`, which this control
   deliberately does not carry, so there is nothing here to undo. */
.topbar-days-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.theme-light .topbar-days-wrap .topbar-days-trigger {
  background: rgba(15, 23, 42, 0.05);
}

body.theme-light .topbar-days-menu {
  background: rgba(255, 255, 255, 0.98);
}

body.theme-light .topbar-days-trigger {
  background: rgba(15, 23, 42, 0.05);
}

body.theme-light .topbar-days-option-item:hover,
body.theme-light .topbar-days-option-item:focus-visible {
  background: rgba(15, 23, 42, 0.08);
}