/* modules/sessionList/sessionFilterBar.css — the board's filter chips and the range calendar.

   Deliberately small: the chips themselves are `.chip` / `.filter-chips` from index.css, already
   worn by the exercise library, and the two selects borrow the same class rather than getting a
   look of their own. What is here is only what did not exist — the calendar, and the little that
   makes a <select> sit correctly inside a chip. */

/* Inside the sticky header now, so the row carries no margin of its own — the header's own gap
   spaces it from the title above, and anything more makes the bar taller than it needs to be on a
   phone, where every pixel of header is a pixel of board. */
.sessions-filter-chips {
  margin-bottom: 0;
  padding-bottom: 0;
  align-items: center;
  gap: 6px;
}

/* A thumb's width and height for every control in the row. The selects get it from the phone rule
   in index.css; the two buttons did not, and the ✕ that clears the filters measured 32 × 31. */
.sessions-filter-chips button.chip {
  min-height: 44px;
  min-width: 44px;
}

/* A line of their own on a phone, beside the title above 600px. Squeezing three filters in next to
   the title and the day buttons on a narrow screen was measured at 390px: three wrapped lines and a
   170px header, half the height of a session card. The rule lives on the HEADER (sessionsView.css),
   which flips between column and row — the header is the element that knows how much width there
   is. */
.sessions-filter-bar {
  min-width: 0;
  flex: 1 1 auto;
}

/* A native <select> dressed as a chip: the phone's own list opens on tap, which is better than any
   popover we would write and costs nothing to maintain. Only the browser's default chrome has to go. */
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  /* The chevron is drawn rather than added as an element, so the control stays one tag. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* Narrow on purpose (asked 2026-09-11): these two say a NAME, and a name cut short with an
     ellipsis still identifies the filter that is on — while a select wide enough for the longest
     client name pushes the day controls onto a second row. */
  max-width: 104px;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-left: 10px;
}

/* Icon only: the row is full, and an × beside three lit chips needs no word to be read. The label
   survives as the aria-label, so a screen reader still hears the sentence. */
.filter-clear {
  padding-left: 10px;
  padding-right: 10px;
}

.filter-clear[hidden] {
  display: none;
}

/* The calendar sits UNDER the chips, in the page, not over it. A range is chosen while looking at
   the board it is filtering, and an overlay would hide the thing being narrowed. */
/* Opens INSIDE the sticky header, over the list rather than pushing it: a range is chosen while
   looking at the board it filters, and the header measures itself so the day headings move down
   with it. */
.filter-calendar {
  margin-top: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md, 12px);
  padding: 12px;
  margin-bottom: 4px;
}

.filter-calendar[hidden] {
  display: none;
}

.filter-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  /* Five controls now, and a phone is narrower than they are: they wrap onto a second line rather
     than squeezing the month name to nothing. */
  flex-wrap: wrap;
}

/* The month and the year are chosen from the phone's own list, so they wear the app's select look
   and keep the 44px height the arrows beside them have — a row of controls that are not the same
   height reads as one of them being broken. The month takes the slack, because its names vary in
   length between languages while a year is always four digits. */
.filter-month-select {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-sm);
  background: var(--bg-color);
  color: var(--text-main);
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.filter-month-select[data-jump="month"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* Today sits with the month controls (asked 2026-09-21): it moves the grid and the board to the
   same day, so it belongs beside what it moves rather than in the title row above. */
.filter-today-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-today-btn:hover {
  background: var(--border-color);
  color: var(--primary);
  border-color: var(--primary);
}

/* 44px, because this is a control tapped one-handed while somebody waits. */
.filter-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: var(--border-radius-sm, 8px);
  color: var(--text-muted);
  cursor: pointer;
}

.filter-month-nav:hover,
.filter-month-nav:focus-visible {
  background: var(--input-bg);
  color: var(--text-main);
}

.filter-arm-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.filter-weekdays,
.filter-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.filter-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 4px;
}

.filter-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 38px;
  background: none;
  border: none;
  border-radius: var(--border-radius-sm, 8px);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-main);
  cursor: pointer;
}

.filter-day:hover,
.filter-day:focus-visible {
  background: var(--input-bg);
}

/* Days spilling in from the neighbouring months stay tappable — a range often starts in one month
   and ends in the next — but read as clearly not part of the month on screen. */
.filter-day-outside {
  color: var(--text-muted);
  opacity: 0.5;
}

/* The two ENDS are the strongest thing in the grid, and the days between them are a wash. That is
   the documented convention and it is what makes "tap an end" something a person can aim at:
   an end is a target, a day inside the range is merely covered by it. */
.filter-day-inside {
  background: var(--primary-light);
  border-radius: 0;
  color: var(--primary);
}

/* Today has a ring; a day with a session has a dot under its number. Neither uses a fill, which
   belongs to the range, so both still show inside a chosen range and on its ends. */
.filter-day-today {
  box-shadow: inset 0 0 0 2px var(--primary);
  font-weight: 700;
}

.filter-day-has-sessions {
  position: relative;
}

.filter-day-has-sessions::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: currentColor;
}

.filter-day-end {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}