/* assets/custom.css */

/* Loading spinner styles - positioned absolutely to not affect layout */
.custom-loading .dash-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important;
    pointer-events: none !important;
    /* Absolutely positioned so it doesn't affect document flow */
}

/* Compensate spinner position for inventory page spacing changes */
.inventory-page .custom-loading .dash-spinner {
    margin-top: 90px !important;
}

/* Custom spinner color - match download drawer exactly */
.custom-loading .dash-spinner .dash-default-spinner {
    border-color: #94ba1d !important;
    border-right-color: transparent !important;
}



/* Estilos para el botón del modal */
#open-modal,
.info-btn,
#curtailment-open-modal {
    background-color: #94ba1d !important;
    border-color: white !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 18px !important;
    font-weight: bolder !important;
    cursor: pointer !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

/* Hover para que tenga efecto bootstrap */
#open-modal:hover,
.info-btn:hover,
#curtailment-open-modal:hover {
    background-color: #a0ac88 !important;
    /* verde más oscuro al pasar el ratón */
}

#close-modal {

    background-color: #007BFF !important;
    border: none !important;
}

/* Ensure update button aligns with form elements */
#update-button {
    height: 38px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    margin-top: 0 !important;
}

/* Download toggle button alignment */
#batch-download-toggle {
    margin-top: 0 !important;
    margin: 0 !important;
    height: 38px !important;
    width: 38px !important;
}

/* Ensure dropdown has consistent height and alignment */
#analytics_input,
#data_input,
#tech_input {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
}



#analytics_input .Select-control,
#data_input .Select-control {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

#analytics_input .Select-value-label,
#analytics_input .Select-placeholder,
#data_input .Select-value-label,
#data_input .Select-placeholder {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Fix clear button positioning in dropdown */
#analytics_input .Select-value {
    padding-right: 70px !important;
    display: flex !important;
    align-items: center !important;
}

#analytics_input .Select-clear-zone {
    position: absolute !important;
    right: 35px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 5px !important;
}

#analytics_input .Select-clear {
    font-size: 18px !important;
}

/* Fix dropdown arrow positioning */
#analytics_input .Select-arrow-zone {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 5px !important;
}

#analytics_input .Select-input {
    padding-left: 0 !important;
}

/* Fix clear button positioning in data_input and tech_input dropdowns */
#data_input .Select-value,
#tech_input .Select-value {
    padding-right: 25px !important;
    display: flex !important;
    align-items: center !important;
}

#data_input .Select-clear-zone {
    position: absolute !important;
    right: 35px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 5px !important;
}

#data_input .Select-arrow-zone {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 5px !important;
}

/* Fix for multi-select dropdowns growing in height */
.Select--multi .Select-multi-value-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding-right: 50px !important;
    /* Space for clear button and arrow */
    max-height: 110px !important;
    /* Allow up to ~3 lines before scrolling */
    overflow-y: auto !important;
}

.Select--multi .Select-value {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

.Select--multi .Select-value-label {
    line-height: 20px !important;
    padding: 2px 6px !important;
}

/* Shake animation for validation */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.shake-animation {
    animation: shake 0.5s ease-in-out;
}

/* Ensure date picker wrapper has consistent height and alignment */
.DateRangePickerInput {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure date picker inputs are centered */
#date_picker_range .DateInput,
#date_range_cur .DateInput,
#cp-rolling-date-picker .DateInput {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

#date_picker_range .DateInput_input,
#date_range_cur .DateInput_input,
#cp-rolling-date-picker .DateInput_input {
    height: 38px !important;
    line-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ========== Batch Download Drawer Styles ========== */

/* Backdrop styling - make it more opaque */
.offcanvas-backdrop.show {
    opacity: 0.6 !important;
    background-color: #333 !important;
}

/* Offcanvas container styling */
.batch-download-offcanvas {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
}

/* Offcanvas header styling */
#batch-download-drawer .offcanvas-header {
    border-bottom: 1px solid #ededed;
    padding: 1.25rem;
}

#batch-download-drawer .offcanvas-title {
    font-weight: 700;
    font-size: 1.5em;
    color: #4b5563;
}

#batch-download-drawer .offcanvas-body {
    padding: 1.25rem;
    overflow-y: auto;
}

/* Close button styling */
#batch-download-drawer .btn-close {
    background-color: transparent !important;
    border: none !important;
    opacity: 0.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    transition: opacity 0.2s ease !important;
    background-size: 14px !important;
}

#batch-download-drawer .btn-close:hover {
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Download button loading indicator */
.batch-download-loading {
    position: relative;
}

.batch-download-loading .dash-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.batch-download-loading._dash-loading .batch-download-btn {
    opacity: 0.6;
    pointer-events: none;
}

/* Custom spinner color */
.batch-download-loading .dash-spinner .dash-default-spinner {
    border-color: #94ba1d !important;
    border-right-color: transparent !important;
}

/* Date picker styling in drawer */
.batch-download-date-picker .DateRangePickerInput {
    border-radius: 10px !important;
    border: none !important;
    width: 100% !important;
    background-color: transparent !important;
}

.batch-download-date-picker .DateRangePickerInput:hover {
    border: none !important;
}

.batch-download-date-picker .DateInput {
    width: 45% !important;
    border: none !important;
}

.batch-download-date-picker .DateInput_input {
    font-size: 14px !important;
    padding: 8px 10px !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    background-color: white !important;
    border-radius: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.batch-download-date-picker .DateInput_input:focus {
    border-color: #94ba1d !important;
    outline: none !important;
}

.batch-download-date-picker .DateRangePickerInput_arrow {
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
}

/* Market toggle buttons - Premium Design */
.market-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    color: #979798 !important;
    /* Default grey color for both */
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: 1 !important;
    margin-top: 0 !important;
}

.market-toggle-btn:hover {
    transform: translateY(-1px) !important;
}

.market-toggle-btn:active {
    transform: translateY(0) !important;
    background-color: transparent !important;
}

.market-toggle-btn.select-all:hover,
.market-toggle-btn.select-all:active,
.market-toggle-btn.select-all:focus {
    color: #94ba1d !important;
    /* Green on hover/active only for Select All */
    background-color: rgba(148, 186, 29, 0.1) !important;
}

.market-toggle-btn.deselect-all:hover,
.market-toggle-btn.deselect-all:active,
.market-toggle-btn.deselect-all:focus {
    color: #777777 !important;
    /* Slightly darker grey on hover */
    background-color: rgba(151, 151, 152, 0.1) !important;
}

/* Checklist styling for batch download */
.batch-download-checklist label {
    margin-right: 0 !important;
}

.batch-download-checklist label:hover {
    background-color: #f3f3f3;
}

