/* Shared theme layer for every vanilla-calendar-pro instance app-wide - the generic
   .datepicker/.yearpicker/.monthyearpicker/.datepicker-range family (Web/TagHelpers/Datepicker.cs,
   mounted by Web/wwwroot/js/datepicker.js) AND the Add Follow-up modal's own dedicated
   .appointment-date-input picker (Web/TagHelpers/AppointmentDatePicker.cs, mounted by
   enquiry-followup.js). Figma: Design System StudyNet.io, file P5Pox513yn2atk8GxAUkyy.
   Load together with the vendor's own styles/layout.css, which supplies structure only
   (grid/flex, sizing, transitions, the range first/middle/last border-radius shaping, and the
   pointer-events lock on [data-vc-date-disabled]) - this file supplies colors/typography on top,
   per the pattern the library's own README recommends. */

/* Popup shell - each picker mounts its calendar into a dynamically-created
   <div popover="manual"> (enquiry-followup.js's own instance uses "auto"), opened via
   .showPopover()/.togglePopover() so it renders in the top layer, escaping any scrollable
   dialog body instead of being clipped by it. Positioned via CSS anchor positioning: the
   Add Follow-up picker anchors to the fixed --appointment-date-trigger name set below; every
   other picker gets a unique --datepicker-anchor-N name set inline by datepicker.js, which wins
   over the position-anchor value here since inline styles always beat stylesheet rules.
   The calendar itself is mounted one level deeper (a plain child <div>), not directly on this
   popup - vanilla-calendar-pro's init overwrites its target's className, which would otherwise
   silently strip this class and break positioning. */
.appointment-date-picker-popup,
.date-picker-popup {
    margin: 0.25rem 0 0;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
    position: fixed;
    position-anchor: --appointment-date-trigger;
    inset: auto;
    position-area: bottom span-left;
    position-try-fallbacks: flip-block;
    z-index: 100;
}

[data-appointment-date-picker] {
    anchor-name: --appointment-date-trigger;
}

/* site.css's `input.form-control[readonly] { pointer-events: none; }` (for genuinely
   non-interactive display fields) also catches every picker input here, since they're all
   readonly form-control inputs too - undoes that so clicking one still opens its popup.
   Loaded after site.css so this wins on equal specificity. */
input.appointment-date-input[readonly],
input.datepicker[readonly],
input.yearpicker[readonly],
input.monthyearpicker[readonly],
input.datepicker-range[readonly] {
    pointer-events: auto;
    cursor: pointer;
}

[data-vc="calendar"] {
    font-family: var(--ff-inter);
    background-color: var(--bw-white);
    border: 1px solid var(--gray-clr-100);
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
    padding: 0;
    overflow: hidden;
}

/* Header: nav arrows + Month/Year pill buttons */
[data-vc="header"] {
    margin-bottom: 0;
    padding: 1rem;
    background-color: var(--bw-white);
    min-height: 4rem;
}

[data-vc-header="content"] {
    column-gap: 0.25rem;
}

[data-vc-arrow] {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--gray-clr-200);
    border-radius: 50%;
    background-color: var(--bw-white);
}

[data-vc-arrow]:hover {
    background-color: var(--gray-clr-100);
}

[data-vc-arrow]::before {
    background-size: 0.875rem;
}

