/* Invizely × MudBlazor overrides.
   Loaded AFTER MudBlazor.min.css so these rules win the cascade. MudBlazor
   controls must look identical to our native Tailwind inputs so the two
   coexist without visual disparity.

   Reference native input class string (from @InputClass in *.razor.cs):
     flex h-9 w-full rounded-md border border-input bg-background
     px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground
     focus-visible:outline-none focus-visible:ring-2
     focus-visible:ring-ring focus-visible:ring-offset-1

   That translates to: 36px height, 8px radius, 1px --input border,
   --background fill, 14px text, shadow-sm elevation, focused state with
   a 2px --ring outline and 1px white offset. We mirror every one of those
   onto MudBlazor's outlined inputs below.

   Selectors verified against MudBlazor 9.4.0 rendered HTML.  */

/* --- MudBlazor ↔ Tailwind utility-class collision -------------------- */
/* MudBlazor.min.css ships its OWN utility classes — `.fixed`, `.static`,
   `.absolute`, `.relative`, `.sticky`, `.flex-1`, etc. — all declared with
   `!important`. They share names with Tailwind. The disaster case is
   positioning: `.fixed { position: fixed !important; }` beats Tailwind's
   responsive `.lg\:static` (no !important) at every breakpoint.

   Fix: compound selectors of TWO Tailwind class names PLUS !important so
   specificity (0,0,2,0) beats MudBlazor's (0,0,1,0). Patch only the
   responsive variants we use. */

@media (min-width: 1024px) {
  .fixed.lg\:static { position: static !important; }
  .-translate-x-full.lg\:translate-x-0,
  .translate-x-0.lg\:translate-x-0 {
    --tw-translate-x: 0 !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) !important;
  }
  .w-64.lg\:w-64 { width: 16rem !important; }
  .w-64.lg\:w-14 { width: 3.5rem !important; }
}

.sticky.top-0.z-40 { position: sticky !important; z-index: 40 !important; }

/* --- Input shell (date pickers, selects, autocomplete, text fields) ------ */

/* The actual <input>. h-9 = 36px, text-sm = 14px, our text colour. */
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-outlined.mud-input-margin-dense .mud-input-slot {
    /* border-box is load-bearing: the slots compute as content-box, so
       without it height 36 + 8px padding rendered as a 44px slot that
       overflowed the 36px wrapper by 4px top and bottom. */
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: hsl(var(--foreground)) !important;
    background: transparent !important;
}
.mud-input.mud-input-outlined .mud-input-slot::placeholder {
    color: hsl(var(--muted-foreground)) !important;
    opacity: 1;
}

/* MudSelect shows its value in a DIV carrying the mud-input-slot class
   (real <input> is type=hidden) — a div does NOT vertically centre its text
   the way an input does, so at our forced 36px height the value hugged the
   top. The visible presenter is the one with tabindex="0"; the flex must be
   !important because the div ships inline `style="display:inline"`. Hidden
   clones (tabindex="-1") keep display:none. */
.mud-input.mud-input-outlined div.mud-input-slot[tabindex="0"] {
    display: inline-flex !important;
    align-items: center;
}

/* The wrapper draws our focus ring (see below); the native <input> must not
   add the browser's default outline on top of it. */
.mud-input.mud-input-outlined .mud-input-slot:focus,
.mud-input.mud-input-outlined .mud-input-slot:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Wrapper that holds the input + adornment icon. Pin it to EXACTLY 36px —
   min-height alone let pickers stretch taller than selects/native inputs,
   which misaligned the filter rows (labels ended up at 3 different heights). */
.mud-input.mud-input-outlined,
.mud-input.mud-input-outlined.mud-input-margin-dense {
    height: 36px !important;
    min-height: 36px !important;
    align-items: center;
    background: hsl(var(--background));
    border-radius: 0.5rem;   /* rounded-md = 8px */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);  /* shadow-sm */
}
.mud-input.mud-input-outlined .mud-input-adornment,
.mud-input.mud-input-outlined .mud-input-adornment-end,
.mud-input.mud-input-outlined .mud-input-adornment-start {
    max-height: 36px;
}

/* Outer control wrapper — kill Material's reserved label space. NO
   !important here: pages hang Tailwind spacing utilities (`mt-1`) on the
   control via Class="", and Tailwind's important:true utilities must win.
   The old `margin-top: 0 !important` swallowed the mt-1 label gap on
   MudSelect (Class lands on .mud-input-control) while native inputs and
   pickers kept theirs — labels sat at three different heights. */
.mud-input-control,
.mud-input-control.mud-input-control-margin-dense {
    margin-top: 0;
}

/* Pickers double up: the page's mt-1 sits on the .mud-picker root AND
   MudBlazor gives the inner .mud-input its own 4px top margin (selects
   don't have this) — so the date-range box rode 4px lower than the other
   inputs in a filter row. Kill the inner one; the page utility remains. */
