body {
    
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    body {
        background-color: white;
    }

    .pagebreak {
        page-break-before: always;
    }

    .mud-main-content {
        background-color: white;
    }

    .mud-grid {
        background-color: white;
    }


    .mud-container {
        background-color: white;
    }
}

/*Fix for reconnect popup when app is in dark theme*/
#components-reconnect-modal {
    color: black !important;
}
.mud-button-outlined.mud-button-outlined-secondary {
    color: currentColor !important;
}

.mud-toggle-group-horizontal:not(.mud-toggle-group-rtl) > .mud-toggle-item:not(:first-child), .mud-toggle-group-horizontal:not(.mud-toggle-group-rtl) > :not(:first-child) .mud-toggle-item {
    margin-left: 4px;
}

/* Selected toggle item — visible background fill (primary colour at ~18% opacity) */
.mud-toggle-group .mud-toggle-item.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18) !important;
}

/*For yellow color on validation page*/
.timevalidationgrid .mud-icon-button.ma-n3.pa-1 .mud-icon-root {
    color: var(--mud-palette-warning) !important;
}

/*For multi-line tooltips*/
.tooltip-multiline {
    white-space: pre-line;
}

/* This targets the <span> with class 'column-header' inside 
   the <th> with class 'mud-table-cell', where the whole grid 
   container has BOTH 'mud-data-grid' AND 'No-flex'. */
.mud-data-grid.No-flex .mud-table-cell .column-header {
    display: block !important;
}

/* Notification mention tags */
.mention-tag {
    color: var(--mud-palette-info);
    font-weight: 500;
    background-color: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    border-radius: 4px;
    padding: 0 3px;
    cursor: default;
    user-select: text;
}

