/* ==========================================================================
   BASE STYLES (all screen sizes)
   ========================================================================== */

html, body {
    max-width: 100%;
    background-color: rgb(14, 17, 21);
}


.dash-table-tooltip {
    background-color: #222 !important;
    color: #FFA500 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    border: 1px solid #FFA500 !important;
}
.dash-table-tooltip:before, .dash-table-tooltip:after {
    border-bottom-color: #222 !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr {
    min-height: 20px; height: 20px; padding-top: 0px; padding-bottom: 0px;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    padding-top: 2px !important; padding-bottom: 2px !important;
}
.dash-table-container .dash-filter input {
    color: white !important; background-color: #1a1a1a !important;
    border: 1px solid #333 !important; font-family: Arial !important; font-size: 13px !important;
}
.dash-table-container .dash-spreadsheet-container a {
    color: #6FC2FF !important; text-decoration: underline !important;
}


.hover-right { position: relative; right: 0; transition: right ease 0.5s; }
.hover-right:hover { right: -10px; }

.card {
    border-style: solid; background-color: #272c30; color: #fff;
    font-family: sans-serif; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

#open_presentation_tab, #open_centralbank_stance, #open_trade_ideas, #open_news {
    width: 1.8vh; float: inline-end;
}

.cardheader_marketsummary {
    font-family: sans-serif; font-size: 100%; width: 95.5%;
    text-align: center; display: block; margin-left: auto; margin-right: auto;
}
.summary_slides { width: 100%; height: 450px; transform: 0.5; }
.summary_slides_enlarged, .centralbank_stance_enlarged { width: 100%; height: 80vh; }

.col-1 { flex: 0 0 auto; width: 4.5% !important; }
.col-11 { flex: 0 0 auto; width: 95.5% !important; }

.modal-header, .modal-body, .modal-footer {
    font-size: 1.5vh; font-family: sans-serif; color: white; background-color: #272c30;
}

.btn:not(:disabled):not(.disabled) { cursor: pointer; font-size: 100%; }

