:root {
    --bg-color: #ffffff; /* Light mode background set to pure white */
    --pane-bg: #ffffff;
    --text-color: #000000;
    --border-color: #ccc;
}

[data-theme="dark"] {
    --bg-color: #222;
    --pane-bg: #333;
    --text-color: #ffffff;
    --border-color: #444;
    --dark-bg-secondary: #333;
    --dark-text-color: #ffffff;
    --dark-border-color: #444;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: all 0.3s ease;
    font-size: 0.85rem;
    line-height: 1.4;
}

.pane {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.75rem;
    background: var(--pane-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.75rem;
}

.highlight {
    background-color: #ffcccc;
}

/* Complete override for weather station layout - force wider boxes */
.current-weather-content {
    padding: 0.1rem !important;
    width: 100% !important;
}

.current-weather-content .row {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Force both single and double station layouts to use maximum width */
.current-weather-content .row .col-md-6,
.current-weather-content .row .col-12,
.current-weather-content .col-md-6,
.current-weather-content .col-12 {
    flex: 1 1 48% !important; /* Take up 48% each, allowing for small gap */
    max-width: 48% !important;
    min-width: 48% !important;
    width: 48% !important;
    padding: 0.1rem !important;
    margin: 0 !important;
    display: flex !important;
}

/* For single station, use more width */
.current-weather-content .row .col-12:only-child,
.current-weather-content .col-12:only-child {
    flex: 1 1 96% !important;
    max-width: 96% !important;
    min-width: 96% !important;
    width: 96% !important;
}

/* Remove Bootstrap's row margins and gaps completely */
.current-weather-content .row.g-2,
.current-weather-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0.2rem !important;
    padding: 0 !important;
}

/* Force weather station panels to fill their containers */
.weather-station-panel {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0.6rem !important;
    box-sizing: border-box !important;
    flex: 1 !important;
}

/* Ensure station names render fully without clipping */
.weather-station-panel .station-name {
    white-space: normal !important; /* allow wrapping when needed */
    overflow: visible !important;   /* prevent clipping */
    text-overflow: unset !important;/* no forced ellipsis */
    width: 100% !important;
    line-height: 1.3 !important;    /* more vertical breathing room */
    margin-bottom: 0.5rem !important;/* extra spacing below title */
}

/* Additional targeting for the current weather container */
#current-weather {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Force the single column weather layout to be compact */
.single-column-weather {
    width: 100% !important;
    height: 100% !important;
}

/* Override any Bootstrap column defaults that might interfere */
.current-weather-content [class*="col-"] {
    flex: 1 1 48% !important;
    max-width: 48% !important;
    padding-left: 0.1rem !important;
    padding-right: 0.1rem !important;
}

.weather-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    display: block;
}

.weather-details {
    font-size: 1em;
    line-height: 1.4;
}

.weather-details p {
    margin-bottom: 0.25rem;
}

.temp {
    font-size: 1.6em;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}

.observation-time {
    color: #666;
    text-align: right;
    margin-top: 0.5rem;
    font-style: italic;
    word-wrap: break-word;
    max-width: 100%;
    font-size: 0.75rem;
}

.observation-time small {
    display: inline-block;
}

.table {
    color: var(--text-color);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .table {
    --bs-table-bg: var(--pane-bg);
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--border-color);
}

#theme-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table .wi {
    font-size: 1.1rem;
}

[data-theme="dark"] .wi {
    color: var(--text-color);
}

.table td.wind-warning,
.wind-warning {
    background-color: #ffc107 !important;
    color: #000000;
    padding: 1px 4px;
    border-radius: 2px;
    white-space: normal;
}

.table td.wind-danger,
.wind-danger {
    background-color: #dc3545 !important;
    color: #ffffff;
    padding: 1px 4px;
    border-radius: 2px;
    white-space: normal;
}

[data-theme="dark"] .table td.wind-warning,
[data-theme="dark"] .wind-warning {
    background-color: #856404 !important;
    color: #ffffff;
}

[data-theme="dark"] .table td.wind-danger,
[data-theme="dark"] .wind-danger {
    background-color: #721c24 !important;
    color: #ffffff;
}

/* General parameter-row wind warning styles (for contexts outside single-column-weather) */
.parameter-row.wind-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
    border-radius: 2px;
    padding: 0.05rem 0.3rem;
    margin: 0;
}

.parameter-row.wind-warning strong,
.parameter-row.wind-warning span {
    color: #000000 !important;
}

.parameter-row.wind-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-radius: 2px;
    padding: 0.05rem 0.3rem;
    margin: 0;
}

.parameter-row.wind-danger strong,
.parameter-row.wind-danger span {
    color: #ffffff !important;
}

/* Dark theme support for general parameter-row wind warnings */
[data-theme="dark"] .parameter-row.wind-warning {
    background-color: #856404 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .parameter-row.wind-warning strong,
[data-theme="dark"] .parameter-row.wind-warning span {
    color: #ffffff !important;
}

[data-theme="dark"] .parameter-row.wind-danger {
    background-color: #721c24 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .parameter-row.wind-danger strong,
[data-theme="dark"] .parameter-row.wind-danger span {
    color: #ffffff !important;
}

.wi-wind {
    display: inline-block;
    margin: 0 3px;
    font-size: 14px;
}

.table .wi-wind {
    font-size: 14px;
}

/* Update radar container and controls layout */
.radar-container {
    position: relative;
    width: 100%;
    flex-grow: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 40px);
    overflow: hidden;
    height: 380px;
}

#brightsky-radar-map {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Move timestamp styling up in visual hierarchy */
#radar-timestamp {
    text-align: center;
    padding: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 0.25rem;
}

/* New container for controls */
.radar-controls-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.brightsky-radar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.radar-slider {
    flex-grow: 1;
}

#brightsky-radar-play {
    min-width: 40px;
}

/* Dark theme adjustments */
[data-theme="dark"] #radar-timestamp,
[data-theme="dark"] .radar-controls-container {
    background: rgba(51, 51, 51, 0.9);
    color: var(--text-color);
}

/* OpenLayers controls */
.ol-zoom {
    top: 0.5em;
    left: 0.5em;
}

.ol-zoomslider {
    top: 95px;
    left: 0.5em;
    height: 200px;
}

.ol-scale-line {
    bottom: 0.5em;
    left: 0.5em;
}

/* Dark theme support */
[data-theme="dark"] .radar-legend,
[data-theme="dark"] .radar-controls {
    background: rgba(51, 51, 51, 0.9);
    color: var(--text-color);
}

.day-header {
    background-color: var(--bg-color);
    cursor: pointer;
}

.day-header-cell {
    padding: 10px 15px !important;
    font-weight: bold;
}

.day-content {
    display: none;  /* Initially collapsed */
    background-color: var(--pane-bg);
    font-size: 0.75rem;
}

.day-container td {
    padding: 0 !important;
}

.toggle-day {
    padding: 0.25rem 0.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark theme support */
[data-theme="dark"] .day-header {
    background-color: var(--pane-bg);
}

.lightning-container {
    position: relative;
    height: 400px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#lightning-map {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.lightning-timestamp {
    text-align: center;
    padding: 5px;
    font-size: 0.9em;
    color: var(--text-color);
    margin-top: 5px;
}

.lightning-icon {
    font-size: 20px;
    text-align: center;
    line-height: 20px;
    text-shadow: 0 0 3px #fff;
}

/* CSS filters removed - Jawg Sunny/Dark tiles already theme-appropriate */

[data-theme="dark"] .leaflet-container {
    background: #333;
}

.radar-slider {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.leaflet-tile-container {
    opacity: 1 !important;
}

.leaflet-tile {
    opacity: 1 !important;
}

/* CSS filters removed - Jawg Sunny/Dark tiles already theme-appropriate */

#current-weather {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#current-weather-pane {
    padding: 0.5rem !important;
}

#current-weather-pane h3 {
    margin-bottom: 5px; /* Reduced from 15px to 5px */
    font-size: 1.4em;
    margin-top: 0;
    height: 25px; /* Reduced from 30px to 25px */
    display: flex;
    align-items: center;
}

/* Add styles for the radar slider container */
.radar-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Add styles for lightning potential */
.fa-bolt {
    font-size: 1.1em;
    margin-right: 4px;
}

