/* Gold & Silver Chart Filter Styles */
.gold-chart-filters {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 10px; /* Space between filter groups */
    align-items: center; /* Vertically align items */
    justify-content: flex-start; /* Align items to the start */
    margin-bottom: 16px; /* Space below the filter bar */
    padding: 12px 15px;
    background-color: #f7f7f7;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

.filter-group {
    display: grid; /* Label + control side by side */
    grid-template-columns: auto auto; /* Desktop inline: control width is content-based */
    align-items: center;
    column-gap: 8px; /* Space between label and input */
    row-gap: 6px;
    width: auto; /* Let groups sit side-by-side on wide screens */
    min-width: 0; /* Allow shrinking inside grid/flex parents */
}

.gold-chart-filters label {
    font-weight: 600;
    font-size: 13px; /* Slightly smaller to match UI */
    color: #333;
    margin-bottom: 0; /* Override default label margins */
    white-space: nowrap; /* Prevent label from breaking into two lines */
}

.gold-chart-filters select,
.gold-chart-filters input.gold-date-picker,
.gold-chart-filters input.silver-date-picker {
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px; /* Slightly smaller to avoid overflow */
    background-color: #fff;
    min-width: 160px; /* Reduce to fit better in narrow columns */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Make each filter-group flexible within the filter bar */
.gold-chart-filters .filter-group {
    flex: 0 0 auto; /* Inline by default on desktop */
}

/* Desktop behavior: inline filters, wrap to next line when narrow */
@media (min-width: 769px) {
    .gold-chart-filters { flex-wrap: wrap; }
    .gold-chart-filters .filter-group select,
    .gold-chart-filters .filter-group input.gold-date-picker,
    .gold-chart-filters .filter-group input.silver-date-picker {
        width: auto !important;
        min-width: 160px;
    }
}

.gold-chart-filters select:focus,
.gold-chart-filters input:focus {
    outline: none;
    border-color: #fdbf30;
    box-shadow: 0 0 0 2px rgba(253, 191, 48, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gold-chart-filters {
        flex-direction: row; /* keep row layout but allow wrapping */
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }

    .filter-group {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .gold-chart-filters label {
        text-align: left;
        font-size: 12px;
    }

    .gold-chart-filters select,
    .gold-chart-filters input.gold-date-picker,
    .gold-chart-filters input.silver-date-picker {
        width: auto; /* don't force full width */
        min-width: 140px;
        font-size: 12px;
        padding: 6px 8px;
    }
}

@media (max-width: 480px) {
    .gold-chart-filters .filter-group { grid-template-columns: 1fr; }
    .gold-chart-filters label { font-size: 11px; margin-bottom: 2px; }
    .gold-chart-filters select,
    .gold-chart-filters input.gold-date-picker,
    .gold-chart-filters input.silver-date-picker {
        min-width: 0;
        width: 100% !important;
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .gold-chart-filters label { font-size: 10px; }
    .gold-chart-filters select,
    .gold-chart-filters input.gold-date-picker,
    .gold-chart-filters input.silver-date-picker {
        min-width: 120px;
        font-size: 10px;
        padding: 5px 7px;
    }
}