/* =============================================================
   AppointMe — Technician Panel Styles
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --tp-primary:   #5B3FE4;
    --tp-primary-d: #4A2FD0;
    --tp-primary-l: rgba(91,63,228,.06);
    --tp-green:     #1B5E20;
    --tp-green-l:   #E8F5E9;
    --tp-orange:    #FF6D00;
    --tp-orange-l:  #FFF3E0;
    --tp-blue:      #1565C0;
    --tp-blue-l:    #E3F2FD;
    --tp-grey:      #9E9E9E;
    --tp-bg:        #F5F7FA;
    --tp-card-bg:   #FFFFFF;
    --tp-border:    #E8ECF4;
    --tp-text:      #1A1A2E;
    --tp-text-sub:  #64748B;
    --tp-radius:    16px;
    --tp-radius-sm: 10px;
    --tp-shadow:    0 4px 24px rgba(91,63,228,0.06);
    --tp-font:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Wrapper ─────────────────────────────────── */
.sldt-tech {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0 40px;
    font-family: var(--tp-font);
    color: var(--tp-text);
    font-size: 14px;
}

/* ─── Woodmart theme overrides ────────────────── */
.entry-content .sldt-rs-cal-grid,
.post-content .sldt-rs-cal-grid,
.page-content .sldt-rs-cal-grid,
.woodmart-content .sldt-rs-cal-grid,
.sldt-tech .sldt-rs-cal-grid,
.sldt-tech-modal .sldt-rs-cal-grid,
.sldt-rs-cal .sldt-rs-cal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}
.entry-content .sldt-rs-cal-grid .sldt-rs-dh,
.post-content .sldt-rs-cal-grid .sldt-rs-dh,
.page-content .sldt-rs-cal-grid .sldt-rs-dh,
.woodmart-content .sldt-rs-cal-grid .sldt-rs-dh,
.sldt-tech .sldt-rs-cal-grid .sldt-rs-dh,
.sldt-tech-modal .sldt-rs-cal-grid .sldt-rs-dh,
.sldt-rs-cal .sldt-rs-dh {
    display: block !important;
    text-align: center !important;
    float: none !important;
}
.entry-content .sldt-rs-cal-grid .sldt-rs-day,
.post-content .sldt-rs-cal-grid .sldt-rs-day,
.page-content .sldt-rs-cal-grid .sldt-rs-day,
.woodmart-content .sldt-rs-cal-grid .sldt-rs-day,
.sldt-tech .sldt-rs-cal-grid .sldt-rs-day,
.sldt-tech-modal .sldt-rs-cal-grid .sldt-rs-day,
.sldt-rs-cal .sldt-rs-day {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
}
.entry-content .sldt-rs-slots-grid,
.post-content .sldt-rs-slots-grid,
.page-content .sldt-rs-slots-grid,
.woodmart-content .sldt-rs-slots-grid,
.sldt-tech .sldt-rs-slots-grid,
.sldt-tech-modal .sldt-rs-slots-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 8px !important;
    flex-direction: unset !important;
}

/* ─── Header ──────────────────────────────────── */
.sldt-tech__header {
    background: linear-gradient(135deg, var(--tp-primary) 0%, var(--tp-primary-d) 100%);
    color: #fff;
    border-radius: var(--tp-radius);
    padding: 22px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 6px 24px rgba(91,63,228,.25);
}

.sldt-tech__header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sldt-tech__avatar {
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,.25);
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sldt-tech__name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.sldt-tech__role {
    font-size: 12px;
    opacity: .8;
    margin-top: 2px;
}

.sldt-tech__stats {
    display: flex;
    gap: 20px;
}

.sldt-tech__stat {
    text-align: center;
}

.sldt-tech__stat-num {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.sldt-tech__stat-label {
    font-size: 11px;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

/* ─── Tabs ────────────────────────────────────── */
.sldt-tech__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--tp-card-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    padding: 4px;
}

.sldt-tech__tab {
    flex: 1;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: calc(var(--tp-radius) - 4px);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--tp-font);
    color: var(--tp-text-sub);
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
}