.batch-download-checklist input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #94ba1d !important;
    border-radius: 4px !important;
    background-color: white !important;
    cursor: pointer;
    margin-right: 10px !important;
}

.batch-download-checklist input[type="checkbox"]:checked {
    background-color: #94ba1d !important;
    border-color: #94ba1d !important;
}

.batch-download-checklist input[type="checkbox"]:checked::before {
    background-color: white !important;
    border-radius: 2px !important;
    width: 8px !important;
    height: 8px !important;
}

/* Download button styling */
.batch-download-btn {
    background-color: #94ba1d !important;
    border: 2px solid #94ba1d !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

.batch-download-btn:hover {
    background-color: #a0ac88 !important;
    border-color: #a0ac88 !important;
}

.batch-download-btn:disabled {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* Dropdown styling in drawer */
#batch-download-drawer .Select-control {
    border-radius: 10px !important;
    border-color: #ddd !important;
}

#batch-download-drawer .Select-control:hover {
    border-color: #94ba1d !important;
}

#batch-download-drawer .Select-option.is-selected {
    background-color: #94ba1d !important;
}

#batch-download-drawer .Select-option.is-focused {
    background-color: #f0f5e6 !important;
}

/* Spinning animation for loading icon */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinning-icon {
    animation: spin 1s linear infinite;
}

/* Fix offcanvas header layout */
#batch-download-drawer .offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#batch-download-drawer .offcanvas-header .offcanvas-title {
    flex-grow: 1;
}

/* Ensure close button doesn't have button default styles */
#batch-download-drawer .offcanvas-header .btn-close {
    margin-top: 0 !important;
    flex-shrink: 0;
}

/* Error notification styling */
#batch-download-error {
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Active state for custom dropdowns (Comparison & Curtailment) */
.show>.custom-dropdown-toggle,
.custom-dropdown-toggle:focus,
.custom-dropdown-toggle:active {
    border-color: #94ba1d !important;
    outline: none !important;
}

/* Green focus state for Analytics Dropdown (Shared style with DatePicker) */
.Select.is-focused>.Select-control,
.Select.is-open>.Select-control {
    border-color: #94ba1d !important;
}

/* Ensure consistent height for all controls in the bar */
#analytics_input .Select-control,
#data_input .Select-control,
#date_range_cur .DateRangePickerInput,
#curtailment-fetch-button,
#curtailment-download-toggle {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

/* Custom Multiselect Toggle Styles to Override Bootstrap/Theme */
.asset-selector-toggle.btn {
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

.asset-selector-toggle.btn:hover,
.asset-selector-toggle.btn:focus,
.asset-selector-toggle.btn:active,
.show>.asset-selector-toggle.btn {
    background-color: white !important;
    color: #333 !important;
    border-color: #94ba1d !important;
}

/* Custom Checklist Item Hover Effect */
.custom-multiselect-checklist label:hover {
    background-color: #f3f3f3 !important;
}

/* Custom Tooltip Styling */
.custom-tooltip {
    z-index: 9999 !important;
    transition-delay: 0s !important;
}

.custom-tooltip.show {
    transition-delay: 0s !important;
}

.custom-tooltip .tooltip-inner {
    background-color: white !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 18px !important;
    width: auto !important;
    max-width: 300px !important;
    min-width: fit-content !important;
    border-radius: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
}

/* aFRR-specific tooltip: opaque, higher contrast, avoids overlapping label */
.custom-tooltip-afrr {
    opacity: 1 !important;
}
.custom-tooltip-afrr .tooltip-inner {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: white !important;
}

.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: white !important;
}

.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: white !important;
}

.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: white !important;
}

/* Ensure button wrapper doesn't interfere with tooltip positioning */
#revenue-table-export-btn,
#energy-table-export-btn {
    position: relative !important;
}

/* Center tooltip arrow properly for left placement */
.custom-tooltip.bs-tooltip-left .tooltip-arrow {
    top: 50% !important;
    right: 0 !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
}

/* Ensure tooltip stays within card boundaries for left placement */
.custom-tooltip.bs-tooltip-left {
    margin-right: 8px !important;
}

/* aFRR tooltip arrow - solid white to match opaque inner */
.custom-tooltip-afrr.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #ffffff !important;
}

.custom-tooltip.bs-tooltip-top .tooltip-arrow {
    bottom: -0.4rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Modal Close Button Styling */
#close-modal,
#curtailment-close-modal {
    background-color: #94ba1d !important;
    border-color: #94ba1d !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

#close-modal:hover,
#curtailment-close-modal:hover {
    background-color: #a0ac88 !important;
    border-color: #a0ac88 !important;
    color: white !important;
}

#close-modal:focus,
#curtailment-close-modal:focus {
    background-color: #94ba1d !important;
    border-color: #94ba1d !important;
    color: white !important;
    box-shadow: 0 0 0 3px rgba(148, 186, 29, 0.25) !important;
}

/* Modal Header Close Button (X) Styling */
#modalinfo .btn-close,
#curtailment-modalinfo .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.9 !important;
}

#modalinfo .btn-close:hover,
#curtailment-modalinfo .btn-close:hover {
    opacity: 1 !important;
}

/* ========== Curtailment and Comparison Page Alignment Fixes ========== */

/* Ensure graph containers have consistent width and centering */
.graph-ana {
    width: 88vw !important;
    margin: 0 auto 32px auto !important;
}

/* Ensure stacked analytics cards never touch */
.analytics-page .graph-ana+.graph-ana {
    margin-top: 32px !important;
}

/* ========== Market Insights: tabs aligned with graph card (88vw, 12px radius, optimize accent) ========== */
.market-insights-tabs-wrapper {
    width: 88vw !important;
    margin: 0 auto 16px auto !important;
}

.market-insights-tabs-wrapper .market-insights-tabs-container {
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    box-shadow: 0 4px 8px rgba(88, 77, 77, 0.1);
}

.market-insights-tabs-wrapper .market-insights-tab {
    border-radius: 12px 12px 0 0 !important;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    background: #f9fafb;
}

.market-insights-tabs-wrapper .market-insights-tab--selected {
    background: #fff !important;
    color: #111827 !important;
    border-bottom: 2px solid #94ba1d !important;
    margin-bottom: -1px;
}

.market-insights-tabs-wrapper .market-insights-tab:first-child {
    border-top-left-radius: 12px !important;
}

.market-insights-tabs-wrapper .market-insights-tab:last-child {
    border-top-right-radius: 12px !important;
}

/* Tab content card: no top radius so it connects with the tab strip */
.market-insights-tabs-wrapper .graph-ana {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding-top: 24px !important;
}

