.driver-online {
    background-color: #22c55e;
}

.driver-offline {
    background-color: #ef4444;
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideHorizontal {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.drawer-open {
    transform: translateX(0) !important;
}

.backdrop-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#account-backdrop {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.subpage {
    position: fixed;
    inset: 0;
    background-color: #000000;
    z-index: 150;
    display: none;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    color: white;
}

.subpage.active {
    display: flex;
    transform: translateX(0);
}

.subpage-header {
    padding: 1.5rem;
    padding-top: max(1.5rem, calc(1rem + env(safe-area-inset-top)));
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.subpage-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: #000000;
}

/* EARNINGS POPUP QUICK-VIEW */
.earnings-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 200;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.earnings-popup-card {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 90%;
    max-width: 360px;
    background: #111;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: auto;
}

.earnings-popup-overlay.active {
    display: block;
    opacity: 1;
}

.earnings-popup-overlay.active .earnings-popup-card {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.popup-tab-content {
    display: none;
    padding: 24px;
    text-align: center;
}

.popup-tab-content.active {
    display: block;
}

.earnings-bubble {
    background: #222;
    color: white;
    padding: 12px 32px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.earnings-bubble .currency {
    color: #D4AF37;
}

.earnings-hidden .earnings-val {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

/* Loading View styling from Altus */
.glass {
    background: rgba(17, 24, 39, 0.95);
}
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wave-propulsor {
    position: relative;
    z-index: 1;
}

.wave-propulsor::before,
.wave-propulsor::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.6);
    z-index: -1;
    animation: wave-propulsor-anim 2s infinite ease-out;
}

.wave-propulsor::after {
    animation-delay: 1s;
}

@keyframes wave-propulsor-anim {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.loading-dots::after {
    content: '';
    animation: loading-dots-anim 1.5s infinite steps(1);
}

@keyframes loading-dots-anim {
    0%, 10% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75%, 100% { content: '...'; }
}

@keyframes scan-line {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(50%); }
}

.animate-scan-line {
    animation: scan-line 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Stacked Cards Styling */
.broadcast-card-stacked {
    position: absolute;
    inset: 0;
    transform-origin: bottom center;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, z-index 0.3s ease;
    will-change: transform, opacity;
}

/* Dragging state with transition disabled */
.dragging {
    transition: none !important;
}

/* Transitions for smooth theme switching */
body, .subpage, .subpage-header, .subpage-content, #account-drawer, .bg-white\/5, .bg-zinc-950\/40, .bg-\[\#111111\], .bg-\[\#0a0a0a\], .bg-zinc-900, .border-white\/10, .border-zinc-800, .text-white, .text-gray-400, .text-gray-500, input {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* LIGHT THEME OVERRIDES */
.theme-light body {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

.theme-light #app-view {
    background-color: #f3f4f6 !important;
}

.theme-light .subpage {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

.theme-light .subpage-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #111827 !important;
}

.theme-light .subpage-header h2 {
    color: #b8942f !important;
}

.theme-light .subpage-header button {
    color: #111827 !important;
}

.theme-light .subpage-header button:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.theme-light .subpage-content {
    background-color: #f3f4f6 !important;
}

/* Account Drawer */
#account-drawer {
    background-color: #000000 !important;
}

.theme-light #account-drawer {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-right: 1px solid #e5e7eb !important;
}

.theme-light #account-drawer h2 {
    color: #111827 !important;
}

.theme-light #account-drawer .border-b {
    border-color: #e5e7eb !important;
}

.theme-light #account-drawer button:not(#btn-logout) {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

.theme-light #account-drawer button:not(#btn-logout):hover {
    background-color: #f3f4f6 !important;
}

.theme-light #account-drawer button:not(#btn-logout) span {
    color: #111827 !important;
}

.theme-light #account-drawer button:not(#btn-logout) i {
    color: #374151 !important;
}

.theme-light #btn-logout,
.theme-light #account-drawer #btn-logout {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #dc2626 !important;
}

