/**
 * Calima Weather Dashboard Styles
 * 
 * Consistent styling that matches photography and hiking dashboards
 * Aligned with root design system CSS variables from style.css
 * 
 * Color System:
 * - Status colors (AQI): --status-aqi-* variables
 * - Calima levels: --status-excellent/safe/caution/danger/extreme
 * - Accent: --accent-amber and variations
 * - Backgrounds: --bg-glass-* and --bg-overlay-dark
 * - Borders: --border-amber and variations
 * 
 * @package CanaryConditionsTheme
 */

/* ==========================================================================
   Dashboard Container
   ========================================================================== */

.cc-calima-dashboard {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    /* Background inherited from body.dashboard */
}

/* ==========================================================================
   Dashboard Header (Consistent with other dashboards)
   ========================================================================== */

.cc-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--bg-glass-dark);
    backdrop-filter: var(--blur-glass);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-amber);
}
.cc-header-content h1 {
    margin: 0 0 5px 0;
    font-size: 32px;
    color: var(--accent-amber);
    font-family: var(--font-heading);
    font-weight: 700;
}
.cc-header-content h2 {
    margin: 0 0 5px 0;
    font-size: 28px;
    color: var(--accent-amber);
    font-family: var(--font-heading);
    font-weight: 600;
}

.cc-header-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary-dark);
}

.cc-header-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}





/* ==========================================================================
   Time Controls (Unique to Calima Dashboard)
   ========================================================================== */

.cc-time-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    background: var(--bg-glass-dark);
    backdrop-filter: var(--blur-glass);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-amber);
    flex-wrap: wrap;
    gap: 15px;
}

.cc-time-tabs {
    display: flex;
    gap: 10px;
}

.cc-time-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-glass-light);
    border: 2px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-tertiary-dark);
    transition: var(--transition-smooth);
}

.cc-time-tab:hover {
    background: var(--border-light);
    transform: translateY(-2px);
    color: var(--text-primary-dark);
}

.cc-time-tab.active {
    background: var(--border-amber);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    box-shadow: var(--shadow-amber);
}

.tab-icon {
    font-size: 18px;
}

/* ==========================================================================
   Dashboard Container (Consistent Layout)
   ========================================================================== */

.cc-dashboard-container {
    display: flex;
    background: rgba(26, 28, 30, 0.6);
    backdrop-filter: var(--blur-glass);
    border-radius: var(--border-radius);
    padding: 0;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-amber);
    min-height: 80vh;
}
#cc-calima-map{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ==========================================================================
   Sidebar (Unified Design)
   ========================================================================== */

.cc-sidebar {
    width: 320px;
    padding: 25px;
    background: var(--bg-overlay-dark);
    border-right: 1px solid var(--border-amber);
    overflow-y: auto;
    flex-shrink: 0;
}

.cc-sidebar h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: var(--accent-amber);
    font-family: var(--font-heading);
    font-weight: 600;
    border-bottom: 2px solid var(--accent-amber);
    padding-bottom: 8px;
}

/* Selected Time Display */
.cc-selected-time-display {
    margin-bottom: 25px;
    padding: 15px;
    background: var(--bg-glass-lighter);
    backdrop-filter: var(--blur-glass-light);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--accent-amber);
}

.cc-time-display-value {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-data);
    color: var(--accent-amber);
    margin-top: 5px;
}

/* Filters Section */
.cc-filters {
    margin-bottom: 25px;
}

.cc-filter-group {
    margin-bottom: 15px;
}

.cc-filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-primary-dark);
    margin-bottom: 6px;
}

.cc-filter-group select,
.cc-filter-group input[type="range"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-amber-strong);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--bg-glass-light);
    color: var(--bg-white);
}

.cc-filter-group select option {
    background: var(--bg-volcanic);
    color: var(--bg-white);
}

.cc-filter-group input[type="checkbox"] {
    margin-right: 8px;
}

/* ==========================================================================
   Legend (Unified Design)
   ========================================================================== */

.cc-legend {
    margin-bottom: 25px;
    padding: 15px;
    background: var(--bg-glass-dark);
    backdrop-filter: var(--blur-glass);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-amber);
    box-shadow: var(--shadow-soft);
}

