/**
 * Super Duper Two-Factor Login – Admin datepicker styles.
 *
 * Extracted from inline output to comply with WordPress enqueue guidelines.
 *
 * @package SDTFA
 */

/* ── Datepicker wrapper ──────────────────────────── */
.sdtfa-datepicker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.sdtfa-datepicker-wrap input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    width: 140px !important;
    margin: 0 !important;
}
.sdtfa-datepicker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 30px;
    background: #2271b1;
    color: #fff;
    border: 1px solid #2271b1;
    border-left: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 18px;
    transition: background .15s;
}
.sdtfa-datepicker-btn:hover {
    background: #135e96;
    border-color: #135e96;
}
.sdtfa-datepicker-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

/* ── Calendar popup ──────────────────────────────── */
/* Hide the global jQuery UI datepicker container by default so it does
   not appear as an empty box at the bottom of the page when closed.
   jQuery UI sets inline display:block when the datepicker opens. */
#ui-datepicker-div {
    display: none;
}
/* When the datepicker is moved inside our wrapper, ensure it positions
   itself relative to the wrapper (not the body). */
.sdtfa-datepicker-wrap #ui-datepicker-div {
    position: absolute !important;
    z-index: 100;
}
.ui-datepicker {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    z-index: 100100;
    font-size: 13px;
    width: 300px;
}
.ui-datepicker-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 10px;
    border-bottom: 1px solid #f0f0f1;
    margin-bottom: 8px;
}
/* Arrows: compact, fixed width */
.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0;
    flex-shrink: 0;
    border: 1px solid #c3c4c7;
    background: #f6f7f7;
    transition: background .15s, border-color .15s;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: #2271b1;
    border-color: #2271b1;
}
.ui-datepicker-prev:hover::after,
.ui-datepicker-next:hover::after {
    color: #fff;
}
.ui-datepicker-prev::after,
.ui-datepicker-next::after {
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
    line-height: 1;
}
.ui-datepicker-prev::after { content: '\2039'; }
.ui-datepicker-next::after { content: '\203A'; }
.ui-datepicker-prev span,
.ui-datepicker-next span { display: none; }
/* Title: fills remaining space */
.ui-datepicker-title {
    flex: 1;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.ui-datepicker-title select {
    padding: 4px 6px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}
.ui-datepicker-title select.ui-datepicker-month {
    flex: 1;
    min-width: 0;
}
.ui-datepicker-title select.ui-datepicker-year {
    width: 75px;
}
.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
}
.ui-datepicker th {
    padding: 6px 4px;
    text-align: center;
    font-weight: 600;
    color: #50575e;
    font-size: 11px;
    text-transform: uppercase;
}
.ui-datepicker td {
    padding: 1px;
    text-align: center;
}
.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: 6px 4px;
    border-radius: 4px;
    text-decoration: none;
    color: #1d2327;
    transition: background .1s, color .1s;
}
.ui-datepicker td a:hover {
    background: #2271b1;
    color: #fff;
}
.ui-datepicker .ui-state-active {
    background: #2271b1;
    color: #fff;
    font-weight: 600;
}
.ui-datepicker .ui-state-highlight {
    background: #e8f0fe;
    color: #135e96;
    font-weight: 600;
}
.ui-datepicker .ui-state-disabled span {
    color: #c3c4c7;
}