/* ============================================================================
   MudBlazor structural fixes
   ========================================================================= */

/* A popover, dialog or menu that locks background scroll (or the page's own scrollbar
   appearing/disappearing as content changes height) removes the scrollbar and hands its
   width back to the page — a few pixels the whole layout then has to redo, which is
   disruptive for anything computing its own width off the viewport (e.g. a Syncfusion
   toolbar's overflow calculation, see Booking.razor). Reserving the gutter always keeps
   that width constant, scrollbar visible or not, so nothing needs to reflow when it
   comes and goes. */
html {
    scrollbar-gutter: stable;
}

/* MudBlazor's base .mud-select rule sets flex-grow:1 (correct for form fields),
   but the table/data grid pager reuses MudSelect for "Rows per page" without
   overriding that on its outer wrapper, so it grows to fill the toolbar and
   ends up looking oversized and centered. Scope it back down here. */
.mud-table-pagination-toolbar .mud-select {
    flex: 0 0 auto;
}

/* Collapsed mini drawer with expand-on-hover.
   MudBlazor's own label-hiding relies on a fragile `:first-child + text` selector
   that leaves slivers of text showing. Instead: left-align the icons (so they never
   move between the collapsed and expanded states — the expansion is purely the panel
   widening) and fade the labels, which stay in normal flow so nothing reflows. */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link {
    justify-content: flex-start !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
}

.mud-drawer--closed.mud-drawer-mini .mud-nav-link-expand-icon {
    display: none !important;
}

/* Label stays in layout but invisible until the drawer opens; counter MudBlazor's
   visually-hidden clip so it occupies its normal box (just clipped by the panel
   width + overflow-x while collapsed). Broad selector so nav-group headers behave
   the same as plain links. */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link-text {
    position: static;
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    padding: revert;
    overflow: visible;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s var(--lab-ease);
}

/* The drawer is position:fixed, so expanding it floats over the page — the main
   content keeps its mini-width margin and does not shift. overflow-x:hidden clips
   the labels until the drawer actually opens. */
.mud-drawer--closed.mud-drawer-mini.mud-drawer-pos-left {
    overflow-x: hidden;
}

.mud-drawer--closed.mud-drawer-mini.mud-drawer-pos-left:hover {
    width: var(--mud-drawer-width-left) !important;
    z-index: calc(var(--mud-zindex-drawer) + 1);
    box-shadow: 0 8px 24px rgba(20, 33, 30, 0.14) !important;
    /* Small hover-intent delay before expanding; the base .mud-drawer rule sets
       `transition` with !important, so the delay has to be set the same way.
       Collapsing (pointer leaves) falls back to that base rule — no delay. */
    transition: width 0.2s var(--lab-ease) var(--lab-hover-expand-delay),
                background-color 0.35s var(--lab-ease) !important;
}

/* The drawer scrolls itself, and a classic scrollbar (systems that always show them) took 12 px of the collapsed strip: the icons and
   their pill sat off-centre and the counters were clipped. Collapsed, it scrolls without showing the bar; when it opens on hover the
   bar comes back, thin. */
.mud-drawer--closed.mud-drawer-mini.mud-drawer-pos-left {
    scrollbar-width: none;
}

.mud-drawer--closed.mud-drawer-mini.mud-drawer-pos-left::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.mud-drawer--closed.mud-drawer-mini.mud-drawer-pos-left:hover {
    scrollbar-width: thin;
}

.mud-drawer--closed.mud-drawer-mini.mud-drawer-pos-left:hover::-webkit-scrollbar {
    width: 8px;
}

.mud-drawer--closed.mud-drawer-mini:hover .mud-nav-link-text {
    opacity: 1;
    /* fade the labels in as the drawer finishes opening, not before */
    transition: opacity 0.15s var(--lab-ease) var(--lab-hover-expand-delay);
}

/* ============================================================================
   Instrument-panel polish + motion
   One easing curve everywhere; one orchestrated page-load moment;
   motion that answers an action.
   ========================================================================= */