/* Market Insights: Add Graph primary CTA */
.market-insights-add-graph-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #94ba1d !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(148, 186, 29, 0.35) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.market-insights-add-graph-btn:hover {
    background: #7da018 !important;
    box-shadow: 0 3px 10px rgba(148, 186, 29, 0.4) !important;
}

/* Market Insights: filter bar and card polish */
.market-insights-tabs-wrapper .card-no-hover {
    border: 1px solid #e5e7eb !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.market-insights-tabs-wrapper .card-no-hover .card-body {
    padding: 0 !important;
}

.market-insights-tabs-wrapper .card-no-hover .card-body>div:first-child {
    padding: 16px 24px !important;
    border-bottom: 1px solid #f0f1f4 !important;
    background: #fafbfc !important;
    gap: 12px !important;
}

.market-insights-tabs-wrapper .card-no-hover .card-body>div:last-child {
    padding: 24px 26px !important;
}

.market-insights-tabs-wrapper .custom-dropdown-toggle {
    border-radius: 8px !important;
    border-color: #e5e7eb !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

.market-insights-tabs-wrapper .custom-dropdown-toggle:hover {
    border-color: #94ba1d !important;
    background: #fff !important;
}

/* Curtailment control bar alignment */
#curtailment-fetch-button {
    height: 38px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    margin-top: 0 !important;
}

#curtailment-download-toggle {
    margin-top: 0 !important;
    margin: 0 !important;
    height: 38px !important;
    width: 38px !important;
}

/* Fix date picker container alignment in curtailment */
#date_range_cur,
#comparison-date-picker {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

#date_range_cur .DateRangePicker,
#comparison-date-picker .DateRangePicker {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
}

#date_range_cur .DateRangePickerInput,
#comparison-date-picker .DateRangePickerInput {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

/* Fix dropdown menu alignment for the multiselect dropdowns */
#tech_menu,
#comparison-asset-menu {
    height: 38px !important;
}

#tech_menu>button,
#comparison-asset-menu>button {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

/* Comparison page specific fixes */
#comparison-asset-menu {
    margin-top: 0 !important;
}

/* Ensure all control bar items are vertically centered */
#data_input,
#tech_menu,
#date_range_cur,
#curtailment-fetch-button,
#curtailment-download-toggle,
#comparison-asset-menu,
#comparison-date-picker,
#comparison-fetch-button {
    vertical-align: middle !important;
    align-self: center !important;
}

/* Curtailment download drawer styling */
#curtailment-download-drawer .offcanvas-header {
    border-bottom: 1px solid #ededed;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#curtailment-download-drawer .offcanvas-title {
    font-weight: 700;
    font-size: 1.5em;
    color: #4b5563;
    flex-grow: 1;
}

#curtailment-download-drawer .offcanvas-body {
    padding: 1.25rem;
    overflow-y: auto;
}

#curtailment-download-drawer .btn-close {
    background-color: transparent !important;
    border: none !important;
    opacity: 0.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    transition: opacity 0.2s ease !important;
    background-size: 14px !important;
    margin-top: 0 !important;
    flex-shrink: 0;
}

#curtailment-download-drawer .btn-close:hover {
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Download button disabled state - force grey color */
#curtailment-download-submit:disabled,
#curtailment-download-submit[disabled] {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Download info section styling */
#curtailment-download-info {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#curtailment-download-info>div {
    word-break: break-word;
}

#curtailment-download-info span {
    display: inline;
}

/* Analytics download info section styling */
#batch-download-info-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#batch-download-info-text>div {
    word-break: break-word;
}

#batch-download-info-text span {
    display: inline;
}

/* ========== Bootstrap DropdownMenu Alignment Fixes ========== */
/* Force Bootstrap dropdown menus to behave like inline elements */
#tech_menu.dropdown,
#comparison-asset-menu.dropdown {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
}

/* Ensure the dropdown menu item doesn't wrap weirdly */
#tech_menu .dropdown-toggle,
#comparison-asset-menu .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    margin-top: 0 !important;
}

/* Fix Bootstrap dropdown default margin/padding */
.dropdown.show,
.dropdown {
    margin-bottom: 0 !important;
}

/* Remove any default Button behavior from Bootstrap in the control bar */
#tech_menu.btn-group,
#comparison-asset-menu.btn-group {
    vertical-align: middle !important;
}

/* Make sure control bar flex container aligns items properly */
#tech_menu,
#comparison-asset-menu,
#data_input,
#comparison-date-picker,
#date_range_cur,
#curtailment-fetch-button,
#comparison-fetch-button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Align dropdown menu panel width with button width */
#tech_menu .dropdown-menu {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
}

#comparison-asset-menu .dropdown-menu {
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
}

/* ========== Glossary Page Styles ========== */

/* Search Input Styling */
.glossary-search-input:focus {
    border-color: #94ba1d !important;
    box-shadow: 0 0 0 3px rgba(148, 186, 29, 0.1) !important;
}

.glossary-search-input:hover {
    border-color: #9CA3AF !important;
}

/* Category Filter Buttons */
.glossary-category-btn {
    background-color: white !important;
    color: #374151 !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.glossary-category-btn:hover {
    border-color: #D1D5DB !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.glossary-category-btn-active {
    background-color: #F3F4F6 !important;
    border-color: #94ba1d !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Category-specific button active states */
#category-btn-general.glossary-category-btn-active {
    background-color: #F0FDF4 !important;
    border-color: #94ba1d !important;
    color: #166534 !important;
}

#category-btn-tipo.glossary-category-btn-active {
    background-color: #E6F4FB !important;
    border-color: #2a9fd6 !important;
    color: #0d5a7a !important;
}

#category-btn-Redispatch.glossary-category-btn-active {
    background-color: #FFF4E6 !important;
    border-color: #ff8800 !important;
    color: #cc6d00 !important;
}

/* Glossary Term Cards */
.glossary-term-card {
    transition: box-shadow 0.2s ease !important;
}

.glossary-term-card:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Category-specific left border colors */
.glossary-card-general {
    border-left-color: #94ba1d !important;
}

.glossary-card-tipo {
    border-left-color: #2a9fd6 !important;
}

.glossary-card-Redispatch {
    border-left-color: #ff8800 !important;
}

