﻿/* Styles for all quote+chart containers */
#gbcharts-quote-combo,
#gbcharts-upma-quote-combo,
#gbcharts-gold-quote-combo,
#gbcharts-silver-quote-combo {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-family: Arial, sans-serif;
}

    /* Headings */
    #gbcharts-quote-combo h2,
    #gbcharts-upma-quote-combo h2,
    #gbcharts-gold-quote-combo h2,
    #gbcharts-silver-quote-combo h2 {
        font-size: 30px;
        margin: 0 0 8px;
    }

    /* Gain display */
    #gbcharts-quote-combo .gain,
    #gbcharts-upma-quote-combo .gain,
    #gbcharts-gold-quote-combo .gain,
    #gbcharts-silver-quote-combo .gain {
        font-size: 16px;
        margin-bottom: 10px;
    }

        #gbcharts-quote-combo .gain.positive,
        #gbcharts-upma-quote-combo .gain.positive,
        #gbcharts-gold-quote-combo .gain.positive,
        #gbcharts-silver-quote-combo .gain.positive {
            color: #2e7d32;
        }

        #gbcharts-quote-combo .gain.negative,
        #gbcharts-upma-quote-combo .gain.negative,
        #gbcharts-gold-quote-combo .gain.negative,
        #gbcharts-silver-quote-combo .gain.negative {
            color: #c62828;
        }

    /* As-of-date */
    #gbcharts-quote-combo .as-of-date,
    #gbcharts-upma-quote-combo .as-of-date,
    #gbcharts-gold-quote-combo .as-of-date,
    #gbcharts-silver-quote-combo .as-of-date {
        font-size: 13px;
        color: #666;
        margin-bottom: 15px;
    }

    /* Filter buttons container */
    #gbcharts-quote-combo .filter-buttons,
    #gbcharts-upma-quote-combo .filter-buttons,
    #gbcharts-gold-quote-combo .filter-buttons,
    #gbcharts-silver-quote-combo .filter-buttons {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 10px;
    }

        #gbcharts-quote-combo .filter-buttons button,
        #gbcharts-upma-quote-combo .filter-buttons button,
        #gbcharts-gold-quote-combo .filter-buttons button,
        #gbcharts-silver-quote-combo .filter-buttons button {
            padding: 4px 10px;
            border: 1px solid #ccc;
            background: #f0f0f0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

            #gbcharts-quote-combo .filter-buttons button.active,
            #gbcharts-upma-quote-combo .filter-buttons button.active,
            #gbcharts-gold-quote-combo .filter-buttons button.active,
            #gbcharts-silver-quote-combo .filter-buttons button.active {
                background: #c6a94d;
                color: white;
                border-color: #c6a94d;
            }

    /* Data table */
    #gbcharts-quote-combo table,
    #gbcharts-upma-quote-combo table,
    #gbcharts-gold-quote-combo table,
    #gbcharts-silver-quote-combo table {
        width: 100%;
        font-size: 14px;
        margin-top: 15px;
        border-collapse: collapse;
    }

    #gbcharts-quote-combo td,
    #gbcharts-upma-quote-combo td,
    #gbcharts-gold-quote-combo td,
    #gbcharts-silver-quote-combo td {
        padding: 4px 0;
    }

        #gbcharts-quote-combo td:nth-child(odd),
        #gbcharts-upma-quote-combo td:nth-child(odd),
        #gbcharts-gold-quote-combo td:nth-child(odd),
        #gbcharts-silver-quote-combo td:nth-child(odd) {
            font-weight: bold;
        }