.sldt-tech__tab:hover {
    background: var(--tp-bg);
    color: var(--tp-text);
}

.sldt-tech__tab--active {
    background: var(--tp-primary) !important;
    color: #fff !important;
}

.sldt-tech__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FF6D00;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ─── Date groups (upcoming tab) ──────────────── */
.sldt-tech__date-group {
    margin-bottom: 20px;
}

.sldt-tech__date-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--tp-text-sub);
    margin-bottom: 10px;
    padding: 0 4px;
}

/* ─── Cards ───────────────────────────────────── */
.sldt-tech__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sldt-tech__card {
    background: var(--tp-card-bg);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}

.sldt-tech__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(91,63,228,.12);
}

.sldt-tech__card--past {
    opacity: .8;
}

/* Status-based left border */
.sldt-status--pending              { border-left: 4px solid #f0ad4e; }
.sldt-status--confirmed            { border-left: 4px solid var(--tp-primary); }
.sldt-status--technician-assigned  { border-left: 4px solid #0097A7; }
.sldt-status--service-started      { border-left: 4px solid #E65100; }
.sldt-status--service-completed    { border-left: 4px solid #28a745; }
.sldt-status--service-closed       { border-left: 4px solid #1B5E20; }
.sldt-status--cancelled            { border-left: 4px solid #dc3545; }

.sldt-tech__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
}

.sldt-tech__card-time {
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sldt-tech__card-time span {
    color: var(--tp-text-sub);
    font-weight: 400;
}

/* Status pills */
.sldt-tech__status-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.sldt-status-pill--pending             { background: #FFF8E1; color: #F57F17; }
.sldt-status-pill--confirmed           { background: rgba(91,63,228,.08); color: var(--tp-primary); }
.sldt-status-pill--technician-assigned { background: #E0F7FA; color: #006064; }
.sldt-status-pill--service-started     { background: var(--tp-orange-l); color: var(--tp-orange); }
.sldt-status-pill--service-completed   { background: #E8F5E9; color: #2E7D32; }
.sldt-status-pill--service-closed      { background: var(--tp-green-l); color: var(--tp-green); }
.sldt-status-pill--cancelled           { background: #FFEBEE; color: #C62828; }

.sldt-tech__card-body {
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sldt-tech__card-service {
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-primary);
}

.sldt-tech__card-customer {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sldt-tech__card-name {
    font-size: 14px;
    font-weight: 600;
}

.sldt-tech__card-phone {
    font-size: 13px;
    color: var(--tp-primary);
    text-decoration: none;
    font-weight: 500;
}
.sldt-tech__card-phone:hover { text-decoration: underline; }

.sldt-tech__card-addr {
    font-size: 12px;
    color: var(--tp-text-sub);
    line-height: 1.4;
}

.sldt-tech__card-balance {
    font-size: 12px;
    color: var(--tp-orange);
    background: var(--tp-orange-l);
    padding: 4px 10px;
    border-radius: var(--tp-radius-sm);
    display: inline-block;
    margin-top: 2px;
}

.sldt-tech__card-actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--tp-border);
    flex-wrap: wrap;
}

/* ─── Buttons ─────────────────────────────────── */
.sldt-tech__btn {
    padding: 9px 18px;
    border: none;
    border-radius: var(--tp-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--tp-font);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.sldt-tech__btn:active { transform: scale(.97); }

.sldt-tech__btn--ghost {
    background: transparent;
    border: 1.5px solid var(--tp-border);
    color: var(--tp-text-sub);
}
.sldt-tech__btn--ghost:hover {
    background: var(--tp-primary-l);
    color: var(--tp-primary);
    border-color: rgba(91,63,228,.25);
}

.sldt-tech__btn--start {
    background: var(--tp-orange);
    color: #fff;
}
.sldt-tech__btn--start:hover { background: #E65100; }

.sldt-tech__btn--complete {
    background: #2E7D32;
    color: #fff;
}
.sldt-tech__btn--complete:hover { background: #1B5E20; }

.sldt-tech__btn--primary {
    background: var(--tp-primary);
    color: #fff;
}
.sldt-tech__btn--primary:hover { background: var(--tp-primary-d); }

.sldt-tech__btn--danger {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
}
.sldt-tech__btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ─── Empty state ─────────────────────────────── */
.sldt-tech__empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--tp-text-sub);
}
.sldt-tech__empty-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.sldt-tech__empty p { margin: 0; font-size: 15px; }

/* ─── Spinner ─────────────────────────────────── */
.sldt-tech__spinner {
    text-align: center;
    padding: 32px;
    color: var(--tp-text-sub);
    font-size: 13px;
}

/* ─── Notice ──────────────────────────────────── */
.sldt-tech-notice {
    padding: 14px 20px;
    border-radius: var(--tp-radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}
.sldt-tech-notice--warn { background: #FFF8E1; color: #F57F17; border: 1px solid #FFE082; }
.sldt-tech-notice--error { background: #FFEBEE; color: #C62828; border: 1px solid #FFCDD2; }
.sldt-tech-notice--success { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }

/* ─── Modal ───────────────────────────────────── */
.sldt-tech-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sldt-tech-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 30, .55);
    backdrop-filter: blur(2px);
}

.sldt-tech-modal__box {
    position: relative;
    width: min(96vw, 560px);
    max-height: 88vh;
    margin: 6vh auto;
    background: var(--tp-card-bg);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(91,63,228,.18), 0 4px 16px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sldt-tech-modal__box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tp-primary);
    z-index: 2;
}

.sldt-tech-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--tp-bg);
    border: 1px solid var(--tp-border);
    font-size: 20px;
    color: var(--tp-text);
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sldt-tech-modal__close:hover { background: #FFEBEE; color: #C62828; }

.sldt-tech-modal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 24px;
    flex: 1;
}

/* ─── Modal sections ──────────────────────────── */
.sldt-modal-section {
    margin-bottom: 20px;
}

.sldt-modal-section__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--tp-text-sub);
    margin-bottom: 10px;
}

.sldt-modal-heading {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    padding-right: 32px;
}

.sldt-modal-sub {
    font-size: 12px;
    color: var(--tp-text-sub);
    margin: 0 0 16px;
}

.sldt-modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sldt-modal-info-item {
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 10px 12px;
}

.sldt-modal-info-item .label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tp-text-sub);
    margin-bottom: 3px;
}

.sldt-modal-info-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-text);
    word-break: break-word;
}

.sldt-modal-info-item--wide {
    grid-column: 1 / -1;
}

.sldt-modal-customer {
    background: var(--tp-bg);
    border-radius: var(--tp-radius-sm);
    padding: 14px 16px;
}

.sldt-modal-customer a {
    color: var(--tp-primary);
    font-weight: 600;
    text-decoration: none;
}
.sldt-modal-customer a:hover { text-decoration: underline; }

.sldt-modal-customer p { margin: 4px 0; font-size: 13px; }

.sldt-modal-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sldt-modal-items-table th {
    text-align: left;
    padding: 7px 10px;
    background: var(--tp-bg);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tp-text-sub);
    border-bottom: 1px solid var(--tp-border);
}
.sldt-modal-items-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--tp-border);
}

