/* ── Root / design tokens ────────────────────────────────────────────────── */

#sbp-reschedule-app {
    --sbp-bg:         #0d2342;
    --sbp-bg-elev:    #18355f;
    --sbp-bg-soft:    #23466f;
    --sbp-border:     #2d537f;
    --sbp-text:       #eff4ff;
    --sbp-text-soft:  #a9bddc;
    --sbp-cta:        #ffffff;
    --sbp-cta-text:   #14345f;
    --sbp-accent:     #6da6ff;
    --sbp-accent-dim: rgba(109, 166, 255, 0.15);
    --sbp-success:    #89d49d;
    --sbp-danger:     #ff9d9d;
    --sbp-font:       var(--font-sans, "Avenir Next", "Century Gothic", Futura, "Trebuchet MS", Arial, sans-serif);
    --sbp-radius:     14px;
    --sbp-radius-sm:  8px;

    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(85, 130, 191, 0.32);
    background:
        radial-gradient(80% 120% at 0% 0%, rgba(61, 104, 168, 0.35) 0%, rgba(61, 104, 168, 0) 45%),
        linear-gradient(160deg, #0b1f3a 0%, #102a4f 100%);
    color: var(--sbp-text);
    box-shadow: 0 24px 52px rgba(3, 10, 24, 0.45);
    font-family: var(--sbp-font);
}

#sbp-reschedule-app h3 {
    margin: 0 0 22px;
    font-size: 24px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sbp-text);
}

#sbp-reschedule-app *,
#sbp-reschedule-app *::before,
#sbp-reschedule-app *::after {
    box-sizing: border-box;
}

#sbp-reschedule-message {
    margin-top: 12px;
    color: var(--sbp-danger);
    font-size: 14px;
}

/* ── Locked booking notices ──────────────────────────────────────────────── */

.sbp-rs-locked-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 14px;
    border-radius: var(--sbp-radius-sm);
    border: 1px solid rgba(255, 157, 157, 0.25);
    background: rgba(255, 157, 157, 0.06);
}

.sbp-rs-locked-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--sbp-text);
}

.sbp-rs-locked-meta {
    font-size: 13px;
    color: var(--sbp-text-soft);
    flex: 1;
}

.sbp-rs-lock-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 157, 157, 0.12);
    border: 1px solid rgba(255, 157, 157, 0.4);
    color: var(--sbp-danger);
    font-size: 12px;
    white-space: nowrap;
}

/* ── Booking chips row ───────────────────────────────────────────────────── */

.sbp-rs-chips-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--sbp-border) transparent;
}

.sbp-rs-chips-row::-webkit-scrollbar {
    height: 4px;
}

.sbp-rs-chips-row::-webkit-scrollbar-track { background: transparent; }
.sbp-rs-chips-row::-webkit-scrollbar-thumb { background: var(--sbp-border); border-radius: 2px; }

#sbp-reschedule-app .sbp-rs-chip {
    display: block !important;
    padding: 6px 10px;
    width: 130px;
    border-radius: var(--sbp-radius-sm);
    border: 1px solid var(--sbp-border);
    background: var(--sbp-bg-soft);
    color: var(--sbp-text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    flex-shrink: 0;
    overflow: hidden;
}

.sbp-rs-chip:hover {
    border-color: var(--sbp-accent);
}

.sbp-rs-chip.is-active {
    border-color: var(--sbp-accent);
    background: rgba(109, 166, 255, 0.30);
    box-shadow: 0 0 0 2px rgba(109, 166, 255, 0.35);
}

.sbp-rs-chip.is-assigned {
    border-color: rgba(137, 212, 157, 0.5);
    background: rgba(137, 212, 157, 0.08);
}

.sbp-rs-chip.is-locked {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: rgba(255, 157, 157, 0.3);
}

.sbp-rs-chip.is-locked:hover {
    border-color: rgba(255, 157, 157, 0.3);
    background: var(--sbp-bg-soft);
}

#sbp-reschedule-app .sbp-rs-chip-label {
    display: block !important;
    font-size: 11px;
    font-weight: 700;
    color: var(--sbp-text);
    letter-spacing: 0.02em;
    white-space: normal;
    line-height: 1.3;
    margin-bottom: 2px;
}