[data-theme="dark"] .fa-bolt {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Add styles for table column alignment */
.table th,
.day-content .table td {
    width: auto;
    min-width: 0;
}

/* Set specific widths for columns to match in both tables */
.table th:nth-child(1),
.day-content .table td:nth-child(1) {
    width: 12%;  /* Zeit */
}

.table th:nth-child(2),
.day-content .table td:nth-child(2) {
    width: 8%;   /* Temp */
}

.table th:nth-child(3),
.day-content .table td:nth-child(3) {
    width: 8%;   /* Regen */
}

.table th:nth-child(4),
.day-content .table td:nth-child(4) {
    width: 18%;  /* Wind */
}

/* Increase left padding for hourly wind cells to avoid overlap with precip colors */
.day-content .table td:nth-child(4),
.day-content .table td.wind-green,
.day-content .table td.wind-yellow,
.day-content .table td.wind-orange,
.day-content .table td.wind-red {
    padding-left: 18px !important;
}

/* Fixed width for wind direction abbreviations to ensure proper alignment */
.wind-dir-abbrev {
    display: inline-block;
    min-width: 2.5em; /* Width for 3-letter abbreviations like "NNO", "SSO" */
    text-align: center;
}

.wind-speed {
    display: inline-block;
    min-width: 2ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table th:nth-child(5),
.day-content .table td:nth-child(5) {
    width: 8%;   /* Blitzrisiko */
}

.table th:nth-child(6),
.day-content .table td:nth-child(6) {
    width: 8%;   /* Sonnenschein */
}

.table th:nth-child(7),
.day-content .table td:nth-child(7) {
    width: 18%;  /* Wetter */
}

.table th:nth-child(8),
.day-content .table td:nth-child(8) {
    width: 10%;  /* WW-Code */
}

.table th:nth-child(9),
.day-content .table td:nth-child(9) {
    width: 10%;  /* Button column */
}

/* Ensure the nested table takes full width */
.day-content .table {
    width: 100%;
    table-layout: fixed;
}

/* Remove any padding from the container td */
.day-container > td {
    padding: 0 !important;
}

/* Radar Frame Control Styles */
.frame-selector {
    position: absolute;
    z-index: 400;
    left: 25px;
    bottom: 25px;
    background-color: #000000aa;
    padding: 6px;
    border-radius: 4px;
}

.frame-selector h3 {
    color: #eeeeee;
    font-size: 18px;
    font-family: system-ui, sans-serif;
    margin: 0;
    margin-top: .125rem;
    margin-bottom: .25rem;
    text-align: center;
}

.frame-selector input[type="range"] {
    width: 200px;
    margin: 0 10px;
    vertical-align: middle;
}

.frame-selector .opacity-control {
    display: flex;
    align-items: center;
    margin-top: 8px;
    padding: 0 10px;
}

.frame-selector .opacity-control label {
    color: #eeeeee;
    font-family: system-ui, sans-serif;
    margin-right: 8px;
}

.frame-selector .opacity-control input[type="range"] {
    width: 100px;
}

.frame-selector img {
    height: 24px;
    margin-right: .5rem;
    margin-left: .25rem;
    vertical-align: middle;
    cursor: pointer;
}

/* Spinner Animation for Radar Loading */
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    opacity: .5;
}

.spinner:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    border-radius: 50%;
    border: 10px solid rgba(180, 180, 180, 1);
    border-top-color: rgba(0, 0, 0, 1);
    animation: spinner 0.6s linear infinite;
}

/* External Radar Controls */
.radar-external-controls {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 8px;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000;
    position: relative; /* Ensure it's not obscured */
    background-color: var(--pane-bg); /* Match pane background */
    border-top: 1px solid var(--border-color);
}

.radar-time-label {
    min-width: 45px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Radar zoom controls */
.radar-zoom-container {
    display: flex;
    gap: 4px;
    align-items: center;
}

.radar-zoom-in,
.radar-zoom-out {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background-color: var(--pane-bg);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.radar-zoom-in:hover:not(:disabled),
.radar-zoom-out:hover:not(:disabled) {
    background-color: var(--text-color);
    color: var(--pane-bg);
    transform: scale(1.05);
}

.radar-zoom-in:disabled,
.radar-zoom-out:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.radar-zoom-in:active:not(:disabled),
.radar-zoom-out:active:not(:disabled) {
    transform: scale(0.95);
}

.radar-playback-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.radar-frame-slider {
    width: 100%;
    height: 10px;
}

.radar-frame-slider-area {
    --radar-slider-width: clamp(240px, 32vw, 420px);
    flex: 0 0 var(--radar-slider-width);
    width: var(--radar-slider-width);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.radar-frame-section-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.9;
    user-select: none;
}

@media (max-width: 600px) {
    .radar-playback-container {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .radar-frame-slider-area {
        --radar-slider-width: 100%;
        flex: 1 1 100%;
        width: 100%;
    }
}

.radar-frame-label-active {
    font-weight: 700;
    opacity: 1;
}

.radar-frame-slider-wrap {
    position: relative;
    width: 100%;
    height: 14px;
}

:root {
    --radar-measured-color: #1E90FF;
    --radar-forecast-color: #dc3545;
}

[data-theme="dark"] {
    --radar-measured-color: #4FA3FF;
    --radar-forecast-color: #ff6b6b;
}

.radar-frame-slider-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        var(--radar-measured-color) 0%,
        var(--radar-measured-color) var(--radar-boundary-pct, 50%),
        var(--radar-forecast-color) var(--radar-boundary-pct, 50%),
        var(--radar-forecast-color) 100%
    );
    opacity: 0.9;
}

.radar-frame-boundary {
    position: absolute;
    top: 50%;
    left: var(--radar-boundary-pct, 50%);
    transform: translate(-50%, -50%);
    width: 2px;
    height: 10px;
    background: var(--text-color);
    opacity: 0.85;
    border-radius: 1px;
    pointer-events: none;
}

.radar-frame-slider {
    position: relative;
    z-index: 1;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    --radar-frame-track-h: 6px;
    --radar-frame-thumb: 14px;
    height: var(--radar-frame-thumb);
}

.radar-frame-slider::-webkit-slider-runnable-track {
    background: transparent;
    height: var(--radar-frame-track-h);
}

.radar-frame-slider::-moz-range-track {
    background: transparent;
    height: var(--radar-frame-track-h);
}

.radar-frame-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: var(--radar-frame-thumb);
    width: var(--radar-frame-thumb);
    border-radius: 50%;
    background: var(--radar-measured-color);
    border: 1px solid rgba(0,0,0,0.15);
    margin-top: calc((var(--radar-frame-track-h) - var(--radar-frame-thumb)) / 2);
}

[data-theme="dark"] .radar-frame-slider::-webkit-slider-thumb {
    border: 1px solid rgba(255,255,255,0.2);
}

.radar-frame-slider::-moz-range-thumb {
    height: var(--radar-frame-thumb);
    width: var(--radar-frame-thumb);
    border-radius: 50%;
    background: var(--radar-measured-color);
    border: 1px solid rgba(0,0,0,0.15);
}

[data-theme="dark"] .radar-frame-slider::-moz-range-thumb {
    border: 1px solid rgba(255,255,255,0.2);
}

.radar-time-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.radar-data-kind {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-color);
}

[data-theme="dark"] .radar-data-kind {
    background: rgba(255, 255, 255, 0.12);
}

.radar-data-kind-forecast {
    background: rgba(111, 66, 193, 0.18);
}

[data-theme="dark"] .radar-data-kind-forecast {
    background: rgba(177, 151, 252, 0.18);
}

.radar-forecast-watermark {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 6px;
    transform: rotate(-20deg);
    pointer-events: none;
    z-index: 350;
    color: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .radar-forecast-watermark {
    color: rgba(255, 255, 255, 0.14);
}

.radar-forecast-active .radar-forecast-watermark {
    display: flex;
}

.radar-opacity-container {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.radar-opacity-container label {
    font-size: 0.8rem;
    white-space: nowrap;
}

.radar-opacity-slider {
    width: 80px;
    height: 10px;
}

/* For input range elements in the radar controls */
.radar-external-controls input[type="range"]:not(.radar-frame-slider) {
    height: 10px;
}

/* For track and thumb of range inputs */
.radar-external-controls input[type="range"]:not(.radar-frame-slider)::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
}

.radar-external-controls input[type="range"]:not(.radar-frame-slider)::-moz-range-thumb {
    height: 12px;
    width: 12px;
}

.radar-external-controls input[type="range"]:not(.radar-frame-slider)::-ms-thumb {
    height: 12px;
    width: 12px;
}

/* Remove frame selector styles from map since controls are now outside */
.frame-selector {
    display: none;
}

/* Make current weather and radar panes the same height */
.row.mb-4 .col-md-6 .pane {
    height: 460px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Adjust radar container to properly contain the map */
.radar-container {
    position: relative;
    width: 100%;
    flex-grow: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 40px);
    overflow: hidden;
}

/* Ensure the radar map fits inside its container */
#radar-map {
    width: 100%;
    height: 380px !important;
    flex: 1;
    overflow: hidden;
}

/* Current weather content should fill available space */
#current-weather {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Ensure headers take up the same vertical space */
.row.mb-4 .col-md-6 .pane h3 {
    margin-top: 0;
    margin-bottom: 8px; /* Reduced from 15px */
    height: 25px; /* Reduced from 30px */
    display: flex;
    align-items: center;
}

/* Simplified Forecast Table Styles */
.simplified-forecast-table {
    margin-bottom: 0;
}

.simplified-forecast-table th,
.simplified-forecast-table td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
}

.simplified-forecast-table th {
    background-color: var(--bg-color);
    font-weight: bold;
}

/* Increase font size for the first header cell (Tag) by one step */
.simplified-forecast-table thead th:first-child {
    font-size: 0.85rem;
}

.simplified-forecast-table .day-name {
    font-weight: bold;
    background-color: var(--bg-color);
}

/* General style for all simplified forecast table cells */
.simplified-forecast-table td {
    position: relative;
    font-weight: bold;
    color: #000000 !important; /* Black text for all cells by default */
}

/* Heat stress colors - 4-level warning system (Tmax) */
td.heat-green {
    background-color: rgb(146, 208, 80) !important; /* Green - <25°C */
    color: #000000 !important; /* Black text for better contrast */
}