:root {
    --lab-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --lab-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --lab-spine: var(--mud-palette-primary);
    /* Hover-intent delay before a collapsed panel expands on hover (left drawer,
       booking equipment panel). Collapsing back is immediate. */
    --lab-hover-expand-delay: 0.35s;
}

html { scroll-behavior: smooth; }

/* Cross-fade the whole surface when the theme flips instead of a hard cut. */
body,
.mud-appbar,
.mud-drawer,
.mud-drawer-content,
.mud-navmenu,
.mud-paper,
.mud-card,
.mud-table,
.mud-input-control .mud-input,
.mud-expand-panel {
    transition: background-color 0.35s var(--lab-ease), border-color 0.35s var(--lab-ease), color 0.35s var(--lab-ease);
}

/* Numeric readouts: IBM Plex Mono, tabular figures — instrument display. */
.lab-metric {
    font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
    font-feature-settings: "tnum" 1;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------------------
   The one orchestrated page-load moment: content settles into place.
   Direct children of the content container are page root elements, which
   Blazor recreates on every navigation, so this replays once per page.
   ------------------------------------------------------------------------- */
@keyframes lab-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* "backwards", not "both": a transform kept after the animation would make every dialog, color picker or overlay inside
   the page (position: fixed) be placed and clipped inside that element instead of the window. */
.mud-main-content .mud-container > * {
    animation: lab-rise 0.42s var(--lab-ease-out) backwards;
}

/* Dashboard stat row: a readout panel powering up — one justified stagger. */
@keyframes lab-stat-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lab-stat-grid > .mud-grid-item { animation: lab-stat-in 0.4s var(--lab-ease-out) both; }
.lab-stat-grid > .mud-grid-item:nth-child(1) { animation-delay: 0.03s; }
.lab-stat-grid > .mud-grid-item:nth-child(2) { animation-delay: 0.09s; }
.lab-stat-grid > .mud-grid-item:nth-child(3) { animation-delay: 0.15s; }
.lab-stat-grid > .mud-grid-item:nth-child(4) { animation-delay: 0.21s; }

/* Reports: the metric cards share the row in equal widths, whatever their number. */
.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}
.report-kpi-grid > .lab-stat { animation: lab-stat-in 0.4s var(--lab-ease-out) both; }
.report-kpi-grid > .lab-stat:nth-child(2) { animation-delay: 0.06s; }
.report-kpi-grid > .lab-stat:nth-child(3) { animation-delay: 0.12s; }
.report-kpi-grid > .lab-stat:nth-child(4) { animation-delay: 0.18s; }
.report-kpi-grid > .lab-stat:nth-child(5) { animation-delay: 0.24s; }

.lab-stat {
    border: 1px solid var(--mud-palette-lines-default);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--lab-ease-out), box-shadow 0.25s var(--lab-ease-out);
}
.lab-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--lab-spine);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s var(--lab-ease-out);
}
.lab-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 124, 116, 0.12);
}
.lab-stat:hover::before { transform: scaleY(1); }

/* ----------------------------------------------------------------------------
   Dashboard "today's agenda" timeline: a Gantt-style strip, hand-built with
   flex + absolutely positioned blocks (ApexCharts has no rangeBar series type
   in this wrapper's SeriesType enum, so this stays plain CSS instead).
   ------------------------------------------------------------------------- */
.dashboard-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-timeline-ruler {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 2px;
}

.dashboard-timeline-ruler .dashboard-timeline-track {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;
}

