/* css/components/weather.css */

/*
|--------------------------------------------------------------------------
| Weather Component Variables
|--------------------------------------------------------------------------
|
| These variables are specific to the weather components.
| They are defined here to ensure local consistency and easy adjustments
| without impacting global styles in base.css, unless an exact match exists.
|
*/
:root {
    /* Background Colors */
    --weather-bg-card-dark: #294B6F; /* Original: weather-card background */
    --weather-bg-card-selected: #223C59; /* Original: selected-weather-card & detail-card background */
    --weather-bg-chart-area: rgba(0, 0, 0, 0.1); /* Original: hourly-chart-container background */
    --weather-bg-long-phrase: rgba(0, 0, 0, 0.85); /* Original: weather-long-phrase background */
    --weather-bg-card-hover: #5A768D; /* Original: weather-card:hover background */

    /* Text Colors */
    --weather-text-light-gray: #e0e0e0; /* Original: weather-display, detail-card text */
    --weather-text-medium-gray: #ccc; /* Original: detail-card labels, date, summary phrase */
    --weather-text-error: #ff6b6b; /* Original: error message color */

    /* Borders & Dividers */
    --weather-border-detail-separator: rgba(255, 255, 255, 0.1); /* Original: detail-card separators */
    --weather-border-detail-subtle: rgba(255, 255, 255, 0.05); /* Original: detail-row separator */
}


/*
|--------------------------------------------------------------------------
| Weather Widget - Main container and general info
|--------------------------------------------------------------------------
*/
.weather-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--spacing-unit);
}

.weather-widget img {
    width: 3.5em;
    height: 3.5em;
    object-fit: cover;
}

.weather-info h3 {
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 0.3em;
}

.weather-info p {
    font-size: 0.9em;
    color: var(--text-dark);
}

/*
|--------------------------------------------------------------------------
| Weather Display - Main container for forecast tabs and details
|--------------------------------------------------------------------------
*/
#weather-display {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: rgba(0, 0, 0, 0); /* Clear background */
    color: var(--weather-text-light-gray);
    border-radius: var(--card-border-radius);
    padding: 2px;
    margin: 2px 0;
    text-align: center;
    font-size: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: fit-content;
}

/*
|--------------------------------------------------------------------------
| Weather Cards Container - Horizontal scrolling for daily forecast tabs
|--------------------------------------------------------------------------
*/
.weather-cards-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    flex-shrink: 1;
    flex-grow: 1;
    margin-bottom: -2px; /* Separates from detail cards */
}

.weather-cards-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/*
|--------------------------------------------------------------------------
| Individual Weather Card (Tab) - Styles for each daily forecast tab
|--------------------------------------------------------------------------
*/
.weather-card {
    flex: 1 1 auto;
    width: 6.1em;
    margin: 0;
    padding: 0.35em;
    box-sizing: border-box;
    background-color: var(--weather-bg-card-dark);
    border-radius: 8px;
    border-bottom-left-radius: 0; /* Flat bottom for tab effect */
    border-bottom-right-radius: 0; /* Flat bottom for tab effect */
    border-bottom: none; /* Remove bottom border */
    text-align: center;
    color: var(--white-text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Wrapper for weather icons within a card */
.weather-card .weather-icons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.1em 0;
}

/* Adjustments for content inside the card */
.weather-card .weather-icon {
    width: 2.6em;
    height: 2.6em;
    margin: 0;
}

/* Wrapper for text content to manage spacing */
.weather-card .weather-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 0.15em;
}

/* Spacing between icons when both are visible */
.weather-card.selected-weather-card .weather-icons-wrapper .night-icon {
    margin-left: 0.2em;
}

/* Styles for SELECTED small card (tab) */
.weather-card.selected-weather-card {
    width: 7.475em;
    background-color: var(--weather-bg-card-selected);
    border-color: var(--weather-bg-card-selected); /* Match background color */
    z-index: 2; /* Bring selected tab to front */
}

.weather-card.selected-weather-card:hover {
    background-color: var(--weather-bg-card-selected);
}

.weather-card .weather-day {
    font-size: 0.8em;
    font-weight: bold;
}

/* Ensure it's hidden if it somehow still renders */
.weather-card .weather-temp-label {
    display: none;
}

/* Style for current and max temperatures */
.weather-card .weather-temp {
    margin-bottom: 0.025em;
}

.weather-card.current-weather-card .weather-temp .temp-current {
    font-size: 1.575em;
    font-weight: bold;
    color: var(--accent-blue);
}

.weather-card.current-weather-card .weather-feels-like {
    font-size: 0.525em;
    color: var(--white-text);
    margin-top: -0.025em;
}