#sbp-reschedule-app .sbp-rs-chip-status {
    display: block !important;
    font-size: 10px;
    color: var(--sbp-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbp-rs-chip.is-active .sbp-rs-chip-label {
    color: #ffffff;
}

.sbp-rs-chip.is-active .sbp-rs-chip-status {
    color: #c5deff;
}

.sbp-rs-chip.is-assigned .sbp-rs-chip-status {
    color: var(--sbp-success);
}

/* ── Main layout: calendar + slot panel ─────────────────────────────────── */

.sbp-rs-main-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* ── Calendar column ─────────────────────────────────────────────────────── */

.sbp-rs-cal-col {
    background: var(--sbp-bg-elev);
    border: 1px solid var(--sbp-border);
    border-radius: var(--sbp-radius);
    padding: 20px;
}

.sbp-rs-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}

.sbp-rs-cal-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--sbp-text);
    text-transform: capitalize;
}

.sbp-rs-cal-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--sbp-border);
    background: var(--sbp-bg-soft);
    color: var(--sbp-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.sbp-rs-cal-nav-btn:hover {
    border-color: var(--sbp-accent);
    background: var(--sbp-accent-dim);
}

.sbp-rs-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
}

.sbp-rs-cal-weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--sbp-text-soft);
    letter-spacing: 0.04em;
    padding: 4px 0;
}

.sbp-rs-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.sbp-rs-cal-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sbp-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    padding: 2px;
    gap: 2px;
    min-height: 36px;
}

.sbp-rs-cal-day.is-empty {
    border: none;
    cursor: default;
}

.sbp-rs-cal-day.is-muted {
    color: var(--sbp-text-soft);
    opacity: 0.4;
    cursor: default;
}

.sbp-rs-cal-day.is-today {
    font-weight: 700;
    color: var(--sbp-accent);
}

.sbp-rs-cal-day.has-slots {
    color: var(--sbp-text);
}

.sbp-rs-cal-day.has-slots:hover {
    background: var(--sbp-accent-dim);
    border-color: var(--sbp-accent);
}

.sbp-rs-cal-day.is-selected {
    background: var(--sbp-accent);
    border-color: var(--sbp-accent);
    color: var(--sbp-cta-text);
    font-weight: 700;
}

.sbp-rs-cal-day.is-selected .sbp-rs-cal-dot {
    background: var(--sbp-cta-text);
}

/* "You were here" — the booking's current slot date */
.sbp-rs-cal-day.is-origin {
    border-color: rgba(255, 190, 100, 0.55);
    background: rgba(255, 190, 100, 0.07);
}

.sbp-rs-cal-day.is-origin::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 190, 100, 0.7);
}

/* When the origin day is also selected, let the blue selection win */
.sbp-rs-cal-day.is-origin.is-selected {
    background: var(--sbp-accent);
    border-color: var(--sbp-accent);
}

.sbp-rs-cal-day.is-origin.is-selected::after {
    display: none;
}

.sbp-rs-cal-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sbp-accent);
    flex-shrink: 0;
}

/* ── Slot panel column ───────────────────────────────────────────────────── */

.sbp-rs-slot-panel {
    background: var(--sbp-bg-elev);
    border: 1px solid var(--sbp-border);
    border-radius: var(--sbp-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

.sbp-rs-slot-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sbp-text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sbp-border);
}

.sbp-rs-slot-panel-subtitle {
    font-size: 12px;
    color: var(--sbp-text-soft);
    margin-top: -4px;
}

.sbp-rs-current-slot {
    font-size: 13px;
    color: var(--sbp-text-soft);
    line-height: 1.4;
}

.sbp-rs-current-label {
    font-weight: 600;
    color: var(--sbp-text);
}

.sbp-rs-slot-hint {
    font-size: 14px;
    color: var(--sbp-text-soft);
    text-align: center;
    padding: 24px 0;
}

.sbp-rs-jump-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--sbp-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    text-align: center;
    white-space: normal;
    transition: opacity 0.15s;
}

.sbp-rs-jump-link:hover {
    opacity: 0.75;
}

.sbp-rs-slot-day-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--sbp-accent);
    text-transform: capitalize;
    letter-spacing: 0.03em;
}

/* ── Slot cards ──────────────────────────────────────────────────────────── */