.dashboard-timeline-ruler span {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.dashboard-timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-timeline-label {
    width: 140px;
    flex: 0 0 140px;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-timeline-track {
    position: relative;
    flex: 1 1 auto;
    height: 34px;
    background: var(--mud-palette-action-default-hover);
    border-radius: 6px;
}

.dashboard-timeline-block {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 5px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: transform 0.2s var(--lab-ease-out), box-shadow 0.2s var(--lab-ease-out);
}

.dashboard-timeline-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    z-index: 1;
}

.dashboard-timeline-state-past { background: var(--mud-palette-text-disabled); }
.dashboard-timeline-state-ongoing { background: var(--mud-palette-primary); }
.dashboard-timeline-state-upcoming { background: var(--mud-palette-info); }

.dashboard-timeline-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.dashboard-timeline-swatch.dashboard-timeline-state-past { background: var(--mud-palette-text-disabled); }
.dashboard-timeline-swatch.dashboard-timeline-state-ongoing { background: var(--mud-palette-primary); }
.dashboard-timeline-swatch.dashboard-timeline-state-upcoming { background: var(--mud-palette-info); }

/* Custom legend for the "Equipment by type" donut (ApexCharts' own legend.Show
   is off for that chart) — a plain 2-column grid lets the donut keep a taller
   Height without the legend eating into the chart's own layout budget, and
   long labels ("Super-Resolution Microscope") just wrap in their own row
   instead of getting clipped like they did inside ApexCharts' legend box. */
.dashboard-chart-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: 12px;
}
.dashboard-chart-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}
.dashboard-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Maintenance health's month calendar — a plain 7-column grid, same
   hand-rolled approach as the today's-agenda timeline (no calendar
   component in the chart library). Days with scheduled maintenance get
   a small count badge and are clickable, same drill-down pattern as
   everything else on the dashboard. */
.dashboard-cal-header {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
    text-align: center;
}
.dashboard-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.dashboard-cal-weekday {
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    padding-bottom: 4px;
}
.dashboard-cal-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.75rem;
    transition: background-color 0.15s var(--lab-ease);
}
.dashboard-cal-cell-empty {
    visibility: hidden;
}
.dashboard-cal-cell-today {
    border: 1px solid var(--mud-palette-primary);
    font-weight: 700;
}
.dashboard-cal-cell-has-maintenance {
    cursor: pointer;
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}
.dashboard-cal-cell-has-maintenance:hover {
    background: var(--mud-palette-warning);
    color: white;
}
.dashboard-cal-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-radius: 6px;
    background: var(--mud-palette-warning-darken);
    color: white;
    font-size: 0.5625rem;
    line-height: 12px;
    text-align: center;
}

/* MudBlazor renders the active MudTabPanel with `display:contents` (see
   .mud-tabs-panels .mud-tab-panel-active in MudBlazor.min.css) so it can flow
   its children directly into the tabs container — which also means padding
   passed via MudTabs' PanelClass lands on a box that never actually paints.
   This wrapper is a real element, so its padding-top reliably creates space
   between the tab strip and the first row of cards. */
.dashboard-tab-panel {
    padding-top: 16px;
}

/* Dashboard tabs: draggable cards (MudDropZone). MudBlazor wraps each card in .mud-drop-item,
   which is the real flex item — it carries the width (in twelfths, mirroring the old
   MudItem md values) and stretches to the tallest card in its row. */
.dashboard-drop-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
}

.dashboard-drop-zone > .mud-drop-item {
    display: flex;
    min-width: 0;
    flex: 0 0 100%;
}

/* The width class lives on the card's own div (inside the wrapper), so the wrapper is
   sized through :has() rather than depending on where MudBlazor puts item classes. */
@media (min-width: 960px) {
    .dashboard-drop-zone > .mud-drop-item:has(.dash-w-4)  { flex-basis: calc(33.3333% - 16px); }
    .dashboard-drop-zone > .mud-drop-item:has(.dash-w-5)  { flex-basis: calc(41.6667% - 14px); }
    .dashboard-drop-zone > .mud-drop-item:has(.dash-w-6)  { flex-basis: calc(50% - 12px); }
    .dashboard-drop-zone > .mud-drop-item:has(.dash-w-7)  { flex-basis: calc(58.3333% - 10px); }
    .dashboard-drop-zone > .mud-drop-item:has(.dash-w-12) { flex-basis: 100%; }
}

.dashboard-drop-item {
    flex: 1;
    min-width: 0;
    display: flex;
}

.dashboard-drop-item > .mud-paper {
    flex: 1;
    min-width: 0;
}

/* ----------------------------------------------------------------------------
   App shell: hairlines over heavy shadow
   ------------------------------------------------------------------------- */