[data-vc-arrow="prev"]::before {
    transform: rotate(0deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 12L6 8l4-4' stroke='%2323263b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-vc-arrow="next"]::before {
    transform: rotate(0deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 12l4-4-4-4' stroke='%2323263b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-vc="month"],
[data-vc="year"] {
    height: 2rem;
    min-width: 6rem;
    padding: 0.375rem 0.5rem;
    border: 0.5px solid var(--gray-clr-200);
    border-radius: 0.5rem;
    background-color: var(--bw-white);
    color: var(--midnight-blue-clr-700);
    font-size: var(--fs-200);
    font-weight: var(--fw-500);
    line-height: 1;
}

/* chevron-down decoration on the two pill buttons - default (day-grid) view only */
[data-vc-type="default"] [data-vc="month"],
[data-vc-type="default"] [data-vc="year"] {
    position: relative;
    padding-right: 1.375rem;
}

[data-vc-type="default"] [data-vc="month"]:after,
[data-vc-type="default"] [data-vc="year"]:after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 0.625rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2323263b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Month/year-grid view: the two pill buttons become one borderless, centered title
   ("July 2026") - closest pure-CSS match for Figma's single merged title, since the library
   always renders Month and Year as two separate buttons here. */
[data-vc-type="month"] [data-vc-header="content"],
[data-vc-type="year"] [data-vc-header="content"] {
    justify-content: center;
}

[data-vc-type="month"] [data-vc="month"],
[data-vc-type="month"] [data-vc="year"],
[data-vc-type="year"] [data-vc="month"],
[data-vc-type="year"] [data-vc="year"] {
    height: auto;
    min-width: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--midnight-blue-clr-700);
    font-size: var(--fs-400);
    font-weight: var(--fw-600);
}

/* Body: weekday row + calendar card */
[data-vc="wrapper"] {
    background-color: var(--gray-clr-50);
    padding: 1rem 0.875rem;
    padding: 0.625rem;
}

[data-vc="content"] {
    background-color: var(--bw-white);
    border: 1px solid var(--gray-clr-200);
    border-radius: 1rem;
    padding: 0.625rem;
}

[data-vc="week"] {
    margin-bottom: 1.25rem;
}

[data-vc-week-day] {
    color: var(--midnight-blue-clr-400);
    font-size: var(--fs-300);
    font-weight: var(--fw-500);
    line-height: 1.25rem;
}

/* Day grid */
[data-vc="dates"] {
    row-gap: 1.125rem;
}

[data-vc-date] {
    padding-top: 0;
}

[data-vc-date-btn] {
    width: 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
    min-height: 1.875rem;
    border-radius: 50% !important;
    background-color: transparent;
    color: var(--midnight-blue-clr-700);
    font-size: var(--fs-200);
    font-weight: var(--fw-500);
}

[data-vc-date]:not([data-vc-date-selected]):not([data-vc-date-disabled])
    [data-vc-date-btn]:hover {
    background-color: var(--gray-clr-50);
}

/* Counsellor has a working/appointment slot on this day (applyWorkingDaysHighlightToDateEl in
   followup-shared.js toggles this class on [data-vc-date] via the calendar's onCreateDateEls hook).
   Selected/today/disabled already have their own stronger treatment, so this only applies
   otherwise - a disabled day must always read as disabled even if it also has an appointment. */
[data-vc-date].has-appointment:not([data-vc-date-selected]):not(
        [data-vc-date-today]
    ):not([data-vc-date-disabled])
    [data-vc-date-btn] {
    background-color: var(--primary-clr-50);
}

/* Today (not selected, not disabled): pink ring + pink text. Excluding disabled matters here
   because this selector is otherwise more specific than the plain disabled-color rule below, so
   without it a disabled-but-today date would still show the pink ring instead of reading as
   disabled. */
[data-vc-date-today]:not([data-vc-date-selected]):not([data-vc-date-disabled])
    [data-vc-date-btn] {
    border: 1px solid var(--primary-clr-500);
    color: var(--primary-clr-400);
}

/* Selected: filled pink circle, wins over today's ring */
[data-vc-date-selected] [data-vc-date-btn] {
    border: none;
    background-color: var(--primary-clr-500);
    color: var(--neutral-clr-100);
    font-weight: var(--fw-600);
}

/* Range picker (.datepicker-range, mountRangeDatepicker in datepicker.js): "first"/"last"/
   "middle"/"first-and-last" come from vanilla-calendar-pro's own "multiple-ranged" mode - hover
   uses "" instead of "middle" for in-between days, everything else matches data-vc-date-selected.
   layout.css already ships the right border-radius per position; it just loses to the 50%
   circle above (that rule uses !important, so beating it needs !important here too). Widened to
   100% so consecutive days touch and read as one bar - excludes bare/"first-and-last" values,
   which should stay a normal small circle, not a stretched oval or a single-date picker's own
   selected day. */
[data-vc-date-hover=""] [data-vc-date-btn],
[data-vc-date-hover="middle"] [data-vc-date-btn],
[data-vc-date-selected="middle"] [data-vc-date-btn] {
    width: 100%;
}

/* Preview fill between the anchor and the hovered date - excludes the anchor itself (already
   [data-vc-date-selected]) so it keeps its solid selected color instead of fading. */
[data-vc-date-hover]:not([data-vc-date-selected]) [data-vc-date-btn] {
    background-color: var(--primary-clr-50);
}

[data-vc-date-hover=""] [data-vc-date-btn],
[data-vc-date-selected="middle"] [data-vc-date-btn] {
    border-radius: 0 !important;
}

[data-vc-date-hover="first"] [data-vc-date-btn],
[data-vc-date-selected="first"] [data-vc-date-btn] {
    border-radius: 50% 0 0 50% !important;
}

[data-vc-date-hover="last"] [data-vc-date-btn],
[data-vc-date-selected="last"] [data-vc-date-btn] {
    border-radius: 0 50% 50% 0 !important;
}

[data-vc-date-hover="first-and-last"] [data-vc-date-btn],
[data-vc-date-selected="first-and-last"] [data-vc-date-btn] {
    border-radius: 50% !important;
}

/* Inactive (prev/next month overflow) and disabled (locked-out) days share the same treatment */
[data-vc-date][data-vc-date-month="prev"] [data-vc-date-btn],
[data-vc-date][data-vc-date-month="next"] [data-vc-date-btn],
[data-vc-date-disabled] [data-vc-date-btn] {
    color: var(--gray-clr-200);
}

/* Month/year picker grids */
[data-vc="months"] {
    row-gap: 0.75rem;
    justify-items: center;
}

[data-vc="years"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0.75rem;
    justify-items: center;
}

[data-vc-months-month],
[data-vc-years-year] {
    width: 3.375rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background-color: transparent;
    color: var(--midnight-blue-clr-500);
    font-size: var(--fs-300);

    &:hover {
        color: var(--midnight-blue-clr-700);
        background-color: var(--gray-clr-100);
    }

    &:disabled {
        color: var(--gray-clr-200);
        cursor: not-allowed;
    }
}

[data-vc-months-month][data-vc-months-month-selected],
[data-vc-years-year][data-vc-years-year-selected] {
    font-weight: var(--fw-600);
    color: var(--neutral-clr-100);
    background-color: var(--primary-clr-500);
}