/* ==========================================================================
   WHITELIST DATEPICKER (.diegp-dp) — admin/js/datepicker.js
   A floating container with an *inline* calendar, so it also works on the
   screens where #ui-datepicker-div is display:none. Chrome mirrors the
   subscription-edit calendar: arrows, month + year selects, CW column,
   weekends hidden, round day cells.
   ========================================================================== */
.diegp-dp {
    position: absolute;
    z-index: 100100;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 14px 16px 16px;
    font-family: var(--gp-font), sans-serif;
    font-size: 13px;
}

/* The inline calendar must not carry the popup chrome of .ui-datepicker. */
.diegp-dp .ui-datepicker {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hide Sat & Sun: showWeek + firstDay=1 → CW(1) Mon(2)…Fri(6) Sat(7) Sun(8). */
.diegp-dp th:nth-child(7),
.diegp-dp th:nth-child(8),
.diegp-dp td:nth-child(7),
.diegp-dp td:nth-child(8) {
    display: none !important;
}

.diegp-dp .ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    background: transparent;
    border: 0;
    padding: 0;
}

/* The nav arrows are <a> elements: kill the browser/theme underline. */
.diegp-dp a {
    text-decoration: none;
    box-shadow: none;
}

.diegp-dp .ui-datepicker-prev,
.diegp-dp .ui-datepicker-next {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--gp-border);
    border-radius: 6px;
    background: var(--gp-surface);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}

.diegp-dp .ui-datepicker-prev:hover,
.diegp-dp .ui-datepicker-next:hover {
    background: var(--gp-surface-2);
    border-color: #c8d0dc;
}

.diegp-dp .ui-datepicker-prev span,
.diegp-dp .ui-datepicker-next span {
    position: static;
    width: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    background-image: none;
}

.diegp-dp .ui-datepicker-prev::after { content: '‹'; font-size: 16px; color: var(--gp-text-2); line-height: 1; }
.diegp-dp .ui-datepicker-next::after { content: '›'; font-size: 16px; color: var(--gp-text-2); line-height: 1; }

.diegp-dp .ui-datepicker-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

/* base.css hides .ui-datepicker-year globally; this calendar wants the select. */
.diegp-dp .ui-datepicker-year,
.diegp-dp .ui-datepicker-month {
    display: block;
}

.diegp-dp .ui-datepicker-title select {
    appearance: auto;
    min-width: 78px;
    border: 1px solid var(--gp-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    background: var(--gp-surface);
    color: var(--gp-text);
    cursor: pointer;
}

.diegp-dp .ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
}

.diegp-dp .ui-datepicker-calendar th {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gp-text-2);
    text-align: center;
    border: 0;
    white-space: nowrap;
}

.diegp-dp .ui-datepicker-week-col {
    color: var(--gp-text-3);
    font-size: 11px;
    font-weight: 500;
    padding-right: 10px;
    border-right: 1px solid var(--gp-border);
    text-align: right;
}

.diegp-dp .ui-datepicker-calendar td {
    padding: 2px 3px;
    border: 0;
    text-align: center;
}

.diegp-dp .ui-datepicker-calendar td a,
.diegp-dp .ui-datepicker-calendar td span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 500;
    color: var(--gp-text);
    background: transparent;
    text-decoration: none;
}

/* Selectable days are tinted; everything else must read as dead. */
.diegp-dp td.diegp-day-allowed a {
    background: var(--gp-blue-light);
    color: var(--gp-blue);
    font-weight: 600;
}

.diegp-dp td.diegp-day-allowed a:hover {
    background: var(--gp-blue);
    color: #fff;
}

/* Multiple mode: the selection is a set, so it needs its own class. jQuery UI's
   ui-state-active marks the last *clicked* day — including one just toggled off
   — so it must not paint anything here. */
.diegp-dp--multi .ui-datepicker-calendar .ui-state-active {
    background: transparent !important;
    color: var(--gp-text) !important;
    font-weight: 500;
}

.diegp-dp--multi td.diegp-day-allowed.ui-datepicker-current-day a,
.diegp-dp--multi td.diegp-day-allowed a {
    background: var(--gp-blue-light);
    color: var(--gp-blue);
}

.diegp-dp--multi td.diegp-day-picked a,
.diegp-dp--multi td.diegp-day-picked a.ui-state-active {
    background: var(--gp-blue) !important;
    color: #fff !important;
    font-weight: 700;
}

.diegp-dp .ui-datepicker-calendar .ui-state-active {
    background: var(--gp-blue) !important;
    color: #fff !important;
    font-weight: 700;
}

.diegp-dp .ui-datepicker-calendar .ui-state-disabled span,
.diegp-dp .ui-datepicker-calendar .ui-state-disabled a {
    color: var(--gp-text-3);
    background: transparent;
    opacity: 0.45;
    cursor: default;
}

/* ---- week mode (.diegp-dp--week) -----------------------------------------
   The customer picks a week, not a day: the whole Mon–Fri row lights up as one
   unbroken pill and any day in it resolves to that week's Monday.

   Column order is CW(1) Mo(2) Tu(3) We(4) Th(5) Fr(6) Sa(7) Sn(8); Sat and Sun
   are display:none, so the pill has to be capped on Mo and Fr — not on the
   row's last child, which is the hidden Sunday. */
/* No horizontal gaps between day cells, or the pill would be dashed.
   nth-child(n+2) keeps the CW column's own padding intact. */
.diegp-dp--week .ui-datepicker-calendar td:nth-child(n + 2) {
    padding: 2px 0;
}

.diegp-dp--week .ui-datepicker-calendar td a,
.diegp-dp--week .ui-datepicker-calendar td span {
    width: 100%;
    border-radius: 0;
}

.diegp-dp--week .ui-datepicker-calendar td:nth-child(2) a,
.diegp-dp--week .ui-datepicker-calendar td:nth-child(2) span {
    border-radius: 99px 0 0 99px;
}

.diegp-dp--week .ui-datepicker-calendar td:nth-child(6) a,
.diegp-dp--week .ui-datepicker-calendar td:nth-child(6) span {
    border-radius: 0 99px 99px 0;
}

.diegp-dp--week .ui-datepicker-calendar tbody tr:hover td:nth-child(n + 2) a {
    background: var(--gp-blue-light);
    color: var(--gp-blue);
}

.diegp-dp--week .ui-datepicker-calendar td.diegp-week-selected a,
.diegp-dp--week .ui-datepicker-calendar tbody tr:hover td.diegp-week-selected a {
    background: var(--gp-blue) !important;
    color: #fff !important;
}

.diegp-dp--week .ui-datepicker-calendar tbody tr:hover .ui-datepicker-week-col,
.diegp-dp--week .ui-datepicker-calendar tr:has(.diegp-week-selected) .ui-datepicker-week-col {
    color: var(--gp-blue);
    font-weight: 700;
}