/* Category Badges */
.glossary-category-badge {
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

.glossary-badge-general {
    background-color: #DCFCE7 !important;
    color: #166534 !important;
}

.glossary-badge-tipo {
    background-color: #C8E6F5 !important;
    color: #0d5a7a !important;
}

.glossary-badge-redespacho {
    background-color: #FFE4CC !important;
    color: #cc6d00 !important;
}

.glossary-badge-Redispatch {
    background-color: #FFE4CC !important;
    color: #cc6d00 !important;
}

/* Formula Box Styling */
.glossary-formula-box {
    background-color: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    padding: 12px !important;
    margin-top: 16px !important;
}

/* Clear All Button Styling - matches Select All/Deselect All */
.market-toggle-btn.clear-all:hover,
.market-toggle-btn.clear-all:active,
.market-toggle-btn.clear-all:focus {
    color: #777777 !important;
    background-color: rgba(151, 151, 152, 0.1) !important;
}

/* ========== Inventory Page Styles ========== */

/* Page Container */
.inventory-page {
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Page Title — dark black, same on Analytics and Market */
.inventory-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
}

.inventory-subtitle {
    color: #6B7280 !important;
    font-size: 1rem !important;
    margin-bottom: 32px !important;
}

/* ===== Modern Search Bar ===== */
.inventory-search-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.inventory-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 18px;
    transition: color 0.2s ease;
    z-index: 1;
}

.inventory-search-wrapper:focus-within .inventory-search-icon {
    color: #94ba1d;
}