.theme-light #account-drawer #btn-logout:hover {
    background-color: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
}

/* Cards & Preference Blocks */
.theme-light .bg-white\/5,
.theme-light .bg-zinc-950\/40,
.theme-light .bg-zinc-900,
.theme-light .bg-\[\#111111\],
.theme-light .bg-\[\#0a0a0a\],
.theme-light .bg-black {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

/* Intermediate containers/details bg */
.theme-light .bg-\[\#1a1a1a\],
.theme-light .bg-black\/30,
.theme-light .bg-black\/40,
.theme-light .bg-white\/10 {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

.theme-light .border-white\/5,
.theme-light .border-white\/10,
.theme-light .border-gray-800,
.theme-light .border-zinc-800 {
    border-color: #e5e7eb !important;
}

/* Primary texts */
.theme-light .text-white,
.theme-light .text-zinc-100,
.theme-light .text-zinc-200,
.theme-light .text-gray-100,
.theme-light .text-gray-200 {
    color: #111827 !important;
}

/* Secondary texts */
.theme-light .text-gray-300,
.theme-light .text-gray-400,
.theme-light .text-gray-500,
.theme-light .text-zinc-300,
.theme-light .text-zinc-400,
.theme-light .text-zinc-500,
.theme-light .text-gray-600 {
    color: #374151 !important;
}

/* Form controls & inputs */
.theme-light input[type="text"],
.theme-light input[type="email"],
.theme-light input[type="password"] {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
}

.theme-light input::placeholder {
    color: #6b7280 !important;
}

/* Dialogs/Modals */
.theme-light #modal-ride-details-content,
.theme-light #modal-financial-breakdown-content {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}

.theme-light #modal-ride-details-content button,
.theme-light #modal-financial-breakdown-content button {
    color: #374151 !important;
}

.theme-light #modal-ride-details-content button:hover,
.theme-light #modal-financial-breakdown-content button:hover {
    color: #111827 !important;
}

/* Floating UI elements at the top of the map */
.theme-light #app-view > div > button.bg-black {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1.5px solid rgba(184, 148, 47, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.theme-light #app-view > div > button.bg-black i {
    color: #111827 !important;
}

.theme-light #app-view > div > button.bg-black span {
    color: #111827 !important;
}

/* Earnings popup quick-view */
.theme-light .earnings-popup-card {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

.theme-light .earnings-bubble {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

/* Swipe Dots */
.theme-light #dot-last-trip.bg-white,
.theme-light #dot-today.bg-white {
    background-color: #b8942f !important;
}

.theme-light #dot-last-trip.bg-gray-700,
.theme-light #dot-today.bg-gray-700 {
    background-color: #d1d5db !important;
}

/* Divide elements */
.theme-light .divide-white\/5 > *,
.theme-light .divide-y > * {
    border-color: #e5e7eb !important;
}

/* Specific text highlight overrides */
.theme-light .text-gold {
    color: #b8942f !important;
}

.theme-light .bg-orange-500\/10 {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

.theme-light .text-orange-400 {
    color: #c2410c !important;
}

/* Operational Badges (Light mode dynamic override) */
.theme-light .text-green-400 { color: #15803d !important; }
.theme-light .bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.15) !important; }
.theme-light .text-red-400 { color: #b91c1c !important; }
.theme-light .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.15) !important; }
.theme-light .text-blue-400 { color: #1d4ed8 !important; }
.theme-light .bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.15) !important; }
.theme-light .text-yellow-400 { color: #a16207 !important; }
.theme-light .bg-yellow-500\/10 { background-color: rgba(234, 179, 8, 0.15) !important; }
.theme-light .text-purple-400 { color: #7e22ce !important; }
.theme-light .bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.15) !important; }
.theme-light .text-cyan-400 { color: #0e7490 !important; }
.theme-light .bg-cyan-500\/10 { background-color: rgba(6, 182, 212, 0.15) !important; }
.theme-light .bg-cyan-900\/10 { background-color: rgba(6, 182, 212, 0.1) !important; }
.theme-light .bg-blue-900\/10 { background-color: rgba(59, 130, 246, 0.1) !important; }
.theme-light .bg-purple-900\/10 { background-color: rgba(168, 85, 247, 0.1) !important; }

/* Operational Buttons in Cards */
.theme-light .bg-blue-600\/20 {
    background-color: rgba(37, 99, 235, 0.12) !important;
    color: #1d4ed8 !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}
.theme-light .bg-green-600\/20 {
    background-color: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
}
.theme-light .bg-yellow-600\/20 {
    background-color: rgba(202, 138, 4, 0.12) !important;
    color: #a16207 !important;
    border-color: rgba(202, 138, 4, 0.3) !important;
}
.theme-light .bg-\[\#d4af37\]\/20 {
    background-color: rgba(184, 148, 47, 0.15) !important;
    color: #856404 !important;
    border-color: rgba(184, 148, 47, 0.3) !important;
}
.theme-light .bg-\[\#d4af37\]\/10 {
    background-color: rgba(184, 148, 47, 0.08) !important;
    color: #856404 !important;
    border-color: rgba(184, 148, 47, 0.2) !important;
}
.theme-light .border-\[\#d4af37\]\/50 {
    border-color: rgba(184, 148, 47, 0.4) !important;
}
.theme-light .border-\[\#d4af37\]\/15 {
    border-color: rgba(184, 148, 47, 0.2) !important;
}

/* Active preference selection (Language/Theme) */
.active-pref {
    border-color: #d4af37 !important;
    color: #d4af37 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-light .active-pref {
    border-color: #b8942f !important;
    color: #b8942f !important;
    background-color: rgba(184, 148, 47, 0.1) !important;
}

/* Force global loading and login screens to stay dark/black regardless of active theme */
.theme-light #global-loading,
.theme-light #login-view {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.theme-light #global-loading *,
.theme-light #login-view * {
    color: inherit;
}

.theme-light #global-loading #loading-text {
    color: #d4af37 !important;
}