/* Tailwind-like outlined chips: subtle tinted background + soft border */
.mud-chip-outlined.mud-chip-color-primary {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-secondary {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.12);
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-tertiary {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.12);
    border-color: rgba(var(--mud-palette-tertiary-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-info {
    background-color: rgba(var(--mud-palette-info-rgb), 0.12);
    border-color: rgba(var(--mud-palette-info-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-success {
    background-color: rgba(var(--mud-palette-success-rgb), 0.14);
    border-color: rgba(var(--mud-palette-success-rgb), 0.38);
}

.mud-chip-outlined.mud-chip-color-warning {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.14);
    border-color: rgba(var(--mud-palette-warning-rgb), 0.38);
}

.mud-chip-outlined.mud-chip-color-error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.12);
    border-color: rgba(var(--mud-palette-error-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-dark {
    background-color: rgba(var(--mud-palette-dark-rgb), 0.10);
    border-color: rgba(var(--mud-palette-dark-rgb), 0.28);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-primary:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-primary:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-primary:active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-secondary:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-secondary:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-secondary:active {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-tertiary:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-tertiary:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-tertiary:active {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-info:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-info:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-info:active {
    background-color: rgba(var(--mud-palette-info-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-success:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-success:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-success:active {
    background-color: rgba(var(--mud-palette-success-rgb), 0.20);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-warning:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-warning:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-warning:active {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.20);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-error:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-error:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-error:active {
    background-color: rgba(var(--mud-palette-error-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-dark:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-dark:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-dark:active {
    background-color: rgba(var(--mud-palette-dark-rgb), 0.16);
}

.mud-theme-dark .mud-chip-outlined.mud-chip-color-primary,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-secondary,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-tertiary,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-info,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-success,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-warning,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-error,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-dark {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Tailwind-like outlined buttons */
/* Dev feedback 2026-07-24 — bouton secondaire (outlined primary) : fond blanc plutôt que le voile
   bleu à 10 %. La bordure + le texte bleus portent déjà l'affordance ; le voile alourdissait les
   rangées où plusieurs de ces boutons voisinent (registre des accès). var(--mud-palette-surface)
   plutôt que #fff : reste correct en thème sombre. Le survol garde le voile (feedback tactile). */
.mud-button-outlined.mud-button-outlined-primary {
    background-color: var(--mud-palette-surface);
}

.mud-button-outlined.mud-button-outlined-secondary {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.10);
}

.mud-button-outlined.mud-button-outlined-info {
    background-color: rgba(var(--mud-palette-info-rgb), 0.10);
}

.mud-button-outlined.mud-button-outlined-success {
    background-color: rgba(var(--mud-palette-success-rgb), 0.11);
}

.mud-button-outlined.mud-button-outlined-warning {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.11);
}

.mud-button-outlined.mud-button-outlined-error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.10);
}

.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-outlined.mud-button-outlined-primary:focus-visible,
.mud-button-outlined.mud-button-outlined-primary:active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16);
}

.mud-button-outlined.mud-button-outlined-secondary:hover,
.mud-button-outlined.mud-button-outlined-secondary:focus-visible,
.mud-button-outlined.mud-button-outlined-secondary:active {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.16);
}

/* Alert text variant polish (closer to Tailwind default badges/alerts) */
.mud-alert-text-info {
    background-color: rgba(var(--mud-palette-info-rgb), 0.12);
}

.mud-alert-text-success {
    background-color: rgba(var(--mud-palette-success-rgb), 0.12);
}

.mud-alert-text-warning {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.14);
}

.mud-alert-text-error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.12);
}

/* Dark mode: make filled primary chips more legible and less pastel */
.mud-theme-dark .mud-chip-filled.mud-chip-color-primary {
    background-color: var(--mud-palette-primary-darken);
}

/* ═══════════════════════════════════════════════════════════
   OASIS UI COMPONENT LIBRARY — Shared Styles
   Used by UiDrawer, UiChildCard, UiSection, and page forms.
   ═══════════════════════════════════════════════════════════ */

/* ── Form label-above-input pattern ──────────────────────── */
.ui-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ui-form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ── Panel section titles (uppercase grey) ────────────────── */
.ui-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Normalize input text inside drawers/panels ──────────── */
.ui-drawer .mud-input,
.ui-drawer .mud-input-text,
.ui-drawer .mud-input > input,
.ui-drawer .mud-select .mud-input,
.ui-drawer .mud-input-slot,
.ui-drawer textarea {
    font-weight: 400 !important;
    font-size: 0.9rem !important;
}

/* PreventionActivities forms: keep entered input text non-bold */
.fieldvisit-page .mud-input,
.fieldvisit-page .mud-input-text,
.fieldvisit-page .mud-input > input,
.fieldvisit-page .mud-input > textarea,
.fieldvisit-page .mud-input-slot,
.obs-page .mud-input,
.obs-page .mud-input-text,
.obs-page .mud-input > input,
.obs-page .mud-input > textarea,
.obs-page .mud-input-slot,
.ins-page .mud-input,
.ins-page .mud-input-text,
.ins-page .mud-input > input,
.ins-page .mud-input > textarea,
.ins-page .mud-input-slot,
.td-page .mud-input,
.td-page .mud-input-text,
.td-page .mud-input > input,
.td-page .mud-input > textarea,
.td-page .mud-input-slot,
.rmsst-page .mud-input,
.rmsst-page .mud-input-text,
.rmsst-page .mud-input > input,
.rmsst-page .mud-input > textarea,
.rmsst-page .mud-input-slot,
.evrdq-page .mud-input,
.evrdq-page .mud-input-text,
.evrdq-page .mud-input > input,
.evrdq-page .mud-input > textarea,
.evrdq-page .mud-input-slot,
.evrmsst-page .mud-input,
.evrmsst-page .mud-input-text,
.evrmsst-page .mud-input > input,
.evrmsst-page .mud-input > textarea,
.evrmsst-page .mud-input-slot {
    font-weight: 400 !important;
}

/* NonCompliance + CorrectiveAction forms: keep entered input text non-bold */
.noncompliance-mobile .mud-input,
.noncompliance-mobile .mud-input-text,
.noncompliance-mobile .mud-input > input,
.noncompliance-mobile .mud-input > textarea,
.noncompliance-mobile .mud-input-slot,
.corrective-action-mobile .mud-input,
.corrective-action-mobile .mud-input-text,
.corrective-action-mobile .mud-input > input,
.corrective-action-mobile .mud-input > textarea,
.corrective-action-mobile .mud-input-slot {
    font-weight: 400 !important;
}

/* iOS Safari auto-zooms inputs whose font-size is < 16px on focus.
   Bump touch-device input text to 16px to suppress the zoom. */
@media (pointer: coarse) {
    .fieldvisit-page .mud-input > input,
    .fieldvisit-page .mud-input > textarea,
    .fieldvisit-page .mud-input-slot,
    .obs-page .mud-input > input,
    .obs-page .mud-input > textarea,
    .obs-page .mud-input-slot,
    .ins-page .mud-input > input,
    .ins-page .mud-input > textarea,
    .ins-page .mud-input-slot,
    .td-page .mud-input > input,
    .td-page .mud-input > textarea,
    .td-page .mud-input-slot,
    .rmsst-page .mud-input > input,
    .rmsst-page .mud-input > textarea,
    .rmsst-page .mud-input-slot,
    .evrdq-page .mud-input > input,
    .evrdq-page .mud-input > textarea,
    .evrdq-page .mud-input-slot,
    .evrmsst-page .mud-input > input,
    .evrmsst-page .mud-input > textarea,
    .evrmsst-page .mud-input-slot {
        font-size: 16px !important;
    }
}

/* ── Inline form (white inputs over tinted bg) ───────────── */
.ui-inline-form {
    border: 1.5px dashed var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    padding: 18px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface)) !important;
}

/* Keep inline form container only; let MudBlazor inputs render natively */

/* ── Soft cancel button ──────────────────────────────────── */
.ui-btn-cancel {
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* ── Action button — primary on hover ────────────────────── */
.ui-btn-action:hover {
    color: var(--mud-palette-primary) !important;
    opacity: 1 !important;
}

/* ── TextFieldAI adornment — match icon button size, primary on hover ── */
.mud-input-adornment-end .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.mud-input-adornment-end .mud-icon-button:hover {
    color: var(--mud-palette-primary) !important;
}

/* All buttons — squarer radius */
.mud-button {
    border-radius: 6px !important;
}

/* ── Delete button — red on hover ────────────────────────── */
.ui-btn-delete:hover {
    color: var(--mud-palette-error) !important;
    opacity: 1 !important;
}

/* ── Number/ID badge (rectangular) ───────────────────────── */
.ui-id-badge {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Normal-case button (no uppercase transform) ────────── */
.ui-btn-normal-case {
    text-transform: none;
}

/* ── Completion justification box ───────────────────────── */
.ui-completion-box {
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
}
.ui-completion-box--valid {
    border: 2px solid var(--mud-palette-success);
}
.ui-completion-box--pending {
    border: 2px dashed var(--mud-palette-warning);
}

/* ── Sticky footer action bar ────────────────────────────── */
:root {
    --ui-sticky-footer-height: 65px; /* 14px top + ~36px button + 14px bottom + 1px border */
    --ui-sticky-footer-gap: 8px;     /* breathing room between content and footer */
}
/* SC-1580 — le footer est position:fixed, donc il recouvre tout ce qui tombe dans ses
   derniers ~65px, quelle que soit la position de scroll (le padding-bottom du conteneur
   ne protège que la toute fin de la page, pas un champ au milieu). scroll-padding-bottom
   ne change rien visuellement : il ne fait qu'ajuster où le navigateur s'arrête quand
   quelque chose déclenche un scroll (scrollIntoView vers une erreur de validation,
   navigation clavier, ancre) pour que la cible ne finisse jamais cachée derrière le
   footer. Portée par :has() aux seules pages qui ont un .ui-sticky-footer — aucun effet
   sur les pages sans footer collant. */
html:has(.ui-sticky-footer) {
    scroll-padding-bottom: calc(var(--ui-sticky-footer-height) + var(--ui-sticky-footer-gap));
}
.ui-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--ui-sticky-footer-height);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    z-index: 1100;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.ui-sticky-footer .mud-button-root {
    padding: 8px 32px;
}
@media (max-width: 480px) {
    .ui-sticky-footer {
        padding: 10px 8px;
        gap: 6px;
        justify-content: center;
    }
    .ui-sticky-footer .mud-button-root {
        padding: 6px 14px;
        min-width: 0;
    }
}


/* ── UiToggleSearchBlock Component ───────────────────────── */
.ui-toggle-search-block {
    position: relative;
    width: 100%;
}
.ui-toggle-search-row {
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    padding: 0 4px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}
.ui-toggle-search-row .mud-input {
    background-color: transparent !important;
}
.ui-toggle-search-row .mud-input-outlined-border {
    border: none !important;
}

/* ── Drawer backdrop blur shared style ────────────────────── */
.ui-drawer-blur-wrapper .mud-drawer-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background-color: rgba(15, 23, 42, 0.28) !important;
}

/* ── Dark Mode: titres éclatants (slate-50) malgré TextPrimary adouci ── */
.mud-theme-dark h1,
.mud-theme-dark h2,
.mud-theme-dark h3,
.mud-theme-dark h4,
.mud-theme-dark h5,
.mud-theme-dark h6,
.mud-theme-dark .mud-typography-h1,
.mud-theme-dark .mud-typography-h2,
.mud-theme-dark .mud-typography-h3,
.mud-theme-dark .mud-typography-h4 {
    color: #f8fafc !important; /* slate-50 — les titres restent brillants */
}

/* ── Prose: limite la largeur de lecture pour le confort visuel ── */
.document-prose {
    max-width: 65ch;
}

/* ── MudDateRangePicker — fonce la couleur de sélection entre deux dates ──
   Override de la couleur seulement, en conservant la formule background-size
   de MudBlazor `calc(100% * (var(--selected-day) - var(--day-id)))` qui filtre
   visuellement les cellules HORS range (sinon le tint déborde sur les cellules
   après la date de fin). N'affecte ni le hover ni les bornes start/end. */
.mud-range-selection:not(:hover):not(.mud-range-start-selected):not(.mud-range-end-selected) {
    background: linear-gradient(
        color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 100%,
        color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 100%,
        transparent 0%
    ) !important;
}