.sldt-modal-totals {
    margin-top: 8px;
    text-align: right;
    font-size: 13px;
    color: var(--tp-text-sub);
}
.sldt-modal-totals strong {
    color: var(--tp-text);
    font-size: 15px;
}

/* ─── Status actions in modal ─────────────────── */
.sldt-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ─── Add item form ───────────────────────────── */
.sldt-add-item-form {
    margin-top: 12px;
    display: none;
    flex-direction: column;
    gap: 10px;
}
.sldt-add-item-form.open { display: flex; }

.sldt-add-item-form input,
.sldt-add-item-form select,
.sldt-add-item-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    font-size: 13px;
    font-family: var(--tp-font);
    color: var(--tp-text);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}

.sldt-add-item-form input:focus,
.sldt-add-item-form select:focus {
    outline: none;
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 3px rgba(91,63,228,.12);
}

.sldt-add-item-qty-row {
    display: flex;
    gap: 8px;
}

.sldt-add-item-qty-row input[type="number"] { width: 80px; flex-shrink: 0; appearance: textfield; -moz-appearance: textfield; }
.sldt-add-item-qty-row input[type="number"]::-webkit-outer-spin-button,
.sldt-add-item-qty-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sldt-add-item-qty-input { width: 80px !important; flex: none !important; }