td.heat-yellow {
    background-color: rgb(255, 255, 0) !important; /* Yellow - 25-29.9°C */
    color: #000000 !important; /* Black text on yellow */
}

td.heat-orange {
    background-color: rgb(255, 192, 0) !important; /* Orange - 30-34.9°C */
    color: #000000 !important; /* Black text for better contrast */
}

td.heat-red {
    background-color: rgb(255, 0, 0) !important; /* Red - ≥35°C */
    color: #ffffff !important; /* White text on red for contrast */
}

/* Cold stress colors - 4-level warning system (Tmin) */
td.cold-green {
    background-color: rgb(146, 208, 80) !important; /* Green - ≥0°C */
    color: #000000 !important; /* Black text for better contrast */
}

td.cold-lightblue {
    background-color: rgb(175, 225, 255) !important; /* Light Blue - -0.1 to -4.9°C */
    color: #000000 !important; /* Black text for better contrast */
}

td.cold-blue {
    background-color: rgb(0, 175, 255) !important; /* Blue - -5 to -9.9°C */
    color: #ffffff !important; /* White text on blue for contrast */
}

td.cold-purple {
    background-color: rgb(255, 100, 255) !important; /* Purple - ≤-10°C */
    color: #000000 !important; /* Black text for better contrast */
}

/* Precipitation colors - 4-level warning system (24h) */
td.precip-green {
    background-color: rgb(146, 208, 80) !important; /* Green - 0-5mm */
    color: #000000 !important; /* Black text for better contrast */
}

td.precip-yellow {
    background-color: rgb(255, 255, 0) !important; /* Yellow - 5-15mm */
    color: #000000 !important; /* Black text on yellow */
}

td.precip-orange {
    background-color: rgb(255, 192, 0) !important; /* Orange - 15-30mm */
    color: #000000 !important; /* Black text for better contrast */
}

td.precip-red {
    background-color: rgb(255, 0, 0) !important; /* Red - ≥30mm */
    color: #ffffff !important; /* White text on red for contrast */
}

/* Thunderstorm colors - 3-level warning system (WW codes only) */
td.tstorm-green {
    background-color: rgb(146, 208, 80) !important; /* Green - No thunderstorm */
    color: #000000 !important; /* Black text for better contrast */
}

td.tstorm-orange {
    background-color: rgb(255, 192, 0) !important; /* Orange - WW=95 */
    color: #000000 !important; /* Black text for better contrast */
}

td.tstorm-red {
    background-color: rgb(255, 0, 0) !important; /* Red - WW=96 */
    color: #ffffff !important; /* White text on red for contrast */
}

/* Snow intensity colors - 4-level warning system */
td.snow-green {
    background-color: rgb(146, 208, 80) !important; /* Green - No snow */
    color: #000000 !important; /* Black text for better contrast */
}

td.snow-yellow {
    background-color: rgb(255, 255, 0) !important; /* Yellow - WW=71,85 light */
    color: #000000 !important; /* Black text on yellow */
}

td.snow-blue {
    background-color: rgb(0, 175, 255) !important; /* Blue - WW=73 moderate */
    color: #ffffff !important; /* White text on blue for contrast */
}

td.snow-purple {
    background-color: rgb(255, 100, 255) !important; /* Purple - WW=75,86 heavy */
    color: #000000 !important; /* Black text for better contrast */
}

/* Freezing rain intensity colors - 4-level warning system */
td.freezing-rain-green {
    background-color: rgb(146, 208, 80) !important; /* Green - No freezing rain */
    color: #000000 !important; /* Black text for better contrast */
}

td.freezing-rain-lightblue {
    background-color: rgb(175, 225, 255) !important; /* Light Blue - WW=56,57 light */
    color: #000000 !important; /* Black text for better contrast */
}

td.freezing-rain-blue {
    background-color: rgb(0, 175, 255) !important; /* Blue - WW=66 moderate */
    color: #ffffff !important; /* White text on blue for contrast */
}

td.freezing-rain-purple {
    background-color: rgb(255, 100, 255) !important; /* Purple - WW=67 heavy */
    color: #000000 !important; /* Black text for better contrast */
}

/* Lightning colors - 2-level warning system (binary) */
td.lightning-green {
    background-color: rgb(146, 208, 80) !important; /* Green - value=0 */
    color: #000000 !important; /* Black text for better contrast */
}

td.lightning-red {
    background-color: rgb(255, 0, 0) !important; /* Red - value>0 */
    color: #ffffff !important; /* White text on red for contrast */
}

/* Wind speed colors - 4-level warning system */
td.wind-green {
    background-color: rgb(146, 208, 80) !important; /* Green - <41 km/h */
    color: #000000 !important; /* Black text for better contrast */
    white-space: normal;
}

td.wind-yellow {
    background-color: rgb(255, 255, 0) !important; /* Yellow - 41-61 km/h */
    color: #000000 !important; /* Black text on yellow */
    white-space: normal;
}

td.wind-orange {
    background-color: rgb(255, 192, 0) !important; /* Orange - 62-88 km/h */
    color: #000000 !important; /* Black text for better contrast */
    white-space: normal;
}

td.wind-red {
    background-color: rgb(255, 0, 0) !important; /* Red - ≥89 km/h */
    color: #ffffff !important; /* White text on red for contrast */
    white-space: normal;
}

/* Fix for wind direction icons in warning cells - force high contrast */
.wind-yellow .wi,
.wind-orange .wi,
.wind-green .wi {
    color: #000000 !important;
}

.wind-red .wi {
    color: #ffffff !important;
}

/* Ensure these overrides apply in dark mode too */
[data-theme="dark"] .wind-yellow .wi,
[data-theme="dark"] .wind-orange .wi,
[data-theme="dark"] .wind-green .wi {
    color: #000000 !important;
}

[data-theme="dark"] .wind-red .wi {
    color: #ffffff !important;
}

