/* Skeleton Grid System - Based on dash-opioid-epidemic for full-width layout */

:root {
  --primary-color: #013345;
  --secondary-color: #E5ECF0;
  --accent-color: #1AAFC8;
  --light-text: #013345;
  --dark-text: #1C2B33;
  --hover-color: #A2E3F2;
  --border-radius: 6px;
  --transition: all 0.3s ease;
}

/* Base Styles */
html {
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    max-width: 100% !important;
    width: 100% !important;
}

body {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--dark-text);
    background-color: var(--primary-color);
}

/* Override any Bootstrap or Dash defaults */
* {
    box-sizing: border-box;
}

/* Grid System */
.container {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

/* For devices larger than 550px */
@media (min-width: 550px) {
    .container {
        width: 100%;
        padding: 0;
    }
    
    .column,
    .columns {
        margin-left: 2%;
    }
    
    .column:first-child,
    .columns:first-child {
        margin-left: 0;
    }

    .six.columns {
        width: 48%;
    }
    
    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }
}

/* App Layout */
#app-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    height: 100vh;
    margin: 0;
    padding: 0;
    gap: 0.05rem;
}

#left-column {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem;
    padding-right: 0.1rem;
}

#right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem;
    padding-left: 0.1rem;
}

/* Mobile responsive */
@media (max-width: 550px) {
    #app-container {
        flex-direction: column;
        height: auto;
    }
    
    #left-column,
    #right-column {
        flex: none;
        margin-right: 0;
        padding: 1rem;
    }
}

