/* ==========================================================================
   Danesh Clinic — Unified Calendar (month widget + datepicker popup)
   Uses design-system tokens. Legacy class names kept for JS compatibility.
   ========================================================================== */

/* ---------- Month calendar card ---------- */
.calendar-card {
    --cal-accent: var(--brand-700);
    --cal-accent-soft: var(--brand-50);
    --cal-accent-border: var(--brand-200);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: var(--elevation-1);
}

.calendar-card--popup {
    padding: var(--space-3);
    box-shadow: var(--elevation-2);
    border-radius: var(--radius-sm);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
}

.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--border);
    color: var(--gray-700);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.calendar-nav-btn:hover {
    background: var(--cal-accent);
    color: var(--white);
    border-color: var(--cal-accent);
}

.calendar-nav-btn .fa-solid {
    font-size: 0.8rem;
}

.calendar-month-year {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--cal-accent-soft);
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    cursor: default;
}

button.calendar-month-toggle {
    cursor: pointer;
    transition:
        background var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out);
}

button.calendar-month-toggle:hover,
button.calendar-month-toggle[aria-expanded="true"] {
    border-color: var(--cal-accent-border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cal-accent) 16%, transparent);
}

.calendar-month-toggle__icon {
    font-size: 0.65rem;
    color: var(--cal-accent);
    transition: transform var(--motion-fast) var(--ease-out);
}

button.calendar-month-toggle[aria-expanded="true"] .calendar-month-toggle__icon {
    transform: rotate(180deg);
}

.calendar-card {
    position: relative;
}

.calendar-card.is-picking-month .calendar-weekdays,
.calendar-card.is-picking-month .calendar-days,
.calendar-card.is-picking-month .calendar-footer {
    opacity: 0.28;
    pointer-events: none;
}

.calendar-picker {
    position: absolute;
    z-index: 8;
    inset-inline: 0.5rem;
    top: 3.35rem;
    padding: 0.65rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--elevation-2, 0 10px 28px rgba(6, 61, 43, 0.16));
}

/* Author styles must not override the HTML hidden attribute */
.calendar-picker[hidden] {
    display: none !important;
}

.calendar-picker__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.55rem;
}

.calendar-picker__year-label {
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--cal-accent);
}

.calendar-picker-year-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--border);
    color: var(--gray-700);
    cursor: pointer;
}

.calendar-picker-year-btn:hover {
    background: var(--cal-accent);
    color: var(--white);
    border-color: var(--cal-accent);
}

.calendar-picker__months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.calendar-month-pick {
    min-height: 40px;
    padding: 0.4rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.calendar-month-pick:hover:not(:disabled) {
    border-color: var(--cal-accent);
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
}

.calendar-month-pick.is-current {
    background: var(--cal-accent);
    border-color: var(--cal-accent);
    color: var(--white);
}

.calendar-month-pick:disabled,
.calendar-month-pick.is-past:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.month-name {
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--cal-accent);
}

.year-number {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-block-end: var(--space-2);
}

.weekday {
    text-align: center;
    padding: 0.35rem 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-muted);
    background: var(--gray-50);
    border-radius: calc(var(--radius-sm) - 2px);
}

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

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
}