/* Specific font size adjustments for forecast cards */
.weather-card:not(.current-weather-card) .weather-temp .temp-max {
    font-size: 1.05em;
    font-weight: bold;
    color: var(--accent-blue);
}

.weather-card:not(.current-weather-card) .weather-temp-min {
    font-size: 1.05em;
    font-weight: bold;
    color: var(--input-bg); /* Matches #add8e6 */
    margin-top: -0.025em;
}

.weather-card p.error {
    color: var(--weather-text-error);
    font-weight: bold;
}

/*
|--------------------------------------------------------------------------
| Weather Long Phrase (Tooltip) - Details appearing on card hover
|--------------------------------------------------------------------------
*/
.weather-long-phrase {
    display: none; /* Hidden by default in horizontal mode */
    font-size: 0.675em;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    padding: 0.45em;
    background-color: var(--weather-bg-long-phrase);
    color: var(--white-text);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 150%;
    min-width: 200px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Show long phrase and card background on hover in horizontal mode */
.weather-card:hover {
    background-color: var(--weather-bg-card-hover);
    opacity: 90; /* This opacity might be unintended if only for background */
    visibility: visible;
}

.weather-card:hover .weather-long-phrase {
    display: block; /* Override initial display: none for hover */
    opacity: 1;
    visibility: visible;
}

/*
|--------------------------------------------------------------------------
| Weather Detail Cards Container - Holds the full detail view for selected day
|--------------------------------------------------------------------------
*/
.weather-detail-cards-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Individual Weather Detail Card - Full weather details for a specific day
|--------------------------------------------------------------------------
*/
.weather-detail-card {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 15px 20px;
    background-color: var(--weather-bg-card-selected);
    height: 320px;
    color: var(--weather-text-light-gray);
    border-radius: 0 0px var(--card-border-radius) var(--card-border-radius);
    border: 1px solid var(--weather-bg-card-selected); /* Match background for seamless look */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    width: 100%;
    box-sizing: border-box;
}

.weather-detail-card.current-weather-card-active {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--card-border-radius);
    border-bottom-right-radius: var(--card-border-radius);
}

/* Styling for left half of detail card (Current Day) */
.detail-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    margin-right: 20px;
    border-right: 1px solid var(--weather-border-detail-separator);
    padding-right: 20px;
}

.detail-card-left .current-time {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.detail-card-left .detail-icon-temp {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.detail-card-left .detail-weather-icon {
    width: 4em;
    height: 4em;
    margin-right: 10px;
}

.detail-card-left .detail-temp {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--accent-blue);
}

.detail-card-left .detail-description {
    font-size: 1.1em;
    text-align: center;
    margin-top: 0px;
    width: 80%;
}

/* Styling for right half of detail card (Current Day) */
.detail-card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    margin-top: 20px;
}

.detail-card-right .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--weather-border-detail-subtle);
}

.detail-card-right .detail-row:last-child {
    border-bottom: none;
}

.detail-card-right .detail-label {
    font-weight: bold;
    color: var(--weather-text-medium-gray);
    margin-right: 10px;
}

.detail-card-right .detail-value {
    color: var(--weather-text-light-gray);
}

/*
|--------------------------------------------------------------------------
| Forecast Detail Cards - Layout for detailed forecast view
|--------------------------------------------------------------------------
*/
.weather-detail-card.forecast-detail-card {
    flex-direction: column;
}

.weather-detail-card .detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--weather-border-detail-separator);
}

.weather-detail-card .detail-day-full {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--accent-blue);
}

.weather-detail-card .detail-date-long {
    font-size: 0.9em;
    color: var(--weather-text-medium-gray);
}

.weather-detail-card .detail-card-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.weather-detail-card .detail-left-summary {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid var(--weather-border-detail-separator);
}

.weather-detail-card .detail-left-summary .detail-weather-icon {
    width: 4.5em;
    height: 4.5em;
    margin-bottom: 5px;
}

.weather-detail-card .detail-left-summary .detail-temp-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.weather-detail-card .detail-left-summary .detail-temp-max {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--accent-blue);
}

.weather-detail-card .detail-left-summary .detail-temp-min {
    font-size: 1.1em;
    color: var(--input-bg); /* Matches #add8e6 */
}

.weather-detail-card .detail-left-summary .detail-summary-phrase {
    font-size: 0.9em;
    text-align: center;
    color: var(--weather-text-medium-gray);
}

/*
|--------------------------------------------------------------------------
| Hourly Chart Container - Styles for Chart.js integration
|--------------------------------------------------------------------------
*/
.detail-hourly-chart-container {
    flex-grow: 1;
    position: relative;
    height: 300px;
    background-color: var(--weather-bg-chart-area);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0;
}

