/* Client Dashboard Visual Cleanup */

:root {
    --role-interaction: #1d4ed8;
    --role-success: #059669;
    --role-warning: #d97706;
    --role-danger: #dc2626;

    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
}

body {
    line-height: 1.75;
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(29, 78, 216, 0.35);
    outline-offset: 2px;
}

.btn,
.mobile-top-btn,
.rating-close-btn,
.approval-close-btn,
.tbar-call,
.nav-toggle {
    min-height: 44px;
}

/* Status hero */
.track-status-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-24);
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-16);
}

.track-status-main {
    min-width: 0;
    flex: 1;
}

.track-status-heading {
    font-size: 1.08rem;
    font-weight: 800;
    margin: var(--space-8) 0 0;
    color: var(--text-main);
}

.track-status-meta {
    color: var(--text-muted);
    font-size: 0.86rem;
    margin-top: var(--space-8);
}

.track-status-eta {
    min-width: 118px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-12);
}

.track-status-eta .eta-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.track-status-eta .eta-value {
    display: block;
    margin-top: 4px;
    color: var(--role-interaction);
    font-weight: 800;
    font-size: 0.9rem;
}

.track-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.74rem;
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid transparent;
}

.track-status-pill.role-info {
    color: var(--role-interaction);
    border-color: rgba(29, 78, 216, 0.2);
    background: rgba(29, 78, 216, 0.08);
}

.track-status-pill.role-success {
    color: var(--role-success);
    border-color: rgba(5, 150, 105, 0.24);
    background: rgba(5, 150, 105, 0.1);
}

.track-status-pill.role-warning {
    color: var(--role-warning);
    border-color: rgba(217, 119, 6, 0.24);
    background: rgba(217, 119, 6, 0.1);
}

.track-status-pill.role-danger {
    color: var(--role-danger);
    border-color: rgba(220, 38, 38, 0.2);
    background: rgba(220, 38, 38, 0.08);
}

/* State cards */
.track-state-card {
    padding: var(--space-32);
    text-align: center;
}

.track-state-icon {
    font-size: 3rem;
    margin-bottom: var(--space-16);
}

.track-state-icon.role-warning { color: var(--role-warning); }
.track-state-icon.role-danger { color: var(--role-danger); }
.track-state-icon.role-muted  { color: var(--text-muted); opacity: 0.4; }

.track-state-title {
    font-weight: 800;
    margin-bottom: var(--space-12);
}

.track-state-title.role-warning { color: var(--role-warning); }
.track-state-title.role-danger { color: var(--role-danger); }
.track-state-title.role-muted { color: var(--text-muted); }

.track-state-desc {
    color: var(--text-muted);
    margin-bottom: var(--space-16);
}

.track-state-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-16);
}

.track-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-12);
    color: var(--text-muted);
    font-size: 0.84rem;
}

.track-secondary-link:hover {
    color: var(--role-interaction);
}

/* Pending ratings card */
.pending-ratings-card {
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
}

.pending-ratings-head {
    justify-content: space-between;
}

.pending-ratings-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pending-ratings-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    background: #fef3c7;
    color: var(--role-warning);
}

.pending-ratings-list {
    padding: 0 16px 16px;
}

.pending-rate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #f8e3b0;
    background: rgba(255, 255, 255, 0.88);
    margin-bottom: 10px;
}

.pending-rate-item:last-child {
    margin-bottom: 0;
}

.pending-rate-main {
    flex: 1;
    min-width: 0;
}

.pending-rate-title {
    font-weight: 800;
    font-size: 0.93rem;
    color: #78350f;
}

.pending-rate-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.pending-rate-sub i {
    margin-left: 4px;
    color: #a16207;
}

.pending-rate-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.pending-ratings-loading,
.pending-ratings-error {
    padding: 14px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #f1e4c2;
}

.pending-ratings-loading i,
.pending-ratings-error i {
    margin-left: 6px;
}

/* Map card */
.track-map-card {
    margin-bottom: var(--space-16);
}

.track-map-inner {
    padding: var(--space-16);
}

.track-map-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-12);
}

.track-map-title {
    font-weight: 700;
}

.track-badge-inline {
    margin-right: auto;
    display: none;
    font-size: 0.72rem;
}