.cc-legend-content {
    margin-top: 10px;
}



.cc-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--bg-white);
    box-shadow: var(--shadow-card);
}




.cc-legend-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-amber);
}

.cc-legend-note {
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--text-tertiary-dark);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   Stats (Unified Design)
   ========================================================================== */

.cc-stats {
    padding: 15px;
    background: var(--bg-glass-dark);
    backdrop-filter: var(--blur-glass);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-amber);
    box-shadow: var(--shadow-soft);
}



/* ==========================================================================
   Map Wrapper & Container
   ========================================================================== */

.cc-map-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.cc-map-container {
    flex: 1;
    position: relative;
    z-index: 1;
}

#cc-calima-map {
    width: 100%;
    height: 100%;
}

/* Custom Marker Styling */
.cc-custom-marker {
    background: transparent;
    border: none;
}


/* Popup Styling */


/* ==========================================================================
   Timeline Slider (Hourly View)
   ========================================================================== */

.cc-timeline-slider {
    padding: 20px 30px;
    border-top: 1px solid var(--border-amber);
}

.cc-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cc-timeline-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary-dark);
}

.cc-timeline-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-amber);
}

.cc-timeline-control {
    position: relative;
}

#cc-timeline-range {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--border-light);
    outline: none;
    -webkit-appearance: none;
}

#cc-timeline-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-amber);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#cc-timeline-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-amber);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cc-timeline-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted-dark);
}
.cc-timeline-marks span:first-child {
    text-align: left;
}

/* ==========================================================================
   Day Cards (Daily View)
   ========================================================================== */

.cc-day-cards {
    padding: 20px 30px;
    border-top: 1px solid var(--border-amber);
    overflow-x: auto;
}

.cc-day-cards-container {
    display: flex;
    gap: 15px;
    min-width: min-content;
}

.cc-day-card {
    flex: 0 0 auto;
    width: 160px;
    padding: 15px;
    background: var(--bg-glass-dark);
    backdrop-filter: var(--blur-glass);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-amber);
    box-shadow: var(--shadow-soft);

    cursor: pointer;
    transition: all 0.3s ease;
}

.cc-day-card:hover {
    border-color: var(--accent-amber);
    transform: translateY(-8px);
    box-shadow: var(--shadow-amber-hover);
}

.cc-day-card.active {
    transform: translateY(0);
    background: var(--bg-glass-dark);
    border-color: var(--accent-amber);
    box-shadow: var(--shadow-amber);
}

.day-header {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-amber);
}

.day-name{
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-amber);
}

.day-date {
    font-size: 12px;
    margin-top: 3px;
    color: var(--text-secondary-dark);
}

.day-value {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-amber);
    margin: 10px 0;
}

.day-label {
    text-align: center;
    font-size: 11px;
    margin-bottom: 12px;
    color: var(--text-secondary-dark);
}

.day-details {
    font-size: 12px;
    color: var(--text-secondary-dark);
}

.day-details div {
    margin: 4px 0;
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */


.cc-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-light);
    border-top-color: var(--accent-amber);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}



/* ==========================================================================
   Attribution Footer
   ========================================================================== */

.cc-attribution {
    margin-top: 20px;
    padding: 15px;
    background: var(--bg-glass-light);
    backdrop-filter: var(--blur-glass-light);
    border: 1px solid var(--border-amber);
    border-radius: var(--border-radius-sm);
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary-dark);
}

.cc-attribution a {
    color: var(--accent-amber);
    text-decoration: none;
    transition: var(--transition-fast);
}

.cc-attribution a:hover {
    color: var(--accent-amber-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1200px) {
    .cc-sidebar {
        width: 280px;
    }
}

@media (max-width: 992px) {
    .cc-dashboard-container {
        flex-direction: column-reverse;
    }

    .cc-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-amber);
    }

    .cc-map-wrapper {
        min-height: 80vh;
    }

    .cc-time-tabs {
        justify-content: center;
    }
    #cc-calima-map{
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
}