/* Detailed forecast table warning colors */
/* Temperature colors for detailed forecast */
/* Legend temperature palette aligned to table colors */
.temp-purple { background-color: rgb(255, 100, 255) !important; color: #000000 !important; }
.temp-blue { background-color: rgb(0, 175, 255) !important; color: #000000 !important; }
.temp-lightblue { background-color: rgb(175, 225, 255) !important; color: #000000 !important; }
.temp-green { background-color: rgb(146, 208, 80) !important; color: #000000 !important; }
.temp-yellow { background-color: rgb(255, 255, 0) !important; color: #000000 !important; }
.temp-orange { background-color: rgb(255, 192, 0) !important; color: #000000 !important; }
.temp-red { background-color: rgb(255, 0, 0) !important; color: #ffffff !important; }

/* Cold palette classes for legend and non-table elements */
.cold-purple { background-color: rgb(255, 100, 255) !important; }
.cold-blue { background-color: rgb(0, 175, 255) !important; }
.cold-lightblue { background-color: rgb(175, 225, 255) !important; }
.cold-green { background-color: rgb(146, 208, 80) !important; }

/* Wind colors for detailed forecast */
.wind-green { background-color: rgb(146, 208, 80) !important; }
.wind-yellow { background-color: rgb(255, 255, 0) !important; }
.wind-orange { background-color: rgb(255, 192, 0) !important; }
.wind-red { background-color: rgb(255, 0, 0) !important; }

/* Precipitation colors for detailed forecast */
.precip-green { background-color: rgb(146, 208, 80) !important; }
.precip-yellow { background-color: rgb(255, 255, 0) !important; }
.precip-orange { background-color: rgb(255, 192, 0) !important; }
.precip-red { background-color: rgb(255, 0, 0) !important; }

/* Lightning colors for detailed forecast */
.lightning-green { background-color: rgb(146, 208, 80) !important; }
.lightning-red { background-color: rgb(255, 0, 0) !important; }

/* Weather condition colors for detailed forecast */
.weather-green {
    background-color: rgba(0, 128, 0, 0.8) !important;
    color: #ffffff !important;
}

.tstorm-green { background-color: rgb(146, 208, 80) !important; }
.tstorm-orange { background-color: rgb(255, 192, 0) !important; }
.tstorm-red { background-color: rgb(255, 0, 0) !important; }

.freezing-rain-green { background-color: rgb(146, 208, 80) !important; }
.freezing-rain-lightblue { background-color: rgb(175, 225, 255) !important; }
.freezing-rain-blue { background-color: rgb(0, 175, 255) !important; }
.freezing-rain-purple { background-color: rgb(255, 100, 255) !important; }

.snow-green { background-color: rgb(146, 208, 80) !important; }
.snow-lightblue { background-color: rgb(175, 225, 255) !important; color: #000000 !important; }
.snow-blue { background-color: rgb(0, 175, 255) !important; }
.snow-purple { background-color: rgb(255, 100, 255) !important; }


/* Tooltip for forecast values */
.simplified-forecast-table td {
    position: relative;
}

.forecast-tooltip {
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 0.35rem;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.75rem;
}

.simplified-forecast-table td:hover .forecast-tooltip {
    visibility: visible;
    opacity: 1;
}

.simplified-forecast-table td:focus .forecast-tooltip,
.simplified-forecast-table td:focus-within .forecast-tooltip {
    visibility: visible;
    opacity: 1;
}

.simplified-forecast-table td:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.65);
    outline-offset: -2px;
}

/* Day label styling */
.day-label {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
}

.day-date {
    font-weight: normal;
    font-size: 0.7rem;
    margin-top: 4px;
}

/* Day column styles */
.simplified-forecast-table .day-name {
    font-weight: bold;
    background-color: var(--bg-color);
}

/* Dark mode specific styles for the day name column */
[data-theme="dark"] .simplified-forecast-table .day-name {
    background-color: var(--pane-bg);
    color: #ffffff !important; /* White text in dark mode */
}

/* Dark mode adjustments for table headers */
[data-theme="dark"] .simplified-forecast-table th {
    background-color: var(--pane-bg);
    color: #ffffff !important;
    border-color: var(--border-color);
}

/* Make tooltips readable in dark mode */
[data-theme="dark"] .forecast-tooltip {
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    border: 1px solid #444;
}

/* Fix weather icon contrast in chart tooltips for both light and dark modes */
.chart-tooltip .chart-tooltip-icon {
    color: #ff8c00 !important; /* Dark orange for better contrast in light mode */
}

[data-theme="dark"] .chart-tooltip .chart-tooltip-icon {
    color: #ffd700 !important; /* Gold color for dark mode tooltips */
}


/* Comparison radar container */
.radar-comparison-container {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--pane-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.radar-comparison-container h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

/* RainViewer map container */
#rainviewer-map {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* RainViewer controls */
.rainviewer-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
}

.rainviewer-timestamp {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.rainviewer-playback {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rainviewer-play-pause {
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--panel-bg);
    color: var(--text-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
}

.rainviewer-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    outline: none;
    border-radius: 4px;
}

.rainviewer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4285f4;
    cursor: pointer;
}

.rainviewer-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4285f4;
    cursor: pointer;
    border: none;
}

.rainviewer-opacity {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.rainviewer-opacity label {
    min-width: 80px;
    color: var(--text-color);
}

.rainviewer-opacity-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    outline: none;
    border-radius: 4px;
}

.rainviewer-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4285f4;
    cursor: pointer;
}

.rainviewer-opacity-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4285f4;
    cursor: pointer;
    border: none;
}

/* Media queries for smaller screens */
@media (max-width: 768px) {
    .radar-comparison-container {
        padding: 5px;
    }
    
    #rainviewer-map {
        height: 300px !important;
    }
    
    .rainviewer-controls {
        font-size: 12px;
    }
}

/* Dark theme support */
[data-theme="dark"] .rainviewer-play-pause {
    background-color: #444;
    color: #fff;
}

[data-theme="dark"] .rainviewer-slider,
[data-theme="dark"] .rainviewer-opacity-slider {
    background: #555;
}

[data-theme="dark"] .rainviewer-slider::-webkit-slider-thumb,
[data-theme="dark"] .rainviewer-opacity-slider::-webkit-slider-thumb {
    background: #64B5F6;
}

[data-theme="dark"] .rainviewer-slider::-moz-range-thumb,
[data-theme="dark"] .rainviewer-opacity-slider::-moz-range-thumb {
    background: #64B5F6;
}

/* Theme switch styles */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-label {
    font-size: 0.8rem;
    color: #ffffff;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Icons for light/dark mode */
.slider:after {
    content: "☀️";
    position: absolute;
    right: 6px;
    top: 2px;
    font-size: 12px;
}

input:checked + .slider:after {
    content: "🌙";
    left: 6px;
    right: auto;
}

/* Global size reduction */
h1 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
}

.container {
    max-width: 1400px;
}

/* Reduce padding in panes */
.pane {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Table size reduction */
.table {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.table th, .table td {
    padding: 0.35rem 0.5rem;
}

/* Forecast table specific adjustments */
#forecast-table td, #simplified-forecast-table td {
    padding: 0.25rem 0.4rem;
    vertical-align: middle;
}

/* Center-align specific columns in the detailed forecast table */
#forecast-table th:nth-child(1), /* Zeit (Time) */
#forecast-table td:nth-child(1) {
    text-align: center;
}

#forecast-table th:nth-child(2), /* Temp (°C) (Temperature) */
#forecast-table td:nth-child(2) {
    text-align: center;
}

#forecast-table th:nth-child(3), /* Niederschlag (mm) (Precipitation) */
#forecast-table td:nth-child(3) {
    text-align: center;
}

#forecast-table th:nth-child(5), /* Blitzrisiko (Lightning risk) */
#forecast-table td:nth-child(5) {
    text-align: center;
}

#forecast-table th:nth-child(6), /* Sonnenschein (min) (Sunshine duration) */
#forecast-table td:nth-child(6) {
    text-align: center;
}

#forecast-table th:nth-child(8), /* Glätte (Slipperiness) */
#forecast-table td:nth-child(8) {
    text-align: center;
}

/* Left-align specific columns in the detailed forecast table */
#forecast-table th:nth-child(4), /* Wind (Böen) in km/h */
#forecast-table td:nth-child(4) {
    text-align: left;
}

#forecast-table th:nth-child(7), /* Wetter (Weather) */
#forecast-table td:nth-child(7) {
    text-align: left;
}

/* Center the detailed forecast header cells */
table:has(#forecast-table) thead th {
    text-align: center;
    vertical-align: top;
    padding-top: 0.2rem;
}

.day-header td {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

.day-content {
    font-size: 0.75rem;
}

/* Removed redundant current-weather-content rule - already defined above */

.weather-icon {
    font-size: 3rem;
}

.weather-details p {
    margin-bottom: 0.25rem;
}

.observation-time {
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

/* Simplified forecast table adjustments */
.simplified-forecast-table th, .simplified-forecast-table td {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
}

.day-label {
    font-size: 0.8rem;
}

.day-date {
    font-size: 0.7rem;
}

/* Chart size reduction */
#weather-chart {
    min-height: 350px !important;
}

/* Radar controls size reduction */
.radar-container {
    height: 380px;
}

#radar-map {
    height: 380px !important;
}

.radar-external-controls {
    padding: 0.2rem 0;
}

.radar-playback-container, .radar-opacity-container {
    padding: 0;
}

.radar-opacity-slider {
    height: 6px;
}

.radar-time-label {
    font-size: 0.7rem;
    margin-bottom: 0;
}

.radar-toggle-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-right: 5px;
    opacity: 1;
    filter: invert(1) brightness(0.25);
}

[data-theme="dark"] .radar-toggle-btn {
    filter: none;
}

/* Spacing between rows */
.row {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 0.75rem !important;
}

/* Footer size reduction */
footer {
    padding: 0.75rem !important;
    margin-top: 0.5rem !important;
}

footer p {
    margin-bottom: 0;
    font-size: 0.8rem;
}

/* Theme toggle size reduction */
.theme-switch {
    width: 40px;
    height: 20px;
}

.theme-switch .slider:before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.theme-label {
    font-size: 0.8rem;
}

/* Weather icon size in forecast */
.table .wi {
    font-size: 1.1rem;
}

/* Simplified forecast table and chart arrangement */
.col-md-6 .pane {
    height: 350px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#simplified-forecast {
    max-height: 190px;  /* Reduced to fit within 240px container (190px table + ~50px header) */
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.simplified-forecast-table {
    margin-bottom: 0;
    font-size: 0.7rem;
    table-layout: fixed;
    width: 100%;
}

.simplified-forecast-table th,
.simplified-forecast-table td {
    padding: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column widths for table */
.simplified-forecast-table th:first-child,
.simplified-forecast-table td:first-child {
    width: 25%;
}

.simplified-forecast-table th:not(:first-child),
.simplified-forecast-table td:not(:first-child) {
    width: 12.5%;
    text-align: center;
}

/* Ensure chart fits in its container */
#weather-chart {
    flex: 1;
    min-height: 0 !important;
    height: calc(100% - 25px);
}

/* Ensure axis labels adapt to theme colors */
#weather-chart .highcharts-xaxis-labels text,
#weather-chart .highcharts-yaxis-labels text {
    fill: var(--text-color) !important;
    font-size: 8px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .col-md-6 .pane {
        height: auto;
        margin-bottom: 1rem;
    }
    
    #weather-chart {
        height: 300px;
    }
    
    .simplified-forecast-table th,
    .simplified-forecast-table td {
        font-size: 0.65rem;
        padding: 0.15rem;
    }
}

/* For mobile screens, stack the controls vertically */
@media (max-width: 576px) {
    .radar-external-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .radar-time-label {
        width: 100%;
        margin-bottom: 0.1rem;
    }
    
    .radar-opacity-container {
        width: 100%;
        margin-top: 0.1rem;
    }
}

/* New styles for the radar layout change */
.row.mb-2 {
    display: flex;
    flex-wrap: wrap;
    min-height: 880px; /* Increased to accommodate taller left column panes */
}

.row.mb-2 > .col-md-6 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.radar-pane {
    height: 100%;
    min-height: 860px; /* Align with left column combined height */
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    flex-grow: 1;
    overflow: visible; /* Ensure overflow content is visible */
    position: relative; /* For positioning child elements */
    padding-bottom: 10px; /* Controls are below the map now */
}

.radar-pane h3 {
    margin-bottom: 10px;
}

.radar-container {
    flex: 1 1 auto; /* Fill remaining space but allow shrinking for controls */
    height: auto !important;
    min-height: 0 !important; /* Important to allow the controls to be visible */
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

#radar-map {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important; /* Allow map to shrink to make room for controls */
    flex-grow: 1;
}

