/* RadianPlanner - Main Styles */

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.5s, color 0.5s;
    background-color: #808080;
}

/* Flag Image Support */
.flag-image {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
}

.flag-fallback {
    background: linear-gradient(45deg, #3b82f6, #1d4ed8);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Inter', monospace !important;
    min-width: 24px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

h1 {
    font-family: 'RoadRage', sans-serif;
    color: #ffffff;
    text-shadow: 3px 3px 0px #000000;
}

h2 {
    font-size: 4em;
    font-weight: semi-bold;
    background-image: linear-gradient(to right, #00ffff, #d400ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
        color: #4a90e2; /* Fallback */
}

h3 {
    color: #ffffff;
    text-shadow: 3px 3px 0px #000000;
}

h4 {
    color: #ffffff;
    text-shadow: 3px 3px 0px #000000;
}

h5 {
    color: #ffffff;
    text-shadow: 2px 2px 0px #000000;
    font-size: 1.1em;
    font-weight: 600;
}


/* Custom Font */
@font-face {
    font-family: 'RoadRage';
    src: url('../../assets/RoadRage.woff2') format('woff2'),
         url('../../assets/RoadRage.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.road-rage-font {
    font-family: 'RoadRage', sans-serif;
}

/* Form Input Styles */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Date and Time Picker Styles */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.7);
    cursor: pointer;
    padding: 3px;
    border-radius: 3px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(1) brightness(1);
    background-color: rgba(59, 130, 246, 0.2);
}

/* Select Styles */
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Icon Effects */
.icon-shadow {
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.5));
}

.text-shadow {
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.5));
}

/* Desktop Layout Styles */
.desktop-mode {
    display: grid !important;
    grid-template-columns: 1280px 1280px !important;
    gap: 2rem !important;
    max-width: 2560px !important;
    width: 2560px !important;
    margin: 0 auto !important;
    background: transparent !important;
    padding: 1rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.desktop-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    background: rgb(23 23 23) !important;
    padding: 1.5rem !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.desktop-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    background: rgb(23 23 23) !important;
    padding: 1.5rem !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Show all containers in desktop mode */
.desktop-mode .hidden {
    display: block !important;
}

/* Driver Color Classes for Stint Rows */
.driver-color-7 { background-color: rgba(59, 130, 246, 0.2) !important; } /* Blue */
.driver-color-6 { background-color: rgba(16, 185, 129, 0.2) !important; } /* Green */
.driver-color-5 { background-color: rgba(245, 101, 101, 0.2) !important; } /* Red */
.driver-color-4 { background-color: rgba(251, 191, 36, 0.2) !important; } /* Yellow */
.driver-color-1 { background-color: rgba(168, 85, 247, 0.2) !important; } /* Purple */
.driver-color-2 { background-color: rgba(236, 72, 153, 0.2) !important; } /* Pink */
.driver-color-0 { background-color: rgba(6, 182, 212, 0.2) !important; } /* Cyan */
.driver-color-3 { background-color: rgba(34, 197, 94, 0.2) !important; } /* Lime */
.driver-color-default { background-color: rgba(115, 115, 115, 0.2) !important; } /* Default Gray */
.pit-stop-row { background-color: rgb(42, 42, 42) !important; } /* Red for pit stops */

/* Daylight Gradient Classes for Daylight Column */
.daylight-night { 
    background: #141450 !important; 
    color: #9ca3af !important;
    opacity: 0.9;
}
.daylight-pre-dawn { 
    background: #3f0d8a !important; 
    color: #e5e7eb !important;
    opacity: 0.9;
}
.daylight-dawn { 
    background: #7300a0 !important; 
    color: #f9fafb !important;
    opacity: 0.95;
}
.daylight-post-dawn { 
    background: #ffaa00 !important; 
    color: #1f2937 !important;
    opacity: 0.95;
}
.daylight-day { 
    background: #ffea29 !important; 
    color: #1f2937 !important;
    opacity: 0.95;
}
.daylight-midday { 
    background: #fffcc4 !important; 
    color: #1f2937 !important;
    opacity: 0.95;
}
.daylight-pre-dusk { 
    background: #ffaa00 !important; 
    color: #1f2937 !important;
    opacity: 0.92;
}
.daylight-dusk { 
    background: #7300a0 !important; 
    color: #f9fafb !important;
    opacity: 0.92;
}
.daylight-post-dusk { 
    background: #3f0d8a !important; 
    color: #f3f4f6 !important;
    opacity: 0.9;
}

/* Toggle Switch Styles */
.toggle-active {
    background-color: #3b82f6 !important;
}
.toggle-active .toggle-slider {
    transform: translateX(1.25rem) !important;
}
.time-mode-active {
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

/* Time Mode Toggle Styles */
.toggle-switch {
    background-color: #4b5563;
}
.toggle-switch.active {
    background-color: #3b82f6;
}
.toggle-switch.active #time-toggle-slider {
    transform: translateX(16px);
}

/* Collapsible Container Styles */
.weather-collapsible,
.track-map-collapsible {
    max-height: 1200px;
    overflow: visible;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 1rem;
}

#weather-display-page2.collapsed .weather-collapsible,
#track-map-container-page2.collapsed .track-map-collapsible {
    max-height: 0;
    padding: 0 1rem;
    overflow: hidden;
}