/* NAVBAR CONTAINER */
.navbar {
  background-color: var(--primary-color);
  padding: 15px 20px;
  border-bottom: 1px solid var(--accent-color);
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar-logo {
  margin-left: auto;
  margin-right: 10%;
}

/* DASH TABS COMPONENT WRAPPER */
.styled-tabset {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: none;
  margin: 0;
  padding: 0;
  width: auto;
  flex-shrink: 0;
}

/* INDIVIDUAL TABS */
/* REMOVE ALL DEFAULT DASH TAB STYLING */
.dash-spreadsheet-container,
.tab {
  border: none !important;
  box-shadow: none !important;
}

/* DEFAULT UNSELECTED TAB */
.nav-link,
.styled-tabset .tab,
.styled-tabset .tab:not(.tab--selected) {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
  font-weight: 500;
  padding: 10px 16px;
  margin-right: 8px;
  border: 1px solid var(--accent-color) !important;
  border-radius: var(--border-radius);
  box-shadow: none;
  transition: var(--transition);
  white-space: nowrap;
  min-width: auto;
  max-width: none;
  text-align: center;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* SELECTED (ACTIVE) TAB — more prominent background */
.nav-link.tab--selected,
.styled-tabset .tab.tab--selected {
  background-color: white !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--accent-color) !important;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(44, 254, 193, 0.3);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* HOVER STYLE */
.nav-link:hover,
.styled-tabset .tab:hover {
  background-color: var(--secondary-color) !important;
  color: var(--accent-color) !important;
  border: 1px solid var(--accent-color) !important;
  transform: translateY(-1px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RESPONSIVE TAB STYLES */
@media (max-width: 768px) {
  .nav-link,
  .styled-tabset .tab,
  .styled-tabset .tab:not(.tab--selected) {
    padding: 8px 12px;
    font-size: 12px;
    margin-right: 4px;
  }
  
  .navbar-content {
    flex-direction: column;
    gap: 10px;
  }
  
  .styled-tabset {
    order: 1;
  }
  
  .navbar-logo {
    order: 0;
    margin: 0;
  }
}

/* BOOTSTRAP TABS STYLING (for dbc.Tabs components) - AGGRESSIVE FIX */
.nav-tabs {
  border-bottom: none !important;
  margin-bottom: 20px;
}

/* Super specific targeting to override any dynamic styles */
div[data-dash-is-loading] .nav-tabs .nav-link,
div[data-dash-is-loading="false"] .nav-tabs .nav-link,
div[data-dash-is-loading="true"] .nav-tabs .nav-link,
.card-body .nav-tabs .nav-link,
#congressional-docs-tabs .nav-link,
.nav-tabs .nav-link {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
  border: 1px solid var(--accent-color) !important;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  margin-right: 4px !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-align: center !important;
  z-index: 10 !important;
}

/* Hover state with aggressive specificity */
div[data-dash-is-loading] .nav-tabs .nav-link:hover,
div[data-dash-is-loading="false"] .nav-tabs .nav-link:hover,
div[data-dash-is-loading="true"] .nav-tabs .nav-link:hover,
.card-body .nav-tabs .nav-link:hover,
#congressional-docs-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
  background-color: var(--secondary-color) !important;
  color: var(--primary-color) !important;
  border-color: var(--accent-color) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Active state with aggressive specificity */
div[data-dash-is-loading] .nav-tabs .nav-link.active,
div[data-dash-is-loading="false"] .nav-tabs .nav-link.active,
div[data-dash-is-loading="true"] .nav-tabs .nav-link.active,
.card-body .nav-tabs .nav-link.active,
#congressional-docs-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  background-color: white !important;
  color: var(--dark-text) !important;
  border-color: var(--accent-color) !important;
  border-bottom-color: white !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure ANY child text elements are visible */
.nav-tabs .nav-link *,
.nav-tabs .nav-link span,
.nav-tabs .nav-link::before,
.nav-tabs .nav-link::after {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline !important;
}

/* Prevent any potential overrides that might hide text */
.nav-tabs .nav-link {
  text-indent: 0 !important;
  text-overflow: visible !important;
  overflow: visible !important;
}

/* LOADING STATE FIXES - Prevent text disappearing during data fetch */
/* Force tab text to remain visible during all loading states */
div[data-dash-is-loading="true"] .nav-tabs .nav-link,
div[data-dash-is-loading="false"] .nav-tabs .nav-link,
div[data-dash-is-loading] .nav-tabs .nav-link {
  /* Prevent any loading animations from affecting text visibility */
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--secondary-color) !important;
  /* Force text to stay in place during re-renders */
  will-change: auto !important;
  backface-visibility: visible !important;
  /* Prevent flicker during state changes */
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Ensure active state is maintained during loading */
div[data-dash-is-loading="true"] .nav-tabs .nav-link.active,
div[data-dash-is-loading="false"] .nav-tabs .nav-link.active,
div[data-dash-is-loading] .nav-tabs .nav-link.active {
  color: var(--dark-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force container stability during loading */
.nav-tabs {
  /* Prevent container from collapsing during re-renders */
  min-height: 42px !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Congressional Acts specific loading fix */
div[id*="congressional"] .nav-tabs .nav-link,
div[id*="congressional-acts"] .nav-tabs .nav-link {
  /* Extra specificity for Congressional Acts tabs */
  color: var(--secondary-color) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  /* Prevent any dynamic styling from overriding */
  text-shadow: none !important;
  filter: none !important;
}

/* Prevent tab container from shifting during data load */
.card-body {
  /* Ensure card body doesn't change size during loading */
  min-height: 200px !important;
}

@media (max-width: 480px) {
  .nav-link,
  .styled-tabset .tab,
  .styled-tabset .tab:not(.tab--selected) {
    padding: 6px 8px;
    font-size: 11px;
    margin-right: 2px;
  }
}

/* ALIGN TAB STRIP - Moved styling here to consolidate */


/* LOGO SPACING */
.me-3 {
  margin-right: 1rem;
}


/* Move pagination to top-left - Multiple selector approach */
.dash-table-container .previous-next-container,
.dash-spreadsheet-container .previous-next-container,
div[data-dash-table] .previous-next-container,
.dash-table .previous-next-container {
    order: -1 !important;
    margin-bottom: 15px !important;
    align-self: flex-start !important;
}

/* Make the table container a flex column */
.dash-table-container,
.dash-spreadsheet-container,
div[data-dash-table] {
    display: flex !important;
    flex-direction: column !important;
}

/* Alternative class targeting */
.dash-table-container > div:last-child,
.dash-spreadsheet-container > div:last-child {
    order: -1 !important;
    align-self: flex-start !important;
    margin-bottom: 10px !important;
}
/* 
DEBUGGING - Add red border to find pagination elements
div[id*="market_table"] * {
    border: 1px solid red !important;
} */

/* Try targeting by text content pattern */
div:contains("Previous"),
div:contains("Next"),
div:contains("Page") {
    order: -1 !important;
    background-color: yellow !important;
}

/* More specific DataTable pagination targeting */
#market_table_paginate,
#market_table .paginate_button,
.dataTables_paginate,
.dataTables_info {
    order: -1 !important;
    margin-bottom: 10px !important;
}

/* Responsive filter row styling */
.filter-row {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
}

.filter-item {
    flex: 1;
    min-width: 180px;
}

.filter-item label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
    color: var(--dark-text);
}

/* Make dropdowns and inputs consistent height */
.Select-control,
.form-control {
    height: 38px !important;
}

/* Mobile responsiveness for filter row */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-item {
        min-width: 100%;
        margin-bottom: 1rem;
    }
}

/* Market filter row styling - specific to avoid conflicts */
.market-filters-row {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 1.5rem !important;
    align-items: flex-end !important;  /* Align items to bottom for button alignment */
}

.market-filters-row .filter-item {
    flex: 1 !important;
    min-width: 180px !important;
    display: flex !important;
    flex-direction: column !important;
}

.market-filters-row .button-item {
    flex: 0 0 auto !important;  /* Don't grow, just fit content */
    min-width: auto !important;
}

.market-filters-row .filter-label {
    margin-bottom: 0.5rem !important;
    display: block !important;
    font-weight: 500 !important;
    color: var(--dark-text) !important;
    min-height: 1.2em !important;  /* Ensure consistent label height */
}

/* Ensure dropdowns and inputs take full width within their containers */
.market-filters-row .Select,
.market-filters-row .dropdown,
.market-filters-row .form-control {
    width: 100% !important;
}

/* Button styling within the filter row */
.market-filters-row .btn {
    height: 38px !important;  /* Match dropdown height */
    white-space: nowrap !important;
}

/* Mobile responsiveness for market filters */
@media (max-width: 768px) {
    .market-filters-row {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }
    
    .market-filters-row .filter-item,
    .market-filters-row .button-item {
        min-width: 100% !important;
        flex: none !important;
    }
}

/* Ensure results card stays in its own row */
.container-fluid > .card:last-child {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 1rem !important;
}

/* FORCE OVERRIDE DASH DEFAULT TAB STYLES - COMPREHENSIVE APPROACH */
/* Target all possible Dash tab selectors with maximum specificity */
div.dash-tabs-container .dash-tabs .tab,
.dash-tabs-container .tab,
#tabs .tab,
.styled-tabset .dash-tabs .tab,
.styled-tabset .tab,
div[data-dash-is-loading="true"] .tab,
div[data-dash-is-loading="false"] .tab {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
  border: 1px solid var(--accent-color) !important;
  border-radius: var(--border-radius) !important;
  padding: 12px 20px !important;
  margin-right: 8px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  min-width: 120px !important;
  max-width: 160px !important;
  text-align: center !important;
  font-size: 14px !important;
  transition: var(--transition) !important;
}

div.dash-tabs-container .dash-tabs .tab.tab--selected,
.dash-tabs-container .tab.tab--selected,
#tabs .tab.tab--selected,
.styled-tabset .dash-tabs .tab.tab--selected,
.styled-tabset .tab.tab--selected,
div[data-dash-is-loading="true"] .tab.tab--selected,
div[data-dash-is-loading="false"] .tab.tab--selected {
  background-color: white !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--accent-color) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

div.dash-tabs-container .dash-tabs .tab:hover,
.dash-tabs-container .tab:hover,
#tabs .tab:hover,
.styled-tabset .dash-tabs .tab:hover,
.styled-tabset .tab:hover,
div[data-dash-is-loading="true"] .tab:hover,
div[data-dash-is-loading="false"] .tab:hover {
  background-color: var(--accent-color) !important;
  color: var(--light-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* TOGGLE BUTTONS FOR TOP LINE ACCOUNT */
.btn-outline-secondary {
  border-color: var(--dark-text) !important;
  color: var(--dark-text) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--dark-text) !important;
  border-color: var(--dark-text) !important;
  color: white !important;
}

.btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--light-text) !important;
}

.btn-primary:hover {
  background-color: var(--hover-color) !important;
  border-color: var(--hover-color) !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

/* Cards and components */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 15px;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    background-color: var(--secondary-color);
    color: var(--dark-text);
    border: 1px solid rgba(26, 175, 200, 0.2);
}

/* Search tools section */
.search-tools {
    margin-bottom: 2rem;
}

/* Chart container - full height */
.chart-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Clearing for floated columns */
.container:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}

/* Utilities */
.u-full-width {
    width: 100%;
    box-sizing: border-box;
}

.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}

/* Typography for dark theme */
h1, h2, h3, h4, h5, h6 {
    color: var(--accent-color);
    font-weight: 600;
}

/* Form elements */
input, select, .Select-control {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: var(--border-radius);
    height: 38px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

input::placeholder {
    color: var(--secondary-color) !important;
    opacity: 0.7 !important;
}

input::-webkit-input-placeholder {
    color: var(--secondary-color) !important;
    opacity: 0.7 !important;
}

input::-moz-placeholder {
    color: var(--secondary-color) !important;
    opacity: 0.7 !important;
}

input:-ms-input-placeholder {
    color: var(--secondary-color) !important;
    opacity: 0.7 !important;
}

input:focus, select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(44, 254, 193, 0.2) !important;
    outline: none;
}

/* Dropdown specific styling for better contrast */
.Select-control {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--accent-color) !important;
    padding-left: 12px !important;
}

/* Remove vertical lines from dropdowns */
.Select-control:before,
.Select-control:after,
.Select-arrow-zone,
.Select-arrow,
.Select-input {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
}

.Select-arrow-zone {
    border-left: none !important;
    padding-left: 0 !important;
    background: none !important;
}

.Select-arrow-zone:before,
.Select-arrow-zone:after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Hide any dropdown indicators that might create lines */
.Select-control .Select-multi-value-wrapper,
.Select-control .Select-value,
.Select-control .Select-input {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Additional aggressive line removal */
.Select-control > div,
.Select-control > div > div,
.Select-control .Select-value-wrapper,
.Select-control .Select-input-wrapper {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Target all possible children that might have borders */
.Select-control * {
    border-left: none !important;
    border-right: none !important;
}

/* Additional overrides for Dash dropdown wrapper elements */
.dropdown .Select-control,
.dropdown .Select,
div[data-dash-is-loading] .Select-control,
div[data-dash-is-loading] .Select {
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Target specific dropdown arrow and indicator elements */
.Select-arrow-zone:before,
.Select-arrow-zone:after,
.Select-control .Select-arrow-zone {
    border-left: none !important;
    background: none !important;
    content: none !important;
}

/* Override any box-shadow that might look like a line */
.Select-control,
.Select-control:focus,
.Select-control:hover {
    box-shadow: none !important;
    border-left: none !important;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
    color: var(--secondary-color) !important;
}

.Select-menu-outer {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.Select-menu {
    background-color: var(--secondary-color) !important;
}

.Select-option {
    background-color: var(--secondary-color) !important;
    color: var(--dark-text) !important;
    padding: 8px 12px !important;
}

.Select-option.is-focused {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
}

.Select-option.is-selected {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}

.Select-value-label {
    color: var(--secondary-color) !important;
}

/* Buttons */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    height: 38px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-primary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: var(--hover-color) !important;
    border-color: var(--hover-color) !important;
    transform: translateY(-1px);
}

.btn-outline-secondary {
    border-color: var(--dark-text) !important;
    color: var(--dark-text) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover {
    background-color: var(--dark-text) !important;
    border-color: var(--dark-text) !important;
    color: var(--primary-color) !important;
}

/* Make search button wider */
#run_search {
    min-width: 120px !important;
    padding: 0 20px !important;
}

/* Specific overrides for market filter dropdowns */
#org_filter .Select-control,
#agency_filter .Select-control,
#org_filter,
#agency_filter {
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

#org_filter .Select-arrow-zone,
#agency_filter .Select-arrow-zone {
    border-left: none !important;
    background: transparent !important;
}

#org_filter .Select-control:before,
#org_filter .Select-control:after,
#agency_filter .Select-control:before,
#agency_filter .Select-control:after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Results Overview Dashboard Styles */
.metric-card {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid var(--accent-color);
    text-align: center;
    transition: var(--transition);
}

.metric-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(26, 175, 200, 0.3);
}

.overview-section {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid var(--accent-color);
}

.overview-section h4 {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 8px;
}

/* Responsive grid adjustments for overview */
@media (max-width: 768px) {
    .overview-section {
        margin-bottom: 15px;
    }
    
    .metric-card {
        padding: 15px;
    }
}

/* Budget Category Button Styles */
.budget-category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

/* Custom styles for budget category buttons to match the screenshot */
button[id*="budget-category-btn"] {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--accent-color) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
    white-space: nowrap;
}

button[id*="budget-category-btn"]:hover {
    background-color: var(--hover-color) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active/selected button style */
button[id*="budget-category-btn"].btn-primary {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--accent-color) !important;
    font-weight: 600 !important;
}

button[id*="budget-category-btn"].btn-primary:hover {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
}

/* Force immediate visibility on DOM ready - prevent any flash of invisible content */
.nav-tabs .nav-link {
  color: var(--secondary-color) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  /* Critical: disable ALL animations and transitions on initial load */
  animation: none !important;
  transition: none !important;
  /* Force browser to render text immediately */
  transform: translateZ(0) !important;
  will-change: auto !important;
  backface-visibility: visible !important;
}

/* Ensure active tabs are also immediately visible */
.nav-tabs .nav-link.active {
  color: var(--dark-text) !important;
  font-weight: 600 !important;
}

/* Re-enable transitions only after initial render (using a slight delay) */
@keyframes enableTabTransitions {
  0% { transition: none; }
  100% { transition: background-color 0.2s ease, border-color 0.2s ease; }
}

.nav-tabs .nav-link {
  animation: enableTabTransitions 0.1s ease-in 0.5s forwards;
}

/* ULTRA AGGRESSIVE TAB TEXT VISIBILITY - MAXIMUM SPECIFICITY */
/* This rule has the highest CSS specificity to override any dynamic styles */
html body div[data-dash-is-loading] .nav-tabs .nav-link,
html body div[data-dash-is-loading="true"] .nav-tabs .nav-link,
html body div[data-dash-is-loading="false"] .nav-tabs .nav-link,
html body .card-body .nav-tabs .nav-link,
html body #congressional-docs-tabs .nav-link,
html body .nav-tabs .nav-link {
  color: var(--secondary-color) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  /* Force immediate visibility on page load */
  animation: none !important;
  transition: none !important;
}

html body div[data-dash-is-loading] .nav-tabs .nav-link.active,
html body div[data-dash-is-loading="true"] .nav-tabs .nav-link.active,
html body div[data-dash-is-loading="false"] .nav-tabs .nav-link.active,
html body .card-body .nav-tabs .nav-link.active,
html body #congressional-docs-tabs .nav-link.active,
html body .nav-tabs .nav-link.active {
  color: var(--dark-text) !important;
  font-weight: 600 !important;
}

/* Ensure buttons are responsive */
@media (max-width: 768px) {
    .budget-category-buttons {
        justify-content: center;
    }
    
    button[id*="budget-category-btn"] {
        flex: 1;
        min-width: 80px;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* Bootstrap Tab Navigation Fixes */
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link {
    display: block !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
    background: none !important;
    border: 1px solid transparent !important;
    color: #007bff !important;
    font-weight: bold !important;
    margin-bottom: -1px !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6 !important;
    isolation: isolate !important;
}

.nav-tabs .nav-link.active {
    color: #495057 !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
}

/* Ensure tab text is visible */
.nav-tabs .nav-link,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    font-size: 14px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}