/* Trip & Ziarah Manager Custom Stylesheet */

/* GIS Map Grid Background */
.gis-canvas-viewport {
    background-color: #f1f5f9;
    background-image: 
        radial-gradient(#cbd5e1 1.2px, transparent 1.2px), 
        linear-gradient(to right, rgba(203, 213, 225, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(203, 213, 225, 0.25) 1px, transparent 1px);
    background-size: 24px 24px, 120px 120px, 120px 120px;
    background-position: 0 0, 0 0, 0 0;
    cursor: grab;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.gis-canvas-viewport:active {
    cursor: grabbing;
}

/* Compass & GIS HUD overlay */
.gis-hud {
    position: absolute;
    z-index: 20;
    pointer-events: none;
}
.gis-hud-interactive {
    pointer-events: auto;
}

/* Vehicle Chassis */
.vehicle-body {
    background: #ffffff;
    border: 3px solid #1e293b;
    border-radius: 42px 42px 24px 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.05s ease-out;
}

.car-body {
    background: #ffffff;
    border: 3px solid #1e293b;
    border-radius: 36px 36px 20px 20px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
    position: relative;
}

/* Windshield & Cockpit */
.vehicle-windshield {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    border-radius: 32px 32px 8px 8px;
    border: 2px solid #0369a1;
    position: relative;
    overflow: hidden;
}
.vehicle-windshield::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
}

/* Wheels */
.vehicle-wheel {
    position: absolute;
    width: 14px;
    height: 48px;
    background: #0f172a;
    border-radius: 4px;
    border: 2px solid #475569;
}
.wheel-fl { left: -14px; top: 70px; }
.wheel-fr { right: -14px; top: 70px; }
.wheel-rl { left: -14px; bottom: 90px; }
.wheel-rr { right: -14px; bottom: 90px; }

/* Interactive Seats */
.seat-slot {
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 84px;
}

.seat-slot.drag-over {
    transform: scale(1.05);
    border-color: #10b981 !important;
    background-color: #ecfdf5 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3) !important;
}

.seat-empty {
    border: 2px dashed #94a3b8;
    background: #f8fafc;
    border-radius: 12px;
}
.seat-empty:hover {
    border-color: #64748b;
    background: #f1f5f9;
}

.seat-filled {
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.seat-filled:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 16px -4px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.seat-filled.gender-L {
    border-left: 5px solid #0284c7;
}
.seat-filled.gender-P {
    border-left: 5px solid #db2777;
}

/* Passenger Draggable Item */
.draggable-passenger {
    cursor: grab;
    transition: all 0.15s ease-in-out;
}
.draggable-passenger:active {
    cursor: grabbing;
    opacity: 0.8;
}
.draggable-passenger.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

/* Aisle */
.bus-aisle {
    background: repeating-linear-gradient(
        0deg,
        #f1f5f9,
        #f1f5f9 12px,
        #e2e8f0 12px,
        #e2e8f0 24px
    );
    border-radius: 4px;
}

/* Special Seat Overrides (Toilet, Pintu, Dispenser, Empty) */
.seat-special-toilet {
    background: #fffbeb;
    border: 2px dashed #f59e0b;
    color: #b45309;
}
.seat-special-door {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #059669;
    color: #047857;
}
.seat-special-dispenser {
    background: #eff6ff;
    border: 2px dashed #3b82f6;
    color: #1d4ed8;
}
.seat-special-empty {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    color: #94a3b8;
}

/* Unified Bus Architectural Zones (Door Stairs, Toilet Cabin, Walkways) */
.bus-exit-door-area {
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.08);
}
.bus-exit-door-area:hover {
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.16);
}
.bus-toilet-area {
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.08);
}
.bus-toilet-area:hover {
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.16);
}

/* Edit Mode Highlighting */
.canvas-edit-mode .seat-slot {
    cursor: pointer !important;
}
.canvas-edit-mode .seat-slot:hover {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* Custom Smooth Scrollbar for Mobile and Webkit */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Mobile-Friendly Adjustments & Better Touch Interactions */
@media (max-width: 640px) {
    .gis-canvas-viewport {
        background-size: 16px 16px, 80px 80px, 80px 80px;
    }
    .seat-slot {
        touch-action: manipulation;
    }
    .draggable-passenger {
        touch-action: manipulation;
    }
}

/* Print manifest styling */
@media print {
    body {
        background: white !important;
        font-size: 11pt;
    }
    .no-print {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }
    .gis-canvas-viewport {
        background: white !important;
        cursor: default !important;
    }
    .page-break {
        page-break-after: always;
    }
    tfoot {
        display: table-row-group !important;
    }
    tr {
        page-break-inside: avoid;
    }
}

.print-only {
    display: none;
}