/* =============================================
   HORIZONTAL RULE STYLING
   ============================================= */

hr {
    border: none;
    border-top: 0.5pt solid #C9CBCB;
    margin: 16px 0;
}

/* =============================================
   CHART LAYOUT STYLES
   ============================================= */

.chart-split-left {
    width: 60%;
    display: inline-block;
    vertical-align: top;
}

.chart-split-right {
    width: 38%;
    display: inline-block;
    vertical-align: top;
    margin-left: 2%;
    padding-left: 20px;
}

.section-container {
    margin-bottom: 24px;
}



/* =============================================
   MONTH-YEAR RANGE SLIDER - HIDE TOOLTIPS
   ============================================= */

/* Completely hide all tooltips on month-year sliders */
.month-year-slider .rc-slider-tooltip,
.month-year-slider .rc-tooltip,
.month-year-slider .rc-slider-tooltip-content,
.month-year-slider .rc-slider-tooltip-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide tooltips on any slider with date-range in the ID */
div[id*="date-range"] .rc-slider-tooltip,
div[id*="date-range"] .rc-tooltip,
div[id*="date-range"] .rc-slider-tooltip-content,
div[id*="date-range"] .rc-slider-tooltip-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =============================================
   LOADING OVERLAY ANIMATIONS
   ============================================= */

/* Loading overlay is now controlled by inline styles and JavaScript */
/* Keep only pulse animation for the loading text */

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Apply pulse animation to loading text */
.loading-text-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Strong fallback styles to prevent any FOUC */
#global-loading-overlay {
    position: fixed !important;
    z-index: 10000 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: white !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
}

#global-loading-overlay > div {
    font-size: 2rem !important;
    color: #3293C5 !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

/* =============================================
   DROPDOWN NAVIGATION STYLES - CSS ONLY
   ============================================= */

/* Pure CSS dropdown navigation - no JavaScript conflicts */
.nav-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.nav-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    cursor: pointer;
}

.nav-dropdown-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
    transform: rotate(90deg); /* Point down by default */
    flex-shrink: 0;
}