.hala_title {
    color: #ececf1; font-weight: 600; font-size: 150%;
    text-align: center; display: block; margin-left: auto; margin-right: auto;
}
.hala_image { margin-left: auto; margin-right: auto; height: 50%; }
.hala_image_row { height: 40%; }
#hala_suggestions { padding-left: 10%; padding-right: 10%; font-size: 100%; }
#hala_chatbot { width: 100%; }
.hala_suggestions_image { width: 25%; }
.hala_suggestions_text { color: #ececf1; font-size: 100%; }
.hala_suggestions_image_text { display: inline-flex; align-items: center; margin: 0 auto; width: 50%; }
.hala_buttons { color: #ececf1; background-color: #40414f; border-color: #272c30; }
.disclaimer { color: #ececf1; font-size: 60%; }
#search-input-chatbot { border-width: 0.3vh; background-color: #40414f; border-color: #40414f; color: #fff; }
#submit-button-chatbot { color: #ececf1; background-color: #40414f; border-color: #40414f; }

#close_presentation_tab, #close_centralbank_stance, #close_trade_ideas,
#close_news, #close_reset_password { width: auto; }

.centralbank_stance { height: 500px; overflow-y: auto; text-align: justify; }
ul { font-size: 100% !important; color: #ececf1 !important; }
.centralbank_speeches_header { text-decoration: underline; font-size: 100%; color: #ececf1 !important; }

#trade_idea .trich_carousel .slick-next:before,
#international_overall_anxiety .trich_carousel .slick-next:before,
#modal_xl_trade_ideas .trich_carousel .slick-next:before,
#consumer_auto .trich_carousel .slick-next:before,
#consumer_auto_enlarged .trich_carousel .slick-next:before,
#consumer_mortgage .trich_carousel .slick-next:before,
#consumer_mortgage_enlarged .trich_carousel .slick-next:before,
#consumer_credit_card .trich_carousel .slick-next:before,
#consumer_credit_card_enlarged .trich_carousel .slick-next:before,
#consumer_overall_anxiety .trich_carousel .slick-next:before,
#consumer_overall_anxiety_enlarged .trich_carousel .slick-next:before,
#market_summary_layout .trich_carousel .slick-next:before,
#tab_content_city .trich_carousel .slick-next:before,
#tab_content_dq .trich_carousel .slick-next:before {
    color: white; margin-left: -100% !important;
}
#trade_idea .trich_carousel .slick-prev:before,
#international_overall_anxiety .trich_carousel .slick-prev:before,
#modal_xl_trade_ideas .trich_carousel .slick-prev:before,
#consumer_auto .trich_carousel .slick-prev:before,
#consumer_auto_enlarged .trich_carousel .slick-prev:before,
#consumer_mortgage .trich_carousel .slick-prev:before,
#consumer_mortgage_enlarged .trich_carousel .slick-prev:before,
#consumer_credit_card .trich_carousel .slick-prev:before,
#consumer_credit_card_enlarged .trich_carousel .slick-prev:before,
#consumer_overall_anxiety .trich_carousel .slick-prev:before,
#consumer_overall_anxiety_enlarged .trich_carousel .slick-prev:before,
#market_summary_layout .trich_carousel .slick-prev:before,
#tab_content_city .trich_carousel .slick-prev:before,
#tab_content_dq .trich_carousel .slick-prev:before {
    color: white; margin-left: 70% !important;
}

.trade_idea_iframe { width: 98%; height: 450px; }
#news_box { height: 100%; }
.news_iframe { width: 100%; height: 100%; }
.btn.disabled, .btn:disabled { opacity: 1 !important; }
.centralbank_stance_modal { height: 75vh; overflow-y: auto; font-size: 100%; }
#carousel .slick-slider { height: 450px; }
.news_iframe_enlarged { width: 100%; height: 75vh; }
.col-md-9 { flex: 0 0 auto; width: 73% !important; }

/*.btn-secondary {
    color: white !important; background-color: #40414f !important;
    border-color: #40414f !important; font-family: sans-serif;
}*/

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner.dash-fill-width .cell table {
    font-size: 100% !important;
}
.nav-tabs .nav-link { color: white; font-size: 100%; }

.dash-dropdown { color: #fff !important; font-size: 100%; }
.dash-dropdown .VirtualizedSelectOption { background-color: #333; color: #fff !important; font-size: 100%; }
.dash-dropdown .VirtualizedSelectOption:hover { background-color: gray; color: #fff !important; font-size: 100%; }
.Select--multi .Select-value { color: #fff !important; }
.Select-menu-outer { background-color: #333 !important; color: white !important; }
.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label { color: #fff !important; }
.Select-control { background-color: #333 !important; }

#tab_content_dq { height: 530px; }

.DateInput_input__focused { background-color: #333; font-size: 100%; color: #fff; }
.DateInput { background: #333 !important; font-size: 150% !important; color: #fff !important; width: 30% !important; }
.DateRangePickerInput { background-color: #333 !important; font-size: 100% !important; color: #fff !important; }
.DateInput_input { background-color: #333 !important; font-size: 100% !important; color: #fff !important; }
.CalendarMonth { background-color: #333 !important; }
.CalendarMonthGrid { background: #333 !important; }
.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover { background-color: gray !important; }
.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
    background-color: #272c30 !important; border-color: #272c30 !important;
}
.CalendarDay__selected_span { background-color: #333 !important; border-color: #333 !important; }
.CalendarMonth_caption { color: #fff !important; }
.CalendarDay__default:hover { background-color: #333 !important; }
.CalendarDay__default { background-color: #333 !important; color: white !important; border-color: #333 !important; }
.DayPicker_transitionContainer__horizontal { background: #333 !important; }
.DayPickerNavigation_leftButton__horizontalDefault { background: #333 !important; }
.DayPickerNavigation_svg__horizontal { background-color: #333; color: white; }
.DayPickerNavigation_rightButton__horizontalDefault { background-color: #333; }

.code, kbd, pre, samp { font-family: var(--bs-font-monospace) !important; }
pre { display: block !important; margin-top: 0 !important; margin-bottom: 1rem !important; overflow: auto; font-size: .875em !important; }
pre code.hljs { height: 450px; }
.Select-input > input { color: #fff; }
.Select, .Select div, .Select input, .Select span { text-align: left; }

.mantine-Select-item[data-selected], .mantine-Select-item[data-selected]:hover,
.mantine-Select-item[data-hovered] { background-color: gray !important; }
.mantine-Select-item:hover { background-color: gray !important; }
.mantine-753b79[data-orientation="vertical"] { background-color: #333 !important; }
.mantine-6h7z1o[data-hovered] { background-color: gray !important; }

.accordion {
    --bs-accordion-bg: #3b3c36;
    --bs-accordion-btn-bg: #454545;
    --bs-accordion-btn-color: #ffffff;
    overflow-y: auto;
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
}
.accordion-button { font-size: 45%; }
.rc-slider-mark-text, .rc-slider-mark-text rc-slider-mark-text-active { font-size: 90% !important; }

#tool_calendar { width: 40% !important; }
#tool_utility { width: 40% !important; }
#add { width: 10% !important; }
#subtract { width: 10% !important; }
.mantine-1f3oat5 { font-size: medium !important; }

.table-hover tbody tr:hover { background-color: #495057 !important; color: #ffffff !important; }
.table-hover-blue tbody tr:hover { background-color: #1e3d59 !important; color: #ffffff !important; }
.table-hover-green tbody tr:hover { background-color: #2d5a3d !important; color: #ffffff !important; }
.table-hover-orange tbody tr:hover { background-color: #6d4423 !important; color: #ffffff !important; }
.table-hover-red tbody tr:hover { background-color: #5d2f2f !important; color: #ffffff !important; }

#graphs { position: relative; min-height: 600px; transition: opacity 0.3s ease-in-out; }

@keyframes slideInRight { 0% { transform: translateX(50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes slideInLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

.slide-transition-next { animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-transition-prev { animation: slideInLeft 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-transition-search { animation: fadeIn 0.3s ease-in-out; }
#graphs > div { width: 100%; height: 100%; }

.nav-button-container { display: flex; align-items: center; justify-content: center; height: 100%; }

/*.btn-secondary {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    font-size: 15px !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
}
.btn-secondary:hover { background-color: rgba(255, 149, 0, 0.3) !important; transform: scale(1.05); }
.btn-secondary:active { transform: scale(0.98); }
*/

/* ==========================================================================
   DESKTOP ONLY (≥ 768px)
   ========================================================================== */

@media screen and (min-width: 768px) {
    .side_utility { display: none; }
}


/* ==========================================================================
   MOBILE ONLY (< 768px)
   ========================================================================== */

@media screen and (max-width: 767px) {
    html, body { background-color: rgb(14, 17, 21); }
    .logo { font-size: 70%; color: white !important; text-decoration: none !important; font-family: sans-serif; }
    .nav { --bs-nav-link-padding-y: 0.4rem !important; }
    .side_utility { position: fixed; display: none; left: 50%; bottom: 0; transform: translate(-50%, -50%); margin: 0 auto; }
    .card { text-align: center; width: 100%; }
    #open_presentation_tab, #open_centralbank_stance, #open_trade_ideas, #open_news { display: none; }
    .cardheader_marketsummary { font-size: 70%; }
    .summary_slides { width: 100%; height: 30vh; }
    .col-1 { flex: 0 0 auto; width: 8.333% !important; }
    #btn_sidebar { color: white; font-size: 50%; margin-top: 10%; margin-left: -10%; }
    .modal-header, .modal-body, .modal-footer { font-size: 1.2vh; }
    /* NOTE: btn width: 100% intentionally NOT applied here — it breaks the navbar dropdown */
    .btn:not(:disabled):not(.disabled) { cursor: pointer; font-size: 35%; }
    #hala_chatbot { margin-top: 8%; }
    .hala_title { font-size: 120%; }
    .hala_image { height: 40%; }
    #hala_suggestions { font-size: 100%; }
    .hala_suggestions_text { font-size: 35%; }
    .hala_suggestions_image_text { width: 50%; }
    .hala_suggestions_image { width: 30%; }
    .hala_image_row { height: 35%; }
    .disclaimer { font-size: 35%; }
    #search-input-chatbot { font-size: 35%; }
    #submit-button-chatbot { font-size: 35%; }
    .centralbank_stance { height: 45vh; overflow-y: scroll; text-align: left; }
    ul { font-size: 45% !important; }
    .centralbank_speeches_header { font-size: 55%; }
    #trade_idea { height: 55vh !important; overflow-y: auto; }
    .trade_idea_iframe { width: 98%; height: 65vh; }
    #news_box { height: 100%; margin-top: 10%; }
    .news_iframe { width: 100%; height: 50vh; margin-bottom: -4rem; }
    .btn.disabled, .btn:disabled { font-size: x-small; }
    .btn-primary:hover { color: black; background-color: white; border-color: #272c30; }
    .btn-primary.focus, .btn-primary:focus {
        color: black; background-color: white !important;
        border-color: #272c30; box-shadow: 0 0 0 0.2rem #40414f;
    }
}



/* ==========================================================================
   LOGIN PAGE OVERRIDES — scoped to #login-page-wrapper
   ========================================================================== */

#login-page-wrapper {
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    min-height: -webkit-fill-available !important;
    min-height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
}
#login-page-wrapper button.btn:hover {
    background-color: hsl(36, 95%, 58%) !important;
    color: hsl(220, 20%, 7%) !important;
    border-color: hsl(36, 95%, 58%) !important;
    transition: background-color 0.15s ease !important;
}
#login-page-wrapper .btn:not(:disabled):not(.disabled) {
    width: auto !important;
    font-size: inherit !important;
}
#login-page-wrapper .login-card {
    width: min(440px, 100%) !important;
    background-color: hsl(220, 18%, 10%) !important;
    border: 1px solid hsl(220, 15%, 18%) !important;
    border-radius: 14px !important;
    padding: clamp(24px, 5vw, 42px) clamp(20px, 6vw, 40px) !important;
    box-shadow: 0 0 0 1px hsl(220,15%,14%), 0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35) !important;
    box-sizing: border-box !important;
    max-height: 90vh !important;
    overflow-y: visible !important;
}
#login-page-wrapper .login-brand {
    display: flex !important; justify-content: center !important;
    margin-bottom: clamp(16px, 3vw, 24px) !important;
}
#login-page-wrapper .login-logo {
    height: clamp(36px, 5vw, 44px) !important; width: auto !important; display: block !important;
}
#login-page-wrapper .login-title {
    color: hsl(40, 10%, 85%) !important; font-size: clamp(18px, 2.5vw, 22px) !important;
    font-weight: 700 !important; text-align: center !important;
    letter-spacing: -0.4px !important; margin: 0 0 5px !important;
}
#login-page-wrapper .login-subtitle {
    color: hsl(220, 10%, 50%) !important; font-size: clamp(12px, 1.5vw, 13px) !important;
    text-align: center !important; margin: 0 0 clamp(14px, 2.5vw, 20px) !important;
}
#login-page-wrapper .login-divider {
    border: none !important; border-top: 1px solid hsl(36, 95%, 20%) !important;
    margin: 0 0 clamp(14px, 2.5vw, 22px) !important; opacity: 1 !important;
}
#login-page-wrapper .login-field-label {
    display: block !important; font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: 0.7px !important; text-transform: uppercase !important;
    color: hsl(220, 10%, 50%) !important; margin-bottom: 6px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
#login-page-wrapper .login-field-group { margin-bottom: clamp(12px, 2vw, 16px) !important; }
#login-page-wrapper .login-input {
    width: 100% !important; background-color: hsl(220, 15%, 16%) !important;
    border: 1px solid hsl(220, 15%, 22%) !important; border-radius: 7px !important;
    color: hsl(40, 10%, 85%) !important; font-size: 14px !important;
    font-family: 'Inter', system-ui, sans-serif !important; padding: 10px 13px !important;
}
#login-page-wrapper .login-input:focus {
    border-color: hsl(36, 95%, 52%) !important;
    box-shadow: 0 0 0 3px hsla(36, 95%, 52%, 0.18) !important;
    background-color: hsl(220, 15%, 18%) !important; outline: none !important;
}
#login-page-wrapper .login-forgot-wrap {
    display: flex !important; justify-content: flex-end !important;
    margin-top: -6px !important; margin-bottom: clamp(16px, 2.5vw, 22px) !important;
}
#login-page-wrapper .login-forgot-wrap .forgot-password-link {
    float: none !important; font-size: 12px !important; color: hsl(220, 10%, 50%) !important;
    text-decoration: none !important; padding: 0 !important; margin: 0 !important; width: auto !important;
}
#login-page-wrapper .login-forgot-wrap .forgot-password-link:hover { color: hsl(36, 95%, 52%) !important; }
#login-page-wrapper .login-submit-btn {
    width: 100% !important; background-color: hsl(36, 95%, 52%) !important;
    border-color: hsl(36, 95%, 52%) !important; color: hsl(220, 20%, 7%) !important;
    font-size: 15px !important; font-weight: 700 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    padding: 12px 20px !important; border-radius: 8px !important;
    cursor: pointer !important; display: block !important;
}
#login-page-wrapper .login-submit-btn:hover {
    background-color: hsl(36, 95%, 58%) !important; border-color: hsl(36, 95%, 58%) !important;
    color: hsl(220, 20%, 7%) !important; box-shadow: 0 4px 20px hsla(36, 95%, 52%, 0.35) !important;
}

/* Modal z-index */
.modal, .modal-backdrop { z-index: 10000 !important; }
.modal-dialog { z-index: 10001 !important; }

/* Modal header */
.login-modal-header {
    background-color: hsl(220, 18%, 10%) !important; border-bottom: 1px solid hsl(220, 15%, 18%) !important;
    color: hsl(40, 10%, 85%) !important; padding: 16px 20px !important;
}
.login-modal-header .modal-title { color: hsl(36, 95%, 52%) !important; font-size: 15px !important; font-weight: 600 !important; }
.login-modal-header .btn-close { filter: invert(1) opacity(0.6) !important; }
.login-modal-header .btn-close:hover { filter: invert(1) opacity(1) !important; }

/* Modal body/footer */
.login-modal-body { background-color: hsl(220, 18%, 10%) !important; color: hsl(40, 10%, 85%) !important; padding: 20px !important; }
.login-modal-footer { background-color: hsl(220, 18%, 10%) !important; border-top: 1px solid hsl(220, 15%, 18%) !important; padding: 12px 20px !important; }

/* Modal buttons */
.login-modal-btn {
    background-color: hsl(36, 95%, 52%) !important; border-color: hsl(36, 95%, 52%) !important;
    color: hsl(220, 20%, 7%) !important; font-weight: 600 !important; border-radius: 7px !important;
    padding: 9px 18px !important; font-size: 13px !important; width: auto !important;
}
.login-modal-btn:hover { background-color: hsl(36, 95%, 58%) !important; border-color: hsl(36, 95%, 58%) !important; color: hsl(220, 20%, 7%) !important; }
.login-modal-close-btn {
    background-color: hsl(220, 15%, 16%) !important; border-color: hsl(220, 15%, 22%) !important;
    color: hsl(40, 10%, 85%) !important; border-radius: 7px !important;
    padding: 7px 16px !important; font-size: 13px !important; width: auto !important;
}
.login-modal-close-btn:hover { background-color: hsl(220, 15%, 20%) !important; color: hsl(40, 10%, 85%) !important; }

/* Modal alerts */
.login-modal-body .alert-success {
    background-color: hsl(120, 30%, 10%) !important; border-color: hsl(120, 40%, 25%) !important;
    color: hsl(120, 60%, 70%) !important; font-size: 13px !important; border-radius: 7px !important; padding: 8px 12px !important;
}
.login-modal-body .alert-danger {
    background-color: hsl(0, 40%, 12%) !important; border-color: hsl(0, 60%, 30%) !important;
    color: hsl(0, 80%, 70%) !important; font-size: 13px !important; border-radius: 7px !important; padding: 8px 12px !important;
}

/* Login alert */
#log-in-error-alert { font-size: 13px !important; padding: 8px 12px !important; border-radius: 7px !important; margin-bottom: 10px !important; }
#log-in-error-alert.alert-warning {
    background-color: hsl(30, 80%, 15%) !important; border-color: hsl(36, 95%, 35%) !important; color: hsl(36, 95%, 75%) !important;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: visible !important;
    padding: 0 16px !important;
    border-bottom: 1px solid hsl(220, 15%, 14%) !important;
    margin-bottom: 0 !important;
}

.navbar > .container-fluid {
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 100% !important;
    overflow: visible !important;
}

.navbar .navbar-user-toggle,
.navbar .dropdown-toggle {
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    font-size: 20px !important;
    padding: 6px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: hsl(220, 10%, 55%) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.navbar-user-toggle::after { display: none !important; }
.navbar-user-toggle:focus { box-shadow: none !important; }
.navbar-user-toggle:hover i { color: hsl(36, 95%, 52%) !important; }

.navbar .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 200px !important;
    transform: none !important;
    background-color: hsl(220, 18%, 10%) !important;
    border: 1px solid hsl(220, 15%, 18%) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    z-index: 9999 !important;
}

.navbar .dropdown-item {
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    color: hsl(40, 10%, 85%) !important;
    white-space: nowrap !important;
    background: none !important;
}

.navbar .dropdown-item:hover {
    background-color: hsl(220, 15%, 16%) !important;
    color: hsl(36, 95%, 52%) !important;
}


/* ==========================================================================
   TWO-LEVEL NAV
   ========================================================================== */

.nav-wrapper {
    background-color: rgb(14, 17, 21);
    padding: 0;
    position: relative;
    margin-top: 0;
    z-index: 100;
}

/* ── Row 1: top tabs ── */
.top-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background-color: rgb(14, 17, 21);
    border-bottom: 1px solid hsl(220, 15%, 14%);
    align-items: center;
}

.top-tab-row .btn {
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: hsl(220, 10%, 55%) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 14px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    transform: none !important;
    outline: none !important;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: hsl(220, 15%, 14%);
    --bs-btn-active-bg: transparent;
}

.top-tab-row button.btn:not(.top-tab-active):hover {
    background-color: hsl(220, 15%, 14%) !important;
    color: hsl(40, 10%, 85%) !important;
}

/* Active: orange background, black text */
.top-tab-row .btn.top-tab-active,
.top-tab-row .btn.top-tab-active:hover,
.top-tab-row .btn.top-tab-active:focus,
.top-tab-row .btn.top-tab-active:active {
    background-color: hsl(36, 95%, 52%) !important;
    color: hsl(220, 20%, 7%) !important;
    font-weight: 600 !important;
    border: none !important;
    --bs-btn-bg: hsl(36, 95%, 52%);
    --bs-btn-hover-bg: hsl(36, 95%, 52%);
    --bs-btn-active-bg: hsl(36, 95%, 52%);
}

/* ── Row 2: sub tabs ── */
.sub-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 12px;
    background-color: rgb(14, 17, 21);
    border-bottom: 1px solid hsl(220, 15%, 14%);
    align-items: center;
}

.sub-tab-row .btn {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    color: hsl(220, 10%, 55%) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 3px 12px !important;
    cursor: pointer !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
    transform: none !important;
    outline: none !important;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: hsl(220, 15%, 14%);
    --bs-btn-active-bg: transparent;
}

.sub-tab-row button.btn:not(.sub-tab-active):hover {
    background-color: hsl(220, 15%, 14%) !important;
    color: hsl(40, 10%, 85%) !important;
}

/* Active: orange border, white text, transparent background */
.sub-tab-row .btn.sub-tab-active,
.sub-tab-row .btn.sub-tab-active:hover,
.sub-tab-row .btn.sub-tab-active:focus,
.sub-tab-row .btn.sub-tab-active:active {
    color: hsl(40, 10%, 85%) !important;
    border: 1px solid hsl(36, 95%, 52%) !important;
    background-color: hsl(220, 15%, 14%) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-border-color: hsl(36, 95%, 52%);
}

/* External links */
.sub-tab-row .sub-tab-link {
    display: inline-flex !important;
    align-items: center !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    color: hsl(36, 95%, 52%) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 3px 12px !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
}

.sub-tab-row .sub-tab-link:hover {
    background-color: hsl(220, 15%, 14%) !important;
    color: hsl(36, 95%, 65%) !important;
}

/* ── Mobile ── */
@media screen and (max-width: 767px) {
    .top-tab-row .btn {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
    .sub-tab-row .btn,
    .sub-tab-row .sub-tab-link {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
}