/**
 * Climate Trends Page Styles
 * Mobile responsive styling for climate analysis page
 */

/* Chart containers */
html[data-page="climate-trends"] .chart-container {
    position: relative;
    width: 100%;
}

/* Special days summary grid */
html[data-page="climate-trends"] .row .col-md-2 {
    border-right: 1px solid var(--tblr-border-color);
}

html[data-page="climate-trends"] .row .col-md-2:last-child {
    border-right: none;
}

/* Table responsive improvements */
html[data-page="climate-trends"] .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Remove borders on mobile */
    html[data-page="climate-trends"] .row .col-md-2 {
        border-right: none;
        border-bottom: 1px solid var(--tblr-border-color);
        margin-bottom: 0.5rem;
    }
    
    html[data-page="climate-trends"] .row .col-md-2:last-child {
        border-bottom: none;
    }
    
    /* Reduce chart heights on mobile */
    html[data-page="climate-trends"] .chart-container {
        height: 250px !important;
    }
    
    /* Stack year selector */
    html[data-page="climate-trends"] .card-body .row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    html[data-page="climate-trends"] .card-body .row .col-auto {
        width: 100%;
    }
    
    html[data-page="climate-trends"] .form-select {
        width: 100%;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] html[data-page="climate-trends"] .table {
    --tblr-table-bg: transparent;
}

[data-theme="dark"] html[data-page="climate-trends"] .table-hover tbody tr:hover {
    background-color: rgba(148, 163, 184, 0.1);
}

/* Custom Tooltip Styling */
.chart-tooltip {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-shadow-lg);
    color: var(--tblr-body-color);
    padding: 8px 12px;
}

.chart-tooltip .tooltip-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.chart-tooltip .tooltip-body {
    font-size: 13px;
}

[data-theme="dark"] .chart-tooltip {
    background: var(--tblr-bg-surface-dark);
    border-color: var(--tblr-border-color-dark);
    color: var(--tblr-body-color-dark);
}