/* Global date navigation — `.global-date-nav` is the canonical prev/next +
   month/year control for the in-page row header (ADR-131). Two calls on the
   same markup: calendar period navigation (a "Today" button jumps back to the
   current period) and list date-filter stepping (no "Today" — see
   shared/components/date_nav.html for the two `kind`s).

   Sits on the light content surface, not the dark global-app-header — the prev/next
   arrows reuse `.global-icon-btn`; only the layout, the "Today" pill, and the
   month/year select sizing are defined here. */

.global-date-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.global-date-nav__arrows {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
}

/* "Today" — a bordered ghost pill, the light-surface twin of the arrows beside
   it. Disabled (already viewing the current period) reads faded and inert. */
.global-date-nav__today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 var(--spacing-smd);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    background: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-button);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.global-date-nav__today:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.global-date-nav__today[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Month/year comboboxes — fixed width, centered label, 36px to match the
   arrows/Today pill beside them. 9.5rem so the longest month ("September") clears
   the 2rem chevron-clearance padding on both sides without clipping (8.5rem cut it
   by 5px). */
.global-date-nav__month,
.global-date-nav__year {
    flex: 0 0 auto;
    width: 9.5rem;
}

/* On top of the shared .global-cs--compact skin: symmetric 2rem padding (the
   chevron's clearance on both sides) so text-align:center lands the label at
   true center — the same fix .global-cs-date-row uses on the drawer's date selects. */
.global-date-nav__month .global-cs-input,
.global-date-nav__year .global-cs-input {
    padding: 0 var(--spacing-xl);
    text-align: center;
    font-size: var(--font-size-sm);
}

/* Phone: the nav takes its own row under the other controls — a two-by-two
   grid, Today and the arrows on the first line, the month and year sharing
   the next. A grid, not a wrapped flex row: with flex the two selects (basis
   0) squeezed onto the first line beside Today and read "Sept". On the
   desktop the cluster rides the far right of the toolbar row
   (page-header.css); a full row has no right to ride. Every control,
   arrows included, reaches the touch height. */
@media (max-width: 767.98px) {
    .global-date-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "today arrows"
            "month year";
        flex: 1 1 100%;
        margin-left: 0;
        min-width: 0;
    }

    .global-date-nav__today {
        grid-area: today;
        justify-self: start;
        min-height: var(--control-h-touch);
    }

    .global-date-nav__arrows {
        grid-area: arrows;
        justify-self: end;
    }

    .global-date-nav__arrows .global-icon-btn {
        width: var(--control-h-touch);
        height: var(--control-h-touch);
    }

    .global-date-nav__month {
        grid-area: month;
    }

    .global-date-nav__year {
        grid-area: year;
    }

    .global-date-nav__month,
    .global-date-nav__year {
        width: auto;
        min-width: 0;
    }

    .global-date-nav__month .global-cs-input,
    .global-date-nav__year .global-cs-input {
        min-height: var(--control-h-touch);
        height: auto;
    }
}