/* ============================================================================
   jQuery UI datepicker — themed to the DSB design system.
   Loaded AFTER jquery-ui.theme.css in _Layout.cshtml so these rules win.
   Tokens (--surface/--line/--ink/--accent/--r-*/--font-sans) come from
   dsb-sidebar.css (global via _Layout). CSS-only; no markup/JS changes.
   ============================================================================ */

.ui-datepicker {
    width: 280px;
    padding: 10px;
    margin-top: 6px;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px -12px rgba(15, 22, 35, 0.35);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink);
    z-index: 1200;
}

/* ---- Header (month/year + nav) ---- */
.ui-datepicker .ui-datepicker-header {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    padding: 2px 0 8px;
}
.ui-datepicker .ui-datepicker-title {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
}
.ui-datepicker .ui-datepicker-title select {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 2px 4px;
    margin: 0 2px;
}

/* ---- Prev / next nav: clean round hover targets with chevrons ---- */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 2px;
    width: 28px;
    height: 28px;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 2px; }
.ui-datepicker .ui-datepicker-next { right: 2px; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 2px;
    background: var(--bg-2) !important;
    border-radius: 50%;
}
.ui-datepicker .ui-datepicker-prev-hover { left: 2px; }
.ui-datepicker .ui-datepicker-next-hover { right: 2px; }
/* hide the default sprite icon, draw a chevron instead */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    background: none !important;
    color: transparent;
    text-indent: 0;
}
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 28px;
    text-align: center;
    color: var(--ink-2);
    font-size: 16px;
}
.ui-datepicker .ui-datepicker-prev:before { content: "\2039"; } /* single left angle */
.ui-datepicker .ui-datepicker-next:before { content: "\203A"; } /* single right angle */

/* ---- Calendar grid ---- */
.ui-datepicker table {
    margin: 0;
    border-collapse: collapse;
    font-size: 12.5px;
}
.ui-datepicker th {
    padding: 6px 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    border: 0;
}
.ui-datepicker td { padding: 1px; border: 0; }

/* Day cells (anchor = selectable, span = disabled) */
.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: 6px 0;
    text-align: center;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    border-radius: var(--r-sm);
    text-decoration: none;
}
.ui-datepicker td a.ui-state-hover {
    background: var(--bg-2) !important;
    color: var(--ink) !important;
}
.ui-datepicker td a.ui-state-active {
    background: var(--accent) !important;
    color: #0F1623 !important;
    font-weight: 600;
}
.ui-datepicker td.ui-datepicker-today a {
    box-shadow: inset 0 0 0 1px var(--accent);
    color: var(--ink) !important;
}
.ui-datepicker td.ui-datepicker-unselectable span {
    color: var(--ink-3) !important;
    opacity: 0.55;
}