[data-aun-calendar],
[data-aun-calendar-controls],
[data-aun-month-grid] {
    --aun-calendar-border: #d9dde3;
    --aun-calendar-cell-border: #e1e5e9;
    --aun-calendar-focus: #245f87;
    --aun-calendar-focus-ring: rgba(36, 95, 135, .22);
    --aun-calendar-muted-bg: #f5f6f8;
    --aun-calendar-muted-text: #737980;
    --aun-calendar-saturday: #285d91;
    --aun-calendar-selected: #245f87;
    --aun-calendar-selected-text: #fff;
    --aun-calendar-sunday: #9b1c31;
    min-width: 0;
}

[data-aun-calendar-row] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

[data-aun-calendar-weekday] {
    color: #4f5660;
    font-weight: 800;
    text-align: center;
}

[data-aun-calendar-weekday]:first-child { color: var(--aun-calendar-sunday); }
[data-aun-calendar-weekday]:last-child { color: var(--aun-calendar-saturday); }
/* Monday-first grids end the week on Sunday. */
[data-aun-week-start="monday"] [data-aun-calendar-weekday]:first-child { color: #4f5660; }
[data-aun-week-start="monday"] [data-aun-calendar-weekday]:nth-child(6) { color: var(--aun-calendar-saturday); }
[data-aun-week-start="monday"] [data-aun-calendar-weekday]:last-child { color: var(--aun-calendar-sunday); }

[data-aun-calendar-day] {
    box-sizing: border-box;
    min-width: 0;
    border-color: var(--aun-calendar-cell-border);
}

[data-aun-calendar-day]:focus-visible {
    outline: 3px solid var(--aun-calendar-focus-ring);
    outline-offset: 2px;
}

[data-aun-calendar-day][aria-pressed="true"] {
    border-color: var(--aun-calendar-selected);
}

/*
 * Shared month grid drawn by AunGolfCalendarCore.createMonthGrid().
 * Only calendars drawn by the shared renderer carry data-aun-month-grid / data-aun-calendar-controls,
 * so screens that have not moved to it yet keep their own look. Cell content stays with each screen.
 */
[data-aun-calendar-controls] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

[data-aun-calendar-controls] [data-aun-calendar-month] {
    margin: 0;
    color: #111;
    font-size: 19px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

[data-aun-calendar-controls] [data-aun-calendar-nav] {
    justify-self: start;
    min-height: 42px;
    padding: 7px 14px;
    border: 1px solid #b8bdc4;
    border-radius: 8px;
    background: #fff;
    color: #111;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

[data-aun-calendar-controls] [data-aun-calendar-nav="next"] { justify-self: end; }
[data-aun-calendar-controls] [data-aun-calendar-nav]:disabled { opacity: .45; cursor: default; }
[data-aun-calendar-controls] [data-aun-calendar-nav]:focus-visible {
    outline: 3px solid var(--aun-calendar-focus-ring);
    outline-offset: 2px;
}

[data-aun-month-grid] {
    overflow: hidden;
    border: 1px solid var(--aun-calendar-border);
    border-radius: 10px;
    background: #fff;
}

[data-aun-month-grid] [data-aun-calendar-row] + [data-aun-calendar-row] { border-top: 1px solid #e3e6e9; }

[data-aun-month-grid] [data-aun-calendar-weekday] {
    padding: 7px 2px;
    background: #f3f5f6;
    font-size: 13px;
    font-weight: 700;
}

[data-aun-month-grid] [role="gridcell"] {
    min-width: 0;
    min-height: 92px;
    border-left: 1px solid #e3e6e9;
}

[data-aun-month-grid] [data-aun-calendar-row] > :first-child { border-left: 0; }
[data-aun-month-grid] [data-aun-calendar-blank] { background: #f8f9fa; }

[data-aun-month-grid] [data-aun-calendar-day] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 92px;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #111;
    font: inherit;
    text-align: left;
}

[data-aun-month-grid] span[data-aun-calendar-day] { color: #7b8188; }

[data-aun-month-grid] button[data-aun-calendar-day] {
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

[data-aun-month-grid] button[data-aun-calendar-day]:hover:not([aria-pressed="true"]):not(:disabled) { background: #f7f7f7; }

/* Screens that keep unavailable days as disabled buttons get the same look as non-interactive days. */
[data-aun-month-grid] button[data-aun-calendar-day]:disabled {
    color: #7b8188;
    cursor: default;
}

[data-aun-month-grid] [data-aun-calendar-day][aria-pressed="true"] {
    background: #fff;
    box-shadow: inset 0 0 0 2px #000;
}

[data-aun-month-grid] button[data-aun-calendar-day]:focus-visible {
    outline: 3px solid var(--aun-calendar-focus);
    outline-offset: -3px;
}

[data-aun-month-grid] [data-aun-calendar-date] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 0 6px -4px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

[data-aun-month-grid] [data-aun-calendar-sunday] [data-aun-calendar-date],
[data-aun-month-grid] [data-aun-calendar-holiday] [data-aun-calendar-date] { color: var(--aun-calendar-sunday); }
/* A holiday that falls on Saturday keeps the holiday colour. */
[data-aun-month-grid] [data-aun-calendar-saturday]:not([data-aun-calendar-holiday]) [data-aun-calendar-date] { color: var(--aun-calendar-saturday); }

/* Days from the neighbouring months that a full-week grid still shows: muted fill and date. */
[data-aun-month-grid] [data-aun-calendar-outside] { background: #f8f9fa; }
/* Admin calendars tint weekends and holidays faintly; the member calendars keep plain cells. */
body.wp-admin [data-aun-month-grid] [data-aun-calendar-saturday]:not([data-aun-calendar-holiday]):not([data-aun-calendar-outside]) { background: #f5f9fd; }
body.wp-admin [data-aun-month-grid] :is([data-aun-calendar-sunday], [data-aun-calendar-holiday]):not([data-aun-calendar-outside]) { background: #fdf6f6; }
[data-aun-month-grid] [data-aun-calendar-day][data-aun-calendar-outside] [data-aun-calendar-date] { color: var(--aun-calendar-muted-text); }

[data-aun-month-grid] [data-aun-calendar-holiday-name] {
    margin-bottom: 4px;
    color: var(--aun-calendar-sunday);
    font-size: 13px;
    line-height: 1.3;
}

/* Today is a filled circle on the date rather than a tinted cell; the selected day keeps its outline.
   The date selector outranks the Saturday colour above so a Saturday today stays white on black. */
[data-aun-month-grid] [data-aun-calendar-today] { background: #fff; }
[data-aun-month-grid] [data-aun-calendar-day][data-aun-calendar-today] [data-aun-calendar-date] {
    background: #000;
    color: #fff;
}

/* Compact density for date pickers inside panels and dialogs: always the phone-style cell, with the date
   centred and the screen's markers beneath it. */
[data-aun-month-grid="compact"] [data-aun-calendar-weekday] { padding: 6px 0; text-align: center; }
[data-aun-month-grid="compact"] [role="gridcell"],
[data-aun-month-grid="compact"] [data-aun-calendar-day] { min-height: 52px; }
[data-aun-month-grid="compact"] [data-aun-calendar-day] {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    justify-content: center;
    align-content: start;
    gap: 4px;
    padding: 6px 0 8px;
}
[data-aun-month-grid="compact"] [data-aun-calendar-date] {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0 0 2px;
}

@media (max-width: 600px) {
    [data-aun-calendar-controls] { gap: 7px; }
    [data-aun-calendar-controls] [data-aun-calendar-month] { font-size: 16px; }
    [data-aun-calendar-controls] [data-aun-calendar-nav] {
        min-height: 40px;
        padding: 6px 8px;
        font-size: 13px;
    }

    [data-aun-month-grid] [data-aun-calendar-weekday] { padding: 6px 0; text-align: center; }
    [data-aun-month-grid] [role="gridcell"],
    [data-aun-month-grid] [data-aun-calendar-day] { min-height: 56px; }

    /* Phones: the date sits centred on top and the screen's markers (dots) wrap beneath it. */
    [data-aun-month-grid] [data-aun-calendar-day] {
        display: grid;
        grid-template-columns: repeat(2, 8px);
        grid-template-rows: auto;
        grid-auto-rows: 8px;
        justify-content: center;
        align-content: start;
        gap: 4px;
        padding: 6px 0 8px;
    }
    [data-aun-month-grid] [data-aun-calendar-date] {
        grid-column: 1 / -1;
        justify-self: center;
        margin: 0 0 2px;
    }
    [data-aun-month-grid] [data-aun-calendar-holiday-name] { display: none; }
    /* Compact grids keep their own density on phones too. */
    [data-aun-month-grid="compact"] [role="gridcell"],
    [data-aun-month-grid="compact"] [data-aun-calendar-day] { min-height: 52px; }
    [data-aun-month-grid="compact"] [data-aun-calendar-day] { grid-auto-rows: auto; }
}