.sbp-rs-slot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--sbp-radius-sm);
    border: 1px solid var(--sbp-border);
    background: var(--sbp-bg-soft);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.sbp-rs-slot-card:hover {
    border-color: var(--sbp-accent);
    background: var(--sbp-accent-dim);
}

.sbp-rs-slot-card.is-selected {
    border-color: var(--sbp-accent);
    background: var(--sbp-accent-dim);
    box-shadow: 0 0 0 2px rgba(109, 166, 255, 0.25);
}

.sbp-rs-slot-time {
    font-size: 16px;
    font-weight: 700;
    color: var(--sbp-text);
    letter-spacing: 0.01em;
}

.sbp-rs-slot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sbp-rs-slot-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--sbp-text-soft);
}

.sbp-rs-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.8;
}

.sbp-rs-slot-check {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sbp-accent);
    color: var(--sbp-cta-text);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Revert row ──────────────────────────────────────────────────────────── */

.sbp-rs-revert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--sbp-radius-sm);
    background: rgba(109, 166, 255, 0.07);
    border: 1px solid rgba(109, 166, 255, 0.2);
}

.sbp-rs-revert-label {
    font-size: 12px;
    color: var(--sbp-text-soft);
    line-height: 1.4;
}

.sbp-rs-revert-label strong {
    color: var(--sbp-accent);
    font-weight: 600;
}

.sbp-rs-revert-btn {
    flex-shrink: 0;
    padding: 4px 11px;
    border-radius: 6px;
    border: 1px solid rgba(109, 166, 255, 0.4);
    background: transparent;
    color: var(--sbp-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.6;
}

.sbp-rs-revert-btn:hover {
    background: var(--sbp-accent-dim);
    border-color: var(--sbp-accent);
}


/* ── Batch confirmation panel ────────────────────────────────────────────── */

.sbp-rs-batch-panel {
    position: sticky;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    margin-top: 20px;
    border-radius: var(--sbp-radius);
    border: 1px solid rgba(109, 166, 255, 0.4);
    background: var(--sbp-bg-elev);
    box-shadow: 0 8px 32px rgba(3, 10, 24, 0.55);
}

.sbp-rs-batch-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.sbp-rs-batch-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.4;
}

.sbp-rs-batch-row-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sbp-text-soft);
    flex-shrink: 0;
}

.sbp-rs-batch-old {
    color: var(--sbp-text-soft);
    text-decoration: line-through;
    text-decoration-color: rgba(169, 189, 220, 0.5);
    white-space: nowrap;
}

.sbp-rs-batch-arrow {
    color: var(--sbp-accent);
    font-size: 14px;
    flex-shrink: 0;
}

.sbp-rs-batch-new {
    font-weight: 600;
    color: var(--sbp-text);
    white-space: nowrap;
}

/* No change selected — both sides show current date, muted, no strikethrough */
.sbp-rs-batch-old.is-unchanged {
    text-decoration: none;
    color: var(--sbp-text-soft);
}

.sbp-rs-batch-new.is-unchanged {
    font-weight: 400;
    font-style: italic;
    color: var(--sbp-text-soft);
}

.sbp-rs-confirm-btn {
    padding: 10px 26px;
    border-radius: var(--sbp-radius-sm);
    border: none;
    background: var(--sbp-cta);
    color: var(--sbp-cta-text);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.sbp-rs-confirm-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sbp-rs-batch-msg {
    width: 100%;
    margin: 0;
    font-size: 13px;
    color: var(--sbp-danger);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 660px) {
    #sbp-reschedule-app {
        padding: 16px;
        border-radius: 14px;
    }

    .sbp-rs-main-layout {
        grid-template-columns: 1fr;
    }

    .sbp-rs-cal-day {
        font-size: 12px;
        min-height: 32px;
    }

    .sbp-rs-batch-panel {
        bottom: 12px;
        padding: 12px 16px;
        gap: 10px;
    }

    .sbp-rs-confirm-btn {
        width: 100%;
        text-align: center;
    }

    .sbp-rs-batch-summary {
        width: 100%;
        flex: none;
    }
}

@media (max-width: 400px) {
    .sbp-rs-cal-day {
        font-size: 11px;
    }

    .sbp-rs-cal-weekdays span {
        font-size: 10px;
    }
}