.inventory-search-input {
    width: 100% !important;
    padding: 14px 48px 14px 52px !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    background: white !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.inventory-search-input:hover {
    border-color: #D1D5DB !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.inventory-search-input:focus {
    border-color: #94ba1d !important;
    box-shadow: 0 0 0 4px rgba(148, 186, 29, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
}

.inventory-search-input::placeholder {
    color: #9CA3AF !important;
}

/* Results count indicator */
.inventory-results-count {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 13px;
    font-weight: 500;
}

/* ===== Modern Filter Pills ===== */
.inventory-filter-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    row-gap: 10px !important;
    margin-bottom: 20px !important;
    padding: 4px 0 !important;
    width: 88vw !important;
    max-width: 1400px;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 100 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.inventory-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 2px solid #E5E7EB !important;
    background: white !important;
    color: #4B5563 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.inventory-filter-btn:hover {
    border-color: #94ba1d !important;
    background: #fafff0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(148, 186, 29, 0.15) !important;
}

.inventory-filter-btn--active {
    background: linear-gradient(135deg, #94ba1d 0%, #a8cc35 100%) !important;
    border-color: #94ba1d !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(148, 186, 29, 0.35) !important;
}

.inventory-filter-btn--active:hover {
    background: linear-gradient(135deg, #85a81a 0%, #94ba1d 100%) !important;
    transform: translateY(-2px) !important;
}

.inventory-filter-emoji {
    font-size: 16px;
    line-height: 1;
}

.inventory-filter-label {
    white-space: nowrap;
}

.inventory-filter-count {
    background: rgba(0, 0, 0, 0.08);
    color: #6B7280;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

.inventory-filter-btn--active .inventory-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ===== View Switcher (Segmented Control) ===== */
.inventory-view-switcher {
    display: flex !important;
    background: #e5e7eb !important;
    padding: 4px !important;
    border-radius: 12px !important;
    gap: 2px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    height: 48px !important;
    align-items: center !important;
}

.inventory-view-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    color: #6B7280 !important;
    font-size: 18px !important;
}

.inventory-view-btn:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    color: #374151 !important;
}

.inventory-view-btn--active {
    background: white !important;
    color: #94ba1d !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transform: scale(1.02) !important;
}

/* Smoother Transitions between Views */
.inventory-view-content {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.35s !important;
    visibility: hidden;
    pointer-events: none;
    width: 100%;
    z-index: 1;
}

.inventory-view-content--active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* Content wrapper - maintains consistent spacing from filters */
.inventory-content-wrapper {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

/* Views wrapper - no margin, spacing handled by parent */
#inventory-views-wrapper {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

/* Loading container - relative positioning for absolute spinner */
.custom-loading {
    position: relative !important;
}

/* Hide the default loading overlay background if it exists */
.custom-loading::before,
.custom-loading::after {
    display: none !important;
}

/* ===== Premium Card Styles ===== */
.inventory-card {
    border: none !important;
    border-radius: 14px !important;
    overflow: visible !important;
    /* Allow badge to pop out if needed, prevent clipping */
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    min-height: 380px !important;
    position: relative !important;
    z-index: 1;
    overflow: visible !important;
    /* Critical for badges */
    transform-style: preserve-3d;
    /* Fix for Safari/Z-index issues */
    display: flex !important;
    flex-direction: column !important;
}

.inventory-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Card Image Container */
.inventory-card__image-container {
    position: relative;
    width: 100%;
    height: 170px;
    min-height: 170px;
    max-height: 170px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    z-index: 1;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    overflow: visible !important;
    /* Allow badges to pop out */
    display: flex;
    /* Ensure alignment context */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inventory-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.35s ease !important;
    border-top-left-radius: 14px !important;
    /* Apply radius to image directly */
    border-top-right-radius: 14px !important;
}

.inventory-card:hover .inventory-card__image {
    transform: scale(1.05);
}

/* Technology Badge with Glassmorphism */
.inventory-card__badge {
    position: absolute !important;
    top: 12px !important;
    left: 14px !important;
    /* Badge Sizing - compact circular pill */
    min-width: 36px !important;
    max-width: 36px !important;
    width: 36px !important;
    height: 36px !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Ensure emoji doesn't push bounds */
    padding: 0 !important;
    margin: 0 !important;

    /* Appearance */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50px !important;
    /* Pill shape capability - fully circular when collapsed */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;

    /* Text */
    color: #1a1a2e;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1 !important;
    white-space: nowrap;

    /* Visibility & Interaction */
    z-index: 100 !important;
    overflow: hidden !important;
    /* Hidden initially for circle */

    /* Smooth transitions - using max-width for smooth animation */
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* Performance optimization */
    will-change: max-width, padding, height, border-radius, gap;
}

/* Expansion on Hover */
.inventory-card__badge:hover {
    max-width: 220px !important;
    min-width: 36px !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 14px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    /* Oval/elongated pill shape */
    border-radius: 18px !important;
}

.inventory-card__badge-emoji {
    font-size: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Prevent emoji from shifting during animation */
    min-width: 14px;
    width: 14px;
    transition: transform 0.2s ease, margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 0;
    margin-right: 0;
}

.inventory-card__badge:hover .inventory-card__badge-emoji {
    transform: scale(1.05);
    /* Compensate for shift from center to flex-start: (36px - 14px) / 2 = 11px */
    margin-left: 11px;
    margin-right: 0;
}

.inventory-card__badge-text {
    opacity: 0;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    flex-shrink: 0;
    font-size: 12px !important;
    font-weight: 600 !important;
    /* Smooth transitions with proper timing */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.08s,
        margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s !important;
    /* Performance optimization */
    will-change: opacity, max-width;
}

.inventory-card__badge:hover .inventory-card__badge-text {
    opacity: 1 !important;
    max-width: 180px !important;
    margin-left: 0 !important;
}

/* Info Button Wrapper - independent absolute positioning */
.inventory-card__info-btn-wrapper {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 36px !important;
    width: 36px !important;
}

/* Card Content */
.inventory-card__content {
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 !important;
    justify-content: flex-start !important;
}

.inventory-card__name {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.inventory-card__name-flag {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: -2px !important;
    /* Visual correction for emoji baseline */
}

.inventory-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-card__owner {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
}

/* Capacity Display */
.inventory-card__capacity {
    display: flex;
    align-items: center;
    /* Label and value group are vertically centered relative to each other */
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8faf5 0%, #f0f4e8 100%);
    border-radius: 10px;
    margin-top: 0;
}

.inventory-card__capacity-group {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.inventory-card__capacity-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #94ba1d;
    line-height: 1;
}

.inventory-card__capacity-unit {
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    margin-left: 1px;
}

.inventory-card__capacity-label {
    font-size: 10px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

/* View Button */
.inventory-view-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 20px !important;
    background: linear-gradient(135deg, #4B5563 0%, #374151 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin-top: auto !important;
    width: 100% !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.2px !important;
}

.inventory-view-button:hover {
    background: linear-gradient(135deg, #94ba1d 0%, #a8cc35 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(148, 186, 29, 0.25) !important;
    color: white !important;
    text-decoration: none !important;
}

.inventory-view-button:active {
    transform: translateY(0) !important;
}

.inventory-view-button__arrow {
    font-size: 1.1em !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.inventory-view-button:hover .inventory-view-button__arrow {
    transform: translateX(3px);
}

/* ===== Grid Layout ===== */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}

.inventory-grid .inventory-card {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1400px) {
    .inventory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .inventory-grid {
        grid-template-columns: 1fr;
    }

    .inventory-filter-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* ===== Empty State ===== */
.inventory-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.inventory-empty-state__icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.inventory-empty-state__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4B5563;
    margin-bottom: 8px;
}

.inventory-empty-state__text {
    color: #9CA3AF;
    font-size: 14px;
}

/* ===== Loading Skeleton ===== */
.inventory-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 16px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ===== Divider ===== */
.inventory-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #E5E7EB 50%, transparent 100%);
    margin: 40px 0;
}

/* ===== User Menu Dropdown in Sidebar ===== */
.sidebar .dropup {
    width: 100%;
}

.sidebar .dropup .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    color: #979798 !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    background: transparent !important;
    justify-content: space-between !important;
}

.sidebar .dropup .dropdown-toggle:hover {
    background-color: #ededed !important;
    color: #979798 !important;
}

.sidebar .dropup .dropdown-toggle i {
    width: 1rem !important;
    margin-right: 0.5rem !important;
}

/* Add spacing between Account text and caret */
.sidebar .dropup .dropdown-toggle::after {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

.sidebar .dropup .dropdown-menu {
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0.5rem !important;
    z-index: 1051 !important;
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
}

/* Keep account menu fully hidden while sidebar is collapsed. */
.sidebar:not(:hover) .dropup .dropdown-menu,
.sidebar:not(:hover) .dropup .dropdown-menu.show {
    display: none !important;
}

.sidebar .dropup .dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    font-weight: 400 !important;
    color: #979798 !important;
}

/* Change dropdown item hover/active to optimize green */
.sidebar .dropup .dropdown-item:hover,
.sidebar .dropup .dropdown-item.active {
    background-color: #94ba1d !important;
    color: white !important;
}

/* Avoid sticky green state after click/focus when not hovered. */
.sidebar .dropup .dropdown-item:focus:not(:hover) {
    background-color: transparent !important;
    color: #979798 !important;
}

.sidebar .dropup .dropdown-item i {
    width: 1rem !important;
    margin-right: 0.5rem !important;
}

/* Data Table Toggle Button Styling */
.data-table-toggle-btn {
    background-color: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 10px 0 !important;
    color: #374151 !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.data-table-toggle-btn:hover,
.data-table-toggle-btn:active,
.data-table-toggle-btn:focus {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========== Inventory Card Info Overlay Styles ========== */

/* Name row */
.inventory-card__name-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 28px !important;
}

.inventory-card__name-row .inventory-card__name {
    margin: 0 !important;
    flex: 1 !important;
    line-height: 1.3 !important;
    font-size: 1.15rem !important;
}

/* Info Button - positioned in top-right of image container, aligned with badge */
.inventory-card__info-btn {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    color: #94ba1d !important;
    font-size: 14px !important;
    /* Match badge emoji size for coherence */
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    /* Match badge font-weight for coherence */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
    margin-top: 0 !important;
}

.inventory-card__info-btn svg {
    display: block !important;
}

.inventory-card__info-btn:hover {
    background: #94ba1d !important;
    border-color: #94ba1d !important;
    color: white !important;
    transform: scale(1.08) !important;
    box-shadow: 0 5px 16px rgba(148, 186, 29, 0.35) !important;
}

/* Dark Overlay */
.inventory-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: #1a1a2e !important;
    /* Solid background as requested */
    border-radius: 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    z-index: 1100 !important;
    pointer-events: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.inventory-card__overlay--show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Close Button - aligned with badge/info button (14px from edge, 36px size) */
.inventory-card__close-btn {
    /* Flex position in header */
    background: transparent !important;
    border: none !important;
    color: #94ba1d !important;
    cursor: pointer !important;
    /* Match badge emoji size for coherence */
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    /* Match badge font-weight for coherence */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
    margin-top: 0 !important;
    /* Visual nudge */
}

.inventory-card__close-btn:hover {
    color: white !important;
    transform: rotate(90deg) !important;
    background: rgba(148, 186, 29, 0.2) !important;
}

.inventory-card__close-btn:focus,
.inventory-card__close-btn:active {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: none !important;
}

/* Overlay Content */
.inventory-card__overlay-content {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    /* Reduced top padding to align with pills */
    padding-top: 10px !important;
    box-sizing: border-box !important;
}

.inventory-card__overlay-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    /* Fixed height for perfect alignment */
    padding: 0 20px !important;
    margin-bottom: 0 !important;
    /* Reduced margin to move content up */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.inventory-card__overlay-icon {
    font-size: 20px !important;
    color: #94ba1d !important;
    flex-shrink: 0 !important;
}

.inventory-card__overlay-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
}

/* Overlay Body - matches header padding for alignment */
.inventory-card__overlay-body {
    padding: 0 20px !important;
    padding-top: 12px !important;
    /* Small top padding after header separator */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Info Grid */
.inventory-card__info-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.inventory-card__info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    min-height: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.inventory-card__info-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    flex-shrink: 0 !important;
    min-width: 110px !important;
    max-width: 110px !important;
    text-align: left !important;
    font-weight: 600 !important;
}

.inventory-card__info-value {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-align: right !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-left: auto !important;
}

/* Optimize Dark Button Style (Shared) */
.optimize-btn-dark {
    background-color: #1a1a2e !important;
    /* Matches inventory overlay (26, 26, 46) */
    color: white !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.optimize-btn-dark:hover {
    background-color: #262642 !important;
    /* Slightly lighter on hover */
    filter: brightness(1.2) !important;
}

.optimize-btn-dark:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* ========== Settings Page Styles ========== */

.settings-container {
    min-height: 100vh;
    background-color: #f3f3f3;
    padding: 2rem;
    max-width: 1280px;
    margin: 0 auto;
}

.settings-header {
    margin-bottom: 2rem;
}

.settings-header-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 0.25rem;
}

.settings-header-subtitle {
    color: #6b7280;
    margin-top: 0.25rem;
}

.settings-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.settings-permissions-step-button {
    min-width: 0;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.admin-permissions-step-body {
    transition: opacity 0.2s ease;
}

.admin-permissions-step-body--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.admin-permissions-checklist {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #f9fafb;
}

.admin-permissions-checklist label {
    margin: 0;
    padding: 0.375rem 0.25rem;
    color: #374151;
}

.admin-user-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.admin-user-option-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.admin-user-role-icon {
    color: #6b7280;
    flex-shrink: 0;
}

.admin-user-option-name {
    font-weight: 600;
    color: #111827;
}

.admin-user-option-email {
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-role-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.admin-user-role-badge--admin {
    color: #7c2d12;
    border: 1px solid #fdba74;
    background-color: #ffedd5;
}

.admin-user-role-badge--user {
    color: #1e3a8a;
    border: 1px solid #93c5fd;
    background-color: #dbeafe;
}

.admin-confirmed-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    background-color: #eff6ff;
}

.admin-confirmed-user-chip__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1e3a8a;
}

.admin-confirmed-user-chip__name {
    color: #111827;
    font-weight: 600;
}

.admin-confirmed-user-chip__email {
    color: #6b7280;
    font-size: 0.8125rem;
}

.admin-confirmed-user-chip__role {
    color: #1e40af;
    background-color: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 9999px;
    padding: 0.125rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 700;
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.settings-section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #374151;
}

.settings-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4b5563;
    margin: 0;
}

.settings-loading {
    color: #6b7280;
    padding: 0.75rem;
}

.settings-error {
    color: #dc2626;
    padding: 0.75rem;
}

/* Account Information */
.settings-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.settings-info-field {
    display: flex;
    flex-direction: column;
}

.settings-info-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.settings-info-value {
    color: #111827;
    background-color: #f9fafb;
    border-radius: 0.375rem;
    padding: 0.625rem 1rem;
    border: 1px solid #e5e7eb;
}

/* Unit Permissions */
.settings-admin-badge {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.settings-admin-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e40af;
    margin: 0;
}

.settings-admin-description {
    font-size: 0.875rem;
    color: #1e3a8a;
    margin-top: 0.25rem;
    margin: 0;
}

.settings-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.settings-stat-card {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.settings-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}

.settings-stat-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.settings-search-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    width: 100%;
}

.settings-search-placeholder {
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}

.settings-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
}

.settings-search-input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.settings-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.settings-units-wrapper {
    margin-bottom: 1.5rem;
}

.settings-units-section {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #f9fafb;
}

.settings-units-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.settings-units-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 12rem;
    overflow-y: auto;
}