.mud-appbar {
    box-shadow: none !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer {
    box-shadow: none !important;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer,
.mud-drawer-content {
    transition: width 0.25s var(--lab-ease), background-color 0.35s var(--lab-ease) !important;
}

.mud-elevation-1 {
    box-shadow: 0 1px 2px rgba(20, 33, 30, 0.04), 0 1px 1px rgba(20, 33, 30, 0.03) !important;
}

/* ----------------------------------------------------------------------------
   Navigation: a teal wash marks the selected item
   ------------------------------------------------------------------------- */
.mud-nav-link {
    position: relative;
    border-radius: 8px;
    transition: background-color 0.2s var(--lab-ease), color 0.2s var(--lab-ease), padding-left 0.2s var(--lab-ease);
}

.mud-nav-link .mud-nav-link-icon {
    transition: transform 0.25s var(--lab-ease-out), color 0.2s var(--lab-ease);
}

.mud-nav-link:hover:not(.active) { background-color: var(--mud-palette-action-default-hover); }
.mud-nav-link:hover:not(.active) .mud-nav-link-icon { transform: translateX(2px); }

/* Active item: MudBlazor's default tint (~6% primary) is too faint to read as
   "selected". Hold a clearly visible teal wash and colour the label/icon.
   MudBlazor's own rule is `.mud-navmenu[.-primary] .mud-nav-link.active:not(...)`
   (specificity 0-5-0), so match/beat it rather than fight the cascade. */
.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-secondary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 600;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16);
    color: var(--mud-palette-primary);
}
.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.24);
}
.mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary); }

.mud-nav-link-expand-icon { transition: transform 0.25s var(--lab-ease-out); }

/* Nav groups expand/collapse smoothly */
.mud-collapse-container {
    transition: height 0.28s var(--lab-ease) !important;
}

/* ----------------------------------------------------------------------------
   Buttons: tactile press, calm hover
   ------------------------------------------------------------------------- */
.mud-button-root {
    transition: transform 0.12s var(--lab-ease), box-shadow 0.2s var(--lab-ease), background-color 0.2s var(--lab-ease);
}
.mud-button-root:active { transform: scale(0.97); }
.mud-button-filled:hover { box-shadow: 0 4px 14px rgba(14, 124, 116, 0.24); }

.mud-icon-button {
    transition: transform 0.15s var(--lab-ease), background-color 0.2s var(--lab-ease);
}
.mud-icon-button:active { transform: scale(0.9); }

.mud-appbar .mud-icon-button .mud-icon-root { transition: transform 0.3s var(--lab-ease-out); }
.mud-appbar .mud-icon-button:hover .mud-icon-root { transform: rotate(12deg); }

/* ----------------------------------------------------------------------------
   Surfaces, inputs, chips, tabs
   ------------------------------------------------------------------------- */
.mud-paper { border-radius: 12px; }

/* Cards and raised surfaces in the page: MudBlazor's faint outline and this theme's light shadow vanish on low-contrast
   (non-Mac) monitors, so every card, elevated or outlined paper and table (MudTable and
   MudDataGrid render a .mud-table, not a .mud-paper) gets a firm border and a soft shadow. Only inside the
   page content: menus, popovers and dialogs keep their own look. Cards also lift a little on hover. */
.mud-main-content .mud-card,
.mud-main-content .mud-paper.mud-elevation-1,
.mud-main-content .mud-paper.mud-elevation-2,
.mud-main-content .mud-paper-outlined,
.mud-main-content .mud-table:not(.mud-elevation-0) {
    border: 1px solid var(--mud-palette-lines-inputs) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
}

/* A table's rows, header and pager are square: without this they poke out of the rounded corners and the border looks cut
   where the table ends. */
.mud-main-content .mud-table:not(.mud-elevation-0) { overflow: hidden; }

.mud-main-content .mud-card {
    transition: box-shadow .2s var(--lab-ease), border-color .2s var(--lab-ease);
}

.mud-main-content .mud-card:hover {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16) !important;
}

/* The equipment overview tables: rounded like the cards, and the tinted rows kept inside the corners. */
.overview-table { overflow: hidden; }

.mud-input.mud-input-outlined .mud-input-outlined-border {
    transition: border-color 0.2s var(--lab-ease), border-width 0.1s var(--lab-ease);
}
.mud-input-control { transition: transform 0.15s var(--lab-ease); }