/* Toggle Icon Rotation */
.weather-toggle-icon,
.track-map-toggle-icon {
    transition: transform 0.3s ease-in-out;
}

#weather-display-page2.collapsed .weather-toggle-icon,
#track-map-container-page2.collapsed .track-map-toggle-icon {
    transform: rotate(-90deg);
}

/* Stint Table Layout - Fixed columns with flexible driver/backup */
.stint-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.stint-table thead tr {
    display: flex !important;
}

.stint-table tbody tr {
    display: flex !important;
    width: 100% !important;
}

.stint-table td,
.stint-table th {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 8-Column Layout: Stint#(80px) | StartTime(110px) | EndTime(110px) | StartLap(100px) | EndLap(100px) | Laps(100px) | Driver(flex) | Backup(flex) */

/* Column 1: Stint # */
.stint-table td:nth-child(1),
.stint-table th:nth-child(1) {
    width: 80px !important;
    flex-shrink: 0;
}

/* Columns 2-3: Start/End Time */
.stint-table td:nth-child(2),
.stint-table td:nth-child(3),
.stint-table th:nth-child(2),
.stint-table th:nth-child(3) {
    width: 110px !important;
    flex-shrink: 0;
}

/* Columns 4-6: Start Lap, End Lap, Laps */
.stint-table td:nth-child(4),
.stint-table td:nth-child(5),
.stint-table td:nth-child(6),
.stint-table th:nth-child(4),
.stint-table th:nth-child(5),
.stint-table th:nth-child(6) {
    width: 100px !important;
    flex-shrink: 0;
}

/* Columns 7-8: Driver and Backup - flexible */
.stint-table td:nth-child(7),
.stint-table td:nth-child(8),
.stint-table th:nth-child(7),
.stint-table th:nth-child(8) {
    flex: 1 !important;
    min-width: 180px !important;
}

/* Race Inputs - Match safety margin box sizing */
#race-inputs-container input[type="number"] {
    padding: 0.25rem 0.5rem !important; /* p-1 equivalent */
    font-size: 0.875rem !important; /* text-sm */
    width: 5rem !important; /* w-20 equivalent */
    max-width: none !important; /* Remove max-w-xs constraint */
}

