/**
 * Windrose Page Styles
 * Dark mode support for Chart.js canvases
 */

/* Canvas backgrounds - light mode */
.chart-container canvas {
    background-color: transparent;
}

/* Dark mode: ensure canvases have proper background */
[data-theme="dark"] .chart-container {
    background-color: transparent;
}

[data-theme="dark"] .chart-container canvas {
    background-color: transparent !important;
}

/* Ensure card bodies containing charts have proper background in dark mode */
[data-theme="dark"] .card-body {
    background-color: #1e293b;
}

/* Period selector buttons in dark mode */
[data-theme="dark"] .btn-outline-primary {
    color: #3b82f6;
    border-color: #3b82f6;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

[data-theme="dark"] .btn-check:checked + .btn-outline-primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

/* Table styling improvements for dark mode - NUCLEAR OPTION */
[data-theme="dark"] .card-body .table,
[data-theme="dark"] .card-body .table tbody,
[data-theme="dark"] .card-body .table tbody tr,
[data-theme="dark"] .card-body .table tbody tr td,
[data-theme="dark"] #direction-table-body,
[data-theme="dark"] #direction-table-body tr,
[data-theme="dark"] #direction-table-body td {
    background-color: transparent !important;
    background: transparent !important;
    --tblr-table-bg: transparent !important;
    --tblr-table-accent-bg: transparent !important;
    --tblr-table-bg-state: transparent !important;
    --tblr-table-bg-type: transparent !important;
    box-shadow: none !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(148, 163, 184, 0.05) !important;
    background: rgba(148, 163, 184, 0.05) !important;
    --tblr-table-accent-bg: rgba(148, 163, 184, 0.05) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(148, 163, 184, 0.05) !important;
    background: rgba(148, 163, 184, 0.05) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
    background: transparent !important;
}

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

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Progress bars in table */
[data-theme="dark"] .progress {
    background-color: rgba(148, 163, 184, 0.2) !important;
}

/* Progress bar containers in windrose table - remove white background */
[data-theme="dark"] #direction-table-body .progress {
    background-color: rgba(148, 163, 184, 0.15) !important;
    background: rgba(148, 163, 184, 0.15) !important;
}

[data-theme="dark"] #direction-table-body .progress-bar {
    opacity: 1 !important;
}

/* Mobile responsive period selector */
@media (max-width: 768px) {
    /* Stack period selector vertically on mobile */
    html[data-page="windrose"] #period-selector {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    html[data-page="windrose"] #period-selector .btn {
        width: 100%;
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem;
    }
    
    html[data-page="windrose"] #period-selector .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Stack the entire row for better mobile layout */
    html[data-page="windrose"] .card-body .row.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    html[data-page="windrose"] .card-body .row.align-items-center .col-auto {
        width: 100%;
    }
    
    html[data-page="windrose"] .card-body .row.align-items-center .col-auto.ms-auto {
        margin-left: 0 !important;
    }
}