/* ── Month tile grid (shared component) ─────────────────────────────────────
   The whole-month picker service_period_controller.js builds its tiles into
   (shared/_month_grid): the invoice page's service-period popovers and every
   month-range filter chip (shared/_month_range_filter). Modelled on the M3
   date picker's month/year selection: borderless 36dp pills, the picked
   range's first and last month filled with primary and the months between on
   the secondary container (M3's in-range indicator). */

/* A month-range filter chip's menu, dressed as the invoice's docked
   service-period picker (invoices.css .service-period-popover): white, large
   corners, elevation 3, 360dp, a title-medium headline, a body-small hint
   under the grid, the actions on the trailing edge. */
.filter-more-panel.month-picker {
  display: block;
  width: min(22.5rem, calc(100vw - 2rem));
  min-width: 0;
  padding: 1rem 1.25rem 0.75rem;
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-level3);
}

.month-picker-title {
  margin: 0 0 0.75rem;
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-on-surface);
}

.month-picker-hint {
  margin: 0.75rem 0 0;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.month-picker .filter-menu-actions { margin: 1rem -0.5rem 0 0; }

@media (max-width: 760px) {
  .filter-more-panel.month-picker { width: auto; max-width: 22.5rem; }
}

/* Where the period is a page's only filter, the picker opens from a
   labelled M3 outlined field (the docked date picker's anchor) rather than
   a lone chip: label-medium caption, 40dp white field, a trailing arrow,
   the 2dp primary outline while its picker is open. */
.month-range-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
}

.month-range-field-label {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.month-range-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 11rem;
  min-height: 40px;
  padding: 0 0.5rem 0 0.75rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.month-range-trigger::-webkit-details-marker { display: none; }
.month-range-trigger::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--dropdown-arrow) center / 24px no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.month-range-trigger:hover { border-color: var(--md-sys-color-on-surface); }
.month-range-trigger:focus-visible { outline: var(--md-focus-ring); outline-offset: 2px; }
.month-range-filter[open] > .month-range-trigger {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
.month-range-filter[open] > .month-range-trigger::after { transform: rotate(180deg); }

.month-grid-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -0.5rem 0.5rem;
}

.month-grid-year {
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.25rem;
  user-select: none;
}

.month-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 0.5rem;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  white-space: nowrap;
  cursor: pointer;
  --md-state-layer: transparent;
  background-image: linear-gradient(var(--md-state-layer), var(--md-state-layer));
  transition:
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.month-tile:hover { --md-state-layer: color-mix(in srgb, currentColor var(--md-sys-state-hover-opacity), transparent); }
.month-tile:is(:focus-visible, :active) { --md-state-layer: color-mix(in srgb, currentColor var(--md-sys-state-pressed-opacity), transparent); }

.month-tile.is-selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.month-tile.is-selected.is-range-edge {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

/* Shown only on a bounded grid that crosses a year boundary, on its first
   tile and on each January, so every tile's year can be read. */
.month-tile-year {
  font: var(--md-sys-typescale-label-small);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  opacity: 0.8;
}
.month-tile:has(.month-tile-year) { min-height: 44px; border-radius: var(--md-sys-shape-corner-large); }