.track-badge-inline.live {
    animation: track-pulse 2s infinite;
}

.track-badge-inline.context {
    color: var(--text-muted);
}

.track-map-overlay-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.track-overlay-title {
    font-size: 0.97rem;
}

.track-overlay-desc {
    font-size: 0.8rem;
    opacity: 0.82;
    max-width: 230px;
    text-align: center;
    line-height: 1.45;
}

.track-map-meta {
    display: flex;
    gap: 24px;
    margin-top: var(--space-12);
    font-size: 0.82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    align-items: center;
}

.track-map-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

.track-map-dot.client { background: #3b82f6; }
.track-map-dot.tech { background: #f97316; }

.track-map-line {
    display: inline-block;
    width: 32px;
    height: 5px;
    border-radius: 4px;
    background: #f97316;
    opacity: 0.8;
    margin-left: 6px;
    vertical-align: middle;
}

.track-map-route-label {
    margin-right: auto;
    font-size: 0.8rem;
}

.track-eta-pill {
    font-weight: 700;
    color: var(--role-interaction);
    background: var(--primary-light);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
}

.track-stepper-head {
    padding: var(--space-16) var(--space-24);
    border-bottom: 1px solid var(--border);
}

.track-stepper-body {
    padding: var(--space-24);
}

.track-pending-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Approval and rating cards */
.track-approval-card,
.track-rating-card {
    margin-top: var(--space-16);
}

.approval-banner {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 2px solid var(--role-warning);
    border-radius: 16px;
    padding: var(--space-16);
    display: flex;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.approval-banner-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--role-warning);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.approval-banner-body {
    flex: 1;
    min-width: 0;
}

.approval-banner-title {
    font-weight: 800;
    font-size: 0.97rem;
    color: #92400e;
}

.approval-banner-desc {
    font-size: 0.8rem;
    color: #b45309;
    margin-top: 2px;
}

.approval-banner-cta {
    background: var(--role-warning);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.rating-card {
    padding: var(--space-24);
    text-align: center;
}

.rating-card .btn {
    padding: 0.65rem 2rem;
    font-size: 0.97rem;
}

.rating-emoji {
    font-size: 2.5rem;
    margin-bottom: var(--space-8);
}

.rating-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.rating-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: var(--space-16);
}

/* Unified action modals */
.action-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    padding: 0;
}

.action-modal.modal-open {
    display: flex;
}

.action-dialog {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.22);
}

