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

/*Hide toolbar text on smaller screens*/
@media (max-width: 699.95px) {

    .tool-bar .mud-button-label {
        /* Hide text nodes, keep icon visible */
        font-size: 0 !important;
        padding: 0 0 0 12px !important; /* Remove extra padding for perfect square */
    }

    .tool-bar button {
        width: 40px !important; /* Set to the current height, adjust as needed */
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important; /* Remove extra padding for perfect square */
    }
}

/*For some reason the default pagination has a scroll bar if the table's height is set to 100%*/
.fixed-footer-table .mud-table-pagination {
    overflow: hidden !important;
}

/* Tooltips wrapping block level content (form inputs) must stretch to their parent's width.
   This is driven by the Tooltip component's FullWidth parameter, which adds mud-width-full to the
   trigger; MudBlazor then widens the root. A blanket rule here would stretch every tooltip, which
   breaks inline usages such as toolbar buttons. */
.mud-tooltip-root:has(> .mud-width-full) {
    display: block;
    width: 100%;
}

/* MudBlazor anchors a tooltip to the bottom of the whole input control, so a character counter or
   helper text row sits between the field and the tooltip and visibly pushes it away. The Tooltip
   component's OffsetForHelperText parameter adds this class to the popover to pull it back by the
   height of that row (20px line plus the 3px helper container margin, less the 4px already present
   on a field without a counter). Only bottom placements are requested, so the Tooltip component
   ignores the parameter otherwise.

   Flipping is handled defensively because MudBlazor may either rewrite the placement class to a top
   variant or keep the bottom class and only mark the element with data-mudpopover-flip, and the two
   behaviours have differed between versions. Matching on a class substring also covers the -start
   and -end variants. Whichever mechanism applies, the offset is pulled towards the field: downwards
   for a tooltip below it, upwards for one flipped above it. */
.mud-tooltip.signal-tooltip-helper-offset[class*="mud-tooltip-bottom"]:not([data-mudpopover-flip]) {
    margin-top: var(--signal-tooltip-helper-offset);
}

.mud-tooltip.signal-tooltip-helper-offset[class*="mud-tooltip-bottom"][data-mudpopover-flip],
.mud-tooltip.signal-tooltip-helper-offset[class*="mud-tooltip-top"] {
    margin-top: 0;
    margin-bottom: var(--signal-tooltip-helper-offset);
}

/* Opt-in only, applied when a tooltip sets ClickThrough. MudBlazor renders the popover as an overlay
   anchored to the bottom of the trigger, which is the same band a select's option list opens into, so a
   visible tooltip can sit on top of the first option and swallow the click. Making the popover
   click-through lets those events reach the control underneath.

   This is not the default because it also stops the user hovering the tooltip itself, which WCAG 1.4.13
   ("Content on Hover or Focus") requires so magnifier users can pan across content wider than their
   viewport. Consequence where it is enabled: tooltip content can never be clicked, hovered or selected,
   so do not put links, buttons or text the user is expected to copy inside such a tooltip. */
.mud-tooltip.signal-tooltip-popover {
    pointer-events: none;
}

:root {
    --mud-appbar-height: 48px;
    /* Height of a MudBlazor counter/helper text row, used to pull a tooltip back against the field. */
    --signal-tooltip-helper-offset: -19px;
}

.mud-layout .mud-drawer {
    top: 48px !important;
    height: calc(100vh - 48px) !important;
}

.mud-layout .mud-main-content {
    padding-top: 64px !important;
}