/* ─── Notes textarea ──────────────────────────── */
.sldt-tech-notes-area {
    width: 100%;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    min-height: 70px;
}
.sldt-tech-notes-area:focus {
    outline: none;
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 3px rgba(91,63,228,.12);
}

/* ─── Toast ───────────────────────────────────── */
.sldt-tech-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1A1A2E;
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    z-index: 999999;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    white-space: nowrap;
}
.sldt-tech-toast.show { opacity: 1; }
.sldt-tech-toast.success { background: #2E7D32; }
.sldt-tech-toast.error   { background: #C62828; }

/* ─── Divider ─────────────────────────────────── */
.sldt-modal-divider {
    border: none;
    border-top: 1px solid var(--tp-border);
    margin: 16px 0;
}

/* ─── Responsive ──────────────────────────────── */
@media (max-width: 600px) {
    .sldt-tech__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .sldt-tech__stats { width: 100%; justify-content: space-around; }
    .sldt-modal-info-grid { grid-template-columns: 1fr; }
    .sldt-tech-modal__box {
        width: 100vw;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    .sldt-tech-modal__close {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
        font-size: 24px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }
    .sldt-tech__card-actions { flex-direction: column; }
    .sldt-tech__card-actions .sldt-tech__btn { width: 100%; text-align: center; }
    .sldt-tech__tabs { flex-wrap: nowrap; overflow-x: auto; }
    .sldt-modal-items-table { font-size: 12px; }
    .sldt-modal-items-table th,
    .sldt-modal-items-table td { padding: 6px 6px; }
}

/* ─── WooCommerce My Account overrides ────────── */
.woocommerce-account .sldt-tech,
.woocommerce-MyAccount-content .sldt-tech {
    max-width: 100% !important;
    width: 100% !important;
}
.woocommerce-account .sldt-tech *,
.woocommerce-MyAccount-content .sldt-tech * {
    box-sizing: border-box;
}
.woocommerce-account .sldt-tech__header,
.woocommerce-account .sldt-tech__card,
.woocommerce-account .sldt-tech__tabs {
    font-family: var(--tp-font) !important;
}

/* ─── Pull-to-refresh indicator ───────────────── */
.sldt-tech__refresh-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.sldt-tech__refresh-bar button {
    background: transparent;
    border: none;
    color: var(--tp-text-sub);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s;
}
.sldt-tech__refresh-bar button:hover {
    color: var(--tp-primary);
}
.sldt-tech__refresh-bar .sldt-last-updated {
    font-size: 11px;
    color: var(--tp-text-sub);
}

/* ─── Swipe hint on card ──────────────────────── */
.sldt-tech__card.sldt-swiping {
    transition: none;
}

/* ─── Loading skeleton ────────────────────────── */
@keyframes sldtShimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.sldt-tech__skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: sldtShimmer 1.5s infinite;
    border-radius: var(--tp-radius);
    height: 120px;
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════
   RESCHEDULE CALENDAR WIDGET
   (mirrors product page booking calendar)
   ═══════════════════════════════════════════════ */
.sldt-rs-current {
    font-size: 12px;
    color: var(--tp-text-sub);
    margin: 0 0 10px;
}

.sldt-rs-cal {
    background: var(--tp-card-bg);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--tp-radius);
    padding: 18px 16px;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,.03);
    margin-bottom: 16px;
}
.sldt-rs-cal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tp-primary);
    border-radius: var(--tp-radius) var(--tp-radius) 0 0;
}

.sldt-rs-step-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--tp-text);
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid var(--tp-primary);
}

/* Navigation */
.sldt-rs-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sldt-rs-month-title {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--tp-font);
    color: var(--tp-text);
}

.sldt-rs-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    font-size: 18px;
    color: var(--tp-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-family: var(--tp-font);
}
.sldt-rs-nav-btn:hover {
    background: var(--tp-primary);
    color: #fff;
    border-color: transparent;
}