#race-inputs-container input[type="number"]#avg-lap-time-minutes,
#race-inputs-container input[type="number"]#avg-lap-time-seconds {
    width: 3rem !important; /* Smaller width for time inputs */
}


        /* Shared utilities */
        
        .panel{
        background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
        border-radius:12px;
        padding: 6px;
        border:1px solid rgba(255,255,255,0.03);
        min-height:10px;
        position:relative;
        overflow:visible;
        }

        .panel-list{
        background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
        border-radius:12px;
        padding: 6px;
        border:1px solid rgba(255,255,255,0.03);
        }

        .card {
        background:linear-gradient(180deg, rgba(255, 255, 255, 0.062), transparent);
        border-radius:12px;
        padding:14px;
        border:1px solid rgba(255,255,255,0.03);
        box-shadow:0 10px 30px rgba(10, 10, 10, 0.4) inset;
        }

        .title{ font-weight:600; font-size:14px; margin-bottom:6px }
        .muted{ color:var(--muted); font-size:13px }
        .small{ font-size:13px }

        /* 1 Race Card - driver + lap */
        .race-card{
        display:flex; gap:12px; align-items:center;
        background:linear-gradient(180deg,#272727,#191919);
        padding:6px; 
        border-radius:12px; 
        border:1px solid rgba(255,255,255,0.03);
        }
        .race-card .badge{ 
        background:#242424; 
        padding:8px 10px; 
        border-radius:8px; 
        font-weight:700; 
        color:var(--accent-2); 
        font-family:Roboto Mono; 
        }
    
        /* 17. Blurred glass strip with backdrop-filter */
        .glass-strip{ 
        background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
        border-radius:12px; 
        padding:10px; 
        backdrop-filter:blur(6px); 
        border:1px solid rgba(28, 28, 28, 0.141)     
        }

        .glass-strip-list{ 
        background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
        border-radius:12px; 
        padding:10px; 
        backdrop-filter:blur(6px); 
        border:1px solid rgba(28, 28, 28, 0.141)     
        } 

        .bg01{
            background: linear-gradient(180deg, #292929 0%, #213131 50%, #27222c 100%, #2a1b28 100%);
            background-attachment: local;
        }

        .bg02{
            background: linear-gradient(180deg, #38284a 0%, #2b222c 50%, #213131 75%, #292929 100%);
            background-attachment: local;
        }

        .ov-dark{ background: rgba(0, 0, 0, 0.4) 
        }

        .ov-mid{ background: rgba(0, 0, 0, 0.1) 
        }

        .ov-light{ background: rgba(229, 229, 229, 0.1) 
        }

        .ov-dark-list{ background: rgba(0, 0, 0, 0.8) 
        }

        .ov-dark-hover:hover{ background: rgba(0, 0, 0, 0.4) 
        }

        .glass-strip-nb{ 
        background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
        padding:10px; 
        backdrop-filter:blur(6px); 
        }
        
        .alerts{ 
        background:linear-gradient(180deg, rgba(255,77,79,0.06), transparent); 
        padding:10px; border-radius:8px; 
        display:flex; 
        gap:8px; 
        align-items:center; 
        }
        .alerts .dot{ 
        width:10px; 
        height:10px; 
        background:var(--accent); 
        border-radius:50%; 
        box-shadow:0 6px 20px rgba(255,77,79,0.08) 
        }

        .grad{ 
        background:linear-gradient(270deg, rgba(225, 225, 225, 0.05), transparent);
        }

        .grad-on-hover:hover {
        background: linear-gradient(270deg, rgba(225, 225, 225, 0.05), rgba(41, 41, 41, 0.05), transparent);
        }

        @keyframes pulse-glow {
            0%, 100% {
                box-shadow: 0 0 5px rgba(7, 221, 4, 0.5);
            }
            50% {
                box-shadow: 0 0 15px rgb(0, 255, 68);
            }
        }

        .invisible {
        opacity: 0;
        pointer-events: none;
        }

        .neon-green-glow {
        border-radius:14px;
        padding:18px;
        background:linear-gradient(135deg,#054508, rgba(255,255,255,0.015));
        box-shadow:0 8px 40px rgba(63, 233, 6, 0.14);
        border:1px solid rgba(7, 210, 7, 0.25);
        animation: pulse-glow 4s infinite;
        }
        
        .neon-purple-glow {
        border-radius:14px;
        padding:18px;
        background:linear-gradient(135deg,#310545, rgba(255,255,255,0.015));
        box-shadow:0 8px 40px rgba(169, 6, 233, 0.14);
        border:1px solid rgba(169, 7, 210, 0.25);
        animation: pulse-glow 4s infinite;
        }

        .neon-purple-glow:hover {
            box-shadow: 0 8px 40px rgba(169, 6, 233, 0.14);
            border: 1px solid rgba(169, 7, 210, 0.25);
        }

        /* Custom scrollbar for dropdown lists */
        .dropdown-list::-webkit-scrollbar {
            width: 8px;
        }

        .dropdown-list::-webkit-scrollbar-track {
            background: #6c6c6c90;
            border-radius: 4px;
        }

        .dropdown-list::-webkit-scrollbar-thumb {
            background: #959595;
            border-radius: 4px;
        }

        .dropdown-list::-webkit-scrollbar-thumb:hover {
            background: #525252;
        }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #a0a0a0;
            outline: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            background: #ffffff;
            border: 2px solid #545454;
            border-radius: 50%;
            cursor: pointer;
            margin-top: -2px;
        }

        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: hsl(0, 0%, 0%);
            border: 2px solid #ffffff;
            border-radius: 50%;
            cursor: pointer;
        }