@media (max-width: 768px) {
    .cc-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cc-header-controls {
        width: 100%;
        justify-content: space-between;
    }

    .cc-time-tabs {
        flex-wrap: wrap;
    }

    .cc-time-tab {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .cc-day-card {
        width: 140px;
    }
}

@media (max-width: 480px) {
    .cc-calima-dashboard {
        padding: 10px;
    }

    .cc-dashboard-header {
        padding: 15px;
    }

    .cc-header-content h2 {
        font-size: 22px;
    }

    .cc-time-controls {
        padding: 15px;
    }

    .cc-sidebar {
        padding: 15px;
    }

    .tab-label {

    }

    .cc-time-tab {
        padding: 10px 15px;
    }
}

/* ==========================================================================
   SEO Location List (Consistent with Photography Map)
   ========================================================================== */

.cc-seo-location-list {
    width: 100%;
    max-width: 100%;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(26, 28, 30, 0.95) 0%, rgba(18, 20, 22, 0.98) 100%);
    margin-bottom: 40px;
}

.cc-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--accent-amber);
}

.cc-list-header h2 {
    margin: 0;
    font-size: 28px;
    color: var(--accent-amber);
    font-family: var(--font-heading);
    font-weight: 700;
}

.cc-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--accent-amber);
    border-radius: var(--border-radius);
    color: var(--text-primary-dark);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cc-toggle-btn:hover {
    background: var(--accent-amber);
    color: var(--bg-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.cc-toggle-btn[aria-expanded="true"] .toggle-text-show,
.cc-toggle-btn[aria-expanded="false"] .toggle-text-hide {
    display: none;
}

.cc-toggle-btn[aria-expanded="false"] .toggle-icon {
    transform: rotate(-90deg);
}

.cc-toggle-icon {
    transition: transform 0.3s ease;
}

.cc-locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    opacity: 1;
    max-height: none;
    overflow: visible;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.cc-locations-grid.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.cc-location-card {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-amber);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

.cc-location-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.1);
    border-color: var(--accent-amber);
}

.cc-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cc-card-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(42, 46, 52, 0.8), rgba(26, 28, 30, 0.9));
}

.cc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cc-location-card:hover .cc-card-image img {
    transform: scale(1.1);
}

.cc-aqi-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
}

.cc-aqi-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-glass-darker);
    backdrop-filter: var(--blur-glass-light);
    border-radius: var(--border-radius-sm);
    border: 2px solid currentColor;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.cc-aqi-badge .aqi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.cc-aqi-badge .aqi-value {
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}

/* AQI Badge Color Variations */
.cc-aqi-good {
    color: var(--status-aqi-good);
    border-color: var(--status-aqi-good);
}

.cc-aqi-moderate {
    color: var(--status-aqi-moderate);
    border-color: var(--status-aqi-moderate);
}

.cc-aqi-sensitive {
    color: var(--status-aqi-sensitive);
    border-color: var(--status-aqi-sensitive);
}

.cc-aqi-unhealthy {
    color: var(--status-aqi-unhealthy);
    border-color: var(--status-aqi-unhealthy);
}

.cc-aqi-very-unhealthy {
    color: var(--status-aqi-very-unhealthy);
    border-color: var(--status-aqi-very-unhealthy);
}

.cc-aqi-hazardous {
    color: var(--status-aqi-hazardous);
    border-color: var(--status-aqi-hazardous);
    background: color-mix(in srgb, var(--status-aqi-hazardous) 20%, var(--bg-glass-darker));
}

.cc-card-content {
    padding: 20px;
}

.cc-card-content h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-amber);
    font-family: var(--font-heading);
}

.cc-card-meta {
    margin-bottom: 15px;
}