/* ── Bottom Sheet (active mission panel) ── */
.theme-light .driver-bottom-sheet {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12) !important;
}

.theme-light .driver-bottom-sheet * {
    color: #111827;
}

/* Drag handle */
.theme-light .driver-bottom-sheet .w-10.h-1 {
    background-color: #d1d5db !important;
}

/* Mission action button (FINALIZAR / EM TRANSITO, etc) */
.theme-light #mission-action-btn {
    box-shadow: 0 4px 20px rgba(212,175,55,0.25) !important;
}

/* ── Ride / History Cards ── */
.theme-light .ride-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

.theme-light .ride-card * {
    color: #111827;
}

/* Route line connector */
.theme-light .ride-card .bg-white\/20,
.theme-light .ride-card .bg-white\/10 {
    background-color: #d1d5db !important;
}

/* Card divider */
.theme-light .ride-card .border-t {
    border-color: #e5e7eb !important;
}

/* ── Broadcast / Mission Offer Cards ── */
.theme-light .broadcast-card-stacked {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}

.theme-light .broadcast-card-stacked * {
    color: #111827;
}

/* ── Bottom Nav Bar ── */
.theme-light #bottom-nav {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important;
}

.theme-light #bottom-nav button {
    color: #6b7280 !important;
    background: transparent !important;
}

.theme-light #bottom-nav button.active,
.theme-light #bottom-nav button[class*="text-gold"],
.theme-light #bottom-nav button[class*="text-[#d4af37]"] {
    color: #b8942f !important;
}

/* ── Profile Subpage ── */
.theme-light #subpage-profile .bg-white\/5,
.theme-light #subpage-profile .bg-white\/\[0\.05\],
.theme-light #subpage-profile .bg-zinc-900 {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

.theme-light #subpage-profile input,
.theme-light #subpage-profile textarea {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
}

