html, body { height: 100%; margin: 0; font-family: 'Segoe UI', Roboto, sans-serif; }
#blazor-error-ui {
    background: #f6d5d5; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---- Global compact/professional density overrides (applies across all pages) ---- */

/* Text fields, number fields, selects, date pickers - shrink the actual input box height.
   min-height (not height) so multi-line fields can still grow taller than a single-line box. */
.mud-input-control .mud-input-slot,
.mud-input-control input,
.mud-input-control .mud-select-input {
    min-height: 30px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
}
/* Multi-line text areas keep their own natural height, just tighten padding/font */
.mud-input-control textarea {
    min-height: 30px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
}

/* Outlined variant border/legend - min-height only, never clip taller multi-line content */
.mud-input-outlined .mud-input-slot { min-height: 30px !important; }
.mud-input-outlined-border { min-height: 34px !important; }
.mud-input-outlined-with-label .mud-input-outlined-border { min-height: 34px !important; }

/* Labels - always float above the box (not resting inside), with a background patch
   that breaks the border line cleanly. Broadened to cover MudSelect, MudDatePicker,
   and any other input-label variant, not just plain outlined text fields. */
.mud-input-label,
.mud-select .mud-input-label,
.mud-picker .mud-input-label,
.mud-input-label-outlined {
    transform: translate(14px, -9px) scale(0.75) !important;
    background: #fff;
    padding: 0 4px !important;
    font-size: 0.75rem !important;
    z-index: 1;
}

/* Overall field wrapper - reduce the vertical margin between stacked fields */
.mud-input-control { margin-top: 4px !important; margin-bottom: 4px !important; }
.mud-form-control { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Checkboxes/switches - shrink touch target and padding for denser forms */
.mud-checkbox-root, .mud-switch-base { padding: 4px !important; }
.mud-checkbox-root svg, .mud-switch-base svg { width: 20px !important; height: 20px !important; }

/* Buttons - slightly shorter, no uppercase (more modern/professional look) */
.mud-button-root { text-transform: none !important; padding-top: 5px !important; padding-bottom: 5px !important; }

/* Tables/grids - already fairly tight, nudge a bit further */
.mud-table-cell, .mud-table-cell-hide { padding: 5px 10px !important; font-size: 0.8125rem !important; }
.mud-table-head .mud-table-cell { font-weight: 600 !important; padding: 7px 10px !important; }
.mud-table-container { border-radius: 8px; }

.mud-paper { border-radius: 8px !important; }
.mud-card { border-radius: 8px !important; }

.mud-nav-link { min-height: 36px !important; padding-top: 3px !important; padding-bottom: 3px !important; font-weight: 600 !important; }

/* Dark sidebar - base text/icon color for all links and group headers */
.mud-drawer .mud-nav-link, .mud-drawer .mud-nav-group { color: #b8c0d1 !important; }
.mud-drawer .mud-nav-link .mud-icon-root, .mud-drawer .mud-nav-group .mud-icon-root { color: #7c869c !important; }

/* Section labels (plain, non-clickable) - small, uppercase, muted, like the reference's
   "PROJECTS & MASTERS" / "HUMAN RESOURCES" group headers */
.nav-section-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em;
    color: #5c6478 !important;
    font-weight: 700 !important;
    padding: 14px 16px 6px 16px;
}

/* Indent only the child links inside a collapsed group - NOT the group's own header link,
   which also carries .mud-nav-link and would otherwise get the same indent, flattening the hierarchy. */
.mud-nav-group-items .mud-nav-link { padding-left: 40px !important; border-radius: 8px; margin: 1px 8px; }

/* Hover and active states - subtle highlight, not a colored block */
.mud-drawer .mud-nav-link:hover { background: rgba(255,255,255,0.05) !important; }
.mud-drawer .mud-nav-link.active { background: rgba(255,255,255,0.09) !important; color: #fff !important; }
.mud-drawer .mud-nav-link.active .mud-icon-root { color: #4dd0c4 !important; }

.mud-toolbar { min-height: 46px !important; }
.mud-appbar { min-height: 50px !important; }

.mud-container { padding-top: 10px !important; padding-bottom: 10px !important; }

.mud-expand-panel .mud-expand-panel-header { padding: 6px 12px !important; min-height: 38px !important; }