/* Retro UI Theme */
.theme-retro {
    background-color: #121212;
    color: #cccccc; /* Light gray */
    font-family: 'Courier New', monospace;
}

.theme-retro .container {
    border: 1px solid #cccccc;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(204, 204, 204, 0.3);
}

.theme-retro .header {
    border-bottom: 1px solid #cccccc;
}

.theme-retro #theme-switch {
    background-color: #222222;
    color: #cccccc;
    border: 1px solid #cccccc;
    font-family: 'Courier New', monospace;
}

.theme-retro #theme-switch:hover {
    background-color: #cccccc;
    color: #121212;
}

.theme-retro #refresh-button {
    background-color: #222222;
    color: #cccccc;
    border: 1px solid #cccccc;
    font-family: 'Courier New', monospace;
}

.theme-retro #refresh-button:hover:not(:disabled) {
    background-color: #cccccc;
    color: #121212;
}

.theme-retro #refresh-button:disabled {
    color: #666666; /* Dim disabled text */
    border-color: #444444; /* Dim disabled border */
    opacity: 0.6;
}

.theme-retro .current-weather {
    background-color: #222222;
    border: 1px solid #cccccc;
}

.theme-retro .hourly-forecast {
    background-color: #222222;
    border: 1px solid #cccccc;
}

/* Add explicit background for date header in retro theme */
.theme-retro .date-header {
    background-color: #222222; /* Match the hourly-forecast background color */
    border-bottom: 1px solid #cccccc;
}

/* Add explicit background for header row in retro theme */
.theme-retro .hourly-header-row {
    background-color: #222222; /* Match the hourly-forecast background color */
}

.theme-retro .hourly-item {
    border: 1px solid #cccccc;
}

.theme-retro .hourly-item:nth-child(even) {
    background-color: #1A1A1A;
}

.theme-retro .hourly-item:nth-child(odd) {
    background-color: #252525; /* Slightly different shade for better contrast with gray text */
}

/* Terminal-style hourly forecast */
.theme-retro .hourly-item {
    font-family: 'Courier New', monospace;
    padding: 5px 10px;
}

.theme-retro .footer {
    border-top: 1px solid #cccccc;
}

/* Custom scrollbar for Retro theme */
.theme-retro .hourly-container::-webkit-scrollbar {
    width: 8px;
}

.theme-retro .hourly-container::-webkit-scrollbar-track {
    background: #121212;
}

.theme-retro .hourly-container::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 0;
}

/* Weather icons for retro theme */
.theme-retro .weather-icon {
    font-family: monospace;
    min-height: 1.5em; /* Ensure space even without text */
    line-height: 1.5em;
}

/* Loading animation for retro theme */
.theme-retro .loading-indicator::after {
    content: "";
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
    100% { content: ""; }
}