/* Hourly Icons Top & Bottom - For weather icons above/below the chart */
.hourly-icons-top,
.hourly-icons-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 30px;
    position: relative;
    z-index: 2;
}

.hourly-icons-top .icon-wrapper,
.hourly-icons-bottom .icon-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7em;
    color: var(--weather-text-medium-gray); /* Used white text on dark background here. Changed to medium gray. */
    white-space: nowrap;
}

.hourly-icons-top .icon-wrapper {
    top: 0;
}

.hourly-icons-bottom .icon-wrapper {
    bottom: 0;
}

.hourly-icons-top img,
.hourly-icons-bottom img {
    width: 25px;
    height: 25px;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
    margin-bottom: 2px;
}

/* Canvas Wrapper for Chart.js */
.hourly-chart-canvas-wrapper {
    flex-grow: 1;
    position: relative;
    height: 100px;
    margin: 0 10px;
}

.hourly-chart-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.no-hourly-data {
    text-align: center;
    padding: 20px;
    color: var(--weather-text-medium-gray); /* Used white text on dark background here. Changed to medium gray. */
    font-style: italic;
}

.chart-overlay-info {
    position: absolute;
    font-size: 0.65em;
    color: var(--white-text);
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
    z-index: 3;
    transform: translateX(-50%);
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Responsive Adjustments - For screens 576px and below
|--------------------------------------------------------------------------
*/
@media (max-width: 576px) {
    /* Main container for forecast cards */
    .weather-cards-container {
        flex-direction: column; /* Stack tabs vertically */
        overflow-x: hidden; /* No horizontal scroll */
        white-space: normal; /* Allow text to wrap */
        padding-bottom: 0; /* No padding at bottom */
        gap: 8px; /* Space between vertically stacked cards */
        margin-bottom: var(--spacing-unit); /* Add some margin below the entire list of tabs */
    }

    /* Individual Weather Card (Tab) in vertical formation */
    .weather-card {
        width: 100%; /* Take full available width */
        max-width: var(--weather-card-mobile-max-width); /* Cap the width at 4 original tabs */
        flex-direction: row; /* Layout content horizontally within the card */
        align-items: center; /* Vertically align items */
        text-align: left; /* Align text within card to the left */
        margin: 0 auto; /* Center the card horizontally if it's less than 100% width */
        padding: 0.75em 1em; /* More padding for better spacing */
        border-radius: var(--card-border-radius); /* Full rounded corners for standalone tabs */
        border-bottom: 1px solid var(--weather-bg-card-dark); /* Reintroduce bottom border if desired, or remove */
    }

    /* Selected weather card in mobile view */
    .weather-card.selected-weather-card {
        width: 100%; /* Match unselected width */
        max-width: var(--weather-card-mobile-max-width); /* Cap the width */
        /* Ensure border radii are consistent with unselected cards */
        border-bottom-left-radius: var(--card-border-radius);
        border-bottom-right-radius: var(--card-border-radius);
    }

    /* Content wrapper to contain original card data */
    .weather-card .weather-content-wrapper {
        flex-direction: column; /* Stack inner content vertically again */
        align-items: flex-start; /* Align inner content to the left */
        flex-shrink: 0; /* Prevent from shrinking too much */
        padding: 0; /* Reset padding */
        margin-right: 1em; /* Space between main content and long phrase */
    }

    /* Weather icons wrapper in mobile card */
    .weather-card .weather-icons-wrapper {
        margin: 0.2em 0; /* Adjust margin */
    }

    /* Long phrase now always visible and part of the card */
    .weather-long-phrase {
        display: block; /* Always show the long phrase */
        position: static; /* Flow naturally within the flex container */
        transform: none; /* No translation needed */
        opacity: 1; /* Always visible */
        visibility: visible; /* Always visible */
        width: auto; /* Width determined by content and flex */
        min-width: unset; /* No min-width constraint */
        padding: 0; /* Reset padding for cleaner integration */
        background-color: transparent; /* Transparent background as it's part of the card */
        box-shadow: none; /* No shadow needed */
        flex-grow: 1; /* Allow it to take up remaining space */
        font-size: 0.75em; /* Slightly larger for readability */
        color: var(--weather-text-light-gray); /* Use weather-text-light-gray for consistency */
        text-align: left; /* Align text to the left */
    }

    /* Remove hover effects for long phrase that are no longer applicable */
    .weather-card:hover .weather-long-phrase {
        opacity: 1;
        visibility: visible;
        display: block;
    }

    /* Adjust general card hover effect for vertical tabs */
    .weather-card:hover {
        background-color: var(--weather-bg-card-hover);
        opacity: 1; /* Remove explicit opacity if not intended for the entire card */
    }

    /* Hide the entire detail cards container on small screens */
    .weather-detail-cards-container {
        display: none;
    }
}