.theme-light #subpage-profile input:disabled,
.theme-light #subpage-profile input[readonly] {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* Category chips in profile */
.theme-light #subpage-profile .bg-gold\/10 {
    background-color: rgba(184, 148, 47, 0.15) !important;
}

/* ── All Form Inputs (expanded) ── */
.theme-light input[type="tel"],
.theme-light input[type="number"],
.theme-light input[type="search"],
.theme-light input[type="date"],
.theme-light input[type="time"],
.theme-light select,
.theme-light textarea {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
}

.theme-light select option {
    background-color: #ffffff !important;
    color: #111827 !important;
}

.theme-light input::placeholder,
.theme-light textarea::placeholder {
    color: #9ca3af !important;
}

/* ── Inline dark background overrides ── */
/* These cover elements that use style="" directly */
.theme-light [style*="background-color: #000"],
.theme-light [style*="background:#000"],
.theme-light [style*="background: #000"],
.theme-light [style*="background-color:#111"],
.theme-light [style*="background-color: rgb(0"],
.theme-light [style*="background-color: #0a"],
.theme-light [style*="background-color: #1a"] {
    background-color: #f3f4f6 !important;
}

/* ── History / Completed Ride Items ── */
.theme-light .history-item,
.theme-light [id^="history-"] .ride-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* ── Empty State Blocks ── */
.theme-light .text-gray-700 {
    color: #374151 !important;
}

/* ── Map overlay buttons (GPS, orientation, etc) ── */
.theme-light #floating-buttons-container button,
.theme-light #btn-toggle-orientation,
.theme-light #btn-center-map,
.theme-light #btn-waze,
.theme-light #btn-gmaps {
    background-color: #ffffff !important;
    border-color: rgba(184, 148, 47, 0.35) !important;
    color: #111827 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

.theme-light #floating-buttons-container button i,
.theme-light #floating-buttons-container button svg {
    color: #374151 !important;
}

/* Active GPS button stays gold in light mode */
.theme-light #btn-toggle-orientation.border-\[\#D4AF37\] {
    border-color: #b8942f !important;
    background-color: rgba(184,148,47,0.1) !important;
}

/* ── Toast Notifications ── */
.theme-light #toast {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
}

/* ── Topbar / Header ── */
.theme-light #topbar,
.theme-light header {
    background-color: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid #e5e7eb !important;
    backdrop-filter: blur(10px) !important;
}

.theme-light #topbar *,
.theme-light header * {
    color: #111827 !important;
}