/* Datepicker builds days as <button class="calendar-day"> */
button.calendar-day {
    padding: 0;
    margin: 0;
    font: inherit;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

button.calendar-day:hover {
    background: var(--cal-accent-soft);
    color: var(--cal-accent);
    border-color: var(--cal-accent-border);
}

button.calendar-day.today {
    color: var(--cal-accent);
    border-color: var(--cal-accent);
    font-weight: 800;
}

button.calendar-day.selected,
button.calendar-day.selected span {
    background: var(--cal-accent);
    color: #fff;
    border-color: var(--cal-accent);
    font-weight: 800;
    outline: none;
}

button.calendar-day.selected.today,
button.calendar-day.selected.today span {
    background: var(--cal-accent);
    color: #fff;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 35%, transparent);
}

button.calendar-day.friday,
button.calendar-day.weekend,
button.calendar-day.holiday {
    color: var(--danger);
    font-weight: 700;
}

button.calendar-day.holiday.selected,
button.calendar-day.friday.selected,
button.calendar-day.holiday.selected span,
button.calendar-day.friday.selected span {
    background: var(--cal-accent);
    color: #fff;
}

button.calendar-day span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.calendar-day a,
.calendar-day > span,
.calendar-day .day-cell,
.calendar-day .calendar-date-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

.calendar-day a,
.calendar-day .day-cell:not(.empty) {
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.calendar-day a:hover,
.calendar-day .day-cell:not(.empty):hover {
    background: var(--cal-accent-soft);
    color: var(--cal-accent);
    border-color: var(--cal-accent-border);
}

.calendar-day.today a,
.calendar-day.today .day-cell:not(.empty) {
    color: var(--cal-accent);
    border-color: var(--cal-accent);
    font-weight: 800;
}

.calendar-day.selected a,
.calendar-day.selected .day-cell:not(.empty),
.calendar-day.selected span.calendar-date-link {
    background: var(--cal-accent);
    color: #fff;
    border-color: var(--cal-accent);
    font-weight: 800;
}

.calendar-day.selected.today a,
.calendar-day.selected.today .day-cell:not(.empty),
.calendar-day.selected.today span.calendar-date-link {
    background: var(--cal-accent);
    color: #fff;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 35%, transparent);
}

.calendar-day.friday a,
.calendar-day.friday .day-cell:not(.empty),
.calendar-day.friday span.calendar-date-link,
.calendar-day.weekend a,
.calendar-day.weekend .day-cell:not(.empty),
.calendar-day.weekend span.calendar-date-link,
.calendar-day.holiday a,
.calendar-day.holiday .day-cell:not(.empty),
.calendar-day.holiday span.calendar-date-link,
button.calendar-day.holiday span {
    color: var(--danger);
    font-weight: 700;
}
button.calendar-day.today span {
    font-weight: 800;
}
button.calendar-day.selected,
button.calendar-day.selected span {
    color: #fff;
}
button.calendar-day.selected {
    outline: 2px solid color-mix(in srgb, var(--brand-500, #0b5e42) 55%, #fff);
    outline-offset: 1px;
}

/* Holidays / weekends stay red even when past or closed */
.calendar-day.holiday.past span.calendar-date-link,
.calendar-day.holiday.disabled span.calendar-date-link,
.calendar-day.holiday.no-capacity span.calendar-date-link,
.calendar-day.weekend.past span.calendar-date-link,
.calendar-day.weekend.disabled span.calendar-date-link,
.calendar-day.weekend.no-capacity span.calendar-date-link,
.calendar-day.friday.past span.calendar-date-link,
.calendar-day.friday.disabled span.calendar-date-link {
    color: var(--danger);
    opacity: 0.7;
}

.calendar-day.past a,
.calendar-day.past .day-cell:not(.empty),
.calendar-day.past span.calendar-date-link,
.calendar-day.disabled a,
.calendar-day.disabled span.calendar-date-link,
.calendar-day.no-capacity a,
.calendar-day.no-capacity span.calendar-date-link {
    opacity: 0.38;
    pointer-events: none;
    cursor: default;
}

.calendar-day.disabled span.calendar-date-link,
.calendar-day.no-capacity span.calendar-date-link,
.calendar-day.past span.calendar-date-link {
    color: var(--text-muted);
}

.calendar-card--animated {
    transition:
        opacity var(--motion-fast, 160ms) var(--ease-out, ease),
        transform var(--motion-fast, 160ms) var(--ease-out, ease);
}

.calendar-day.empty {
    pointer-events: none;
}

.calendar-footer {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border);
}

.today-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--gray-50);
    color: var(--cal-accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out);
}

.today-btn:hover {
    background: var(--cal-accent);
    color: var(--white);
}

/* Triple-date meta (Jalali / Gregorian / Hijri) */
.calendar-meta {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--border);
}

.calendar-meta__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--fs-xs);
}

.calendar-meta__label {
    font-weight: 700;
    color: var(--text-muted);
}

.calendar-meta__value {
    font-weight: 600;
    color: var(--text);
    direction: ltr;
    unicode-bidi: plaintext;
}