/* Ensure the left column's three panes take up the full height */
.col-md-6:first-child .pane {
    flex: 0 0 auto; /* Don't grow or shrink, exact height */
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.col-md-6:first-child .pane #current-weather,
.col-md-6:first-child .pane #simplified-forecast,
.col-md-6:first-child .pane #weather-chart {
    flex-grow: 1;
}

/* Make sure the radar controls are visible and positioned properly */
.radar-external-controls {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 8px;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
    position: relative; /* place controls below map, not overlay */
    background-color: var(--pane-bg);
    border-top: 1px solid var(--border-color);
    box-sizing: border-box;
}

/* Adjust heights of panes in the left column */
.col-md-6:first-child {
    display: flex;
    flex-direction: column;
}

.col-md-6:first-child .pane {
    flex: 0 0 auto; /* Don't grow or shrink, exact height */
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

/* Set specific heights for each pane to match radar pane height */
.col-md-6:first-child #current-weather-pane {
    height: 360px; /* Increased to eliminate internal scrollbar */
}

.col-md-6:first-child .pane:nth-child(2) {
    height: 240px; /* Slightly reduced from 250px */
}

.col-md-6:first-child .pane:nth-child(3) {
    height: 240px; /* Slightly reduced from 250px */
    margin-bottom: 15px;
}

#current-weather {
    flex-grow: 1;
    overflow: visible !important; /* Avoid internal scrollbar */
}

#simplified-forecast {
    flex-grow: 1;
    overflow: auto;
}

#weather-chart {
    height: 160px !important; /* Reduced to fit within pane height incl. header/padding */
    min-height: 160px !important;
}

/* Ensure highcharts container has proper height */
.highcharts-container {
    height: 160px !important;
    width: 100% !important;
}

.highcharts-root {
    height: 160px !important;
    width: 100% !important;
}

/* For responsive layout */
@media (max-width: 768px) {
    .radar-pane {
        height: 500px;
        min-height: unset;
        margin-top: 1rem;
    }
    
    .radar-container {
        flex-grow: 1;
        min-height: unset !important;
    }
    
    #radar-map {
        height: 100% !important;
        min-height: unset !important;
    }
    
    .row.mb-2 {
        min-height: unset;
    }
    
    .col-md-6:first-child .pane {
        height: auto !important;
        min-height: 200px;
    }
    
    #weather-chart, 
    .highcharts-container, 
    .highcharts-root {
        height: 250px !important;
    }
}

/* Refresh indicator styling */
.refresh-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.refresh-indicator .spinner-border {
    width: 1rem;
    height: 1rem;
    margin-right: 5px;
}

/* Leaflet Layer Control styling */
.leaflet-control-layers {
    border-radius: 4px;
    background-color: var(--pane-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.leaflet-control-layers-toggle {
    background-size: 20px 20px;
}

.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: var(--text-color);
    font-size: 0.85rem;
}

.leaflet-control-layers label {
    margin-bottom: 4px;
}

[data-theme="dark"] .leaflet-control-layers-expanded {
    background-color: var(--pane-bg);
    color: var(--text-color);
}

[data-theme="dark"] .leaflet-control-layers-expanded label {
    color: var(--text-color);
}

[data-theme="dark"] .leaflet-bar a {
    background-color: var(--pane-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .leaflet-bar a:hover {
    background-color: #444;
}

/* Daily forecast summary styling */
.day-header td {
    vertical-align: middle;
}

.day-header .temp-range {
    border-radius: 4px;
    padding: 8px 6px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.day-header .precip-sum {
    font-weight: bold;
}

[data-theme="dark"] .day-header .temp-range {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Radar source toggle styles */
.radar-source-toggle {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.radar-source-toggle label {
    margin-right: 8px;
}

.radar-source-select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    font-size: 14px;
}

.radar-overlay-toggle {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.radar-overlay-toggle label {
    margin-right: 8px;
}

.radar-overlay-select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--pane-bg);
    color: var(--text-color);
    font-size: 14px;
    max-width: 260px;
}

.radar-overlay-status {
    width: 100%;
    font-size: 0.75rem;
    color: var(--text-color);
    opacity: 0.85;
    margin-top: 4px;
}

.radar-render-toggle {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.radar-render-toggle label {
    margin-right: 8px;
}

.radar-render-select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--pane-bg);
    color: var(--text-color);
    font-size: 14px;
    max-width: 260px;
}

.radar-interp-settings,
.radar-interp-row,
.radar-idw-radius,
.radar-idw-power,
.radar-idw-smoothing,
.radar-idw-minpoints,
.radar-idw-resolution {
    display: none;
}

.dwd-warning-modal-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
}

[data-theme="dark"] .dwd-warning-modal-text {
    background: rgba(255, 255, 255, 0.06);
}

#dwd-warning-modal .modal-body {
    font-size: 0.95rem;
    line-height: 1.4;
}

#dwd-warning-modal-details {
    overflow-wrap: anywhere;
}

#dwd-warning-modal-details .dwd-warning-dl dt {
    font-weight: 600;
    opacity: 0.8;
}

#dwd-warning-modal-details .dwd-warning-dl dd {
    margin-bottom: 0.35rem;
}

#dwd-warning-modal-details .dwd-warning-dl dt,
#dwd-warning-modal-details .dwd-warning-dl dd {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#dwd-warning-modal-details .dwd-warning-extras summary {
    cursor: pointer;
    font-weight: 600;
    opacity: 0.9;
}

#dwd-warning-modal-details .dwd-warning-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#dwd-warning-modal-details .dwd-warning-summary-title {
    font-weight: 700;
}

#dwd-warning-modal-details .dwd-warning-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

#dwd-warning-modal-details .dwd-warning-badge {
    font-weight: 600;
}

/* Add spinner styles */
.spinner {
    position: relative;
}

.spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
    z-index: 9999;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Weather station panel styles for two-station layout */
.weather-station-panel {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease;
    padding: 0.6rem 0.6rem 0.8rem !important; /* increased bottom padding */
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    overflow: visible !important; /* ensure content can grow without clipping */
}

.weather-station-panel:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .weather-station-panel {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-color);
}

[data-theme="dark"] .weather-station-panel:hover {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Station badges */
.weather-station-panel .badge {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.2rem; /* Reduced from 0.3rem */
}

/* Single column weather layout styles */
.single-column-weather {
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* Reduced from default gap */
}

.single-column-weather .weather-temp {
    font-size: 0.7rem;
    font-weight: bold;
}

.single-column-weather .weather-condition {
    font-weight: bold;
    margin-bottom: 0.1rem; /* Reduced from 0.4rem */
    font-size: 1rem;
}

.single-column-weather .weather-parameters {
    display: flex;
    flex-direction: column;
    gap: 0.05rem; /* Further reduced from 0.1rem to 0.05rem */
}

.single-column-weather .parameter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.05rem 0; /* Further reduced from 0.1rem to 0.05rem */
    margin: 0; /* Remove any margin */
    line-height: 1.2; /* Add tighter line height */
    /* Remove border-bottom to eliminate separator lines */
}

[data-theme="dark"] .single-column-weather .parameter-row {
    border-bottom: none;
}

[data-theme="dark"] .single-column-weather .weather-condition {
    color: #e9ecef;
}

.single-column-weather .parameter-row:last-child {
    border-bottom: none;
    margin-bottom: 0; /* Remove any extra margin */
}

.single-column-weather .parameter-row strong {
    color: inherit;
    font-weight: 600;
    font-size: 0.8rem; /* Reduced from 0.9rem */
}

.single-column-weather .parameter-row span {
    font-weight: normal;
    color: inherit;
    font-size: 0.8rem; /* Reduced from 0.9rem */
}

/* Ensure wind warnings still work in the new layout */
.single-column-weather .parameter-row.wind-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
    border-radius: 2px;
    padding: 0.05rem 0.3rem;
    margin: 0;
}

.single-column-weather .parameter-row.wind-warning strong,
.single-column-weather .parameter-row.wind-warning span {
    color: #000000 !important;
}

.single-column-weather .parameter-row.wind-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-radius: 2px;
    padding: 0.05rem 0.3rem;
    margin: 0;
}

.single-column-weather .parameter-row.wind-danger strong,
.single-column-weather .parameter-row.wind-danger span {
    color: #ffffff !important;
}

/* Dark theme support for single-column wind warnings */
[data-theme="dark"] .single-column-weather .parameter-row.wind-warning {
    background-color: #856404 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .single-column-weather .parameter-row.wind-warning strong,
[data-theme="dark"] .single-column-weather .parameter-row.wind-warning span {
    color: #ffffff !important;
}

[data-theme="dark"] .single-column-weather .parameter-row.wind-danger {
    background-color: #721c24 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .single-column-weather .parameter-row.wind-danger strong,
[data-theme="dark"] .single-column-weather .parameter-row.wind-danger span {
    color: #ffffff !important;
}

/* Station name styling */
.weather-station-panel .station-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text-color);
    white-space: nowrap; /* Prevent line breaks in station names */
    overflow: hidden; /* Hide overflow if still too long */
    text-overflow: ellipsis; /* Add ... if text is truncated */
}

[data-theme="dark"] .weather-station-panel .station-name {
    color: var(--dark-text-color);
}

/* Ensure equal height for station panels */
.weather-station-panel.h-100 {
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Ensure both panels take full available height */
    height: 100%; /* Force equal height */
}