/* Day grid */
.sldt-rs-cal .sldt-rs-cal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
}

.sldt-rs-cal .sldt-rs-dh {
    display: block;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tp-text-sub);
    padding: 4px 0 6px;
    user-select: none;
    min-width: 0;
    overflow: hidden;
}

.sldt-rs-cal .sldt-rs-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--tp-font);
    border: 2px solid transparent;
    transition: all .15s;
    user-select: none;
    cursor: default;
    background: transparent;
    color: var(--tp-text);
}

.sldt-rs-day.sldt-rs-empty {
    visibility: hidden;
}

.sldt-rs-day.sldt-rs-available {
    cursor: pointer;
    background: #fff;
    border-color: rgba(0,0,0,.06);
}
.sldt-rs-day.sldt-rs-available:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
    background: rgba(91,63,228,.04);
}

.sldt-rs-day.sldt-rs-selected {
    background: var(--tp-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 12px rgba(91,63,228,.35);
    font-weight: 700;
}

.sldt-rs-day.sldt-rs-today:not(.sldt-rs-selected) {
    border-color: var(--tp-orange);
    color: var(--tp-orange);
}

.sldt-rs-day.sldt-rs-past,
.sldt-rs-day.sldt-rs-day-off,
.sldt-rs-day.sldt-rs-blocked,
.sldt-rs-day.sldt-rs-unavailable {
    color: #dfe2e7;
    cursor: default;
    background: transparent;
    border-color: transparent;
}

.sldt-rs-day.sldt-rs-fully-booked {
    text-decoration: line-through;
    color: #d0d3d9;
    cursor: default;
}

/* Loading spinner */
.sldt-rs-loading { text-align: center; padding: 16px 0; }
.sldt-rs-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(91,63,228,.12);
    border-top-color: var(--tp-primary);
    border-radius: 50%;
    animation: sldt-rs-spin .65s linear infinite;
}
.sldt-rs-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes sldt-rs-spin { to { transform: rotate(360deg); } }

/* Time slot grid */
.sldt-rs-slots-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 8px;
    margin-bottom: 14px;
}

.sldt-rs-slot-btn {
    background: #fff;
    border: 1.5px solid rgba(0,0,0,.07);
    border-radius: 12px;
    padding: 10px 6px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--tp-font);
    color: var(--tp-text);
    cursor: pointer;
    transition: all .18s ease;
    text-align: center;
    line-height: 1.3;
}
.sldt-rs-slot-btn:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
    background: rgba(91,63,228,.03);
    box-shadow: 0 2px 8px rgba(91,63,228,.1);
}
.sldt-rs-slot-btn.sldt-rs-slot-active {
    background: var(--tp-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(91,63,228,.3);
    font-weight: 700;
}

.sldt-rs-no-slots {
    font-size: 13px;
    color: #999;
    text-align: center;
    padding: 16px 0;
    grid-column: 1 / -1;
}

/* Summary */
.sldt-rs-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0faf0;
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 10px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .sldt-rs-cal { padding: 14px 10px; }
    .sldt-rs-cal .sldt-rs-cal-grid { gap: 3px; }
    .sldt-rs-cal .sldt-rs-dh { font-size: 9px; }
    .sldt-rs-day { height: 36px; font-size: 12px; border-radius: 10px; }
    .sldt-rs-nav-btn { width: 30px; height: 30px; font-size: 14px; }
    .sldt-rs-month-title { font-size: 13px; }
    .sldt-rs-slots-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .sldt-rs-slot-btn { padding: 8px 4px; font-size: 11px; border-radius: 8px; }
}

/* ══════════════════════════════════════════════
   TECHNICIAN CALENDAR TAB
   ══════════════════════════════════════════════ */
