/* Shared layout styles for all layouts */

/* FileUploadControl: invisible input overlay that covers the drop zone,
   enabling drag-and-drop in MudBlazor v9 where Hidden defaults to true. */
.file-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}

html,
body {
    height: 100%;
    margin: 0;
}

/* Background for public/unauthenticated pages (login, onboarding) */
.public-page-background {
    background: linear-gradient(135deg, rgb(182, 212, 224) 0%, #f0f0f0 100%);
}

/* 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: #eff2f8ff;
}

/* Styles */

/* Time registration page: on desktop disable MudGrid wrap so the student list
   gets a constrained height and can scroll independently. */
.time-reg-scroll-wrapper {
    overflow-y: auto;
}

@media (min-width: 1280px) {
    .time-reg-scroll-wrapper {
        overflow: hidden;
    }

    .time-reg-grid {
        flex-wrap: nowrap !important;
        min-height: 0 !important;
        height: 100% !important;
        align-items: stretch !important;
    }
}
.list-selected-row {
    background-color: var(--mud-palette-appbar-background) !important;
}

.list-selected-row>td {
    border: 1px solid blue !important;
    color: var(--mud-palette-white) !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;
    background-color: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-white) !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) svg {
    background-color: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-white) !important;
}

/* Fix MudTable pagination to behave correctly in max height flex. */
.mud-table-pagination {
    overflow: unset;
}

/* Allow badge indicators to overflow tab boundaries without clipping. */
.mud-tab:has(.mud-badge-root) {
    overflow: visible;
}

/* Normalize tab label casing to match theme typography (non-all-caps). */
.mud-tab {
    text-transform: none;
}

/* Vertically align radio buttons at top. */
label.mud-radio {
    align-items: flex-start !important;
}

label.mud-radio span {
    padding: 0px 12px 0px 12px !important;
}

/* Stack radio group items vertically and left-align them. */
.radio-vertical {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Vertically align checkboxes at top. */
label.mud-checkbox {
    align-items: flex-start !important;
}

label.mud-checkbox span {
    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 */
}

/* Opt-in: Reversed state colors (checked = error/red, unchecked = success/green) */
/* Use Class="checkbox-state-colors-reversed" to apply this scheme */
.checkbox-state-colors-reversed .mud-checkbox-true .mud-icon-root {
    color: var(--mud-palette-error) !important;
    /* Error color for checked state */
}

.checkbox-state-colors-reversed .mud-checkbox-false .mud-icon-root {
    color: var(--mud-palette-success) !important;
    /* Success color for unchecked state */
}

.checkbox-state-colors-warn-checked .mud-checkbox-true .mud-icon-root {
    color: var(--mud-palette-error) !important;
    /* Error color for checked 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;
}

/* Highlighted column header (active period in report tables) */
.highlighted {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 15%, var(--mud-palette-surface)) !important;
}