/* Weather details spacing in station panels */
.weather-station-panel .weather-details {
    flex: 1;
}

/* Compact weather icon in station panels */
.weather-station-panel .weather-icon {
    font-size: 2.2rem !important;
    margin-bottom: 0.3rem !important;
}

/* Compact weather details in station panels */
.weather-station-panel .weather-details p {
    margin-bottom: 0.15rem !important;
    font-size: 0.85rem;
}

/* Compact temperature display */
.weather-station-panel .temp {
    font-size: 1.3em !important;
    padding: 4px 6px !important;
    margin-bottom: 0.2rem !important;
}

/* Compact observation time */
.weather-station-panel .observation-time {
    margin-top: 0.3rem !important;
    font-size: 0.7rem !important;
}

/* Responsive adjustments for station panels */
@media (max-width: 768px) {
    .weather-station-panel {
        margin-bottom: 1rem;
        padding: 0.4rem !important;
    }
    
    .weather-station-panel .badge {
        font-size: 0.6rem;
    }
    
    .weather-station-panel .station-name {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }
    
    .weather-station-panel .weather-icon {
        font-size: 2rem !important;
    }
    
    .weather-station-panel .temp {
        font-size: 1.2em !important;
    }
}

/* Removed duplicate @keyframes spin - already defined above */

/* Location Management Styles */
.location-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-selector select {
    border-color: #495057;
}

.location-selector select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

[data-theme="dark"] .location-selector select {
    background-color: #343a40;
    border-color: #495057;
    color: #ffffff;
}

[data-theme="dark"] .location-selector select option {
    background-color: #343a40;
    color: #ffffff;
}

/* Location management modal styles */
.modal-content {
    border-radius: 0.5rem;
}

[data-theme="dark"] .modal-content {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-color) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--dark-border-color) !important;
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-color) !important;
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--dark-border-color) !important;
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-color) !important;
}

[data-theme="dark"] .modal-body {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-color) !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Force modal to have solid background in dark mode */
[data-theme="dark"] .modal-dialog {
    background-color: transparent;
}

[data-theme="dark"] .modal {
    --bs-modal-bg: var(--dark-bg-secondary) !important;
    --bs-modal-color: var(--dark-text-color) !important;
    --bs-modal-border-color: var(--dark-border-color) !important;
}

#alerts-modal .alerts-validity {
    color: inherit;
    opacity: 0.75;
}

/* Force modal backdrop to be solid in dark mode */
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Additional modal fixes for dark mode */
[data-theme="dark"] .modal-content {
    background: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

/* Specifically target the location modal in dark mode */
[data-theme="dark"] #location-modal .modal-content {
    background-color: #333 !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}

[data-theme="dark"] #location-modal .modal-header,
[data-theme="dark"] #location-modal .modal-body,
[data-theme="dark"] #location-modal .modal-footer {
    background-color: #333 !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* Dark mode form controls in modal */
[data-theme="dark"] .modal .form-control {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-color) !important;
}

[data-theme="dark"] .modal .form-control:focus {
    background-color: var(--dark-bg-secondary) !important;
    border-color: #80bdff !important;
    color: var(--dark-text-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

[data-theme="dark"] .modal .form-select {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-color) !important;
}

/* Dark mode buttons in modal */
[data-theme="dark"] .modal .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal .btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal .btn-outline-primary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-color: transparent !important;
}

[data-theme="dark"] .modal .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}

/* Location search suggestions */
#location-suggestions {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    max-height: 200px;
    overflow-y: auto;
}

#location-suggestions .list-group-item {
    border: none;
    border-bottom: 1px solid #dee2e6;
    cursor: pointer;
    font-size: 0.9rem;
}

#location-suggestions .list-group-item:last-child {
    border-bottom: none;
}

#location-suggestions .list-group-item:hover {
    background-color: #f8f9fa;
}

#location-suggestions .list-group-item.list-group-item-secondary {
    background-color: #e2e3e5;
    font-style: italic;
}

[data-theme="dark"] #location-suggestions {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-color);
}

[data-theme="dark"] #location-suggestions .list-group-item {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-color);
    border-bottom-color: var(--dark-border-color);
}

[data-theme="dark"] #location-suggestions .list-group-item:hover {
    background-color: #495057;
}

[data-theme="dark"] #location-suggestions .list-group-item.list-group-item-secondary {
    background-color: #495057;
}

/* Search results styling */
#search-results .list-group-item {
    transition: all 0.2s ease;
}

#search-results .list-group-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] #search-results .list-group-item {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-color);
    color: var(--dark-text-color);
}

[data-theme="dark"] #search-results .list-group-item:hover {
    background-color: #495057;
}

/* Locations list in modal */
#locations-list .list-group-item {
    transition: all 0.2s ease;
}

#locations-list .list-group-item.list-group-item-primary {
    border-color: #b6d7ff;
}

[data-theme="dark"] #locations-list .list-group-item {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-color);
    color: var(--dark-text-color);
}

[data-theme="dark"] #locations-list .list-group-item.list-group-item-primary {
    background-color: #1a4d80;
    border-color: #2d6aa0;
}

/* Location selector buttons */
.location-selector .btn {
    border-color: #6c757d;
}

.location-selector .btn:hover {
    border-color: #495057;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Responsive location selector */
@media (max-width: 768px) {
    .location-selector {
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
    }
    
    .location-selector select {
        min-width: 150px;
        width: 100%;
    }
    
    .d-flex.align-items-center.gap-3 {
        flex-direction: column;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    
    .theme-toggle-wrapper {
        align-self: center;
    }
}

/* Loading state for search button */
.btn .fa-spinner {
    animation: spin 1s linear infinite;
}

/* Removed duplicate @keyframes spin - already defined above */

/* Distance circles label improvements */
.leaflet-div-icon .distance-label div {
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Center location marker improvements */
.leaflet-div-icon.center-location-marker {
    background: none !important;
    border: none !important;
}

/* Alert improvements for location messages */
.alert {
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.alert .btn-close {
    font-size: 0.8rem;
}

/* Input focus improvements */
#location-search-input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

[data-theme="dark"] #location-search-input {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-color);
    color: var(--dark-text-color);
}

[data-theme="dark"] #location-search-input:focus {
    background-color: var(--dark-bg-secondary);
    border-color: #80bdff;
    color: var(--dark-text-color);
}

/* Removed conflicting/redundant weather station layout rules - already defined above */

/* Info Tooltip Styles */
.info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    margin-left: 8px;
    font-size: 0.9em;
    color: #6c757d;
    transition: color 0.2s ease;
    user-select: none;
}

/* Ensure pane headers with tooltips are above other content */
.pane h3 {
    position: relative;
    z-index: 1000;
}

/* Fix for specific containers that hide tooltips */
#simplified-forecast {
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

/* Color Legend Panel Styles */
.color-legend-panel {
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.color-legend-panel.collapsed .legend-content {
    display: none;
}

.legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bs-secondary-bg);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.legend-header:hover {
    background: var(--bs-tertiary-bg);
}

.legend-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-emphasis-color);
}

.legend-toggle-icon {
    color: var(--bs-secondary-color);
    transition: transform 0.3s ease;
}

.legend-content {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.legend-section h5 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--bs-emphasis-color);
    text-transform: none;
    letter-spacing: 0.5px;
}

