/**
 * date-picker.css
 *
 * Date dialog, month/year navigation, weekday labels, calendar grid, and selected/today states. Responsive rules remain beside the calendar component.
 *
 * Sections:
 * 1. Date modal sizing
 * 2. Month/year navigation
 * 3. Weekday and 42-cell date grid
 * 4. Date state styling
 *
 * Troubleshooting:
 * - renderCalendar() always generates six weeks, including muted adjacent months.
 * - Selected/today/muted classes are independent and can overlap.
 */

/* 1. Narrower than the generic modal because the calendar grid is compact. */
.date-popover-panel{
    width:min(440px, 100%);
}

.date-panel{
    border:1px solid var(--line);
    border-radius:8px;
    background:#1a202a;
    padding:14px;
}

/* 2. Separate year and month bars keep navigation targets large. */
.date-year-bar,
.date-month-bar{
    display:grid;
    grid-template-columns:38px 1fr 38px;
    align-items:center;
    gap:10px;
}

.date-year-bar{
    margin-bottom:8px;
}

.date-month-bar{
    margin-bottom:12px;
}

.date-year-bar strong,
.date-month-bar strong{
    color:var(--text);
    text-align:center;
}

.date-year-bar strong{
    color:var(--accent);
    font-size:26px;
    font-weight:950;
    font-variant-numeric:tabular-nums;
}

.date-month-bar strong{
    font-size:18px;
}

.date-year-bar button,
.date-month-bar button{
    min-height:36px;
    border-radius:8px;
    background:var(--panel-strong);
    color:var(--text);
    padding:0;
    font-size:22px;
}

/* 3. Seven-column weekday labels and date buttons. */
.calendar-weekdays,
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:6px;
}

.calendar-weekdays{
    margin-bottom:7px;
}

.calendar-weekdays span{
    color:var(--soft);
    text-align:center;
    font-size:10px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.calendar-grid button{
    aspect-ratio:1;
    min-height:auto;
    border:1px solid transparent;
    border-radius:8px;
    background:#121822;
    color:var(--text);
    padding:0;
    font-size:14px;
    font-weight:850;
}

.calendar-grid button:hover{
    border-color:rgba(53,194,165,.45);
    background:rgba(53,194,165,.12);
}

/* 4. State classes are added dynamically by date-picker.js. */
.calendar-grid button.is-muted{
    color:#5e6878;
}

.calendar-grid button.is-today{
    border-color:rgba(126,182,255,.45);
    color:var(--blue);
}

.calendar-grid button.is-selected{
    border-color:transparent;
    background:var(--accent);
    color:#071412;
}