/* ============================================================
   ShareSphere - Calendar Styles (Provider Dashboard)
   Month grid + day detail modal
   ============================================================ */

/* ---- Month Grid ---- */
.cal {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cal__nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.cal__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    cursor: pointer;
    color: var(--color-gray-600);
    transition: all var(--transition);
}
.cal__nav-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.cal__month {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

.cal__today-btn {
    margin-left: auto;
}

.cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}
.cal__weekdays span {
    text-align: center;
    padding: var(--space-2) 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* ---- Day Cell ---- */
.cal__cell {
    position: relative;
    min-height: 72px;
    padding: var(--space-2);
    border-right: 1px solid var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-50);
    cursor: pointer;
    transition: background var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cal__cell:hover {
    background: var(--color-primary-50, #f0f7ff);
}
.cal__cell:nth-child(7n) {
    border-right: none;
}

.cal__cell--empty {
    cursor: default;
    background: var(--color-gray-25, #fafafa);
}
.cal__cell--empty:hover {
    background: var(--color-gray-25, #fafafa);
}

.cal__cell--today .cal__day-num {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal__cell--past {
    opacity: 0.45;
}

.cal__cell--has-data {
    background: var(--color-primary-50, #f0f7ff);
}
.cal__cell--has-data:hover {
    background: var(--color-primary-100, #dbeafe);
}

.cal__day-num {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: 28px;
}

.cal__dots {
    display: flex;
    gap: 3px;
    margin-top: var(--space-1);
}

.cal__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.cal__dot--available { background: var(--color-success, #22c55e); }
.cal__dot--blocked   { background: var(--color-danger, #ef4444); }
.cal__dot--recurring { background: var(--color-info, #3b82f6); }

.cal__count {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-100, #dbeafe);
    border-radius: var(--radius-full);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Legend ---- */
.cal__legend {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}
.cal__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---- Recurring Schedule (collapsed section) ---- */
.cal__recurring {
    margin-top: var(--space-6);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.cal__recurring-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.cal__recurring-toggle::-webkit-details-marker { display: none; }
.cal__recurring-toggle::after {
    content: '';
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-gray-400);
    transition: transform 0.2s;
}
.cal__recurring[open] .cal__recurring-toggle::after {
    transform: rotate(180deg);
}

.cal__recurring-body {
    padding: 0 var(--space-5) var(--space-5);
}

/* ---- Recurring Day Rows ---- */
.recurring-day {
    border-bottom: 1px solid var(--color-gray-50);
    padding: var(--space-2) 0;
}
.recurring-day:last-child { border-bottom: none; }

.recurring-day__header {
    padding: var(--space-1) 0;
}

.recurring-day__slots {
    padding-left: var(--space-6);
    padding-bottom: var(--space-2);
}

.recurring-day__slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.recurring-day__slot .input--sm {
    width: 110px;
}

/* ---- Day Detail Modal ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.modal-overlay[hidden] { display: none; }

.modal--day {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.modal__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-gray-400);
    cursor: pointer;
    transition: all var(--transition);
}
.modal__close:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.modal__body {
    padding: var(--space-5);
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

/* ---- Day Slots List ---- */
.day-slots {
    margin: var(--space-4) 0;
}

.day-slots__empty {
    text-align: center;
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    padding: var(--space-4) 0;
}

.day-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    border-left: 3px solid transparent;
}

.day-slot--available {
    background: var(--color-success-50, #f0fdf4);
    border-left-color: var(--color-success, #22c55e);
}
.day-slot--blocked {
    background: var(--color-danger-50, #fef2f2);
    border-left-color: var(--color-danger, #ef4444);
}
.day-slot--recurring {
    background: var(--color-info-50, #eff6ff);
    border-left-color: var(--color-info, #3b82f6);
}

.day-slot__info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.day-slot__time {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    white-space: nowrap;
}

.day-slot__note {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-style: italic;
}

.day-slot__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-gray-300);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
}
.day-slot__delete:hover {
    background: var(--color-danger-50, #fef2f2);
    color: var(--color-danger, #ef4444);
}

/* ---- Add Slot Form ---- */
.day-add-form {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

.day-add-form__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin: 0 0 var(--space-3);
}

.day-add-form__field {
    margin-bottom: var(--space-4);
}

/* input[type=time] has browser-enforced intrinsic width on mobile.
   appearance:none removes the native time-picker chrome so width:100% works. */
.day-add-form__field input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

/* ---- Quick Add Button ---- */
.btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
}

.btn--success {
    background: var(--color-success, #22c55e);
    color: var(--color-white);
    border: none;
}
.btn--success:hover {
    background: #16a34a;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .cal__cell {
        min-height: 52px;
        padding: var(--space-1);
    }
    .cal__day-num {
        font-size: var(--font-size-xs);
    }
    .cal__count {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
    .cal__nav {
        padding: var(--space-3);
    }
    .cal__month {
        font-size: var(--font-size-base);
    }
    .cal__legend {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
}

/* ---- Input inline variant ---- */
.input--inline {
    width: auto;
    display: inline-block;
    min-width: 180px;
}
/* ================================================================
   Per-service calendar: breadcrumb + service switch
   ================================================================ */
.section__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: calc(var(--space-1) * -1) 0 0;
}
.breadcrumb--compact {
    margin-bottom: var(--space-1);
}
.breadcrumb--compact .breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    text-decoration: none;
}
.breadcrumb--compact .breadcrumb__link:hover { color: var(--color-primary); }

.cal__service-switch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.cal__service-switch__label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ================================================================
   Client (read-only) calendar on service-detail
   ================================================================ */

/* Day status colors */
.svc-cal__cell--available {
    cursor: pointer;
    background: var(--color-success-bg, #f0fdf4);
}
.svc-cal__cell--available:hover {
    background: var(--color-success-light, #bbf7d0);
    border-color: var(--color-success, #22c55e);
}
.svc-cal__cell--full {
    cursor: pointer;
    background: var(--color-danger-bg, #fef2f2);
}
.svc-cal__cell--full:hover {
    background: #fecaca;
    border-color: var(--color-danger, #ef4444);
}
.svc-cal__cell--pending {
    cursor: pointer;
    background: var(--color-warning-bg, #fffbeb);
}
.svc-cal__cell--pending:hover {
    background: #fde68a;
    border-color: var(--color-warning, #f59e0b);
}
.svc-cal__cell--selected {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Status dot on day cell */
.svc-cal__dot-indicator {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 2px auto 0;
}
.svc-cal__dot--available { background: var(--color-success, #22c55e); }
.svc-cal__dot--full      { background: var(--color-danger,  #ef4444); }
.svc-cal__dot--pending   { background: var(--color-warning, #f59e0b); }

/* Loading state */
.cal__loading {
    text-align: center;
    padding: var(--space-8) 0;
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    grid-column: 1 / -1;
}

/* ── Upcoming slots section ── */
.upcoming-slots {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--color-success-bg, #f0fdf4);
    border: 1px solid var(--color-success-border, #86efac);
    border-radius: var(--radius-lg);
}
.upcoming-slots__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-success-dark, #15803d);
    margin: 0 0 var(--space-3);
}
.upcoming-slots__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.upcoming-slots__day {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.upcoming-slots__date {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    min-width: 110px;
}
.upcoming-slots__times {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.upcoming-slot-btn {
    padding: 2px 10px;
    border-radius: var(--radius);
    background: white;
    border: 1px solid var(--color-success, #22c55e);
    color: var(--color-success-dark, #15803d);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.upcoming-slot-btn:hover {
    background: var(--color-success, #22c55e);
    color: white;
}
.upcoming-slots__more {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

/* ── Day slots panel ── */
.svc-day-panel {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}
.svc-day-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.svc-day-panel__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
}
.svc-day-panel__close {
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 4px;
}
.svc-day-panel__close:hover { color: var(--color-gray-700); }
.svc-day-panel__empty {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    margin: 0;
}
.svc-day-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.svc-day-panel__grid--checkboxes {
    grid-template-columns: 1fr;
    gap: var(--space-1);
}
@media (max-width: 480px) {
    .svc-day-panel__grid { grid-template-columns: 1fr; }
}
.svc-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    background: var(--color-gray-50);
    width: 100%;
    box-sizing: border-box;
    min-height: 2.5rem;
}
/* Pending slot (yellow) */
.svc-slot--pending {
    background: var(--color-warning-bg, #fffbeb);
    border-color: var(--color-warning, #f59e0b);
}
/* Confirmed/booked slot (light red) */
.svc-slot--confirmed {
    background: var(--color-danger-bg, #fef2f2);
    border-color: var(--color-danger, #ef4444);
    opacity: 0.8;
}
/* Status badge inside slot */
.svc-slot__badge {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
}
.svc-slot__badge--pending {
    background: #fef9c3;
    color: #92400e;
}
.svc-slot__badge--confirmed {
    background: #fee2e2;
    color: #991b1b;
}
.svc-slot--checkbox {
    cursor: pointer;
    user-select: none;
    transition: background var(--transition), border-color var(--transition);
}
.svc-slot--checkbox:hover {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary-300, #93c5fd);
}
.svc-slot--checkbox:has(.svc-slot__check:checked) {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary);
}
.svc-slot__check {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
}
.svc-slot__checkmark {
    margin-left: auto;
    width: 1rem;
    height: 1rem;
}
/* Submit footer */
.svc-slots-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
}
.svc-slots-form__summary {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 500;
}
.svc-slots-form__submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.svc-slot--highlighted {
    border-color: var(--color-primary);
    background: var(--color-primary-light, #eff6ff);
}
.svc-slot__time {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Legend dots for client calendar ── */
.cal__legend .svc-cal__dot--available { background: var(--color-success, #22c55e); }
.cal__legend .svc-cal__dot--full      { background: var(--color-danger,  #ef4444); }
.cal__legend .svc-cal__dot--pending   { background: var(--color-warning, #f59e0b); }

/* Mobile fixes for modal day-add-form */
@media (max-width: 600px) {
    .modal--day {
        width: min(400px, calc(100vw - 1.5rem));
        max-height: 90vh;
        overflow-y: auto;
    }
    /* Grid handles sizing automatically */
    .day-slots .day-slot {
        max-width: 100%;
        overflow: hidden;
    }
    .svc-day-panel__grid {
        flex-direction: column;
    }
    .svc-slot {
        width: 100%;
    }
}