/* MudBlazor sizes the input text from Subtitle1 (1rem). Drop it to the app's
   body size so form fields read as the same texture as everything around them.
   Scoped to the standard sizes; larger MudTextField Typo overrides still win. */
.mud-input,
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 0.875rem;
}

.mud-chip {
    transition: transform 0.15s var(--lab-ease), background-color 0.2s var(--lab-ease), box-shadow 0.2s var(--lab-ease);
}
.mud-chip:hover { transform: translateY(-1px); }

.mud-table-row { transition: background-color 0.15s var(--lab-ease); }

/* Tab indicator glides; MudBlazor already transforms it, smooth the timing */
.mud-tab-slider { transition: all 0.3s var(--lab-ease-out) !important; }
.mud-tab { transition: color 0.2s var(--lab-ease); }

/* ----------------------------------------------------------------------------
   Charts: bars and donut draw themselves in on render
   ------------------------------------------------------------------------- */
@keyframes lab-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
.mud-chart-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: lab-bar-grow 0.6s var(--lab-ease-out) both;
}

@keyframes lab-donut-sweep {
    from { stroke-dasharray: 0 500; }
}
.mud-chart-serie,
.mud-chart-donut-segment {
    animation: lab-donut-sweep 0.9s var(--lab-ease-out) both;
}

@keyframes lab-line-draw {
    from { stroke-dashoffset: 1200; }
    to   { stroke-dashoffset: 0; }
}
.mud-chart-line {
    stroke-dasharray: 1200;
    animation: lab-line-draw 1s var(--lab-ease-out) both;
}

/* ----------------------------------------------------------------------------
   Overlays: popovers, menus, dialogs, snackbars ease in with a hint of scale
   ------------------------------------------------------------------------- */
@keyframes lab-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Syncfusion calendar / date-picker popups on the Booking page (see Booking.razor) */
@keyframes lab-cal-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mud-popover.mud-popover-open {
    animation: lab-pop 0.16s var(--lab-ease-out) both;
}

@keyframes lab-dialog-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mud-dialog {
    animation: lab-dialog-in 0.22s var(--lab-ease-out) both;
    border-radius: 14px;
}
.mud-overlay-dialog { transition: opacity 0.2s var(--lab-ease); }

@keyframes lab-snackbar-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mud-snackbar { animation: lab-snackbar-in 0.28s var(--lab-ease-out) both; }

/* Unread notification badge: a slow attention pulse, not a strobe */
@keyframes lab-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
.notif-badge .mud-badge.mud-badge-error {
    animation: lab-badge-pulse 2.4s var(--lab-ease) infinite;
}

.mud-progress-circular { animation: lab-rise 0.3s var(--lab-ease-out) both; }

/* ----------------------------------------------------------------------------
   Accessibility: visible keyboard focus in the brand teal
   ------------------------------------------------------------------------- */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-input-slot:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Respect reduced-motion: strip animation, keep the end state
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .lab-stat::before { transform: scaleY(1); }
    .mud-chart-bar, .mud-chart-line, .mud-chart-serie, .mud-chart-donut-segment { animation: none !important; }
    .mud-chart-line { stroke-dasharray: none; }
}

/* The buttons of a page's header (Delete, Duplicate, Save…): each stays on one line and keeps its own height whatever the length
   of its text in each language. Squeezed, a longer label (Spanish) wrapped inside the button and made it twice as tall; now the
   buttons move to a second row instead. */
.page-actions .mud-button-root { white-space: nowrap; flex: none; }

/* The filter chips of a list page (Users, Equipments): groups side by side with a thin line between them, each with a small title
   over its chips. A group that does not fit goes to the next row whole, so its chips stay together. */
