/* Flatpickr Z-Index Fix guarantees it always pops on top */
        .flatpickr-calendar {
            z-index: 9999 !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
            border: 1px solid #e2e8f0 !important;
            padding: 0 !important; 
            overflow: hidden !important; 
            width: 320px !important; 
        }
        .dark .flatpickr-calendar {
            background: #1e293b !important; 
            border-color: #334155 !important;
        }
        .flatpickr-months {
            background: #1e293b !important; 
            padding: 10px 0 !important; 
        }
        .dark .flatpickr-months {
            background: #0f172a !important; 
        }
        .flatpickr-innerContainer {
            padding: 10px !important; 
            box-sizing: border-box;
            width: 100% !important;
        }
        .flatpickr-months .flatpickr-month {
            background: transparent !important;
            color: white !important;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months, 
        .flatpickr-current-month input.cur-year {
            color: white !important;
            font-weight: 600 !important;
        }
        .flatpickr-current-month input.cur-year {
            background: rgba(255, 255, 255, 0.1) !important; 
            border-radius: 4px;
            padding: 2px 4px !important;
            margin-left: 5px;
            transition: background 0.2s;
        }
        .flatpickr-current-month input.cur-year:hover {
            background: rgba(255, 255, 255, 0.2) !important;
        }
        .flatpickr-monthDropdown-months option {
            color: #1e293b !important; 
            background-color: white !important;
        }
        .flatpickr-months .flatpickr-prev-month, 
        .flatpickr-months .flatpickr-next-month {
            fill: white !important;
            color: white !important;
            top: 15px !important; 
            padding: 5px 10px !important; 
        }
        .flatpickr-months .flatpickr-prev-month { left: 10px !important; }
        .flatpickr-months .flatpickr-next-month { right: 10px !important; }
        .flatpickr-months .flatpickr-prev-month:hover svg, 
        .flatpickr-months .flatpickr-next-month:hover svg {
            fill: #e2e8f0 !important; 
        }
        .flatpickr-day {
            border-radius: 8px !important; 
            margin: 2px !important;   
            color: #334155 !important;     
        }
        .dark .flatpickr-day {
            color: #e2e8f0 !important;
        }
        .flatpickr-day.selected {
            background: #9C27B0 !important; 
            border-color: #9C27B0 !important;
            color: white !important;
        }
        .flatpickr-day:hover {
            background: #f1f5f9 !important;
            border-color: #f1f5f9 !important;
            color: #1e293b !important;
        }
        .dark .flatpickr-day:hover {
            background: #334155 !important;
            border-color: #334155 !important;
            color: white !important;
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            height: 12px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9; 
            border-radius: 8px;
            margin: 0 10px;
        }
        .dark .custom-scrollbar::-webkit-scrollbar-track {
            background: #1e293b; 
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #9C27B0;
            border-radius: 8px;
            border: 2px solid #f1f5f9; 
        }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
            border: 2px solid #1e293b;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #7B1FA2;
        }
        
        .toggle-checkbox:checked { right: 0; border-color: #10B981; }
        .toggle-checkbox:checked + .toggle-label { background-color: #10B981; }

        
        .job-route-shell {
            border: 1px solid rgba(148, 163, 184, 0.22);
            background:
                radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 28%),
                linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
            box-shadow: 0 18px 50px -34px rgba(15, 23, 42, 0.35);
        }
        .dark .job-route-shell {
            border-color: rgba(148, 163, 184, 0.16);
            background:
                radial-gradient(circle at top right, rgba(168, 85, 247, 0.18), transparent 24%),
                linear-gradient(135deg, rgba(30,41,59,0.96), rgba(15,23,42,0.94));
            box-shadow: 0 22px 50px -28px rgba(2, 6, 23, 0.72);
        }

        .job-route-line {
            position: absolute;
            top: 1.2rem;
            left: 2.5rem;
            right: 2.5rem;
            height: 8px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(226,232,240,0.95), rgba(203,213,225,0.92));
        }
        .dark .job-route-line {
            background: linear-gradient(90deg, rgba(51,65,85,0.95), rgba(71,85,105,0.9));
        }
        .job-route-line-progress {
            position: absolute;
            inset: 0 auto 0 0;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(20,184,166,0.95), rgba(168,85,247,0.95));
            transition: width 0.25s ease;
        }

        .job-route-stop {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
            background: transparent;
        }

        .job-route-circle {
            width: 3rem;
            height: 3rem;
            border-radius: 999px;
            border: 3px solid rgba(203, 213, 225, 0.95);
            background: rgba(248, 250, 252, 0.98);
            color: rgb(148, 163, 184);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.22s ease;
            box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.4);
        }
        .dark .job-route-circle {
            border-color: rgba(71, 85, 105, 0.95);
            background: rgba(15, 23, 42, 0.96);
            color: rgb(100, 116, 139);
        }

        .job-route-stop.is-active .job-route-circle {
            border-color: rgba(20, 184, 166, 0.95);
            background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(168,85,247,0.2));
            color: rgb(13, 148, 136);
            box-shadow: 0 18px 30px -20px rgba(20, 184, 166, 0.9);
        }
        .dark .job-route-stop.is-active .job-route-circle {
            border-color: rgba(45, 212, 191, 0.92);
            background: linear-gradient(135deg, rgba(15,118,110,0.75), rgba(126,34,206,0.72));
            color: rgb(240, 253, 250);
        }

        .job-route-stop.is-current .job-route-circle {
            transform: scale(1.07);
        }

        .job-route-stop-label {
            text-align: center;
            min-height: 2.75rem;
        }

        .job-route-stop-label .job-route-label {
            font-size: 0.95rem;
            line-height: 1.2rem;
            font-weight: 700;
            color: rgb(71, 85, 105);
        }
        .dark .job-route-stop-label .job-route-label {
            color: rgb(226, 232, 240);
        }

        .job-route-stop-label .job-route-caption {
            font-size: 0.7rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgb(148, 163, 184);
            font-weight: 700;
            margin-bottom: 0.2rem;
        }

        .job-route-stop.is-active .job-route-stop-label .job-route-label {
            color: rgb(15, 118, 110);
        }
        .dark .job-route-stop.is-active .job-route-stop-label .job-route-label {
            color: rgb(240, 253, 250);
        }

        .job-route-stop.is-terminal .job-route-circle {
            width: 3.5rem;
            height: 3.5rem;
        }

        .job-route-stop.is-terminal.is-active .job-route-circle {
            border-color: transparent;
            color: white;
        }

        .job-route-stop.is-terminal.status-inprogress .job-route-circle {
            background: linear-gradient(135deg, rgb(59,130,246), rgb(37,99,235));
            box-shadow: 0 18px 30px -18px rgba(37, 99, 235, 0.85);
        }
        .job-route-stop.is-terminal.status-incomplete .job-route-circle {
            background: linear-gradient(135deg, rgb(249,115,22), rgb(234,88,12));
            box-shadow: 0 18px 30px -18px rgba(234, 88, 12, 0.85);
        }
        .job-route-stop.is-terminal.status-completed .job-route-circle {
            background: linear-gradient(135deg, rgb(20,184,166), rgb(5,150,105));
            box-shadow: 0 18px 30px -18px rgba(5, 150, 105, 0.85);
        }
        .job-route-stop.is-terminal:not(.is-active) .job-route-circle {
            background: rgba(248,250,252,0.96);
        }
        .dark .job-route-stop.is-terminal:not(.is-active) .job-route-circle {
            background: rgba(15,23,42,0.96);
        }

        .job-route-control-card {
            border: 1px solid rgba(203,213,225,0.88);
            background: rgba(248,250,252,0.94);
            transition: all 0.2s ease;
        }
        .dark .job-route-control-card {
            border-color: rgba(71,85,105,0.88);
            background: rgba(15,23,42,0.82);
        }
        .job-route-control-card:hover {
            border-color: rgba(156,39,176,0.35);
            transform: translateY(-1px);
        }
        
        .job-route-stop.is-disabled {
            opacity: 0.55;
            cursor: default;
        }
        .job-route-stop.is-disabled .job-route-circle {
            box-shadow: none;
        }
        .job-route-control-card.is-disabled {
            opacity: 0.55;
            cursor: default;
        }

        .job-route-control-card.is-selected {
            border-color: rgba(156,39,176,0.55);
            background: linear-gradient(135deg, rgba(168,85,247,0.16), rgba(236,72,153,0.08));
            box-shadow: 0 16px 28px -20px rgba(156, 39, 176, 0.6);
        }
        .dark .job-route-control-card.is-selected {
            border-color: rgba(192,132,252,0.45);
            background: linear-gradient(135deg, rgba(88,28,135,0.58), rgba(30,41,59,0.9));
        }

        .job-image-tile {
            border: 1px solid rgba(203,213,225,0.88);
            background: rgba(248,250,252,0.92);
        }
        .dark .job-image-tile {
            border-color: rgba(71,85,105,0.88);
            background: rgba(15,23,42,0.84);
        }
        
        
        .my-job-card-potential {
            background: linear-gradient(180deg, rgba(245, 158, 11, 0.09), rgba(255,255,255,0.98));
            border-color: rgba(245, 158, 11, 0.35) !important;
        }
        .my-job-card-potential:hover {
            border-color: rgba(245, 158, 11, 0.55) !important;
            box-shadow: 0 12px 28px -22px rgba(245, 158, 11, 0.55);
        }
        .my-job-card-critical {
            background: linear-gradient(180deg, rgba(239, 68, 68, 0.09), rgba(255,255,255,0.98));
            border-color: rgba(239, 68, 68, 0.35) !important;
        }
        .my-job-card-critical:hover {
            border-color: rgba(239, 68, 68, 0.58) !important;
            box-shadow: 0 12px 28px -22px rgba(239, 68, 68, 0.58);
        }
        .dark .my-job-card-potential {
            background: linear-gradient(180deg, rgba(245, 158, 11, 0.11), rgba(30,41,59,0.98));
            border-color: rgba(245, 158, 11, 0.32) !important;
        }
        .dark .my-job-card-potential:hover {
            border-color: rgba(245, 158, 11, 0.52) !important;
            box-shadow: 0 12px 28px -22px rgba(245, 158, 11, 0.55);
        }
        .dark .my-job-card-critical {
            background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), rgba(30,41,59,0.98));
            border-color: rgba(239, 68, 68, 0.34) !important;
        }
        .dark .my-job-card-critical:hover {
            border-color: rgba(239, 68, 68, 0.56) !important;
            box-shadow: 0 12px 28px -22px rgba(239, 68, 68, 0.58);
        }

        .job-list-row-potential {
            background: rgba(245, 158, 11, 0.13);
        }
        .job-list-row-potential:hover {
            background: rgba(245, 158, 11, 0.22) !important;
        }
        .job-list-row-critical {
            background: rgba(239, 68, 68, 0.14);
        }
        .job-list-row-critical:hover {
            background: rgba(239, 68, 68, 0.22) !important;
        }
        .dark .job-list-row-potential {
            background: rgba(245, 158, 11, 0.14);
        }
        .dark .job-list-row-potential:hover {
            background: rgba(245, 158, 11, 0.22) !important;
        }
        .dark .job-list-row-critical {
            background: rgba(239, 68, 68, 0.14);
        }
        .dark .job-list-row-critical:hover {
            background: rgba(239, 68, 68, 0.22) !important;
        }
        .job-delay-pill-ontime {
            color: rgb(30, 144, 255);
            background: rgba(30, 144, 255, 0.10);
        }
        .dark .job-delay-pill-ontime {
            color: rgb(147, 197, 253);
            background: rgba(30, 144, 255, 0.16);
        }

        
        
        .dashboard-kpi-total {
            border-color: rgba(156,39,176,0.22);
            background: linear-gradient(135deg, rgba(156,39,176,0.10), rgba(255,255,255,0.98));
        }
        .dashboard-kpi-critical {
            border-color: rgba(239,68,68,0.24);
            background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(255,255,255,0.98));
        }
        .dashboard-kpi-progress {
            border-color: rgba(59,130,246,0.24);
            background: linear-gradient(135deg, rgba(59,130,246,0.11), rgba(255,255,255,0.98));
        }
        .dashboard-kpi-incomplete {
            border-color: rgba(245,158,11,0.24);
            background: linear-gradient(135deg, rgba(245,158,11,0.11), rgba(255,255,255,0.98));
        }
        .dashboard-kpi-complete {
            border-color: rgba(16,185,129,0.24);
            background: linear-gradient(135deg, rgba(16,185,129,0.11), rgba(255,255,255,0.98));
        }

        .dark .dashboard-kpi-total {
            border-color: rgba(192,132,252,0.24);
            background: linear-gradient(135deg, rgba(88,28,135,0.58), rgba(15,23,42,0.94));
        }
        .dark .dashboard-kpi-critical {
            border-color: rgba(248,113,113,0.24);
            background: linear-gradient(135deg, rgba(127,29,29,0.58), rgba(15,23,42,0.94));
        }
        .dark .dashboard-kpi-progress {
            border-color: rgba(96,165,250,0.24);
            background: linear-gradient(135deg, rgba(30,64,175,0.56), rgba(15,23,42,0.94));
        }
        .dark .dashboard-kpi-incomplete {
            border-color: rgba(251,191,36,0.24);
            background: linear-gradient(135deg, rgba(146,64,14,0.58), rgba(15,23,42,0.94));
        }
        .dark .dashboard-kpi-complete {
            border-color: rgba(52,211,153,0.24);
            background: linear-gradient(135deg, rgba(6,95,70,0.58), rgba(15,23,42,0.94));
        }

        .dashboard-mini-card-potential {
            border-color: rgba(245,158,11,0.22);
            background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(255,255,255,0.96));
        }
        .dashboard-mini-card-notstarted {
            border-color: rgba(59,130,246,0.18);
            background: linear-gradient(135deg, rgba(59,130,246,0.09), rgba(255,255,255,0.96));
        }
        .dark .dashboard-mini-card-potential {
            border-color: rgba(251,191,36,0.20);
            background: linear-gradient(135deg, rgba(146,64,14,0.52), rgba(15,23,42,0.92));
        }
        .dark .dashboard-mini-card-notstarted {
            border-color: rgba(96,165,250,0.18);
            background: linear-gradient(135deg, rgba(30,64,175,0.48), rgba(15,23,42,0.92));
        }

        .dashboard-kpi-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(203, 213, 225, 0.95);
            background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
            transition: all 0.22s ease;
        }
        .dashboard-kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 35px -26px rgba(15, 23, 42, 0.35);
            border-color: rgba(156,39,176,0.35);
        }
        .dark .dashboard-kpi-card {
            border-color: rgba(71, 85, 105, 0.95);
            background: linear-gradient(135deg, rgba(30,41,59,0.97), rgba(15,23,42,0.94));
        }
        .dark .dashboard-kpi-card:hover {
            border-color: rgba(192,132,252,0.34);
            box-shadow: 0 18px 35px -26px rgba(2, 6, 23, 0.65);
        }
        .dashboard-kpi-glow {
            position: absolute;
            inset: auto -2rem -2rem auto;
            width: 7rem;
            height: 7rem;
            border-radius: 999px;
            opacity: 0.16;
            pointer-events: none;
        }
        .dashboard-mini-card {
            border: 1px solid rgba(203, 213, 225, 0.95);
            background: rgba(255,255,255,0.96);
            transition: all 0.2s ease;
        }
        .dashboard-mini-card:hover {
            border-color: rgba(156,39,176,0.3);
            transform: translateY(-1px);
        }
        .dark .dashboard-mini-card {
            border-color: rgba(71,85,105,0.95);
            background: rgba(30,41,59,0.96);
        }

        
        
        
        .profile-crop-stage {
            position: relative;
            width: min(82vw, 360px);
            height: min(82vw, 360px);
            border-radius: 1.25rem;
            overflow: hidden;
            background:
                linear-gradient(45deg, rgba(148,163,184,0.18) 25%, transparent 25%, transparent 75%, rgba(148,163,184,0.18) 75%, rgba(148,163,184,0.18)),
                linear-gradient(45deg, rgba(148,163,184,0.18) 25%, transparent 25%, transparent 75%, rgba(148,163,184,0.18) 75%, rgba(148,163,184,0.18));
            background-size: 24px 24px;
            background-position: 0 0, 12px 12px;
            touch-action: none;
            user-select: none;
        }
        .dark .profile-crop-stage {
            background:
                linear-gradient(45deg, rgba(71,85,105,0.22) 25%, transparent 25%, transparent 75%, rgba(71,85,105,0.22) 75%, rgba(71,85,105,0.22)),
                linear-gradient(45deg, rgba(71,85,105,0.22) 25%, transparent 25%, transparent 75%, rgba(71,85,105,0.22) 75%, rgba(71,85,105,0.22));
            background-size: 24px 24px;
            background-position: 0 0, 12px 12px;
        }
        .profile-crop-image {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: center center;
            cursor: grab;
            max-width: none;
            max-height: none;
        }
        .profile-crop-image.dragging {
            cursor: grabbing;
        }
        .profile-crop-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: rgba(15, 23, 42, 0.42);
        }
        .profile-crop-overlay::after {
            content: "";
            position: absolute;
            width: 74%;
            aspect-ratio: 1 / 1;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.46);
            border: 2px solid rgba(255,255,255,0.9);
        }
        .profile-crop-helper {
            font-size: 0.78rem;
            color: rgb(100 116 139);
        }
        .dark .profile-crop-helper {
            color: rgb(148 163 184);
        }

        .profile-photo-preview {
            width: 5rem;
            height: 5rem;
            border-radius: 999px;
            overflow: hidden;
            border: 1px solid rgba(203,213,225,0.95);
            background: rgba(248,250,252,0.92);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgb(255,255,255);
            font-size: 1.5rem;
            font-weight: 700;
            font-family: Georgia, serif;
            background-color: rgb(156,39,176);
        }
        .profile-photo-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .dark .profile-photo-preview {
            border-color: rgba(71,85,105,0.95);
        }

        .notification-item-card {
            border: 1px solid rgba(203,213,225,0.88);
            background: rgba(248,250,252,0.92);
            transition: all 0.2s ease;
        }
        .notification-item-card:hover {
            border-color: rgba(156,39,176,0.35);
            transform: translateY(-1px);
        }
        .dark .notification-item-card {
            border-color: rgba(71,85,105,0.88);
            background: rgba(15,23,42,0.82);
        }

        .job-chat-bubble-me {
            background: linear-gradient(135deg, rgba(156,39,176,0.18), rgba(236,72,153,0.12));
            border: 1px solid rgba(156,39,176,0.24);
        }
        .dark .job-chat-bubble-me {
            background: linear-gradient(135deg, rgba(88,28,135,0.58), rgba(76,29,149,0.42));
            border-color: rgba(192,132,252,0.28);
        }
        
        
        .job-chat-thread-wrap {
            display: flex;
            width: 100%;
        }
        .job-chat-thread-wrap.mine {
            justify-content: flex-end;
        }
        .job-chat-thread-wrap.other {
            justify-content: flex-start;
        }
        .job-chat-message-shell {
            max-width: min(78%, 42rem);
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
        }
        .job-chat-thread-wrap.mine .job-chat-message-shell {
            flex-direction: row-reverse;
        }
        .job-chat-message-bubble {
            border-radius: 1.15rem;
            padding: 0.85rem 1rem 0.8rem;
            box-shadow: 0 10px 28px -24px rgba(15, 23, 42, 0.35);
        }
        .job-chat-message-bubble.mine {
            background: linear-gradient(135deg, rgba(156,39,176,0.16), rgba(236,72,153,0.10));
            border: 1px solid rgba(156,39,176,0.26);
        }
        .job-chat-message-bubble.other {
            background: rgba(255,255,255,0.96);
            border: 1px solid rgba(203,213,225,0.92);
        }
        .dark .job-chat-message-bubble.mine {
            background: linear-gradient(135deg, rgba(88,28,135,0.62), rgba(126,34,206,0.34));
            border-color: rgba(216,180,254,0.22);
        }
        .dark .job-chat-message-bubble.other {
            background: rgba(15,23,42,0.86);
            border-color: rgba(71,85,105,0.88);
        }
        .job-chat-message-stack {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.35rem;
        }
        .job-chat-thread-wrap.mine .job-chat-message-stack {
            align-items: flex-end;
        }
        .job-chat-message-time {
            font-size: 0.72rem;
            line-height: 1rem;
            color: rgb(100 116 139);
            padding-inline: 0.2rem;
        }
        .dark .job-chat-message-time {
            color: rgb(148 163 184);
        }
        .job-chat-thread-wrap.mine .job-chat-message-time {
            text-align: right;
        }
        .job-chat-message-seen {
            display: inline-block;
            margin-left: 0.45rem;
            font-weight: 700;
            color: rgb(79 70 229);
        }
        .dark .job-chat-message-seen {
            color: rgb(196 181 253);
        }
        .job-chat-message-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            align-items: center;
            margin-bottom: 0.35rem;
            font-size: 0.74rem;
            color: rgb(100 116 139);
        }
        .dark .job-chat-message-meta {
            color: rgb(148 163 184);
        }
        .job-chat-message-author {
            font-weight: 700;
            color: rgb(51 65 85);
        }
        .dark .job-chat-message-author {
            color: rgb(226 232 240);
        }
        .job-chat-thread-wrap.mine .job-chat-message-meta {
            justify-content: flex-end;
            text-align: right;
        }
        .job-chat-thread-wrap.mine .job-chat-message-text {
            text-align: right;
        }
        .job-chat-message-text {
            font-size: 0.95rem;
            line-height: 1.45;
            color: rgb(15 23 42);
            white-space: pre-wrap;
            word-break: break-word;
        }
        .dark .job-chat-message-text {
            color: rgb(241 245 249);
        }
        .job-chat-empty-state {
            border: 1px dashed rgba(203,213,225,0.92);
            background: rgba(255,255,255,0.78);
        }
        .dark .job-chat-empty-state {
            border-color: rgba(71,85,105,0.88);
            background: rgba(15,23,42,0.55);
        }

        .chat-user-avatar {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgb(156,39,176);
            color: white;
            font-size: 0.9rem;
            font-weight: 700;
            font-family: Georgia, serif;
            flex-shrink: 0;
        }
        .chat-user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .job-chat-thread-card {
            border: 1px solid rgba(203,213,225,0.88);
            background: rgba(255,255,255,0.96);
        }
        .dark .job-chat-thread-card {
            border-color: rgba(71,85,105,0.88);
            background: rgba(15,23,42,0.80);
        }

        .job-chat-bubble-other {
            background: rgba(248,250,252,0.96);
            border: 1px solid rgba(203,213,225,0.9);
        }
        .dark .job-chat-bubble-other {
            background: rgba(15,23,42,0.84);
            border-color: rgba(71,85,105,0.88);
        }

        .job-image-thumb {
            width: 100%;
            height: 10rem;
            object-fit: cover;
            border-radius: 0.9rem;
        }

        .job-image-lightbox-backdrop {
            background: rgba(2, 6, 23, 0.82);
            backdrop-filter: blur(6px);
        }
        .job-image-lightbox-image {
            max-width: min(94vw, 1500px);
            max-height: 86vh;
            object-fit: contain;
            border-radius: 1rem;
            box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.65);
        }

        .job-action-shell {
            border: 1px solid rgba(148, 163, 184, 0.18);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
            box-shadow: 0 18px 40px -34px rgba(15,23,42,0.35);
        }
        .dark .job-action-shell {
            border-color: rgba(148, 163, 184, 0.14);
            background:
                linear-gradient(180deg, rgba(30,41,59,0.98), rgba(15,23,42,0.96));
            box-shadow: 0 20px 44px -28px rgba(2,6,23,0.72);
        }

        .job-activity-entry {
            position: relative;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: rgba(248, 250, 252, 0.92);
        }
        .dark .job-activity-entry {
            border-color: rgba(71, 85, 105, 0.8);
            background: rgba(15, 23, 42, 0.78);
        }
        .job-activity-entry::before {
            content: "";
            position: absolute;
            left: -0.85rem;
            top: 1.15rem;
            width: 0.55rem;
            height: 0.55rem;
            border-radius: 999px;
            background: linear-gradient(135deg, rgb(168,85,247), rgb(20,184,166));
            box-shadow: 0 0 0 4px rgba(168,85,247,0.12);
        }

        .job-eta-card {
            border: 1px solid rgba(203, 213, 225, 0.9);
            background: rgba(248, 250, 252, 0.92);
        }
        .dark .job-eta-card {
            border-color: rgba(71, 85, 105, 0.85);
            background: rgba(15, 23, 42, 0.82);
        }

        .scope-chip-stack {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
            align-items: flex-start;
        }
        .scope-chip-stack.scope-chip-stack-compact {
            gap: 0.35rem;
        }
        .scope-chip-line {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            align-items: flex-start;
        }
        .scope-chip-group {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            max-width: 100%;
        }
        .scope-chip-group summary {
            list-style: none;
        }
        .scope-chip-group summary::-webkit-details-marker {
            display: none;
        }
        .scope-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.28rem 0.72rem;
            border-radius: 999px;
            border: 1px solid rgba(156, 39, 176, 0.22);
            background: rgba(156, 39, 176, 0.10);
            color: rgb(126, 34, 206);
            font-size: 0.75rem;
            line-height: 1.2;
            font-weight: 700;
            cursor: pointer;
            user-select: none;
            transition: all 0.18s ease;
            white-space: pre-wrap;
            text-align: left;
        }
        .scope-chip::after {
            content: '⌄';
            font-size: 0.68rem;
            opacity: 0.7;
        }
        .scope-chip:hover {
            border-color: rgba(156, 39, 176, 0.34);
            background: rgba(156, 39, 176, 0.14);
        }
        .scope-chip-group[open] .scope-chip {
            border-color: rgba(156, 39, 176, 0.40);
            background: rgba(156, 39, 176, 0.16);
        }
        .scope-chip-group[open] .scope-chip::after {
            content: '⌃';
        }
        .scope-chip-static {
            cursor: default;
        }
        .scope-chip-static::after {
            display: none;
        }
        .scope-chip-note {
            margin-top: 0.45rem;
            padding: 0.65rem 0.8rem;
            border-radius: 0.9rem;
            border: 1px solid rgba(203, 213, 225, 0.92);
            background: rgba(255, 255, 255, 0.94);
            color: rgb(51, 65, 85);
            box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.45);
            max-width: min(30rem, 82vw);
            white-space: normal;
        }
        .scope-chip-note-label {
            display: block;
            margin-bottom: 0.25rem;
            font-size: 0.62rem;
            line-height: 1rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-weight: 800;
            color: rgb(148, 163, 184);
        }
        .scope-chip-note-text {
            font-size: 0.78rem;
            line-height: 1.35;
            font-weight: 600;
            color: rgb(51, 65, 85);
        }
        .scope-chip-stack-compact .scope-chip {
            padding: 0.22rem 0.58rem;
            font-size: 0.72rem;
        }
        .scope-chip-stack-compact .scope-chip-note {
            max-width: min(22rem, 70vw);
            padding: 0.55rem 0.7rem;
        }
        .scope-chip-stack-compact .scope-chip-note-text {
            font-size: 0.74rem;
        }
        .dark .scope-chip {
            border-color: rgba(192, 132, 252, 0.22);
            background: rgba(126, 34, 206, 0.22);
            color: rgb(233, 213, 255);
        }
        .dark .scope-chip:hover {
            border-color: rgba(216, 180, 254, 0.34);
            background: rgba(126, 34, 206, 0.30);
        }
        .dark .scope-chip-group[open] .scope-chip {
            border-color: rgba(216, 180, 254, 0.38);
            background: rgba(126, 34, 206, 0.34);
        }
        .dark .scope-chip-note {
            border-color: rgba(71, 85, 105, 0.9);
            background: rgba(15, 23, 42, 0.94);
            color: rgb(226, 232, 240);
            box-shadow: 0 16px 30px -26px rgba(2, 6, 23, 0.82);
        }
        .dark .scope-chip-note-label {
            color: rgb(148, 163, 184);
        }
        .dark .scope-chip-note-text {
            color: rgb(226, 232, 240);
        }


        html, body {
            max-width: 100%;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        @media (max-width: 960px) and (orientation: landscape) {
            #view-login .login-card {
                width: min(88vw, 420px) !important;
                max-width: 88vw !important;
                padding: 1rem !important;
                border-radius: 1rem !important;
            }
            #view-login .login-card img {
                width: auto !important;
                max-width: min(52vw, 210px) !important;
                margin-bottom: 1rem !important;
            }
            #view-login #login-form .mb-8 {
                margin-bottom: 0.85rem !important;
            }
            #view-login #login-form .mb-4 {
                margin-bottom: 0.7rem !important;
            }
            #view-login #login-form input[type="text"],
            #view-login #login-form input[type="password"] {
                padding-top: 0.9rem !important;
                padding-bottom: 0.9rem !important;
            }
            #view-login > div {
                padding: 0.75rem !important;
                align-items: flex-start !important;
                overflow-y: auto !important;
            }
        }


        @media (max-width: 1023px) {
            .job-route-shell {
                padding: 1rem !important;
                border-radius: 1.25rem !important;
            }
            .job-route-shell-mobile-scroll {
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: 0.35rem;
                -webkit-overflow-scrolling: touch;
            }
            .job-route-shell-mobile-scroll::-webkit-scrollbar {
                height: 6px;
            }
            .job-route-shell-mobile-scroll::-webkit-scrollbar-thumb {
                background: rgba(148, 163, 184, 0.45);
                border-radius: 999px;
            }
            .job-route-shell-mobile-track {
                min-width: 760px;
                padding-inline: 0.75rem;
            }
            .job-route-line {
                display: block;
                top: 1.15rem;
                left: 2.85rem;
                right: 2.85rem;
                height: 7px;
            }
            .job-route-stop-label .job-route-label {
                font-size: 0.88rem;
                line-height: 1.15rem;
            }
            .job-route-stop-label .job-route-caption {
                font-size: 0.64rem;
            }
            .job-route-circle {
                width: 2.75rem;
                height: 2.75rem;
            }
            .job-route-stop.is-terminal .job-route-circle {
                width: 3.15rem;
                height: 3.15rem;
            }
        }


        /* Header action hit-area fix */
        header button,
        header [role="button"] {
            -webkit-tap-highlight-color: transparent;
        }
        header .header-action-btn {
            position: relative;
            z-index: 60;
            pointer-events: auto;
        }


        #app-splash {
            position: fixed;
            inset: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgb(241 245 249);
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }
        .dark #app-splash {
            background: rgb(15 23 42);
        }
        #app-splash.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .app-splash-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        .app-splash-logo {
            width: min(68vw, 280px);
            max-width: 280px;
            height: auto;
            object-fit: contain;
            animation: appSplashPulse 1.3s ease-in-out infinite;
        }
        .app-splash-text {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgb(100 116 139);
        }
        .dark .app-splash-text {
            color: rgb(148 163 184);
        }
        @keyframes appSplashPulse {
            0%, 100% { opacity: 0.78; transform: scale(0.985); }
            50% { opacity: 1; transform: scale(1); }
        }