/* ==========================================================================
   Date picker (Plan 23): the colours, sizes and motion of Vanilla Calendar Pro (vendored layout in
   static/vendor/vanilla-calendar-pro.layout.css, its own themes are not used) come from the design tokens.
   Shared by the agent panel and the public site: --dp-* read the --pub-* tokens when they exist (public
   site) and the staff tokens otherwise, so one file follows light and dark on both.
   Phones (up to 40rem wide, or landscape up to 40rem tall): the calendar opens as a bottom sheet with large touch targets.
   The public site does not load tokens.css, so --fb-dur-* are undefined there and the picker simply does not animate.
   ========================================================================== */
:root {
    --dp-bg: var(--pub-surface, var(--bg-surface));
    --dp-fg: var(--pub-text, var(--text-primary));
    --dp-muted: var(--pub-text-muted, var(--text-muted));
    --dp-disabled: var(--pub-text-subtle, var(--text-subtle));
    --dp-border: var(--pub-border-strong, var(--border-strong));
    --dp-hover: var(--pub-surface-hover, var(--bg-surface-hover));
    --dp-accent: var(--pub-red, var(--primary-bg));
    --dp-accent-fg: #ffffff;
    --dp-accent-text: var(--pub-red-text, var(--primary));
    --dp-shadow: var(--pub-shadow-lg, var(--shadow-lg));
    --dp-radius: var(--pub-radius-md, var(--radius-md));
    --dp-radius-sm: var(--pub-radius-sm, var(--radius-sm));
    --dp-radius-lg: var(--pub-radius-lg, var(--radius-lg));
    --dp-tap: var(--min-tap-size, 2.75rem); /* the public site does not load tokens.css */
}

/* The visible field: same look as any text input, a calendar icon at the right. */
input.fb-date-input {
    cursor: pointer;
    caret-color: transparent;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem 1.125rem;
}
input.fb-date-input:disabled { cursor: not-allowed; }

/* The popup */
[data-vc=calendar][data-vc-input] {
    z-index: 1000;
    min-width: min(19rem, 100vw);
    padding: 0.75rem;
    font-family: inherit;
    color: var(--dp-fg);
    background-color: var(--dp-bg);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    box-shadow: var(--dp-shadow);
    transition-duration: var(--fb-dur-base);
    transition-timing-function: var(--fb-ease);
}
[data-vc=calendar] [tabindex="0"]:focus-visible,
[data-vc=calendar] button:focus-visible,
[data-vc=calendar]:focus-visible {
    outline: 2px solid var(--dp-accent-text);
    outline-offset: -2px;
}

/* Clean slate for the calendar's buttons (the agent panel styles every <button> as a red primary button) */
[data-vc=calendar] button,
[data-vc=calendar] button:hover,
[data-vc=calendar] button:active {
    color: var(--dp-fg);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    text-decoration: none;
}

/* Header: arrows, month and year buttons */
[data-vc=calendar] [data-vc=month],
[data-vc=calendar] [data-vc=year] {
    min-height: var(--dp-tap);
    padding: 0.25rem 0.5rem;
    font-family: inherit;
}
[data-vc=calendar] [data-vc-arrow] {
    width: var(--dp-tap);
    height: var(--dp-tap);
    border-radius: var(--dp-radius-sm);
}
[data-vc=calendar] [data-vc-arrow]::before {
    content: "";
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}
[data-vc=calendar] [data-vc=month]:hover,
[data-vc=calendar] [data-vc=year]:hover,
[data-vc=calendar] [data-vc-arrow]:hover {
    background-color: var(--dp-hover);
}
[data-vc=calendar] [data-vc-week-day] {
    font-family: inherit;
    color: var(--dp-muted);
}

/* Days */
[data-vc=calendar] [data-vc-date-btn] {
    min-height: 2.5rem;
    font-family: inherit;
    font-size: 0.9375rem;
    transition-duration: var(--fb-dur-fast);
    transition-timing-function: var(--fb-ease);
}
[data-vc=calendar] [data-vc-date-btn]:hover { background-color: var(--dp-hover); }
[data-vc=calendar] [data-vc-date][data-vc-date-today] [data-vc-date-btn] {
    box-shadow: inset 0 0 0 1px var(--dp-accent-text);
    color: var(--dp-accent-text);
}
[data-vc=calendar] [data-vc-date][data-vc-date-disabled] [data-vc-date-btn] {
    color: var(--dp-disabled);
    text-decoration: line-through;
    cursor: not-allowed;
}
[data-vc=calendar] [data-vc-date][data-vc-date-selected] [data-vc-date-btn],
[data-vc=calendar] [data-vc-date][data-vc-date-selected] [data-vc-date-btn]:hover {
    color: var(--dp-accent-fg);
    background-color: var(--dp-accent);
    box-shadow: none;
    font-weight: 700;
}

/* Month and year grids */
[data-vc=calendar] [data-vc-months-month],
[data-vc=calendar] [data-vc-years-year] {
    height: var(--dp-tap);
    font-family: inherit;
    font-size: 0.875rem;
}
[data-vc=calendar] [data-vc-months-month]:hover,
[data-vc=calendar] [data-vc-years-year]:hover { background-color: var(--dp-hover); }
[data-vc=calendar] [data-vc-months-month]:disabled,
[data-vc=calendar] [data-vc-years-year]:disabled { color: var(--dp-disabled); }
[data-vc=calendar] [data-vc-months-month][data-vc-months-month-selected],
[data-vc=calendar] [data-vc-years-year][data-vc-years-year-selected] {
    color: var(--dp-accent-fg);
    background-color: var(--dp-accent);
}

/* Phones: a full-width bottom sheet with large touch targets, no horizontal scroll */
@media (max-width: 40rem), (max-height: 40rem) {
    [data-vc=calendar][data-vc-input] {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100vw;
        max-height: 90dvh;
        margin: 0 !important;
        overflow-y: auto;
        padding: 1rem clamp(0.75rem, 4vw, 1.5rem) calc(1rem + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: var(--dp-radius-lg) var(--dp-radius-lg) 0 0;
        /* the huge spread is the dimmed page behind the sheet */
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    }
    [data-vc=calendar] [data-vc-date-btn] {
        min-height: var(--dp-tap);
        font-size: 1rem;
    }
    [data-vc=calendar] [data-vc-week-day] { font-size: 0.8125rem; }
    [data-vc=calendar] [data-vc=month],
    [data-vc=calendar] [data-vc=year] { font-size: 1.125rem; }
}