/* css/datepicker-dark.css — v5.1 (2025‑06‑12, 23:30) --------------------------------------------------
   Fixed:
   ▸ Month label now visible
   ▸ Header spacing adjusted to prevent year clipping
   ▸ Removed conflicting display properties
--------------------------------------------------------------------*/

:root {
    /* —— palette —— */
    --dp-surface:            #2C3948; /* backdrop */
    --dp-accent:             #1A8CFF; /* selected day */
  
    /* —— text colours —— */
    --dp-on-surface:         #FFFFFF; /* standard text / icons */
    --dp-on-surface-muted:   #B7BFC7; /* dimmed days */
  
    /* —— shape —— */
    --dp-radius:             4px;     /* smaller corner radius */
    --dp-day-radius:         6px;     /* square‑ish day chip */
}

/* --------------------------------------------------------------
   Base container
----------------------------------------------------------------*/
.flatpickr-calendar {
    background: var(--dp-surface) !important;
    color: var(--dp-on-surface);
    border: none !important;
    border-radius: var(--dp-radius);
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------
   Month + Year header
----------------------------------------------------------------*/
.flatpickr-months {
    padding: 0 !important;
    height: auto !important;
}

.flatpickr-current-month {
    height: auto !important;
    padding: 0.65rem 0 0.35rem 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    gap: 0 !important;
    
    font-family: "Text-Regular", sans-serif;
    font-weight: 400;
    font-size: 0.925rem;       /* updated size */
    line-height: 1.2;
    color: var(--dp-on-surface);
}

/* Force all month/year elements to show */
.flatpickr-current-month * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Month label - right aligned with fixed width AND relative positioning */
.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month span.cur-month,
.flatpickr-calendar .flatpickr-monthDropdown-months {
    display: inline-block !important;
    position: relative !important;      
    left: -1.5rem !important;           /* reduced from -3rem */
    color: var(--dp-on-surface) !important;
    font-size: 0.925rem !important;
    margin: 0 !important;
    padding: 0 0.25rem 0 0 !important;
    pointer-events: none;
    text-indent: 0 !important;
    width: 5.5rem !important;           
    height: auto !important;
    text-align: right !important;       
    background: transparent !important;
    border: none !important;
}

/* Year wrapper and input - also shift */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    display: inline-block !important;
    width: auto !important;
    position: relative !important;      
    left: -1.5rem !important;           /* reduced from -3rem */
    margin: 0 !important;
    padding: 0 !important;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper .numInput,
.flatpickr-calendar .flatpickr-current-month .cur-year {
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    color: var(--dp-on-surface) !important;
    font-family: "Text-Regular", sans-serif !important;
    font-size: 0.925rem !important;
    font-weight: 400 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 4ch !important;
    text-align: center !important;
    pointer-events: none;
}

/* If month is in a select element */
.flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    color: var(--dp-on-surface) !important;
    font-size: 0.925rem !important;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 0.25rem 0 0 !important;
    display: inline-block !important;
    width: 5.5rem !important;           
    text-align: right !important;
    position: relative !important;
    left: -1.5rem !important;           /* reduced from -3rem */
}

/* Hide only the dropdown arrows, not the month/year elements */
.flatpickr-current-month .arrowUp,
.flatpickr-current-month .arrowDown {
    display: none !important;
}

/* Hide the up arrows */
.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}

/* --------------------------------------------------------------
   Navigation chevrons — tiny custom SVG
----------------------------------------------------------------*/
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    color: var(--dp-on-surface) !important;
    fill: currentColor !important;
    width: 7px !important;              
    height: 12px !important;            
    top: 8px !important;                
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.flatpickr-calendar .flatpickr-prev-month { left: 2.5rem !important; }  /* moved in from 1.5rem */
.flatpickr-calendar .flatpickr-next-month { right: 2.5rem !important; } /* moved in from 1.5rem */

/* Hide default SVG */
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    display: none !important;
}

/* Custom SVG chevrons */
.flatpickr-calendar .flatpickr-prev-month {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.99996 11C5.99996 11 1 7.31758 1 6C1 4.68233 6 1 6 1' stroke='%23B7BFC7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 7px 12px !important;
    background-repeat: no-repeat;
    background-position: center;
}

.flatpickr-calendar .flatpickr-next-month {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.00004 1C1.00004 1 6 4.68242 6 6C6 7.31767 1 11 1 11' stroke='%23B7BFC7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 7px 12px !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* --------------------------------------------------------------
   Weekday labels
----------------------------------------------------------------*/
.flatpickr-weekday {
    font-family: "Text-Regular", sans-serif;
    font-weight: 400;
    font-size: 0.775rem;
    color: var(--dp-on-surface) !important;
}

/* Remove default borders */
.flatpickr-weekdays,
.flatpickr-weekdays:after {
    border: none !important;
}

/* --------------------------------------------------------------
   Day grid
----------------------------------------------------------------*/
.flatpickr-day {
    font-family: "Text-Regular", sans-serif;
    font-weight: 400;
    font-size: 0.7rem;                  /* changed from 0.9rem */
    color: var(--dp-on-surface);
    border: none;
    border-radius: var(--dp-day-radius);
}

/* Dimmed / disabled days */
.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.notAllowed {
    color: var(--dp-on-surface-muted) !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day:hover.selected {
    background: var(--dp-accent) !important;
    color: #fff !important;
    border-radius: var(--dp-day-radius) !important;
}

/* Hover effect */
.flatpickr-day:not(.selected):hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Focus ring */
.flatpickr-day:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Today indicator - disabled */
.flatpickr-day.today:not(.selected) {
    box-shadow: none !important;
}