.filter-strip { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.filter-strip-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filter-strip-group + .filter-strip-group { padding-left: 24px; border-left: 1px solid var(--mud-palette-lines-default); }
.filter-strip-title { line-height: 1.4; }
.filter-strip-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* A short form on one line (a new price, cost or acquisition): the fields share the width equally whatever the size of the
   window, and the button keeps its own. They wrap only when a field would get narrower than 130 px. */
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.form-row > div { flex: 1 1 130px; min-width: 0; }
.form-row > .form-row-action { flex: 0 0 auto; }

/* A date picker drawn in the page with its header on the left (landscape): MudBlazor rounds the header's two top corners, as if
   it were on top, so its top right corner was round inside the picker and its bottom left one was square against the card. */
.mud-picker-container.mud-picker-container-landscape .mud-toolbar {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 0;
}

/* A report table with many amounts (Profitability): every row and header on one line, with tighter cells so the nine columns
   fit; on a narrow window the table scrolls sideways instead of breaking the amounts in two. */
.report-one-line .mud-table-cell { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.report-one-line .mud-table-container { overflow-x: auto; }

/* The same firm outline for the cards and tables inside a dialog (a dialog is drawn outside the page content, so the rule above
   does not reach it). No shadow: the dialog already floats over the page. */
.mud-dialog .mud-card,
.mud-dialog .mud-paper.mud-elevation-1,
.mud-dialog .mud-paper-outlined,
.mud-dialog .mud-table:not(.mud-elevation-0) {
    border: 1px solid var(--mud-palette-lines-inputs) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.mud-dialog .mud-table:not(.mud-elevation-0) { overflow: hidden; }

/* ============================================================================
   Menu counters (NavBadge)
   ========================================================================= */
.lab-nav-badge.mud-chip {
    height: 20px;
    font-size: 0.75rem;
    min-width: 20px;
}

/* Collapsed menu: the labels are invisible, but the counter of a link that has one stays on the corner of its icon. */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link { position: relative; }

.mud-drawer--closed.mud-drawer-mini .mud-nav-link-text:has(.lab-nav-badge) { opacity: 1; }

.mud-drawer--closed.mud-drawer-mini .mud-nav-link-text .lab-nav-label { opacity: 0; }

.mud-drawer--closed.mud-drawer-mini .mud-nav-link .lab-nav-badge.mud-chip {
    position: absolute;
    left: 30px;
    top: 4px;
    height: 16px;
    min-width: 16px;
    font-size: 0.65rem;
    padding: 0 4px;
    pointer-events: none;
}

/* Expanding on hover: the labels and the counters go back to their place in the row. */
.mud-drawer--closed.mud-drawer-mini:hover .mud-nav-link-text .lab-nav-label {
    opacity: 1;
    transition: opacity 0.15s var(--lab-ease) var(--lab-hover-expand-delay);
}

.mud-drawer--closed.mud-drawer-mini:hover .mud-nav-link .lab-nav-badge.mud-chip {
    position: static;
    height: 20px;
    min-width: 20px;
    font-size: 0.75rem;
    padding: 0 8px;
}

/* The version at the foot of the menu: the menu is as tall as the window and the version stays at the bottom. */
.lab-nav-shell { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
.lab-nav-version-root { margin-top: auto; }
.lab-nav-version-copy.mud-icon-button { padding: 2px; margin: 0 0 4px 2px; opacity: 0.7; }
.lab-nav-version-copy.mud-icon-button:hover { opacity: 1; }
.lab-nav-version-copy .mud-icon-root { font-size: 0.9rem; }
.lab-nav-version { padding: 8px 0 12px 20px; font-size: 0.7rem; opacity: 0.8; white-space: nowrap; }

/* ============================================================================
   Welcome (hero of the home page)
   Deep teal in both themes: the text on it is white, so it does not follow the palette's light/dark swap.
   ========================================================================= */
.lab-hero {
    position: relative;
    overflow: hidden;
    padding: 20px 24px;
    border-radius: calc(var(--mud-default-borderradius) * 1.6);
    color: #fff;
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(92, 184, 176, 0.35) 0%, rgba(92, 184, 176, 0) 60%),
        linear-gradient(115deg, #0A4F4A 0%, #0E7C74 55%, #0E7490 100%);
    box-shadow: 0 10px 28px rgba(14, 124, 116, 0.22);
}

.lab-hero-watermark.mud-icon-root {
    position: absolute;
    right: 24px;
    top: -18px;
    width: 180px;
    height: 180px;
    opacity: 0.08;
    pointer-events: none;
}

.lab-hero-top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.lab-hero .lab-hero-title { color: #fff; }
.lab-hero .lab-hero-subtitle { color: rgba(255, 255, 255, 0.82); }

.lab-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.lab-hero .lab-hero-cta.mud-button-root {
    background: #fff;
    color: #0A5A54;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s var(--lab-ease-out), box-shadow 0.2s var(--lab-ease-out);
}
.lab-hero .lab-hero-cta.mud-button-root:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24); background: #fff; }

.lab-hero-tabs {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.lab-hero-tab {
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s var(--lab-ease), color 0.2s var(--lab-ease);
}
.lab-hero-tab:hover { background: rgba(255, 255, 255, 0.16); }
.lab-hero-tab.active { background: #fff; color: #0A5A54; font-weight: 600; }
.lab-hero-tab:focus-visible, .lab-hero-stat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lab-hero-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.lab-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    transition: background-color 0.2s var(--lab-ease), transform 0.2s var(--lab-ease-out);
}
.lab-hero-stat:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.lab-hero-stat-label { font-size: 0.75rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); }
.lab-hero-stat-value { font-size: 1.5rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-hero-stat-value-sm { font-size: 1.05rem; line-height: 1.5; }
.lab-hero-stat-detail { font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The notices of the hero, in a card next to the figures: a glass panel like them, the notices one under the other (it scrolls when they are many). */
.lab-hero-notices {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}
.lab-hero-notices-list { display: flex; flex-direction: column; gap: 4px; max-height: 78px; overflow-y: auto; }
.lab-hero-notice { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: #fff; }
.lab-hero-notice .mud-icon-root { flex: 0 0 auto; color: #ffd54f; }
.lab-hero-notice a { flex: 0 0 auto; color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
@media (max-width: 599.98px) { .lab-hero-notices { grid-column: 1 / -1; } }

/* "To confirm" while there is something to confirm: lit, so it needs no alert strip of its own. */
.lab-hero-stat-attention {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.2);
}
.lab-hero-stat-attention .lab-hero-stat-label::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #ffd54f;
}

@media (max-width: 599.98px) {
    .lab-hero { padding: 16px; }
    .lab-hero-watermark.mud-icon-root { display: none; }
}

/* ============================================================================
   Figure cards (StatCard); the plain .lab-stat of the reports takes the same accent.
   ========================================================================= */
.lab-stat-card { --stat: var(--mud-palette-primary); }
.lab-stat-success { --stat: var(--mud-palette-success); }
.lab-stat-warning { --stat: var(--mud-palette-warning); }
.lab-stat-error { --stat: var(--mud-palette-error); }
.lab-stat-info { --stat: var(--mud-palette-info); }

.lab-stat-card::before { display: none; }
.lab-stat-card:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--stat) 22%, transparent); }

.lab-stat-link { display: block; color: inherit; text-decoration: none; }
.lab-stat-link:focus-visible { outline: 2px solid var(--stat); outline-offset: 4px; border-radius: 6px; }

.lab-stat-content { display: flex; align-items: center; gap: 14px; }

.lab-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--stat);
    background: color-mix(in srgb, var(--stat) 14%, transparent);
}
.lab-stat-icon .mud-icon-root { font-size: 1.6rem; }

.lab-stat-text { display: flex; flex-direction: column; min-width: 0; }
.lab-stat-title.mud-typography { color: var(--mud-palette-text-secondary); }
.lab-stat-value.mud-typography { line-height: 1.15; }
.lab-stat-hint.mud-typography { color: var(--mud-palette-text-secondary); }

/* ============================================================================
   Section cards of the home page: one card (.lab-section) with the header and the list inside.
   ========================================================================= */
/* The button at the end of a header keeps its text on one line; it is the subtitle on the left that gives way and wraps. */
.lab-card-head .mud-button-root { white-space: nowrap; flex: none; }
.lab-card-head > .mud-stack-row > .mud-stack:first-child { flex: 1 1 0; min-width: 0; }

.lab-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

/* ============================================================================
   Menu: where you are, at a glance — a tinted row, bold text and the icon in the primary colour.
   ========================================================================= */
.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--mud-palette-primary); }