.cc-live-data {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.cc-calima-label {
    width: 100%;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cc-calima-good {
    background: color-mix(in srgb, var(--status-excellent) 15%, transparent);
    color: var(--status-excellent);
    border: 1px solid var(--status-excellent);
}

.cc-calima-moderate {
    background: color-mix(in srgb, var(--status-safe) 15%, transparent);
    color: var(--status-safe);
    border: 1px solid var(--status-safe);
}

.cc-calima-sensitive {
    background: color-mix(in srgb, var(--status-caution) 15%, transparent);
    color: var(--status-caution);
    border: 1px solid var(--status-caution);
}

.cc-calima-unhealthy {
    background: color-mix(in srgb, var(--status-danger) 15%, transparent);
    color: var(--status-danger);
    border: 1px solid var(--status-danger);
}

.cc-calima-very-unhealthy {
    background: color-mix(in srgb, var(--status-extreme) 15%, transparent);
    color: var(--status-extreme);
    border: 1px solid var(--status-extreme);
}

.cc-calima-hazardous {
    background: color-mix(in srgb, var(--status-hazardous) 15%, transparent);
    color: var(--status-hazardous);
    border: 1px solid var(--status-hazardous);
}


.cc-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.cc-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    transition: background 0.2s ease;
}


.cc-stat .stat-label {
    font-size: 13px;
    color: var(--text-secondary-dark);
    font-weight: 500;
    white-space: nowrap;
}

.cc-stat .stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary-dark);
}

/* Full-width stats */
.cc-stat.cc-weather-desc,
.cc-stat.cc-updated-time {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.cc-stat.cc-weather-desc .stat-value {
    font-size: 12px;
}

.cc-stat.cc-updated-time .stat-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary-dark);
}

/* AQI Status Display */
.cc-aqi-status {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-aqi-tier {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cc-aqi-tier-good {
    background: color-mix(in srgb, var(--status-aqi-good) 15%, transparent);
    color: var(--status-aqi-good);
    border: 1px solid color-mix(in srgb, var(--status-aqi-good) 30%, transparent);
}

.cc-aqi-tier-moderate {
    background: color-mix(in srgb, var(--status-aqi-moderate) 15%, transparent);
    color: var(--status-aqi-moderate);
    border: 1px solid color-mix(in srgb, var(--status-aqi-moderate) 30%, transparent);
}

.cc-aqi-tier-sensitive {
    background: color-mix(in srgb, var(--status-aqi-sensitive) 15%, transparent);
    color: var(--status-aqi-sensitive);
    border: 1px solid color-mix(in srgb, var(--status-aqi-sensitive) 30%, transparent);
}

.cc-aqi-tier-unhealthy {
    background: color-mix(in srgb, var(--status-aqi-unhealthy) 15%, transparent);
    color: var(--status-aqi-unhealthy);
    border: 1px solid color-mix(in srgb, var(--status-aqi-unhealthy) 30%, transparent);
}

.cc-aqi-tier-very-unhealthy {
    background: color-mix(in srgb, var(--status-aqi-very-unhealthy) 15%, transparent);
    color: var(--status-aqi-very-unhealthy);
    border: 1px solid color-mix(in srgb, var(--status-aqi-very-unhealthy) 30%, transparent);
}

.cc-aqi-tier-hazardous {
    background: color-mix(in srgb, var(--status-aqi-hazardous) 15%, transparent);
    color: var(--status-aqi-hazardous);
    border: 1px solid color-mix(in srgb, var(--status-aqi-hazardous) 30%, transparent);
}

.cc-aqi-tier-unknown {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text-secondary-dark);
    border: 1px solid rgba(128, 128, 128, 0.3);
}

.cc-card-action {
    padding-top: 10px;
    border-top: 1px solid var(--border-amber);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.cc-card-action .cc-updated-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary-dark);

}

.cc-view-details {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-amber);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s ease;
}

.cc-location-card:hover .cc-view-details {
    gap: 10px;
}

.cc-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary-dark);
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .cc-seo-location-list {
        padding: 30px 0;
    }

    .cc-list-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .cc-list-header h2 {
        font-size: 22px;
    }
    
    /* Mobile adjustments for card stats */
    .cc-card-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .cc-stat {
        padding: 5px 6px;
        gap: 4px;
    }
    
    .cc-stat .stat-label {
        font-size: 10px;
    }
    
    .cc-stat .stat-value {
        font-size: 12px;
    }
    
    .cc-aqi-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .cc-aqi-tier {
        font-size: 11px;
        padding: 3px 8px;
    }
}