/* MudBlazor Dark Theme Overrides
   This file is loaded in <body> after Blazor renders MudThemeProvider's
   <style> tag, so source order ensures these values win. */
:root {
    --mud-palette-primary: #313842;
    --mud-palette-primary-text: rgba(255, 255, 255, 1);
    --mud-palette-primary-lighten: #363d47;
    --mud-palette-primary-darken: #2c333d;
    --mud-palette-primary-hover: rgba(0, 174, 239, 0.06);
    --mud-palette-primary-rgb: 0, 174, 239;

    --mud-palette-secondary: #60bafa;
    --mud-palette-secondary-text: #000000;
    --mud-palette-secondary-lighten: #80c9fb;
    --mud-palette-secondary-darken: #40abf9;
    --mud-palette-secondary-hover: rgba(96, 186, 250, 0.06);

    --mud-palette-tertiary: #ff9e1b;
    --mud-palette-tertiary-text: #000000;
    --mud-palette-tertiary-lighten: #ffb149;
    --mud-palette-tertiary-darken: #ec8b00;

    --mud-palette-background: #161a20;
    --mud-palette-background-grey: #1a1e26;
    --mud-palette-surface: #21252e;
    --mud-palette-drawer-background: #21252e;
    --mud-palette-drawer-text: rgba(255, 255, 255, 0.87);
    --mud-palette-drawer-icon: rgba(255, 255, 255, 0.70);
    --mud-palette-appbar-background: #1a1e26;
    --mud-palette-appbar-text: rgba(255, 255, 255, 0.87);

    --mud-palette-lines-default: rgba(255, 255, 255, 0.12);
    --mud-palette-lines-inputs: rgba(255, 255, 255, 0.3);

    --mud-palette-text-primary: rgba(255, 255, 255, 0.87);
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.60);
    --mud-palette-text-disabled: rgba(255, 255, 255, 0.38);

    --mud-palette-action-default: #64717f;
    --mud-palette-action-disabled: rgba(255, 255, 255, 0.26);
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.12);

    --mud-palette-info: #00aeef;
    --mud-palette-info-text: #ffffff;
    --mud-palette-info-lighten: #33bef2;
    --mud-palette-info-darken: #0098d1;

    --mud-palette-success: #26b050;
    --mud-palette-success-text: #ffffff;
    --mud-palette-success-lighten: #51c073;
    --mud-palette-success-darken: #1e8c3e;

    --mud-palette-warning: #ff9e1b;
    --mud-palette-warning-text: #000000;
    --mud-palette-warning-lighten: #ffb149;
    --mud-palette-warning-darken: #ec8b00;

    --mud-palette-error: #e50000;
    --mud-palette-error-text: #ffffff;
    --mud-palette-error-lighten: #e93333;
    --mud-palette-error-darken: #b80000;

    --mud-palette-dark: #1a1e26;
    --mud-palette-dark-text: rgba(255, 255, 255, 0.87);
    --mud-palette-dark-lighten: #2a2f38;
    --mud-palette-dark-darken: #121519;

    --mud-palette-grey-default: #929292;
    --mud-palette-grey-light: #b0b0b0;
    --mud-palette-grey-lighter: #d0d0d0;
    --mud-palette-grey-dark: #6c6c6c;
    --mud-palette-grey-darker: #4c4c4c;

    --mud-palette-hover-opacity: 0.06;
    --mud-palette-ripple-opacity: 0.1;

    --mud-palette-overlay-dark: rgba(22, 26, 32, 0.5);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.5);

    --mud-palette-black: rgba(39, 39, 47, 1);
    --mud-palette-white: rgba(255, 255, 255, 1);
}

/* ---------- FinOps select popover ---------- */
/* MudBlazor popovers render at body level, so they're outside the FinOps page's
   scoped CSS. Style them via the `PopoverClass` we set on the FinOps MudSelects. */

.finops-select-popover {
    background: #1a2129 !important;
    border: 1px solid #22303d !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
    max-height: 340px !important;
    min-width: 240px !important;
    width: 240px !important;
    max-width: none !important;
    overflow: hidden !important;
    /* Shift left by 12px so the popover starts at viewport-x 12 (rail padding edge),
       not 24px (the anchor-bottom-left position MudBlazor calculates). */
    transform: translateX(-12px) !important;
}

/* mud-popover-relative-width sets width: 100% from the anchor; veto it. */
.mud-popover.mud-popover-relative-width.finops-select-popover {
    width: 240px !important;
    max-width: none !important;
}

.finops-select-popover .mud-list {
    padding: 0 !important;
    background: transparent !important;
    max-height: 332px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.finops-select-popover .mud-list-item {
    padding: 4px 8px !important;
    min-height: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #d8dee5 !important;
    border-radius: 2px !important;
}

.finops-select-popover .mud-list-item .mud-list-item-text,
.finops-select-popover .mud-list-item .mud-typography {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #d8dee5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.finops-select-popover .mud-list-item:hover,
.finops-select-popover .mud-list-item-clickable:hover {
    background: #202833 !important;
}

.finops-select-popover .mud-list-item-icon {
    min-width: 0 !important;
    margin-right: 6px !important;
}

.finops-select-popover .mud-checkbox {
    padding: 0 !important;
    margin: 0 !important;
}

.finops-select-popover .mud-checkbox .mud-icon-button {
    padding: 2px !important;
}

.finops-select-popover .mud-checkbox .mud-icon-root {
    font-size: 16px !important;
    color: #7c8b9a !important;
}

.finops-select-popover .mud-checked .mud-icon-root {
    color: #4ea1ff !important;
}

/* Selected state — kill the muddy lavender highlight and give a subtle dark band. */
.finops-select-popover .mud-selected-item,
.finops-select-popover .mud-list-item.mud-selected-item {
    background-color: rgba(78, 161, 255, 0.08) !important;
    color: #d8dee5 !important;
}

.finops-select-popover .mud-selected-item .mud-list-item-text,
.finops-select-popover .mud-selected-item .mud-typography {
    color: #d8dee5 !important;
}

/* "Select all" row sits at the top — give it a divider. */
.finops-select-popover .mud-list-item:first-child {
    border-bottom: 1px solid #22303d !important;
    margin-bottom: 2px !important;
}

/* ---------- FinOps date picker popover ---------- */
/* Only FinOps uses MudDatePicker, so scoping to .mud-picker-popover is safe. */

.mud-picker-popover {
    transform: translateX(-12px) scale(0.75) !important;
    transform-origin: top left !important;
}

/* Hide the toolbar (year + "Mon, 23 Mar" header) — redundant with ShowToolbar=false,
   but kept as a safety net in case any other variant slips through. */
.mud-picker-popover .mud-picker-toolbar {
    display: none !important;
}