/* ---------- Datepicker popup ---------- */
.datepicker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 10rem;
}

.datepicker-display {
    width: 100%;
    cursor: pointer;
    text-align: center;
}

.datepicker-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 2200;
    width: min(280px, 92vw);
}

.datepicker-popup.open {
    display: block;
}

.datepicker-popup--fixed {
    position: fixed !important;
}

.datepicker-display {
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.datepicker-popup .calendar-card {
    margin: 0;
}

/* Holidays admin chips */
.holiday-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
}

.holiday-group__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--brand-800);
}

.holiday-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.holiday-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--gray-50);
    font-size: var(--fs-sm);
}

.holiday-chip form {
    display: inline;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .calendar-card {
        padding: var(--space-3);
    }

    .calendar-nav-btn {
        width: 32px;
        height: 32px;
    }

    .calendar-day a,
    .calendar-day .day-cell:not(.empty) {
        font-size: var(--fs-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-nav-btn,
    .calendar-day a,
    .today-btn {
        transition: none;
    }
}

/* NHS Action Calendar — day number + count chip under it */
.calendar-day .calendar-date-link {
    position: relative;
    flex-direction: column;
    gap: 0.12rem;
    padding-block: 0.2rem 0.28rem;
}

.calendar-day-num {
    display: inline-block;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.calendar-day.has-actions .calendar-date-link {
    font-weight: 700;
}

.calendar-day-badge {
    position: static;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    min-width: 1.15rem;
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-700, #0b5e42) 12%, #fff);
    color: var(--brand-800, #084c36);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-align: center;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--brand-700, #0b5e42) 28%, transparent) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}

.calendar-day.has-actions:not(.selected) .calendar-date-link {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-700, #0b5e42) 7%, #fff) 0%,
        color-mix(in srgb, var(--brand-700, #0b5e42) 14%, #fff) 100%
    );
    border-color: color-mix(in srgb, var(--brand-700, #0b5e42) 22%, transparent);
}

.calendar-day.has-actions:not(.selected):hover .calendar-date-link {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-700, #0b5e42) 12%, #fff) 0%,
        color-mix(in srgb, var(--brand-700, #0b5e42) 20%, #fff) 100%
    );
    border-color: color-mix(in srgb, var(--brand-700, #0b5e42) 40%, transparent);
}

.calendar-day.urgency-red:not(.selected) .calendar-date-link {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #c44536 6%, #fff) 0%,
        color-mix(in srgb, #c44536 14%, #fff) 100%
    );
    border-color: color-mix(in srgb, #c44536 32%, transparent);
    box-shadow: none;
}

.calendar-day.urgency-red:not(.selected) .calendar-day-badge {
    background: color-mix(in srgb, #c44536 12%, #fff);
    color: #9a2f24;
    border-color: color-mix(in srgb, #c44536 34%, transparent) !important;
}

.calendar-day.urgency-blue:not(.selected) .calendar-date-link {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #3a7bd5 6%, #fff) 0%,
        color-mix(in srgb, #3a7bd5 14%, #fff) 100%
    );
    border-color: color-mix(in srgb, #3a7bd5 30%, transparent);
    box-shadow: none;
}

.calendar-day.urgency-blue:not(.selected) .calendar-day-badge {
    background: color-mix(in srgb, #3a7bd5 12%, #fff);
    color: #1f5aa8;
    border-color: color-mix(in srgb, #3a7bd5 34%, transparent) !important;
}

.calendar-day.has-actions.selected .calendar-date-link {
    background: var(--brand-700, #0b5e42);
    color: #fff;
    border-color: var(--brand-700, #0b5e42);
}

.calendar-day.has-actions.selected .calendar-day-badge {
    background: color-mix(in srgb, #fff 92%, transparent);
    color: var(--brand-800, #084c36);
    border-color: color-mix(in srgb, #fff 55%, transparent) !important;
    box-shadow: none;
}

.calendar-day.has-actions.selected.urgency-red .calendar-date-link {
    background: #c44536;
    border-color: #c44536;
}

.calendar-day.has-actions.selected.urgency-red .calendar-day-badge {
    color: #9a2f24;
}