/* Shared layout styles for all layouts */

html,
body {
    height: 100%;
    margin: 0;
}

/* Convenience styles */

.max-height {
    height: 100%;
}

.scroll-y {
    overflow: auto;
    min-height: 0;
}

.flex-fill {
    flex: 1 1 0;
}

.flex-scroll {
    flex: 1 1 0;
    overflow: auto;
    min-height: 0;
}

.flex-constrain {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.mud-gray-light {
    background-color: var(--mud-palette-gray-light);
}

/* Variables */
:root {
    --mud-palette-background-blue: #eaf2feff;
}

/* Styles */
.list-selected-row {
    background-color: var(--mud-palette-background-blue) !important;
}

.list-selected-row>td {
    border: 1px solid blue !important;
}

.top-line {
    border-top: 1px solid var(--mud-palette-table-lines);
}

/* Overrides */

/* Adjust expand panel headers padding and height */
.my-panels .mud-expand-panel-header {
    padding: 10px;
    min-height: 25px;
}

/* Adjust selected item enhancement in nav menu */
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 800 !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Fix MudTable pagination to behave correctly in max height flex. */
.mud-table-pagination {
    overflow: unset;
}

/* Vertically align radio buttons at top. */
label.mud-radio {
    align-items: flex-start !important;
}

label.mud-radio span {
    padding: 0px 12px 0px 12px !important;
}

/* Vertically align checkboxes at top. */
label.mud-checkbox {
    align-items: flex-start !important;
}

label.mud-checkbox p {
    padding-top: 4px !important;
}

/* Checkbox color schemes - opt-in approach */
/* By default, checkboxes use MudBlazor's neutral colors */

/* Opt-in: State colors (checked = success/green, unchecked = error/red) */
/* Use Class="checkbox-state-colors" to apply this scheme */
/* Note: MudBlazor applies the Class to the wrapper div, not the label */
.checkbox-state-colors .mud-checkbox-true .mud-icon-root {
    color: var(--mud-palette-success) !important;
    /* Success color for checked state */
}

.checkbox-state-colors .mud-checkbox-false .mud-icon-root {
    color: var(--mud-palette-error) !important;
    /* Error color for unchecked state */
}

/* Custom colors: Use Color and UncheckedColor properties with Class="checkbox-custom" */
/* This is a fallback to ensure component properties work correctly */
.checkbox-custom .mud-icon-root {
    color: inherit !important;
    /* Respects Color and UncheckedColor properties */
}

/* Sensitive data blur effect */
.sensitive-data-blurred {
    filter: blur(5px);
    user-select: none;
    cursor: not-allowed;
}