.settings-unit-badge {
    padding: 0.375rem 0.75rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    transition: all 0.2s;
}

.settings-unit-badge-up {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.settings-unit-badge-up:hover {
    background-color: #dbeafe;
    border-color: #2563eb;
}

.settings-unit-badge-uof {
    background-color: #f0fdf4;
    border-color: #22c55e;
    color: #15803d;
}

.settings-unit-badge-uof:hover {
    background-color: #dcfce7;
    border-color: #16a34a;
}

.settings-no-units {
    color: #6b7280;
    font-size: 0.875rem;
}

.settings-search-count {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Create Client Asset layout */
.settings-asset-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
    margin: -0.75rem 0 1.25rem 2rem;
}

.settings-asset-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.settings-asset-section {
    margin-bottom: 1.5rem;
}

.settings-asset-section--last {
    margin-bottom: 0.5rem;
}

.settings-asset-section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    color: #9ca3af;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-asset-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.settings-asset-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.4rem;
}

.settings-required-dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 9999px;
    background-color: #ef4444;
    flex-shrink: 0;
}

.settings-asset-lang {
    color: #9ca3af;
    font-weight: 400;
}

.settings-asset-input {
    width: 100%;
    padding: 0.625rem 0.8125rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    color: #111827;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.settings-asset-input::placeholder {
    color: #9ca3af;
}

.settings-asset-input:hover {
    border-color: #9ca3af;
}

.settings-asset-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #ffffff;
}

.settings-asset-dropdown .Select-control,
.settings-asset-dropdown .Select__control {
    background-color: #f9fafb !important;
}

.settings-asset-dropdown .Select-control:hover,
.settings-asset-dropdown .Select__control:hover {
    border-color: #9ca3af !important;
}

.settings-asset-notice {
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    background-color: #eff6ff;
    font-size: 0.8125rem;
    color: #1e40af;
}

.settings-asset-notice i {
    margin-top: 0.1rem;
}

.settings-asset-coord-hint {
    margin-top: 0.25rem;
    color: #9ca3af;
    font-size: 0.72rem;
}

.settings-asset-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.settings-asset-submit-button {
    min-width: 220px;
}

/* Password Change */
.settings-input-group {
    margin-bottom: 1rem;
}

.settings-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.settings-password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.settings-password-input {
    width: 100%;
    padding: 0.625rem 3rem 0.625rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
    height: 2.5rem;
    box-sizing: border-box;
}

.settings-password-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.settings-eye-button {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    margin: 0;
    box-shadow: none !important;
}

.settings-eye-button:hover {
    color: #374151;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.settings-password-strength {
    margin-top: 0.5rem;
}

.settings-strength-container {
    margin-top: 0.5rem;
}

.settings-strength-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.settings-strength-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.settings-strength-text {
    font-size: 0.75rem;
    font-weight: 500;
}

.settings-strength-weak {
    color: #dc2626;
}

.settings-strength-fair {
    color: #f97316;
}

.settings-strength-good {
    color: #eab308;
}

.settings-strength-strong {
    color: #22c55e;
}

.settings-strength-bar {
    width: 100%;
    background-color: #e5e7eb;
    border-radius: 9999px;
    height: 0.5rem;
    overflow: hidden;
}