.sldt-tech-cal {
    padding: 6px 0;
}
.sldt-tech-cal .sldt-rs-cal {
    margin-bottom: 4px;
}
/* Day with booking indicator */
.sldt-tcal-has-bookings {
    position: relative;
}
.sldt-tcal-dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tp-primary);
}
.sldt-tcal-has-bookings.sldt-rs-selected .sldt-tcal-dot {
    background: #fff;
}
/* Date header in bookings list */
.sldt-tech__date-header {
    font-family: var(--tp-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--tp-primary);
    padding: 14px 0 8px;
    border-bottom: 2px solid var(--tp-primary-l);
    margin-bottom: 12px;
}
#sldt-tcal-bookings .sldt-tech__cards {
    gap: 10px;
}
.sldt-tech__spinner {
    text-align: center;
    color: var(--tp-primary);
    font-family: var(--tp-font);
    padding: 30px 0;
    font-size: 14px;
}

/* Loading indicator in calendar */
#sldt-tcal-loading {
    display: none;
    text-align: center;
    padding: 30px 0;
    color: var(--tp-primary);
    font-family: var(--tp-font);
    font-size: 14px;
}

/* Load more button */
.sldt-tech__load-more-wrap {
    text-align: center;
    padding: 18px 0 8px;
}
#sldt-load-more-past {
    font-family: var(--tp-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-primary);
    background: var(--tp-primary-l);
    border: 1px solid rgba(91,63,228,.15);
    border-radius: var(--tp-radius-sm);
    padding: 10px 24px;
    cursor: pointer;
    transition: all .2s;
}
#sldt-load-more-past:hover:not(:disabled) {
    background: var(--tp-primary);
    color: #fff;
}
#sldt-load-more-past:disabled {
    opacity: .5;
    cursor: default;
}

/* ══════════════════════════════════════════════
   TECHNICIAN LOGIN FORM
   ══════════════════════════════════════════════ */
.sldt-tech-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 24px 16px;
    font-family: var(--tp-font);
}
.sldt-tech-login__card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(91,63,228,.10);
    overflow: hidden;
}
.sldt-tech-login__header {
    background: linear-gradient(135deg, var(--tp-primary) 0%, var(--tp-primary-d) 100%);
    color: #fff;
    padding: 32px 28px 24px;
    text-align: center;
}
.sldt-tech-login__icon {
    display: inline-block;
    font-size: 32px;
    margin-bottom: 8px;
}
.sldt-tech-login__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--tp-font);
    color: #fff;
}
.sldt-tech-login__subtitle {
    margin: 0;
    font-size: 13px;
    opacity: .85;
    font-weight: 400;
}
.sldt-tech-login__error {
    margin: 16px 24px 0;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.5;
}
.sldt-tech-login__form {
    padding: 24px 28px 28px;
}
.sldt-tech-login__field {
    margin-bottom: 16px;
}
.sldt-tech-login__field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-text);
    margin-bottom: 6px;
}
.sldt-tech-login__field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    font-size: 14px;
    font-family: var(--tp-font);
    color: var(--tp-text);
    background: #FAFBFD;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.sldt-tech-login__field input:focus {
    outline: none;
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 3px rgba(91,63,228,.12);
    background: #fff;
}
.sldt-tech-login__field input::placeholder {
    color: #A0A8B8;
}
.sldt-tech-login__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13px;
}
.sldt-tech-login__remember {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--tp-text);
    font-weight: 500;
}
.sldt-tech-login__remember input[type="checkbox"] {
    accent-color: var(--tp-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.sldt-tech-login__forgot {
    color: var(--tp-primary);
    text-decoration: none;
    font-weight: 600;
    transition: opacity .2s;
}
.sldt-tech-login__forgot:hover {
    opacity: .75;
}
.sldt-tech-login__submit {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--tp-primary) 0%, var(--tp-primary-d) 100%);
    color: #fff;
    border: none;
    border-radius: var(--tp-radius-sm);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--tp-font);
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(91,63,228,.25);
}
.sldt-tech-login__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(91,63,228,.35);
}
.sldt-tech-login__submit:active {
    transform: translateY(0);
}
@media (max-width: 480px) {
    .sldt-tech-login__card { border-radius: 16px; }
    .sldt-tech-login__header { padding: 24px 20px 18px; }
    .sldt-tech-login__title { font-size: 19px; }
    .sldt-tech-login__form { padding: 20px 20px 24px; }
}