/* ── Earnings / Financial Blocks ── */
.theme-light .bg-\[\#0d0d0d\],
.theme-light .bg-\[\#080808\],
.theme-light .bg-\[\#050505\] {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* ── Separator lines ── */
.theme-light hr,
.theme-light .border-white\/5,
.theme-light .divide-white\/5 > * + * {
    border-color: #e5e7eb !important;
}

/* ── Scrollbar styling ── */
.theme-light ::-webkit-scrollbar {
    background-color: #f3f4f6 !important;
}

.theme-light ::-webkit-scrollbar-thumb {
    background-color: #d1d5db !important;
}

/* ── Slide-to-accept track in light mode ── */
.theme-light .slide-to-accept-track {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

.theme-light .slide-to-accept-text {
    color: rgba(0,0,0,0.4) !important;
}

/* ── Subpage content cards/blocks ── */
.theme-light .subpage-content .bg-white\/5,
.theme-light .subpage-content .bg-white\/\[0\.05\],
.theme-light .subpage-content .bg-\[\#0f0f0f\],
.theme-light .subpage-content .bg-\[\#111\],
.theme-light .subpage-content .bg-\[\#161616\] {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* ── Profile Page — Targeted Fixes ── */

/* .glass class uses rgba(17, 24, 39, 0.95) = dark navy — override to clean white card */
.theme-light .glass {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Dados de Frota card (bg-black/80) */
.theme-light .bg-black\/80 {
    background-color: #f8f9fa !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* Editable inputs inside profile (bg-black/50) */
.theme-light .bg-black\/50 {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

.theme-light .bg-black\/50.text-white {
    color: #111827 !important;
}

/* Read-only / fleet inputs (bg-white/5) inside profile */
.theme-light .bg-white\/5 {
    background-color: #f3f4f6 !important;
    border-color: transparent !important;
}

.theme-light .bg-white\/5.text-gray-400 {
    color: #6b7280 !important;
}

/* Avatar circle (bg-gray-900) */
.theme-light .bg-gray-900 {
    background-color: #e5e7eb !important;
}

/* Rating badge (bg-white/5 border-white/10) */
.theme-light #profile-rating-container {
    background-color: rgba(184, 148, 47, 0.08) !important;
    border-color: rgba(184, 148, 47, 0.25) !important;
}

/* Profile input focus in light mode */
.theme-light input:focus,
.theme-light textarea:focus {
    border-color: #b8942f !important;
    box-shadow: 0 0 0 2px rgba(184, 148, 47, 0.15) !important;
    outline: none !important;
}

/* Profile labels */
.theme-light .text-gray-600 {
    color: #4b5563 !important;
}

/* Lock icon area stays subtle */
.theme-light .opacity-20 i {
    opacity: 0.12 !important;
}

/* Change password link */
.theme-light button .text-gray-500:hover {
    color: #111827 !important;
}

/* ══════════════════════════════════════════════════
   AGENDAMENTO & NOVAS RESERVAS — Light Mode Fixes
   Cards are built dynamically in JS with dark classes
   ══════════════════════════════════════════════════ */

/* Main card container — #111111 background */
.theme-light .bg-\[\#111111\] {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
}

/* Border accent */
.theme-light .border-zinc-800 {
    border-color: #e5e7eb !important;
}

/* Card inner dividers */
.theme-light .border-white\/5 {
    border-color: #f0f0f0 !important;
}

.theme-light .border-white\/10 {
    border-color: #e5e7eb !important;
}

/* Expanded details area (bg-black/40) */
.theme-light .bg-black\/40 {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
}

/* Info/notes box (bg-black/30) */
.theme-light .bg-black\/30 {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

/* Disabled action button (bg-zinc-900/50) */
.theme-light .bg-zinc-900\/50 {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

/* Region flag badge (bg-white/5 inside card) */
.theme-light .bg-\[\#111111\] .bg-white\/5 {
    background-color: #f3f4f6 !important;
}

/* Text colours inside cards */
.theme-light .text-zinc-200,
.theme-light .text-zinc-300 {
    color: #1f2937 !important;
}

.theme-light .text-zinc-400,
.theme-light .text-zinc-500 {
    color: #6b7280 !important;
}

/* Route connector dashed line */
.theme-light .border-white\/10.border-l-dashed {
    border-color: #d1d5db !important;
}

/* Small dot connectors (bg-blue-400, bg-gold) keep their colours */

/* Card hover effect */
.theme-light .ride-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-1px);
}

/* Action button (Detalhes / Expandir) — bg-white/5 variant inside cards */
.theme-light .ride-card .bg-white\/5 {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}

.theme-light .ride-card .bg-white\/5:hover,
.theme-light .ride-card .bg-white\/10:hover {
    background-color: #e9ecef !important;
    color: #b8942f !important;
}

/* ── Novas Reservas specific card ── */
.theme-light #new-reservations-list-container .bg-\[\#111111\] {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Badge category inside new reservation card */
.theme-light #new-reservations-list-container .bg-white\/5 {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

/* Value text (white mono) inside new reservation card */
.theme-light #new-reservations-list-container .text-white {
    color: #111827 !important;
}

/* Bottom divider border inside new reservation card */
.theme-light #new-reservations-list-container .border-white\/5 {
    border-color: #e5e7eb !important;
}

/* Subpage header for Agendamento & Novas Reservas */
.theme-light #subpage-itinerary .subpage-header,
.theme-light #subpage-history .subpage-header,
.theme-light #subpage-new-reservations .subpage-header {
    background-color: #ffffff !important;
    border-bottom-color: #e5e7eb !important;
}

/* Period filter tab bar (bg-white/5 container) */
.theme-light .bg-white\/5.rounded-xl {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

/* Active tab period button */
.theme-light .bg-gray-700 {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

/* Urgent badge stays vibrant */
.theme-light .bg-orange-600 {
    background-color: #ea580c !important;
    color: #ffffff !important;
}


/* Media query for desktop/Tesla screen dashboard optimizations */
@media (min-width: 1024px) {
    /* Left-aligned subpages on desktop screens (Sidebar style) */
    .subpage {
        left: 0 !important;
        right: auto !important;
        width: 420px !important;
        max-width: 100% !important;
        transform: translateX(-100%) !important; /* Slide in from left */
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: none !important;
    }
    .subpage.active {
        transform: translateX(0) !important;
        left: 0 !important;
        margin-left: 0 !important;
    }
    .subpage-header {
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: none !important;
    }
    .theme-light .subpage {
        border-right-color: rgba(0, 0, 0, 0.1) !important;
        border-left: none !important;
    }
    .theme-light .subpage-header {
        border-right-color: rgba(0, 0, 0, 0.1) !important;
        border-left: none !important;
    }


    /* Larger travel card styles (Tesla dashboard compatibility) */
    .ride-card {
        padding: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* ID #showId and value text */
    .ride-card .font-mono.text-\[11px\],
    .ride-card span.font-mono.text-\[9px\] {
        font-size: 14px !important;
    }
    .ride-card .text-\[\#d4af37\].font-mono.font-bold {
        font-size: 18px !important;
    }
    
    /* Badges size */
    .ride-card span.text-\[8px\], 
    .ride-card span.text-\[9px\] {
        font-size: 11px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Route steps (Origin / Destination) */
    .ride-card .text-zinc-500.block {
        font-size: 11px !important;
    }
    .ride-card .text-zinc-200.font-medium {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    .ride-card .w-0.5.h-5 {
        height: 28px !important;
    }
    .ride-card .w-0.5.h-3 {
        height: 20px !important;
    }
    .ride-card svg.w-3.h-3,
    .ride-card i svg.w-3.h-3 {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Date, driver text & action buttons */
    .ride-card .pt-2.border-t {
        font-size: 13px !important;
        padding-top: 0.75rem !important;
    }
    .ride-card .pt-2.border-t svg {
        width: 15px !important;
        height: 15px !important;
    }
    .ride-card button {
        font-size: 12px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .ride-card button svg {
        width: 15px !important;
        height: 15px !important;
    }
    
    /* Expanded Details Drawer inside card */
    .ride-card .pt-3.text-\[11px\] {
        font-size: 14px !important;
    }
    .ride-card .pt-3.text-\[11px\] .text-\[9px\] {
        font-size: 11px !important;
        width: 110px !important;
    }

    /* Broadcast Cards (ringing overlays) */
    .broadcast-card-stacked {
        padding: 2rem !important;
    }
    .broadcast-card-stacked span.text-\[10px\] {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
    .broadcast-card-stacked button svg {
        width: 20px !important;
        height: 20px !important;
    }
    .broadcast-card-stacked .text-3xl {
        font-size: 2.25rem !important;
    }
    .broadcast-card-stacked .text-\[9px\] {
        font-size: 12px !important;
    }
    .broadcast-card-stacked .text-\[8px\] {
        font-size: 11px !important;
    }
    .broadcast-card-stacked .text-white.font-medium {
        font-size: 16px !important;
    }
    .broadcast-card-stacked .w-0.5.h-10 {
        height: 38px !important;
    }
    .broadcast-card-stacked span.text-\[9px\] {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* Safe Area adjustments for iOS PWAs */
.driver-bottom-sheet {
    transform: translateY(calc(100% - 105px - env(safe-area-inset-bottom, 0px))) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.driver-bottom-sheet.open {
    transform: translateY(0) !important;
}

/* Slide to Accept Widget */
.slide-to-accept-track {
    position: relative;
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.slide-to-accept-handle {
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: 44px;
    background-color: #d4af37;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    will-change: transform;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.slide-to-accept-handle:active {
    cursor: grabbing;
}

.slide-to-accept-text {
    font-size: 9px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    pointer-events: none;
    z-index: 5;
    animation: pulseText 2.5s infinite ease-in-out;
}

.slide-to-accept-fill {
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: calc(100% - 8px);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.3) 100%);
    border-radius: 8px;
    z-index: 4;
    transform-origin: left;
    transform: scaleX(0);
    will-change: transform;
}

@keyframes pulseText {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Collapsible Active Mission Panel Styles */
#active-mission-content {
    max-height: 350px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin-bottom 0.4s ease;
    margin-bottom: 24px;
}

#active-mission-panel.collapsed #active-mission-content {
    max-height: 0px;
    opacity: 0;
    margin-bottom: 0px;
    pointer-events: none;
}

#floating-buttons-container {
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- TARIFA DINAMICA ALTA GLOW EFFECT --- */
.card-dinamica-alta {
    animation: pulse-border-glow 2s infinite ease-in-out;
}

@keyframes pulse-border-glow {
    0%, 100% {
        border-color: rgba(239, 68, 68, 0.4);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.1);
    }
    50% {
        border-color: rgba(239, 68, 68, 0.8);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.35);
    }
}

/* ── Driver Chat Modal Light Theme ── */
.theme-light #modal-driver-chat-content {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

.theme-light #modal-driver-chat-content .border-b,
.theme-light #modal-driver-chat-content .border-t {
    border-color: #e5e7eb !important;
}

.theme-light #modal-driver-chat-content .bg-white\/\[0\.01\] {
    background-color: #f9fafb !important;
}

.theme-light #modal-driver-chat-content .bg-black\/40 {
    background-color: #f3f4f6 !important;
}

.theme-light #driver-chat-messages {
    background-color: #f9fafb !important;
}

/* Received message bubble: background white/10 and text white override */
.theme-light #driver-chat-messages .bg-white\/10 {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

/* Driver's own bubble */
.theme-light #driver-chat-messages .bg-gold {
    background-color: #b8942f !important;
    color: #ffffff !important;
}

.theme-light #modal-driver-chat-content button {
    color: #4b5563 !important;
}

.theme-light #modal-driver-chat-content button:hover {
    color: #111827 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.theme-light #driver-chat-subtitle {
    color: #4b5563 !important;
}

.theme-light #driver-chat-input {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.theme-light #driver-chat-input::placeholder {
    color: #9ca3af !important;
}

/* ── Inbox / Notifications Drawer (Uber Style) ── */
#subpage-notifications {
    background-color: #000000;
}
.notification-item {
    background-color: #000000;
    transition: background-color 0.2s ease;
}
.notification-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Theme Light Overrides for Notifications */
.theme-light #subpage-notifications {
    background-color: #ffffff !important;
}
.theme-light #subpage-notifications .subpage-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.theme-light #subpage-notifications .subpage-header h2 {
    color: #b8942f !important;
}
.theme-light #subpage-notifications .subpage-header button {
    color: #111827 !important;
}
.theme-light #inbox-tabs-header {
    border-bottom-color: #e5e7eb !important;
    background-color: #ffffff !important;
}
.theme-light #inbox-tab-notifications {
    border-bottom-color: #b8942f !important;
}
.theme-light #inbox-tab-notifications span:first-child {
    color: #b8942f !important;
}
.theme-light #notifications-list-container {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}
.theme-light .notification-item {
    background-color: #ffffff !important;
    border-bottom-color: #e5e7eb !important;
}
.theme-light .notification-item:hover {
    background-color: #f9fafb !important;
}
.theme-light .notification-item h3 {
    color: #111827 !important;
}
.theme-light .notification-item p {
    color: #6b7280 !important;
}