.simplified-weather-icon {
    font-size: 16px;
    margin-left: 6px;
    vertical-align: middle;
}
.simplified-weather-icons .simplified-weather-icon + .simplified-weather-icon {
    margin-left: 4px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.legend-color {
    width: 20px;
    height: 16px;
    border-radius: 3px;
    margin-right: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.legend-none {
    background-color: transparent !important;
    border-color: var(--bs-border-color, rgba(0,0,0,0.3)) !important;
}

.legend-text {
    color: var(--bs-body-color);
    line-height: 1.3;
}

/* Dark theme adjustments for legend */
[data-theme="dark"] .color-legend-panel {
    background: var(--bs-dark);
    border-color: var(--bs-border-color-dark);
}

[data-theme="dark"] .legend-header {
    background-color: #666666; /* Darken header background for AA contrast */
}

[data-theme="dark"] .legend-header:hover {
    background: var(--bs-dark-border-subtle);
}

/* Improve contrast of legend headings and text in dark mode */
[data-theme="dark"] .legend-section h5,
[data-theme="dark"] .legend-text,
[data-theme="dark"] .legend-title {
    color: #cfd6dc !important; /* darker light text for improved contrast */
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

/* Ensure swatches are visible on dark backgrounds */
[data-theme="dark"] .legend-color {
    border-color: rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] .legend-none {
    border-color: rgba(255,255,255,0.3) !important;
}

/* Responsive design for legend panel */
@media (max-width: 768px) {
    .legend-content {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 12px;
    }
    
    .legend-section h5 {
        font-size: 0.8rem;
    }
    
    .legend-item {
        font-size: 0.75rem;
    }
    
    .legend-color {
        width: 18px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .legend-content {
        padding: 10px;
    }
    
    .legend-header {
        padding: 10px 12px;
    }
    
    .legend-title {
        font-size: 0.85rem;
    }
}

.simplified-forecast-table {
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

/* Fix for Highcharts container */
#weather-chart {
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.highcharts-container {
    overflow: visible !important;
}

/* Ensure panes containing problematic elements have proper stacking */
.pane:has(#simplified-forecast),
.pane:has(#weather-chart) {
    position: relative;
    z-index: auto;
    overflow: visible !important;
}

/* Alternative targeting for better browser compatibility */
.col-md-6:nth-child(1) .pane:nth-child(2),
.col-md-6:nth-child(1) .pane:nth-child(3) {
    position: relative;
    z-index: auto;
    overflow: visible !important;
}

/* Override the general pane overflow rule for specific problematic panes */
.col-md-6 .pane:nth-child(2),
.col-md-6 .pane:nth-child(3) {
    overflow: visible !important;
}

.info-tooltip:hover {
    color: #0d6efd;
}

[data-theme="dark"] .info-tooltip {
    color: #adb5bd;
}

[data-theme="dark"] .info-tooltip:hover {
    color: #6ea8fe;
}

/* Custom HTML tooltip styles */
.custom-tooltip {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    min-width: 280px;
    max-width: 400px;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: normal;
    text-align: left;
    pointer-events: auto;
}

.custom-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Tooltip arrow */
.custom-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

.custom-tooltip.tooltip-bottom::after {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

/* Radar color legend styles for tooltips */
.custom-tooltip .radar-color-legend {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.custom-tooltip .color-legend-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: inherit;
}

.custom-tooltip .color-legend-bar {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.custom-tooltip .color-segment {
    height: 20px;
    flex: 1;
    min-width: 20px;
}

.custom-tooltip .color-legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-top: 4px;
    opacity: 0.9;
    color: inherit;
}

.custom-tooltip .color-legend-labels span {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
}

.custom-tooltip .color-legend-labels span:first-child {
    text-align: left;
}

.custom-tooltip .color-legend-labels span:last-child {
    text-align: right;
}

/* Legacy tooltip content (keep for compatibility) */
.info-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
    min-width: 280px;
    max-width: 400px;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: normal;
    text-align: left;
    pointer-events: none; /* Prevent tooltip from interfering with mouse events */
    display: none; /* Hide legacy tooltips when custom tooltips are active */
}

/* Tooltip arrow */
.info-tooltip::after {
    content: "";
    position: absolute;
    bottom: 142%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none; /* Prevent arrow from interfering with mouse events */
}

/* Show tooltip on hover */
.info-tooltip:hover::before,
.info-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Responsive positioning for smaller screens */
@media (max-width: 768px) {
    .info-tooltip::before {
        min-width: 250px;
        max-width: 300px;
        font-size: 0.8rem;
    }
}

/* Smart positioning for tooltips that would go off-screen */
.info-tooltip.tooltip-bottom::before {
    bottom: auto;
    top: 150%;
}

.info-tooltip.tooltip-bottom::after {
    bottom: auto;
    top: 142%;
    border-top-color: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

/* Dark theme tooltip styling */
[data-theme="dark"] .info-tooltip::before {
    background-color: rgba(255, 255, 255, 0.95);
    color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .info-tooltip::after {
    border-top-color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .info-tooltip.tooltip-bottom::after {
    border-top-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.95);
}

/* Dark theme custom tooltip styling */
[data-theme="dark"] .custom-tooltip {
    background-color: rgba(255, 255, 255, 0.95);
    color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .custom-tooltip::after {
    border-bottom-color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .custom-tooltip.tooltip-bottom::after {
    border-bottom-color: transparent;
    border-top-color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .custom-tooltip .radar-color-legend {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .custom-tooltip .color-legend-title,
[data-theme="dark"] .custom-tooltip .color-legend-labels {
    color: inherit;
}

/* Weather Alerts Button Styles - High Specificity to Override Bootstrap */
.alerts-btn.btn.btn-outline-warning {
    position: relative !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.5rem !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

/* No alerts - Green state */
.alerts-btn.btn.btn-outline-warning.severity-none {
    border: 1px solid #28a745 !important;
    color: #28a745 !important;
}

.alerts-btn.btn.btn-outline-warning.severity-none:hover {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border-color: #28a745 !important;
    color: #28a745 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Minor warnings - Yellow state */
.alerts-btn.btn.btn-outline-warning.severity-minor {
    border: 1px solid #ffc107 !important;
    color: #ffc107 !important;
    animation: pulse-alert-yellow 2s infinite;
}

.alerts-btn.btn.btn-outline-warning.severity-minor:hover {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Moderate warnings - Orange state */
.alerts-btn.btn.btn-outline-warning.severity-moderate {
    border: 1px solid #fd7e14 !important;
    color: #fd7e14 !important;
    animation: pulse-alert-orange 2s infinite;
}

.alerts-btn.btn.btn-outline-warning.severity-moderate:hover {
    background-color: rgba(253, 126, 20, 0.1) !important;
    border-color: #fd7e14 !important;
    color: #fd7e14 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Severe/Extreme warnings - Red state */
.alerts-btn.btn.btn-outline-warning.severity-severe {
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    animation: pulse-alert-red 2s infinite;
}

.alerts-btn.btn.btn-outline-warning.severity-severe:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Legacy support for has-alerts class */
.alerts-btn.btn.btn-outline-warning.has-alerts {
    background-color: transparent !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
    animation: pulse-alert-red 2s infinite;
}

.alerts-btn.btn.btn-outline-warning.has-alerts:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

/* Pulse animations for different severity levels */
@keyframes pulse-alert-yellow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

@keyframes pulse-alert-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(253, 126, 20, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(253, 126, 20, 0);
    }
}

@keyframes pulse-alert-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Legacy pulse animation for backwards compatibility */
@keyframes pulse-alert {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Alerts tooltip styles */
.alerts-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    max-width: min(90vw, 1000px);
    min-width: 350px;
    width: auto;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    margin-bottom: 10px;
    pointer-events: auto;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-height: 500px;
    overflow-y: auto;
}

.alerts-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Keep tooltip visible when hovering over the tooltip itself */
.alerts-tooltip:hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Enhanced scrollbar styling for better visibility */
.alerts-tooltip::-webkit-scrollbar {
    width: 10px;
}

.alerts-tooltip::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    margin: 4px 0;
}

.alerts-tooltip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.alerts-tooltip::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Tooltip arrow */
.alerts-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--tooltip-arrow-x, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.95);
}

/* Arrow pointing down (when tooltip is positioned below button) */
.alerts-tooltip-below::after {
    top: auto;
    bottom: 100%;
    border: 6px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.95);
    border-top-color: transparent;
}

/* Alerts tooltip with multiple alerts */
.alerts-tooltip.multi-line {
    white-space: pre-line;
    text-align: left;
}

/* Dark theme styles - High Specificity */
/* No alerts - Green state (dark theme) */
[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-none {
    color: #28a745 !important;
    border-color: #28a745 !important;
}

[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-none:hover {
    background-color: rgba(40, 167, 69, 0.1) !important;
    color: #28a745 !important;
    border-color: #28a745 !important;
}

/* Minor warnings - Yellow state (dark theme) */
[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-minor {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-minor:hover {
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}

/* Moderate warnings - Orange state (dark theme) */
[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-moderate {
    color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}

[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-moderate:hover {
    background-color: rgba(253, 126, 20, 0.1) !important;
    color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}

/* Severe/Extreme warnings - Red state (dark theme) */
[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-severe {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.severity-severe:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* Legacy support for has-alerts class (dark theme) */
[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.has-alerts {
    background-color: transparent !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

[data-theme="dark"] .alerts-btn.btn.btn-outline-warning.has-alerts:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* DWD external link styling */
.dwd-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    text-decoration: none;
    padding: 2px 10px;  /* Reduced from 4px to 2px top/bottom to match button */
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.75rem;  /* Match button font-size (0.75rem) */
    vertical-align: middle;
}

.dwd-link:hover {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    text-decoration: none;
}

.dwd-logo {
    height: 20px;  /* Match button height exactly */
    width: auto;
    display: inline-block;
}

[data-theme="dark"] .dwd-logo {
    background-color: white;
    border-radius: 2px;
    padding: 1px;
}

.dwd-link-text {
    font-weight: 500;
}

/* Dark mode adjustments */
[data-theme="dark"] .dwd-link:hover {
    background-color: rgba(13, 110, 253, 0.2);
}

[data-theme="dark"] .alerts-tooltip {
    background-color: rgba(255, 255, 255, 0.95);
    color: #000;
}

[data-theme="dark"] .alerts-tooltip::after {
    border-top-color: rgba(255, 255, 255, 0.95);
}

/* Dark theme scrollbar styles */
[data-theme="dark"] .alerts-tooltip::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .alerts-tooltip::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .alerts-tooltip::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Radar Color Legend Styles */
.radar-color-legend {
    margin-top: 10px;
    padding: 8px 0;
}

.color-legend-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #000;
}

.color-legend-bar {
    display: flex;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.color-segment {
    flex: 1;
    height: 100%;
}

.color-legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #666;
    padding: 0 2px;
}

.color-legend-labels span {
    flex: 1;
    text-align: center;
    font-weight: 500;
}

/* Dark theme styles for color legend */
[data-theme="dark"] .color-legend-title {
    color: #fff;
}

[data-theme="dark"] .color-legend-labels {
    color: #ccc;
}

[data-theme="dark"] .color-legend-bar {
    border-color: #555;
}

/* Badge styles for alert count */
#alerts-count {
    font-size: 0.7rem;
    padding: 0.2em 0.4em;
    border-radius: 50%;
    min-width: 1.2em;
    line-height: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alerts-btn {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
    
    .alerts-btn .fa-exclamation-triangle {
        margin-right: 0.2rem;
    }
    
    .alerts-tooltip {
        max-width: 350px;
        min-width: 250px;
        font-size: 0.8rem;
        max-height: 250px;
    }
}

/* ===== CONSOLIDATED INLINE STYLES FROM INDEX.HTML ===== */

/* Radar Container Styles */
.radar-container {
    position: relative;
    height: 680px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-color);
}

#radar-map {
    width: 100%;
    height: 100%;
    position: relative;
}

.leaflet-container {
    background: var(--bg-color) !important;
}

/* Login Page Styles */
#login-page {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
        url('stadium-lightning-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

#login-page .card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#login-page .card-body {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

#login-page .form-control {
    border-radius: 10px;
    border: 2px solid #e9ecef;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

#login-page .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

#login-page .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#login-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Login Page Title Styles */
.login-page-title {
    color: #2c3e50;
    font-weight: bold;
}

.login-page-subtitle {
    font-weight: 500;
}

/* Dropdown Z-Index Fixes */
.dropdown-menu {
    z-index: 9999 !important;
}

#user-controls .dropdown {
    z-index: 9999;
}

header {
    z-index: 1000;
    position: relative;
}

.user-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.admin-location-row {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr auto;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.admin-location-row input {
    font-size: 0.9rem;
}

.admin-location-row .btn {
    white-space: nowrap;
}

.admin-user-card .card-body {
    padding: 12px 14px;
}

.admin-user-info {
    margin-bottom: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.admin-user-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.radar-container {
    z-index: 1;
}

.dropdown-toggle:focus {
    box-shadow: none;
}

.dropdown-menu.show {
    z-index: 9999 !important;
}

.pane h3 {
    z-index: 10 !important;
}

.dropdown-menu {
    position: absolute !important;
}

/* Location Dropdown Styles */
.location-dropdown {
    min-width: 200px;
}

/* Location Suggestions Styles */
.location-suggestions {
    display: none;
    position: absolute;
    z-index: 1050;
    max-width: 100%;
}

/* Alerts Count Badge */
.alerts-count-badge {
    display: none;
}

/* Highcharts Container Theming */
#weather-chart {
    background-color: var(--pane-bg);
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

[data-theme="dark"] #weather-chart .highcharts-background {
    fill: #333 !important;
}

[data-theme="light"] #weather-chart .highcharts-background {
    fill: #ffffff !important;
}

#weather-chart .highcharts-container {
    width: 100% !important;
    height: 160px !important;
    overflow: hidden;
}

#weather-chart svg {
    max-width: 100% !important;
    height: 160px !important;
}

#weather-chart {
    padding-bottom: 2px;
}

#weather-chart .highcharts-xaxis-labels text {
    fill: var(--text-color) !important;
    font-size: 8px !important;
}

#weather-chart .highcharts-xaxis-labels span,
#weather-chart .highcharts-xaxis-labels tspan {
    color: var(--text-color) !important;
}

#weather-chart .highcharts-yaxis-labels text {
    fill: var(--text-color) !important;
    font-size: 8px !important;
}

/* Leaflet Control Theming */
.leaflet-control-container {
    font-family: 'Roboto', sans-serif;
}

.leaflet-control-layers {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.leaflet-control-layers-toggle {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
}

.leaflet-control-zoom a {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.leaflet-control-zoom a:hover {
    background-color: var(--bg-secondary);
}

.leaflet-popup-content-wrapper {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.leaflet-popup-tip {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}

/* Navigation Link Styles */
.login-link, .logout-link {
    color: #007bff !important;
    font-weight: bold;
}

/* Table Column Styles */
.station-column {
    width: 150px;
}

/* JAVASCRIPT INLINE STYLES CONVERTED TO CSS CLASSES */

/* Refresh indicator styles */
.refresh-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    z-index: 9999;
    font-size: 0.8rem;
}

/* Temperature display styles */
.temp-display {
    color: white;
    padding: 12px;
    border-radius: 5px;
    display: inline-block;
    font-size: 1.6em;
    font-weight: bold;
}

/* Weather description styles */
.weather-description {
    font-size: 1.1em;
}

/* Lightning indicator styles */
.lightning-indicator {
    display: inline-block;
    vertical-align: middle;
}

/* Temperature range gradient styles */
.temp-range-gradient {
    color: white;
}

/* Day content toggle styles */
.day-content-hidden {
    display: none;
}

.day-content-visible {
    display: block;
}

/* Hourly temperature cell styles */
.hourly-temp-cell {
    color: white;
}

/* Charts tooltip styles */
.chart-tooltip {
    font-size: 0.9em;
    background: #ffffff; /* Light mode: white tooltip background */
    color: #333333;       /* Light mode: dark text for contrast */
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.chart-tooltip-time {
    margin: 4px 0;
    color: inherit;
}

/* Dark mode tooltip override */
[data-theme="dark"] .chart-tooltip {
    background: rgba(51, 51, 51, 0.92);
    color: #ffffff;
}
[data-theme="dark"] .chart-tooltip-time {
    color: inherit;
}

.chart-tooltip-icon {
    font-size: 1.1em;
    margin-right: 4px;
    display: inline-block;
}
.chart-tooltip-icon-img {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.chart-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
}

.table-weather-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
.table-weather-icon.wi {
    font-size: 18px;
    line-height: 20px;
}

.chart-tooltip-temp {
    color: #FF0000;
}

.chart-tooltip-precip {
    color: #1E90FF;
}

/* Radar distance label styles */
.distance-label-content {
    font-weight: bold;
    font-size: 9px;
    padding: 1px 3px;
    background-color: rgba(255, 255, 255, 0.85); /* Light mode default */
    border-radius: 3px;
    border: 1px solid; /* Border color set inline */
    /* Text color set inline */
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-out;
}

[data-theme="dark"] .distance-label-content {
    background-color: rgba(0, 0, 0, 0.6); /* Dark mode override */
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Center location marker styles */
.center-location-marker-content {
    background-color: #ff4444;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* RainViewer map container styles */
.rainviewer-map-container {
    height: 400px;
    width: 100%;
    margin-bottom: 10px;
}

/* Location suggestions styles */
.location-suggestions-hidden {
    display: none;
}

.location-suggestions-visible {
    display: block;
}

/* Alerts count badge styles */
.alerts-count-hidden {
    display: none;
}

.alerts-count-visible {
    display: block;
}

/* Diagnostic info styles */
.diagnostic-info-hidden {
    display: none;
}

.diagnostic-info-visible {
    display: block;
}

/* Alerts tooltip styles */
.alerts-tooltip-hidden {
    display: none;
}

.alerts-tooltip-visible {
    display: block;
}

/* Alerts button styles */
.alerts-button-hidden {
    display: none;
}

.alerts-button-visible {
    display: block;
}

/* Forecast content styles */
.forecast-content-hidden {
    display: none;
}

.forecast-content-visible {
    display: block;
}

/* Radar canvas dynamic styles */
.leaflet-dwd-radar-canvas {
    opacity: var(--radar-opacity, 0.8);
    z-index: var(--radar-z-index, 200);
}

/* Toast Notification Styles */
.toast {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    min-width: 300px;
    max-width: 400px;
}

.toast-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.toast.toast-success .toast-header {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.toast.toast-error .toast-header {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.toast.toast-warning .toast-header {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.toast.toast-info .toast-header {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* CSS Classes for Inline Styles */

/* Location dropdown minimum width */
.location-dropdown-min-width {
    min-width: 200px;
}

/* Login page title styling */
.login-title {
    color: #2c3e50;
    font-weight: bold;
}

/* Login page subtitle styling */
.login-subtitle {
    font-weight: 500;
}

/* Alerts count badge hidden by default */
.alerts-count-badge {
    display: none;
}

/* Location suggestions dropdown */
.location-suggestions-dropdown {
    display: none;
    position: absolute;
    z-index: 1050;
    max-width: 100%;
}

/* Toast container positioning */
.toast-container-fixed {
    z-index: 11000;
}

/* Lightning indicator with dynamic color */
.lightning-indicator-dynamic {
    display: inline-block;
    transition: color 0.2s ease;
}

/* Temperature range with gradient background */
.temp-range-gradient-bg {
    background-image: none;
    background-color: transparent;
}

/* Hourly temperature cell with background color */
.hourly-temp-cell-bg {
    background-color: transparent;
}

/* Temperature display with background color */
.temp-display-bg {
    /* Default background color to prevent white text on transparent background */
    background-color: #666666;
    /* Background color will be set dynamically via JavaScript */
}

[data-theme="dark"] .single-column-weather .parameter-row.wind-yellow {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border-radius: 2px;
}
[data-theme="dark"] .single-column-weather .parameter-row.wind-orange {
    background-color: #ffc000 !important;
    color: #000000 !important;
    border-radius: 2px;
}
[data-theme="dark"] .single-column-weather .parameter-row.wind-red {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    border-radius: 2px;
}

.simplified-forecast-table td.no-warning-green {
    background-color: rgb(146, 208, 80) !important; /* Green background for no warnings */
    color: #000000 !important; /* Black text for contrast */
}