.action-header {
    padding: 1.1rem 1.35rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.action-header.rating,
.action-header.approval {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.action-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.action-header-text {
    flex: 1;
    min-width: 0;
}

.action-header-text h5 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.action-header-text p {
    margin: 0.15rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.action-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.action-close-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.modal-center {
    text-align: center;
}

.modal-muted {
    color: var(--text-muted);
}

.modal-block {
    display: block;
}

.modal-w-full {
    width: 100%;
}

.modal-mt-8 {
    margin-top: 8px;
}

.modal-mt-12 {
    margin-top: 12px;
}

/* Approval footer CTA hierarchy */
.approval-primary-btn {
    flex: 1;
    min-width: 140px;
    padding: 0.7rem;
    font-size: 0.95rem;
}

.approval-secondary-btn {
    border: 2px solid var(--role-danger);
    color: var(--role-danger);
    flex: 1;
    min-width: 120px;
    padding: 0.7rem;
    font-size: 0.95rem;
    background: transparent;
}

/* Client booking modal */
.client-booking-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
}

.client-booking-dialog {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.client-booking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-16) var(--space-24);
    border-bottom: 1px solid var(--border);
}

.client-booking-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.client-booking-title {
    margin: 0;
    font-weight: 800;
}

.client-booking-num {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.client-booking-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.client-booking-close:hover {
    color: var(--role-danger);
}

.client-booking-body {
    padding: var(--space-24);
}

.client-booking-foot {
    padding: var(--space-16) var(--space-24);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* Motion control for mobile/performance */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
    .track-step.active .track-icon,
    .sheet-compact-icon,
    .track-badge-inline.live {
        animation: none !important;
        box-shadow: none !important;
    }

    .mobile-track-sheet,
    #trackMap,
    .track-icon {
        transition-duration: 0.18s !important;
    }
}

@media (max-width: 767px) {
    .track-status-hero {
        padding: var(--space-12);
        border-radius: 14px;
        flex-direction: column;
        align-items: stretch;
    }

    .track-status-eta {
        width: 100%;
    }

    .track-state-card {
        padding: var(--space-24);
    }

    .pending-rate-item {
        flex-direction: column;
        align-items: stretch;
    }

    .pending-rate-btn {
        width: 100%;
    }

    /* إخفاء بطاقة مسار العمل على الموبايل — المسار معروض داخل الـ bottom sheet */
    #trackStepperCard {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE TRACKING — Enhanced (2026)
   ═══════════════════════════════════════════════════ */

/* ── Top Bar ── */
@media (max-width: 767px) {
    #mobileTrackTopBar {
        background: linear-gradient(180deg,
            rgba(10, 15, 40, 0.82) 0%,
            rgba(10, 15, 40, 0.55) 60%,
            transparent 100%);
        padding: env(safe-area-inset-top, .5rem) 1rem .75rem;
        gap: .65rem;
    }

    .mobile-top-btn {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        transition: background .18s, transform .15s;
    }

    .mobile-top-btn:active {
        transform: scale(.92);
        background: rgba(255, 255, 255, 0.26);
    }

    .mobile-top-info .svc-name {
        font-size: .95rem;
        font-weight: 800;
        letter-spacing: -.01em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    }

    .mobile-top-info .bk-num {
        font-size: .72rem;
        color: rgba(255, 255, 255, 0.62);
        margin-top: .05rem;
    }

    /* ── Live badge in top bar ── */
    .mobile-top-live {
        display: flex;
        align-items: center;
        gap: .3rem;
        background: rgba(34, 197, 94, 0.18);
        border: 1px solid rgba(34, 197, 94, 0.42);
        border-radius: 20px;
        padding: .22rem .65rem;
        font-size: .7rem;
        font-weight: 700;
        color: #4ade80;
        flex-shrink: 0;
        backdrop-filter: blur(8px);
    }

    .mobile-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4ade80;
        animation: liveDotPulse 1.6s infinite;
        flex-shrink: 0;
    }

    @keyframes liveDotPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: .45; transform: scale(.7); }
    }

    /* ── Bottom Sheet ── */
    .mobile-track-sheet {
        background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.28),
                    0 -2px  12px rgba(0, 0, 0, 0.08);
        will-change: transform;
    }

    /* Drag handle */
    .sheet-drag-handle {
        padding: .55rem 1rem .2rem;
        touch-action: none;
    }

    .sheet-drag-bar {
        width: 38px;
        height: 4px;
        background: #d1d5db;
        border-radius: 4px;
        margin: 0 auto .35rem;
        transition: background .2s;
    }

    .mobile-track-sheet:not(.sheet-collapsed) .sheet-drag-bar {
        background: #94a3b8;
    }

    /* Compact row — status strip */
    .sheet-compact-row {
        padding: 0 1.1rem .75rem;
        gap: .7rem;
        position: relative;
    }

    .sheet-compact-row::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 1.1rem;
        right: 1.1rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    }

    .sheet-compact-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.38);
        font-size: .95rem;
        flex-shrink: 0;
        border-radius: 14px;
        animation: none; /* controlled via JS when active */
    }

    .sheet-compact-icon.icon-active {
        animation: compactIconPulse 2s infinite;
    }

    @keyframes compactIconPulse {
        0%, 100% { box-shadow: 0 4px 14px rgba(59, 130, 246, .38); }
        50%       { box-shadow: 0 4px 22px rgba(59, 130, 246, .65); }
    }

    .sheet-compact-icon.icon-done {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        box-shadow: 0 4px 14px rgba(34, 197, 94, .38);
    }

    .sheet-compact-icon.icon-warn {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        box-shadow: 0 4px 14px rgba(245, 158, 11, .38);
    }

    .sheet-compact-title {
        font-size: .93rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -.01em;
    }

    .sheet-compact-eta {
        font-size: .78rem;
        color: var(--role-interaction, #3b82f6);
        font-weight: 600;
        margin-top: .12rem;
    }

    .sheet-expand-chip {
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        padding: .28rem .7rem;
        border-radius: 20px;
        font-size: .7rem;
        font-weight: 700;
        color: #64748b;
        transition: background .18s;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-track-sheet:not(.sheet-collapsed) .sheet-expand-chip {
        background: #eff6ff;
        color: var(--role-interaction, #3b82f6);
        border-color: rgba(59, 130, 246, .2);
    }

    /* Sheet body */
    .sheet-body {
        padding: .55rem 1.1rem 2.5rem;
    }

    .sheet-divider {
        border: none;
        border-top: 1px solid #f1f5f9;
        margin: 0 0 .9rem;
    }

    .sheet-section-lbl {
        font-size: .68rem;
        font-weight: 800;
        color: #94a3b8;
        letter-spacing: .1em;
        text-transform: uppercase;
        margin-bottom: .8rem;
    }

    /* ETA pill */
    .sheet-eta-pill {
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        border: 1px solid rgba(59, 130, 246, .2);
        border-radius: 14px;
        padding: .68rem 1rem;
        font-size: .88rem;
        font-weight: 700;
        color: #1d4ed8;
        text-align: center;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(59, 130, 246, .1);
    }

    /* Mobile Stepper inside sheet */
    #mobileTrackStepper .track-step {
        padding-bottom: 1.15rem;
        gap: .85rem;
    }

    #mobileTrackStepper .track-step:last-child {
        padding-bottom: .25rem;
    }

    #mobileTrackStepper .track-icon {
        width: 38px;
        height: 38px;
        font-size: .85rem;
        border-width: 2px;
    }

    #mobileTrackStepper .track-step.active .track-icon {
        animation: compactIconPulse 2s infinite;
        box-shadow: 0 0 0 7px rgba(59, 130, 246, .14);
    }

    #mobileTrackStepper .track-title {
        font-size: .9rem;
        font-weight: 800;
        color: #0f172a;
    }

    #mobileTrackStepper .track-desc {
        font-size: .79rem;
        color: #64748b;
        margin-top: .1rem;
        line-height: 1.4;
    }

    #mobileTrackStepper .track-step:not(:last-child)::before {
        right: 18px;
        top: 38px;
        width: 2px;
    }

    /* Tech bar over map — improved */
    #trackMapTechBar {
        top: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        border-radius: 16px;
        padding: .55rem .75rem .55rem .7rem;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.7);
        min-width: 150px;
    }

    .tbar-avatar {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        font-size: .85rem;
        box-shadow: 0 2px 8px rgba(59, 130, 246, .3);
    }

    .tbar-name {
        font-size: .84rem;
        font-weight: 800;
        color: #0f172a;
    }

    .tbar-stars {
        font-size: .73rem;
        color: #f59e0b;
        display: flex;
        align-items: center;
        gap: .15rem;
    }

    .tbar-call {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        box-shadow: 0 3px 10px rgba(34, 197, 94, .42);
        font-size: .82rem;
        transition: transform .15s;
    }

    .tbar-call:active {
        transform: scale(.9);
    }

    /* Map overlay — modern */
    #trackMapOverlay {
        background: rgba(10, 15, 40, 0.68);
        backdrop-filter: blur(6px);
        border-radius: 14px;
    }

    #trackMapOverlay .track-map-overlay-icon {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.14);
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        border-radius: 18px;
        margin-bottom: .6rem;
    }

    .track-overlay-title {
        font-size: 1rem;
        font-weight: 800;
    }

    .track-overlay-desc {
        font-size: .79rem;
        max-width: 200px;
        opacity: .78;
    }

    /* Map itself — rounded corners in mobile */
    #trackMap {
        border-radius: 0 !important;
        height: 100vh !important;
    }

    /* Collapsed sheet height */
    .mobile-track-sheet.sheet-collapsed {
        transform: translateY(calc(100% - 108px));
    }
}

/* ── Swipe hint animation (first open) ── */
@keyframes sheetSwipeHint {
    0%   { transform: translateY(calc(100% - 108px)); }
    35%  { transform: translateY(calc(100% - 180px)); }
    65%  { transform: translateY(calc(100% - 180px)); }
    100% { transform: translateY(calc(100% - 108px)); }
}

.mobile-track-sheet.sheet-hint {
    animation: sheetSwipeHint 1.4s cubic-bezier(.32,.72,0,1) forwards;
}