/*
Typography: text color and truncation for dropdowns and buttons
Using static font files from /src/assets/fonts/Source_Sans_3/static/
font-display: block prevents Open Sans fallback while the file loads
*/
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-display: block;
}

/*
Apply the font globally and enforce it with !important
to override Plotly's inline styles. Those inline styles otherwise enforce
the fallback font (Open Sans) even after Source Sans 3 loads.
If you want to use a different font, update the @font-face declaration above
and adjust the font-family value here and in clientsides_export.js accordingly.
*/
* {
  font-family: "Source Sans 3", verdana, arial, sans-serif !important;
}

/* Dark text color for dropdown toggles and items */
#menu-filters .dropdown-toggle,
#menu-budget .dropdown-toggle,
#menu-viewby .dropdown-toggle,
#menu-period .dropdown-toggle,
#menu-spending-type .dropdown-toggle,
#menu-unit .dropdown-toggle,
#menu-budget .dropdown-menu,
#menu-viewby .dropdown-menu,
#menu-period .dropdown-menu,
#menu-spending-type .dropdown-menu,
#menu-unit .dropdown-menu,
#menu-budget .dropdown-item,
#menu-viewby .dropdown-item,
#menu-period .dropdown-item,
#menu-spending-type .dropdown-item,
#menu-unit .dropdown-item {
    color: #333333 !important;
    font-size: 14px;
    font-weight: 600;
}

/* Truncation for toggle labels and dropdown items */
#menu-budget .dropdown-toggle,
#menu-viewby .dropdown-toggle,
#menu-period .dropdown-toggle,
#menu-spending-type .dropdown-toggle,
#menu-unit .dropdown-toggle,
#menu-budget .dropdown-item,
#menu-viewby .dropdown-item,
#menu-period .dropdown-item,
#menu-spending-type .dropdown-item,
#menu-unit .dropdown-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure inner spans (used for tooltips) inherit the dark text color */
#menu-budget .dropdown-item span,
#menu-viewby .dropdown-item span,
#menu-period .dropdown-item span,
#menu-spending-type .dropdown-item span,
#menu-unit .dropdown-item span,
#menu-budget .dropdown-toggle span,
#menu-viewby .dropdown-toggle span,
#menu-period .dropdown-toggle span,
#menu-spending-type .dropdown-toggle span,
#menu-unit .dropdown-toggle span {
    color: #333333 !important;
    font-weight: 300;
}

/* Buttons: apply text color */
#btn-switch-graphs,
#btn-share-link,
#btn-download-image,
#btn-download-csv,
#btn-about,
#btn-switch-data-language {
    color: #333333 !important;
    font-size: 14px;
    font-weight: 600;
}

/* Buttons: enforce color on inner content (text and inline SVGs) */
#btn-switch-graphs *,
#btn-share-link *,
#btn-download-image *,
#btn-download-csv *,
#btn-about *,
#btn-switch-data-language * {
    color: #333333 !important;
    fill: #333333 !important;
}

/* Disabled toolbar buttons: gray background, muted icon/text, no pointer */
.toolbar .btn:disabled,
.toolbar .btn.disabled {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: auto;
}

.toolbar .btn:disabled *,
.toolbar .btn.disabled * {
    color: #adb5bd !important;
    fill: #adb5bd !important;
}

/* Disabled toolbar dropdowns */
.toolbar .dropdown.disabled > .dropdown-toggle,
.toolbar .dropdown > .dropdown-toggle:disabled {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: auto;
}