.settings-password-hint {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.settings-password-match {
    margin-top: 0.5rem;
}

.settings-match-success {
    font-size: 0.75rem;
    color: #22c55e;
    margin: 0;
}

.settings-match-error {
    font-size: 0.75rem;
    color: #dc2626;
    margin: 0;
}

.settings-button-wrapper {
    padding-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-submit-button {
    width: auto;
    min-width: 200px;
    background-color: #6b7280;
    border-color: #6b7280;
    color: white;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.settings-submit-button:hover:not(:disabled) {
    background-color: #94ba1d;
    border-color: #94ba1d;
}

.settings-submit-button:disabled {
    background-color: #d1d5db;
    border-color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Settings Dropdown */
.settings-dropdown .Select-control,
.settings-dropdown .Select__control {
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s !important;
    min-height: 2.5rem !important;
    box-sizing: border-box !important;
    background-color: white !important;
}

.settings-dropdown .Select-control:hover,
.settings-dropdown .Select__control:hover {
    border-color: #3b82f6 !important;
}

.settings-dropdown .is-focused .Select-control,
.settings-dropdown .Select__control--is-focused {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.settings-dropdown .Select-placeholder,
.settings-dropdown .Select__placeholder {
    color: #9ca3af !important;
    line-height: 2.5rem !important;
    padding-left: 1rem !important;
}

.settings-dropdown .Select-value,
.settings-dropdown .Select__single-value {
    line-height: 2.5rem !important;
    padding-left: 1rem !important;
    color: #111827 !important;
}

.settings-dropdown .Select-menu-outer,
.settings-dropdown .Select__menu {
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    z-index: 1001 !important;
}

.settings-dropdown .Select-option.is-focused,
.settings-dropdown .Select__option--is-focused {
    background-color: #eff6ff !important;
    color: #1e40af !important;
}

.settings-dropdown .Select-option.is-selected,
.settings-dropdown .Select__option--is-selected {
    background-color: #3b82f6 !important;
    color: white !important;
}

@media (max-width: 768px) {
    .settings-container {
        padding: 1rem;
    }

    .settings-info-grid {
        grid-template-columns: 1fr;
    }

    .settings-stats-grid {
        grid-template-columns: 1fr;
    }

    .settings-asset-subtitle {
        margin-left: 0;
    }

    .settings-asset-form {
        padding: 1rem;
    }

    .settings-asset-submit-button {
        width: 100%;
        min-width: 0;
    }
}

/* Login button styling to match accent color */
#loginButton {
    background-color: #94ba1d !important;
    border-color: #94ba1d !important;
    color: white !important;
}

#loginButton:hover {
    background: linear-gradient(135deg, #94ba1d 0%, #a8cc35 100%) !important;
    border-color: #94ba1d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(148, 186, 29, 0.25) !important;
    color: white !important;
}

#loginButton:active {
    transform: translateY(0) !important;
}

/* RT Type Selector Dropdown - Expand downwards normally with green styling */
.rt-type-selector-dropdown {
    position: relative !important;
}

/* Ensure the Select component has proper positioning context */
.rt-type-selector-dropdown .Select,
.rt-type-selector-dropdown>div {
    position: relative !important;
}

/* Make dropdown menu expand downwards normally - Old Dash (Select-menu-outer) */
.rt-type-selector-dropdown .Select-menu-outer {
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    border-radius: 4px !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    min-width: 120px !important;
}

/* Make dropdown menu expand downwards normally - Modern Dash */
.rt-type-selector-dropdown .Select__menu,
.rt-type-selector-dropdown div[class*="menu"]:not([class*="control"]):not([class*="value"]):not([class*="input"]) {
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    border-radius: 4px !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    min-width: 120px !important;
}

/* Position the menu portal normally - ensure it's visible */
.rt-type-selector-dropdown~div[class*="menuPortal"],
#rt-type-selector~div[class*="menuPortal"],
div[class*="menuPortal"][id*="rt-type-selector"],
div[class*="react-select"][class*="menu-portal"] {
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Target react-select menu portal directly */
div[class*="react-select__menu-portal"],
div[class*="menu-portal"] {
    z-index: 9999 !important;
}

/* Ensure menu inside portal expands downwards normally */
div[class*="menu-portal"] .Select__menu,
div[class*="menu-portal"] div[class*="menu"]:not([class*="control"]):not([class*="value"]):not([class*="input"]):not([class*="placeholder"]) {
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 120px !important;
    max-width: 300px !important;
}

/* Style dropdown options with optimize green - maintain opacity */
.rt-type-selector-dropdown .Select-option,
.rt-type-selector-dropdown [class*="option"]:not([class*="control"]):not([class*="value"]):not([class*="input"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    color: #333 !important;
    background-color: white !important;
    transition: background-color 0.2s ease !important;
}

/* Hover state - optimize green background */
.rt-type-selector-dropdown .Select-option:hover,
.rt-type-selector-dropdown [class*="option"]:hover:not([class*="control"]):not([class*="value"]):not([class*="input"]) {
    background-color: #94ba1d !important;
    color: white !important;
    opacity: 1 !important;
}

/* Focused/active option - optimize green background */
.rt-type-selector-dropdown .Select-option.is-focused,
.rt-type-selector-dropdown .Select-option:focus,
.rt-type-selector-dropdown [class*="option"][class*="focused"]:not([class*="control"]):not([class*="value"]):not([class*="input"]) {
    background-color: #94ba1d !important;
    color: white !important;
    opacity: 1 !important;
}

/* Selected option in dropdown - optimize green background */
.rt-type-selector-dropdown .Select-option.is-selected,
.rt-type-selector-dropdown .Select-option[aria-selected="true"],
.rt-type-selector-dropdown [class*="option"][class*="selected"]:not([class*="control"]):not([class*="value"]):not([class*="input"]) {
    background-color: #94ba1d !important;
    color: white !important;
    opacity: 1 !important;
}

/* Selected and focused option - optimize green with slight variation */
.rt-type-selector-dropdown .Select-option.is-selected.is-focused,
.rt-type-selector-dropdown .Select-option[aria-selected="true"]:focus {
    background-color: #84cc16 !important;
    color: white !important;
    opacity: 1 !important;
}

/* Make sure the menu list container is visible */
.rt-type-selector-dropdown .Select-menu,
.rt-type-selector-dropdown .Select__menu,
.rt-type-selector-dropdown [class*="menu-list"],
.rt-type-selector-dropdown [class*="MenuList"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    background-color: white !important;
    border: 1px solid #94ba1d !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(148, 186, 29, 0.2) !important;
}

/* Ensure dropdown is open state shows menu */
.rt-type-selector-dropdown.is-open,
.rt-type-selector-dropdown .Select.is-open,
.rt-type-selector-dropdown [class*="is-open"] {
    z-index: 9999 !important;
}

.rt-type-selector-dropdown.is-open .Select-menu-outer,
.rt-type-selector-dropdown.is-open .Select__menu,
.rt-type-selector-dropdown.is-open [class*="menu"]:not([class*="control"]):not([class*="value"]):not([class*="input"]):not([class*="placeholder"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}

/* Ensure menu is visible when dropdown is open */
.rt-type-selector-dropdown.is-open .Select-menu-outer,
.rt-type-selector-dropdown.is-open .Select__menu,
.rt-type-selector-dropdown.is-open div[class*="menu"]:not([class*="control"]):not([class*="value"]):not([class*="input"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for react-select menu positioning */
#rt-type-selector+div[class*="menu"] {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin-left: 4px !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 120px !important;
}

/* Style selected option tags with optimize green */
.rt-type-selector-dropdown .Select--multi .Select-value {
    background-color: #94ba1d !important;
    border-color: #94ba1d !important;
    color: white !important;
}

.rt-type-selector-dropdown .Select--multi .Select-value-label {
    color: white !important;
}

/* Style the remove button (X) on selected tags */
.rt-type-selector-dropdown .Select--multi .Select-value-icon {
    border-right-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.rt-type-selector-dropdown .Select--multi .Select-value-icon:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* ========== Market Insights: Heatmap Year Pills ========== */
.heatmap-year-pills label {
    transition: all 0.2s ease !important;
}

.heatmap-year-pills label:hover {
    border-color: #94ba1d !important;
    color: #374151 !important;
    transform: translateY(-1px) !important;
}

/* Checked year pill – accent bg */
.heatmap-year-pills input[type="checkbox"]:checked+label,
.heatmap-year-pills label:has(input:checked) {
    background-color: rgba(148, 186, 29, 0.12) !important;
    border-color: #94ba1d !important;
    color: #374151 !important;
    font-weight: 600 !important;
}

/* Heatmap YoY toggle switch accent */
.heatmap-yoy-switch .form-check-input:checked {
    background-color: #94ba1d !important;
    border-color: #94ba1d !important;
}

/* Heatmap dropdown menu widths */
#heatmap-tech-menu .dropdown-menu {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

#heatmap-market-menu .dropdown-menu {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
}

/* Heatmap dropdown alignment and styling */
#heatmap-tech-menu.dropdown,
#heatmap-market-menu.dropdown {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
}

/* Remove grey shadow from heatmap dropdown toggles (white background) */
#heatmap-tech-menu .dropdown-toggle,
#heatmap-market-menu .dropdown-toggle,
#cp-annual-tech-menu .dropdown-toggle,
#cp-annual-market-menu .dropdown-toggle,
#cp-rolling-tech-menu .dropdown-toggle,
#cp-rolling-market-menu .dropdown-toggle {
    box-shadow: none !important;
}

/* Heatmap filter bar: vertical alignment of all components */
.heatmap-filter-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    min-height: 38px;
}

.heatmap-filter-bar .dropdown,
.heatmap-filter-bar .dropdown-toggle {
    align-self: center !important;
}

.heatmap-filter-bar .dropdown-toggle {
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.heatmap-filter-bar > div {
    align-self: center !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

/* Same height band for dropdowns and adjacent groups so they align on one baseline */
.heatmap-filter-bar #heatmap-tech-menu.dropdown,
.heatmap-filter-bar #heatmap-market-menu.dropdown,
.heatmap-filter-bar #cp-annual-tech-menu.dropdown,
.heatmap-filter-bar #cp-annual-market-menu.dropdown,
.heatmap-filter-bar #cp-rolling-tech-menu.dropdown,
.heatmap-filter-bar #cp-rolling-market-menu.dropdown {
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Dropdown toggle buttons: consistent border and alignment */
.heatmap-filter-bar .dropdown-toggle {
    box-sizing: border-box !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* Align fetch buttons and date picker to same baseline */
/* Fetch buttons: lock height, fix padding so total = 38px, prevent overflow */
.heatmap-filter-bar #heatmap-fetch-button,
.heatmap-filter-bar #cp-annual-fetch-button,
.heatmap-filter-bar #cp-rolling-fetch-button {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
}

/* Date picker in filter bar: match 38px height and vertical alignment */
.heatmap-filter-bar #cp-rolling-date-picker,
.heatmap-filter-bar .batch-download-date-picker {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
}

.heatmap-filter-bar .batch-download-date-picker .DateRangePickerInput {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}


/* Years group: label and pills aligned on same baseline */
.heatmap-filter-bar .heatmap-years-group {
    display: inline-flex !important;
    align-items: center !important;
}

.heatmap-filter-bar .heatmap-years-label {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.heatmap-filter-bar .heatmap-year-pills,
.heatmap-filter-bar .heatmap-yoy-switch {
    display: inline-flex !important;
    align-items: center !important;
}

/* Year pill labels: consistent height to align with 38px controls */
.heatmap-filter-bar .heatmap-year-pills label {
    min-height: 32px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Market dropdown: ES/IT section headers */
#heatmap-market-menu .heatmap-market-group-header {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Italy (IT) section: opaque and non-selectable */
#heatmap-market-menu .heatmap-market-it-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* ========== Market dashboard: white graphs only (no gray) ========== */
.graph-ana .card-no-hover,
.graph-ana .card-no-hover .card-body {
    background-color: #ffffff !important;
}
.graph-ana .js-plotly-plot,
.graph-ana .plotly,
.graph-ana .modebar-container {
    background: #ffffff !important;
}
.graph-ana .svg-container {
    background: #ffffff !important;
}

/* Year pills: unchecked = white (no gray) */
.heatmap-year-pills label {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Heatmap filter bar: harmonious spacing and alignment */
.heatmap-filter-bar {
    gap: 20px !important;
    padding: 18px 24px !important;
    flex-wrap: wrap !important;
    row-gap: 14px !important;
    align-items: center !important;
}
.heatmap-filter-bar > * {
    align-self: center !important;
}
.heatmap-filter-bar > div:not(:first-child) {
    margin-left: 4px;
}
/* Visual grouping: space before Years */
.heatmap-filter-bar .heatmap-year-pills {
    margin-left: 8px !important;
}
.heatmap-filter-bar .heatmap-yoy-switch {
    margin-left: 4px !important;
}
.heatmap-filter-bar #heatmap-fetch-button,
.heatmap-filter-bar #cp-annual-fetch-button,
.heatmap-filter-bar #cp-rolling-fetch-button {
    margin-left: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.heatmap-filter-bar .heatmap-yoy-switch .form-check {
    margin-bottom: 0 !important;
    align-items: center !important;
}
.heatmap-filter-bar .heatmap-yoy-switch .form-check-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}