/* Hover state for dropdown trigger */
.nav-dropdown:hover .nav-dropdown-trigger {
    background-color: var(--rhg-surface-light, #cce4ef);
    color: var(--rhg-deep-black, #0a0a19);
}

/* Arrow rotation on hover */
.nav-dropdown:hover .nav-dropdown-arrow {
    transform: rotate(270deg); /* Point up on hover */
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--rhg-border-default, #c9cbcb);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Show dropdown menu on hover */
.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-dropdown-item {
    display: block;
    padding: 10px 16px;
    color: var(--rhg-deep-black, #0a0a19);
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    transition: background-color 0.2s ease;
    border-radius: 0;
    white-space: nowrap;
}

.nav-dropdown-item:hover {
    background-color: var(--rhg-surface-light, #cce4ef);
    color: var(--rhg-deep-black, #0a0a19);
    text-decoration: none;
}

.nav-dropdown-item.active {
    background-color: var(--rhg-surface-light, #cce4ef);
    font-weight: 500;
}

/* Keep dropdown visible when hovering over menu items */
.nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Mobile dropdown support - use .open class for touch devices */
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-dropdown.open .nav-dropdown-arrow {
    transform: rotate(270deg);
}

/* Mobile-specific dropdown styles */
@media (max-width: 768px) {
    .nav-dropdown-trigger {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .nav-dropdown-menu {
        position: fixed;
        z-index: 10000;
    }
    
    .nav-dropdown.open .nav-dropdown-menu {
        display: block !important;
    }
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-top-20 {
    margin-top: 20px;
}

/* =============================================
   DASHBOARD COMPONENT STYLES
   ============================================= */

/* Scenario callout box - used across sector dashboards */
.scenario-callout-box {
    flex: 1;
    border: 1px solid #e9ecef;
    border-radius: 0px;
    padding: 12px 16px;
    margin-left: 20px;
}

/* Filter container flexbox - for filter groups */
.filters-flex-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

/* =============================================
   FILTER DROPDOWN Z-INDEX FIX
   Ensures dropdown menus appear above sibling filters
   ============================================= */

/* Filter row should allow dropdowns to stack properly */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

/* Each filter container in a row needs isolation for proper stacking */
.filter-row > div,
.filter-row > .rhg-filter-dropdown {
    position: relative;
}

/* Dash dropdown menus need high z-index to appear above siblings */
.filter-row .Select-menu-outer,
.filter-row .dash-dropdown .Select-menu-outer {
    z-index: 9999 !important;
}

/* Ensure the dropdown container itself gets proper stacking when open */
.filter-row .dash-dropdown.is-open,
.filter-row .Select.is-open {
    z-index: 1000;
}

/* Global Emissions & Energy – steel supply: room for long grouped variable labels */
.global-emissions-steel-filters.filter-row .filter-container {
    min-width: 280px;
}

/* Pillar + countries on one row (no wrap); compact multiselect shows labels +N */
.global-emissions-steel-filters.steel-pillar-filters-row {
    flex-wrap: nowrap;
}

.global-emissions-steel-filters.steel-pillar-filters-row > .filter-container {
    min-width: unset;
    flex-shrink: 0;
}

/* Scenario description text styling */
.scenario-description-text {
    margin: 0;
    line-height: 1.0;
    font-size: 14px;
}

/* Large title styling for dashboard sections */
.dashboard-section-title {
    font-size: 36px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 5px;
    margin-top: 0px;
}

/* Steel supply: tall scroll parent so country filter strip stays sticky through pillar + profile */
.steel-country-statistics-sticky-scope {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Country statistics intro: no gap before sticky country row */
.steel-country-statistics-header .content-paragraph {
    margin-bottom: 0;
}

/* Full-width pinned bar (white); inner column holds the Country control */
.steel-supply-country-filter-sticky-strip {
    position: sticky;
    top: 0;
    z-index: 500;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 8px;
}

.steel-supply-country-filter-sticky-strip-inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Steel supply: “Country statistics” — between page title and subsection H3s (~19px) */
.steel-country-statistics-section-title {
    font-family: Roboto, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 8px 0;
    line-height: 1.25;
}

/* Steel supply: three country-driven section H3s (material flows, drivers, trade partners) */
.steel-trade-partners-subheader {
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 10px 0;
}

.steel-country-material-flows-subheader {
    font-family: Roboto, sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 10px 0;
}

.steel-production-consumption-intro-block .content-paragraph {
    font-size: 15px;
}

.steel-trade-partners-intro-block .content-paragraph {
    margin-top: 0;
}

/* Steel supply: list body copy matches paragraph theme (same class as prose blocks) */
.steel-production-consumption-intro-block .steel-production-consumption-bullets li .content-paragraph {
    margin-top: 0;
    margin-bottom: 0;
    display: inline;
}

/* Section title wrapper */
.section-title-wrapper {
    margin-bottom: 15px;
}

/* Date picker styles - for CIM dashboards */
.date-picker-from {
    flex: 1;
}

.date-picker-to {
    flex: 1;
}

.date-picker-to-label {
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 10px;
    color: var(--text-color);
    font-size: 14px;
}

.date-picker-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 340px;
    margin-bottom: 0;
}

.date-picker-label {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

/* CIM Manufacturing / Energy & Industry: compact advanced filters beside date range */
.cim-actuals-advanced-filters {
    width: 300px;
    margin-bottom: 0;
    align-self: flex-end;
    flex-shrink: 0;
}

.cim-actuals-advanced-filters-accordion {
    width: 100%;
    border-radius: 0;
}

.cim-actuals-advanced-filters .mantine-Accordion-control {
    min-height: 38px;
    padding: 6px 10px;
}

.cim-actuals-advanced-filters .mantine-Accordion-content {
    padding: 8px 10px 10px;
}

.cim-actuals-advanced-filters-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* Month-year slider styles */
.month-year-slider-container {
    margin-bottom: 15px;
    width: 35%;
}

.month-year-slider-label-wrapper {
    display: block;
    margin-bottom: 5px;
}

.month-year-slider-dates {
    font-weight: 400;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
}

.month-year-slider-wrapper {
    height: 50px;
    padding: 5px;
    margin: 0;
}

/* =============================================
   SIGN-IN REQUIRED PAGE ADJUSTMENTS
   ============================================= */

/* Move sign-in content down from center - add top padding */
.rhg-signin-required {
    justify-content: flex-start !important;
    padding-top: 200px !important;
}

/* =============================================
   CIM METHODS TABLE - BORDERS BETWEEN SECTORS ONLY
   ============================================= */

.cim-methods-table-wrapper .dash-table-container table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cim-methods-table-wrapper .dash-table-container td,
.cim-methods-table-wrapper .dash-table-container th {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.cim-methods-table-wrapper .dash-table-container tbody tr:nth-child(6) td,
.cim-methods-table-wrapper .dash-table-container tbody tr:nth-child(9) td,
.cim-methods-table-wrapper .dash-table-container tbody tr:nth-child(14) td {
    border-bottom: 1px solid #C9CBCB !important;
}

/* Column widths: narrower Sector and Technology, wider Subcategories; wrap text */
.cim-methods-table-wrapper .dash-table-container th:nth-child(1),
.cim-methods-table-wrapper .dash-table-container td:nth-child(1) {
    width: 160px !important;
    max-width: 160px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}
.cim-methods-table-wrapper .dash-table-container th:nth-child(2),
.cim-methods-table-wrapper .dash-table-container td:nth-child(2) {
    width: 220px !important;
    max-width: 220px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}
.cim-methods-table-wrapper .dash-table-container th:nth-child(3),
.cim-methods-table-wrapper .dash-table-container td:nth-child(3) {
    min-width: 280px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}