.mud-picker .mud-input.mud-input-outlined {
    margin-top: 0 !important;
}
.mud-input-control > .mud-input-label,
.mud-input-label-animated,
.mud-input-outlined-border > legend { display: none !important; }

/* Outlined border fieldset — 1px, our --input colour, 8px radius.
   MudBlazor's :focus-within rule normally jumps this to 2px primary; we
   pin it to 1px at every state via !important + specificity (0,0,3,0)
   which beats MudBlazor's (0,0,4,0) once !important is in the mix. */
.mud-input.mud-input-outlined > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-focused > .mud-input-outlined-border {
    border-width: 1px !important;
    border-radius: 0.5rem !important;
    border-color: hsl(var(--input)) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Focus indicator — replicate `focus-visible:ring-2 ring-ring ring-offset-1`
   exactly: 1px white offset + 2px --ring ring, via box-shadow on the
   wrapper (so it sits OUTSIDE the input border). */
.mud-input.mud-input-outlined:focus-within,
.mud-input.mud-input-outlined.mud-focused {
    box-shadow:
        0 0 0 1px hsl(var(--background)),
        0 0 0 3px hsl(var(--ring) / 0.45) !important;
}
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-focused > .mud-input-outlined-border {
    border-color: hsl(var(--input)) !important;
}

/* End-adornment icon button (calendar / dropdown arrow). 28px so it doesn't
   inflate the row past 36px, in muted-foreground colour. */
.mud-input.mud-input-outlined .mud-input-adornment-end .mud-icon-button {
    height: 28px !important;
    width: 28px !important;
    padding: 4px !important;
    color: hsl(var(--muted-foreground)) !important;
}
.mud-input.mud-input-outlined .mud-input-adornment-end .mud-icon-button:hover {
    color: hsl(var(--foreground)) !important;
    background: transparent !important;
}
.mud-input.mud-input-outlined .mud-input-adornment-end .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
}

/* --- Dropdown list (MudSelect popover items) -------------------------- */

/* MudSelect popovers double-scroll: the popover carries the max-height and
   scrolls, while `.mud-popover .mud-list { max-height: inherit; overflow-y:
   auto }` makes the inner list scroll too. MudBlazor ships this exact fix
   for menus (`:has(> .mud-menu-list)`) but not for selects — mirror it so
   only the list scrollbar remains. */
.mud-popover:has(> .mud-list) { overflow: hidden; }

.mud-list-item.mud-selected-item,
.mud-list-item-clickable.mud-selected-item {
    background: hsl(var(--primary) / 0.12) !important;
    color: hsl(var(--primary)) !important;
}
.mud-list-item.mud-list-item-clickable:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
}

/* --- Buttons ---------------------------------------------------------- */

.mud-button-root {
    text-transform: none;
    border-radius: 0.5rem;
    font-weight: 500;
    letter-spacing: 0;
}
/* Soften the ripple via MudBlazor's own variable. NEVER set `opacity` on
   .mud-ripple itself — it's the HOST class on every clickable element
   (list items, calendar days, buttons), so that ghosts the whole control
   to near-invisible. The ripple visual is a child `.mud-ripple-effect`
   that reads --mud-ripple-opacity. */
.mud-ripple { --mud-ripple-opacity: 0.08; }

/* --- Popovers / dialogs ----------------------------------------------- */

/* Visual polish only — never touch z-index. MudBlazor's defaults layer
   popover above its own click-catcher overlay; overriding broke picker
   click handling once already. */
.mud-popover {
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.10),
        0 4px 6px -4px rgb(0 0 0 / 0.10) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    background: hsl(var(--popover, var(--card))) !important;
}

.mud-dialog {
    border-radius: 0.625rem;
    background: hsl(var(--background));
}

/* --- Date picker calendar -------------------------------------------- */

.mud-picker-toolbar {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.mud-picker-content { padding: 12px; }

.mud-picker-calendar-day {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    font-size: 13px;
}
.mud-picker-calendar-day:hover:not(.mud-selected):not(:disabled) {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}
.mud-picker-calendar-day.mud-selected {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}
.mud-picker-calendar-day.mud-current:not(.mud-selected) {
    border: 1px solid hsl(var(--primary));
    color: hsl(var(--primary));
}
.mud-picker-calendar-header-transition {
    font-weight: 500;
    font-size: 14px;
}
.mud-picker-calendar-header { padding: 8px 12px; }
.mud-range-day-selected,
.mud-day-range {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
}
.mud-picker-popover-content { max-width: calc(100vw - 32px); }

/* --- Snackbar -------------------------------------------------------- */

.mud-snackbar {
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.10),
        0 4px 6px -4px rgb(0 0 0 / 0.10);
    background: hsl(var(--card));
    color: hsl(var(--foreground));
}

.mud-table-root { border-radius: 0.5rem; }