/* ============================================================
   Royal · Licht — InvoiceDashboard thema-override
   Laad DIT bestand NA styles.css (zodat het wint).
   In deze app (App.razor):
     <link href="assets/css/styles.css" rel="stylesheet" />
     <link href="assets/css/royal-theme.css" rel="stylesheet" />   <-- nieuw
   ============================================================ */

/* 1) Huisstijl-kleur -> Royal Blue.
   Alle Ynex-afgeleiden (--primary-color, --primary01..09, knoppen,
   hero, badges, focus-randen) volgen automatisch deze ene variabele. */
:root {
  --primary-rgb: 37, 99, 235;     /* Royal Blue  (#2563EB) */
  --secondary-rgb: 14, 165, 233;  /* optioneel: fris accent voor gradients */
  /* styles.css overschrijft --mud-palette-primary (kleur) maar niet de -rgb-variant,
     waardoor Mud-tints (rgba(...)) terugvielen op MudBlazor-paars. Vul aan zodat
     alle Mud primary-tints de huisstijl-blauw volgen. */
  --mud-palette-primary-rgb: var(--primary-rgb);
  /* #705 — drawer-systeem: veldrand en subtiele meta-achtergrond, gebruikt door
     DrawerSearch/DrawerListItem (Docs/claude-design-template/design_handoff_drawers). */
  --field-border: #dce0e8;
  --meta-bg: #fbfcfe;
}

/* 2) Body-achtergrond een subtiele, koele tint (i.p.v. vlak grijs),
   zodat witte kaarten mooi loskomen en alles één familie voelt. */
:root {
  --body-bg-rgb: 231, 238, 251;   /* #E7EEFB */
}

/* 3) Sidebar-achtergrond gelijk aan het ontwerp: een zachte koele tint
   (#f6f9fd) i.p.v. puur wit. Ynex' light menu style forceert --menu-bg:#fff;
   we scopen de override op [data-menu-styles="light"] (hogere specificiteit
   dan de inline :root, dus wint altijd). De dark-mode variant blijft ongemoeid. */
[data-menu-styles="light"] {
  --menu-bg: #f6f9fd;
}

/* 3b) Lichte sidebar i.p.v. het koude navy.
   We mikken op data-menu-styles="light" (zie stap 4 hieronder).
   Hier verfijnen we alleen het ACTIEVE item zodat het de huisstijl
   oppakt (Ynex maakt 'm standaard grijs #f3f6f8). */
[data-menu-styles="light"] .app-sidebar .side-menu__item.active {
  background-color: rgba(var(--primary-rgb), .10);
}
[data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__label,
[data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__icon,
[data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__angle {
  color: rgb(29, 78, 216);        /* primaryDark voor leesbaarheid */
  fill: rgb(29, 78, 216);
}
/* hover blijft subtiel grijs (Ynex-default) — niets te doen */

/* 5) Icoon + label verticaal centreren binnen elk menu-item.
   De RemixIcon line-icons zitten op een iets hogere baseline dan de
   originele boxicons, waardoor het icoon niet meer mooi op één lijn met
   de tekst stond. We forceren flex-centrering op het item en het icoon. */
.app-sidebar .side-menu__item {
  display: flex;
  align-items: center;
}
.app-sidebar .side-menu__item .side-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 0;
  line-height: 1;
}

/* 5b) Active item — canonical primary pill-edge stripe + themed pill (Header/Sidebar mock).
   Ynex draws the active item as a grey pill; stap 3b already tints the bg.
   Here we (a) switch label+icon to the brand primary, and (b) add the canonical 3px
   stripe (the one from invoice-theme.css): a short rounded bar at the pill's left edge,
   8px top/bottom inset, radius 4px — NOT a full-height edge rail.
   All accent colours route through --mud-palette-* (never the coral fallback). */
[data-menu-styles="light"] .app-sidebar .side-menu__item.active {
  font-weight: 600;
}
[data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__label,
[data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__icon,
[data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__angle {
  color: var(--mud-palette-primary);
  fill: var(--mud-palette-primary);
}
[data-menu-styles="light"] .app-sidebar .side-menu__item.active::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  inset-inline-start: -1px;           /* short stripe at the pill's left edge */
  width: 3px;
  border-radius: 4px;
  background: var(--mud-palette-primary);
}
/* Hover stays a soft neutral grey, but never over the active item */
[data-menu-styles="light"] .app-sidebar .side-menu__item:hover:not(.active) {
  background-color: #eef2f9;
}
/* Canonical list spacing (item margin-bottom 4px, list padding 10px 12px) */
[data-menu-styles="light"] .app-sidebar .main-menu {
  padding: 10px 12px;
}
[data-menu-styles="light"] .app-sidebar .main-menu > .slide {
  margin-block-end: 4px;
}

/* 5c) SlideOverDrawer fill-variant body (Factuurinstellingen / invoice-settings).
   The drawer body carries Ynex' generic `.offcanvas-body`, which forces a 4.75rem (76px)
   bottom padding via `padding: 0 0 4.75rem !important` (meant for scrolling offcanvas
   panels). The fill variant manages its own scroll region + a footer pinned to the bottom,
   so that padding only leaves dead space under the "Opslaan" button. Because the Ynex rule
   is `!important`, the component's scoped `padding:0` can't win — override it here with a
   higher-specificity `!important` (global, loaded after styles.css). */
.slideover-drawer .offcanvas-body.hub-drawer-body-fill {
  padding: 0 !important;
}

/* 6) Invoice detail slide-over (InvoiceDetailDrawer).
   The drawer's pixel width is set via MudDrawer's Width parameter (440px / 1060px) —
   Blazor CSS-isolation `::deep` cannot target the MudDrawer root element, so width and
   any root-level styling must be global. Here we only clamp to the viewport on small
   screens and smooth the narrow<->wide width change. */
.invoice-detail-drawer.mud-drawer {
  max-width: 100vw;
  display: flex;
  flex-direction: column;        /* pin header/footer; only .idr-body scrolls */
  transition: width .3s cubic-bezier(.2, .7, .3, 1);
}

/* --- Drawer icon/button styling. These target MudBlazor-generated classes
   (.mud-icon-root, .mud-icon-button, .mud-button-root), which never carry the
   component's CSS-isolation scope attribute — so the rules MUST be global (no ::deep
   can reach them). The .invoice-detail-drawer class is on the drawer root in the DOM,
   so these descendant selectors resolve. --- */

/* Header brand icon — 21px glyph in the tinted box */
.invoice-detail-drawer .idr-icon .mud-icon-root { font-size: 21px; line-height: 1; }
/* Mirror for the quote detail drawer (root carries Class="quote-detail-drawer"); an
   isolated .razor.css cannot reach .mud-icon-root, so the rule lives here beside its
   sibling to keep the glyph centered identically to the invoice drawer. */
.quote-detail-drawer .idr-icon .mud-icon-root { font-size: 21px; line-height: 1; }

/* Header action icon-buttons (preview toggle, more-menu, close) — 34px grey rounded
   square (like the mock .dw-head .x), 18px glyph flex-centered. */
.invoice-detail-drawer .idr-head-actions .mud-icon-button {
  width: 34px; height: 34px; padding: 0; border-radius: 8px; background: #f4f5f8;
  display: inline-flex; align-items: center; justify-content: center;
}
.invoice-detail-drawer .idr-head-actions .mud-icon-button:hover { background: #e9ebf0; color: var(--primary-color); }
.invoice-detail-drawer .idr-head-actions .mud-icon-button .mud-icon-root { font-size: 18px; line-height: 1; }

/* Document file-type icons (pdf / xml) — 24px, flex-centered with the filename text
   (line-height:1 removes the font's baseline offset). The color rules in the isolated
   .razor.css target .mud-icon-root and silently no-op (scope trap), so set them here. */
.invoice-detail-drawer .idr-doc-ic-pdf,
.invoice-detail-drawer .idr-doc-ic-xml { font-size: 24px; line-height: 1; display: inline-flex; align-items: center; }
.invoice-detail-drawer .idr-doc-ic-pdf { color: var(--primary-color); }
.invoice-detail-drawer .idr-doc-ic-xml { color: #3b82c4; }

/* Document download button — 32px square, soft grey, 16px glyph; primary tint on hover */
.invoice-detail-drawer .idr-doc-row .mud-icon-button {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; background: #f4f5f8;
  display: inline-flex; align-items: center; justify-content: center;
}
.invoice-detail-drawer .idr-doc-row .mud-icon-button:hover { background: rgba(var(--primary-rgb), .14); color: var(--primary-color); }
.invoice-detail-drawer .idr-doc-row .mud-icon-button .mud-icon-root { font-size: 16px; line-height: 1; }

/* Full-width dashed "open preview" button (was a plain text link) */
.invoice-detail-drawer .idr-prev-btn.mud-button-root {
  width: 100%; height: 40px; margin-top: 2px;
  border: 1px dashed var(--default-border); border-radius: 9px;
  background: #fbfcfe; color: var(--primary-color);
  font-size: 13px; font-weight: 600; text-transform: none;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.invoice-detail-drawer .idr-prev-btn.mud-button-root:hover { background: var(--custom-white); border-color: var(--primary-color); }
.invoice-detail-drawer .idr-prev-btn .mud-icon-root { font-size: 16px; line-height: 1; }

/* Footer buttons — primary stretches to fill; secondary (PDF) is white-with-border, not grey */
.invoice-detail-drawer .idr-foot .mud-button-root {
  height: 42px; border-radius: 9px; font-size: 13px; font-weight: 600; text-transform: none;
}
.invoice-detail-drawer .idr-foot .mud-button-root .mud-icon-root { font-size: 18px; line-height: 1; }
.invoice-detail-drawer .idr-foot-primary.mud-button-root {
  flex: 1; background: var(--primary-color); color: #fff;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .26);
}
.invoice-detail-drawer .idr-foot-secondary.mud-button-root {
  background: var(--custom-white); color: #4d5663; border: 1px solid var(--default-border);
}
.invoice-detail-drawer .idr-foot-secondary.mud-button-root:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* History timeline dot glyphs — shrink to fit the 28px circle so they center */
.invoice-detail-drawer .idr-tl-dot .mud-icon-root { font-size: 16px; line-height: 1; }

/* Shared invoice status/payment chips (used by the detail drawer AND the overview table).
   Defined globally — no scope — so plain spans in either component pick them up. */
.inv-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 11px;
  border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1;
}
.inv-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.inv-chip--blue { background: rgba(var(--primary-rgb), .12); color: var(--primary-color); }
.inv-chip--green { background: rgba(38,191,148,.13); color: #109e78; }
.inv-chip--green .inv-chip-dot { background: #26bf94; }
.inv-chip--red { background: rgba(239,68,68,.10); color: #dc4a3d; }
.inv-chip--red .inv-chip-dot { background: #ef4444; }
.inv-chip--neutral { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }
.inv-chip--neutral .inv-chip-dot { background: var(--mud-palette-text-secondary); }

/* Remix-icon glyphs in Mud buttons (StartIcon/EndIcon="ri-…") render as font spans;
   without this they inherit the button's line-height and sit below the text baseline.
   Scoped to [class*=ri-] so MudBlazor's own SVG icons are untouched. */
.mud-button-root .mud-icon-root[class^="ri-"],
.mud-button-root .mud-icon-root[class*=" ri-"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}

/* 7) #554 — Mobile header (<768px).
   Reuses the breakpoint of the existing header block in styles.css:12098 ("Header: keep quick
   links + flags visible on narrow screens"); no new breakpoint is introduced. See the plan §0.3
   (.agency/runs/554/plan-round4.md) for why this is 767.98px while the drawer half of #554 uses
   <960px.

   1) The Ynex brand link renders as a blue monogram tile on phones. It is already display:none
      from 992px up (styles.css:22359), so this only removes it in the <768px range.
      !important is required, not cosmetic: styles.css sets .horizontal-logo{display:block} under
      four higher-specificity attribute selectors (:326 [data-toggled=close], :342
      [data-toggled=open], :20737 [data-vertical-style=detached], :21048
      [data-nav-layout=horizontal]).
   2) The enterprise name has two render branches (MainHeader.razor:74-78): .header-enterprise
      (<576px, ALREADY clamped by styles.css:12107) and .main-header-profile (576-767px, NOT
      clamped) — the second is what collides with the NL language switch.
      The selector is "> *" and not ".mud-typography": MainHeader.razor:75 passes a raw lowercase
      class= to MudText, which overwrites MudBlazor's own class list via UserAttributes, so
      .mud-typography may not be present on the rendered element. */
@media (max-width: 767.98px) {
  .app-header .horizontal-logo {
    display: none !important;
  }

  .main-header-container .enterprise-selector .main-header-profile {
    min-width: 0;
    max-width: min(45vw, 14rem);
  }

  .main-header-container .enterprise-selector .main-header-profile > * {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 8) #554 — Full-screen PDF preview on small viewports.
   MudDialog portals to the document root, so CSS isolation cannot reach it; these rules must be
   global (same reason as section 6 for the drawer). The hooks are stable: .invoice-preview-dialog
   comes from InvoicePreviewDialog.razor:4 and .mud-dialog-fullscreen is added by MudBlazor when
   DialogOptions.FullScreen is true (no existing call site sets it).
   Why the padding matters: pdfViewer._computeFitScale (pdfViewer.js:121) uses
   availableWidth = containerWidth - 48, and _readContainerFitDimensions reads the container's
   OUTER width (max of clientWidth and rect.width). At a 390px viewport the dialog is 390 wide
   including its 1px border on each side (styles.css:14473; box-sizing is border-box globally via
   MudBlazor's * reset), so the content box is 388. With MudBlazor's app-overridden content padding
   (styles.css:7944 -> 1rem) that leaves 356 -> a 308px A4 page; zeroing it leaves 388 -> 340px.
   Shrinking pa-6 alone changes nothing, because the -48 is a fixed constant. */
.mud-dialog.invoice-preview-dialog.mud-dialog-fullscreen .mud-dialog-content {
  padding: 0;
}

/* Beats the inline Style="height:75vh" on InvoicePreviewDialog.razor:6 — an !important author
   declaration outranks a non-important inline style. Only in the full-screen case; the four
   desktop call sites keep 75vh. */
.mud-dialog.invoice-preview-dialog.mud-dialog-fullscreen .invoice-preview-body {
  height: 100% !important;
}

.mud-dialog.invoice-preview-dialog.mud-dialog-fullscreen #invoice-preview-pdf-container {
  padding: 8px !important;
}

/* 9) #705 — drawer-systeem toolbar. Shared across DrawerShell's own optional Toolbar slot AND a
   drawer's own content (e.g. AccountingClientContactPersons wraps its search+add row in this class
   directly, since it owns that toolbar's state). Blazor CSS isolation scopes a class to the
   component that declares it, so a cross-component class like this one must be global — same
   reasoning as sections 5c/6/7 above. */
.drawer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--default-border);
}

/* 10) #705 AC3 — DrawerShell overlay scrim, DRAWER-SYSTEEM.md's rgba(20,24,32,.35), overriding
   MudBlazor's default dark scrim (.mud-overlay-scrim.mud-overlay-dark -> rgba(33,33,33,.498)).
   Same root cause as section 6's .mud-icon-root notes: MudDrawer renders its click-away overlay as
   a SIBLING of the drawer's own <aside> root (both direct children of the same .mud-container), not
   as a DOM descendant of it, so no scoped .razor.css selector (::deep included, custom-property
   inheritance included) can ever reach it — confirmed live via getComputedStyle. The adjacent-sibling
   selector below is safe: only one MudDrawer is ever Open at a time in this app (DrawerShell.razor.cs
   / SlideOverDrawer.razor.cs both gate on that same invariant), so MudBlazor only ever renders ONE
   overlay-drawer element immediately after its owning <aside>, and "drawer-shell" is a class unique
   to DrawerShell (no other MudDrawer consumer uses it) — this can never match another drawer's scrim. */
.drawer-shell + .mud-overlay-drawer .mud-overlay-scrim {
  background-color: rgba(20, 24, 32, .35);
  border-color: rgba(20, 24, 32, .35);
}

/* 11) #705 round-3 fix — DrawerShell responsive width (AC12). Same root cause as section 6:
   "drawer-shell" is the Class passed to <MudDrawer>, so it lands on MudDrawer's own rendered
   <aside class="drawer-shell mud-drawer ...">; that root is a CHILD component's own markup, not
   DrawerShell.razor's authored markup, so no scoped selector in DrawerShell.razor.css (::deep
   included) can ever reach it — same limitation as .invoice-detail-drawer.mud-drawer above. */
.drawer-shell.mud-drawer {
  max-width: 100vw;
}
@media (max-width: 560px) {
  .drawer-shell.mud-drawer {
    width: 100vw !important;
    max-width: 100vw;
  }
}

/* 12) #929 Adsolut export drawer frame. Every selector carries .adsolut-export-drawer (Class of this one DrawerShell), so no other
   drawer is touched. Global for the same reason as sections 10 and 11: MudDrawer's own <aside> and its scrim sibling cannot be reached
   from a scoped component stylesheet. Specificity: three classes beat DrawerShell's scoped one-class-plus-attribute rules without
   !important; only the width rule needs !important, to beat MudBlazor's inline width. Values: expected-styles D1 to D12, D46, D47. */
.drawer-shell.adsolut-export-drawer {
  letter-spacing: 0;
  --ae-text-strong: #232427;
  --ae-text: #33373F;
  --ae-text-2: #4D5663;
  --ae-text-3: #5B6472;
  --ae-text-4: #3A4150;
  --ae-muted: #6B717B;
  --ae-faint: #9AA1AD;
  --ae-line: #EEF0F3;
  --ae-th-bg: #F3F5F9;
  --ae-th-line: #E6EBF1;
  --ae-row-line: #F2F4F7;
  --ae-control-bg: #F7F8FB;
  --ae-office-bg: #F2F5F9;
  --ae-office-line: #E6EBF1;
  --ae-chevron: #C2C7D0;
  --ae-danger-rgb: 239, 68, 68;
  --ae-danger-text: #C23A2E;
  --ae-warning-rgb: 245, 158, 11;
  --ae-warning-dot: #E0A12E;
  --ae-warning-text: #8A5A00;
  --ae-success-text: #0B7D5E;
  --ae-receipt-bg: #F8F1E2;
  --ae-receipt-fg: #A06C08;
  --ae-panel-bg: #FDF1EF;
  --ae-panel-line: #F4D3CC;
  --ae-panel-text: #9F3226;
  --ae-xml: #3B82C4;
  --ae-pdf: #D3563A;
  --ae-soft-btn: #F4F5F8;
  --ae-format-chip: #EEF0F4;
  --ae-pending-bg: #F3F4F7;
  --ae-pending-line: #D6DAE1;
}
.drawer-shell.adsolut-export-drawer + .mud-overlay-drawer .mud-overlay-scrim {
  background-color: rgba(25, 29, 35, .46);
  border-color: rgba(25, 29, 35, .46);
}
.drawer-shell.adsolut-export-drawer.mud-drawer {
  box-shadow: none;
}
.drawer-shell.adsolut-export-drawer.mud-drawer.mud-drawer--open {
  box-shadow: -12px 0 48px rgba(0, 0, 0, .2);
}
.drawer-shell.adsolut-export-drawer .drawer-shell-header {
  padding: 18px 22px;
}
.drawer-shell.adsolut-export-drawer .drawer-shell-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}
.drawer-shell.adsolut-export-drawer .drawer-shell-icon.ae-icon-receipt {
  background: var(--ae-receipt-bg);
  color: var(--ae-receipt-fg);
}
.drawer-shell.adsolut-export-drawer .drawer-shell-titles {
  padding-left: 1px;
}
.drawer-shell.adsolut-export-drawer .drawer-shell-title {
  position: relative;
  top: 1px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ae-text-strong);
}
.drawer-shell.adsolut-export-drawer .drawer-shell-subtitle {
  color: var(--ae-muted);
}
.drawer-shell.adsolut-export-drawer .drawer-shell-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ae-soft-btn);
  border: none;
  color: var(--ae-text-3);
}
.drawer-shell.adsolut-export-drawer .drawer-shell-body {
  padding: 20px 22px 16px;
  gap: 14px;
}
.drawer-shell.adsolut-export-drawer .drawer-shell-footer {
  padding: 15px 22px;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 819.98px) {
  .drawer-shell.adsolut-export-drawer.mud-drawer {
    width: 94vw !important;
  }
}

/* #794 - optical centring for the Customers glyph (ti-user-star ink sits ~0.1em right of its box centre).
   The class comes from HubVisuals.Customers.Tint, so the hub tile and the drawer header shift identically. */
.hub-optical-user-star .mud-icon-root { transform: translateX(-0.1em); }

/* #777 invoice line tile menu (portalled MudMenu popover) — MudBlazor portals the popover into
   MudPopoverProvider, so scoped CSS in InvoiceLinesTab.razor.css cannot reach it (Blazor CSS
   isolation, child-component support). Tokens are declared locally, as the second (and only
   other) justified hex-literal block for #777 alongside InvoiceFormLayout.razor.css's --if-*
   block, because --if-* custom properties do not inherit into the portal. */
.if-ltile-menu {
    --ltm-border: #eef0f3;
    --ltm-text: #586472;
    --ltm-icon: #8c9097;
    --ltm-danger: #dc4a3d;
    --ltm-danger-hover-bg: rgba(239, 68, 68, .08);
    min-width: 150px;
    border: 1px solid var(--ltm-border);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(20, 24, 40, .18);
    padding: 5px;
    margin-top: 6px;
}
.if-ltile-menu .mud-list { padding: 0; }
.if-ltile-menu .mud-menu-item {
    gap: 0;
    padding: 9px 11px;
    font-family: var(--default-font-family);
    font-size: 13.5px;
    font-weight: 500;
    line-height: normal;
    color: var(--ltm-text);
    border-radius: 7px;
    min-height: 0;
    cursor: pointer;
}
/* beats MudBlazor 9.4 .mud-menu-item:not(:has(.mud-menu-submenu-icon)) .mud-menu-item-text{margin-inline-end:36px} (0,3,0)
   and .mud-menu-item .mud-menu-item-text{margin:4px 0} */
.if-ltile-menu .mud-menu-item-text {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}
.if-ltile-menu .mud-menu-item i { font-size: 16px; color: var(--ltm-icon); }
/* Round-6 (test-round5.md H-7): the "Bewerken" hover background rendered at 0.1 opacity (the
   wall's rgba(primary,.1)) instead of the mock's 0.08. A first attempt just adding "!important"
   here (matching the ".danger:hover" fix below) was verified LIVE to still fail: the BARE
   selector (".if-ltile-menu .mud-menu-item:hover", without ":not(.danger)") only compiles to
   (0,3,0) -- ".if-ltile-menu" + ".mud-menu-item" + ":hover", three class-level selectors --
   lower than styles.css:5680's wall (0,4,0) (it has an extra ".mud-list-item-clickable" class
   and a ":not(.active)" pseudo-class, whose argument also counts), so the wall was more specific;
   "!important" only breaks ties between EQUAL specificities, it never overrides a higher one.
   ".danger:hover" (below) already ties the wall because its own extra ".danger" class raises it
   to (0,4,0); this plain rule needed its own extra qualifier to reach the same (0,4,0), hence
   ":not(.danger)" (also excludes any future overlap with the danger rule below, which is
   otherwise ordered right after it). Re-verified live post-fix: backgroundColor
   rgba(37, 99, 235, 0.08) on both mock and app. [Round-7 correction, review-round2.md item 1: an
   earlier draft of this comment wrongly claimed the BARE selector itself compiled to (0,4,0) --
   corrected above to (0,3,0), matching InvoiceFormV3CssContractTests.cs's own explanation of the
   same fix.] */
.if-ltile-menu .mud-menu-item:not(.danger):hover { background: rgba(var(--primary-rgb), .08) !important; color: var(--primary-color) !important; }
.if-ltile-menu .mud-menu-item.danger,
.if-ltile-menu .mud-menu-item.danger i { color: var(--ltm-danger); }
/* Round-5 Gap 1 (test-round4.md): styles.css:5680 `.mud-menu-item.mud-list-item-clickable:not(.active):hover,
   ...:focus, ...:active { color: var(--primary-color) !important; background-color: var(--primary01) !important; }`
   has the SAME compiled specificity (0,4,0) as this rule, and a non-!important declaration always
   loses to an !important one regardless of specificity or source order. `!important` on both
   background AND color restores the tie, which is then broken by source order: royal-theme.css
   loads AFTER styles.css (App.razor :110 vs :107), so this rule wins. Round-5 follow-up
   (orchestrator): the wall's `color !important` half was missed in the first pass -- it forces
   ANY hovered menu item's text blue, so "Verwijderen" kept turning blue on hover even after the
   background fix, since `.danger`'s own (non-hover, non-!important) colour rule always lost while
   hovering. The icon is unaffected (the wall's selector never matches the child <i> element, and
   CSS inheritance never overrides that element's own direct, non-!important colour rule) -- no
   icon-specific hover rule needed. */
.if-ltile-menu .mud-menu-item.danger:hover { background: var(--ltm-danger-hover-bg) !important; color: var(--ltm-danger) !important; }
/* Round-7 (review-round2.md item 2): the SAME wall (styles.css:5680) matches ":hover", ":focus"
   AND ":active" in one selector list -- only ":hover" was ever overridden above, so a
   keyboard-focused or mouse-pressed item still fell through to the wall's rgba(primary,.1)
   background / forced blue text. The mock's own ".ltile-menu button" (invoice-theme.css:230-235)
   declares no ":focus"/":active" state of its own, so per review-round2.md item 2 these mirror
   the ":hover" values above exactly, one rule per item using the SAME ":not(.danger)"/".danger"
   qualifier that already ties the wall's (0,4,0) specificity. ":focus-visible" is listed too even
   though matching it always implies matching ":focus" (so it never changes which elements match)
   -- explicit for readability, and so a future edit to one state cannot silently miss another. */
.if-ltile-menu .mud-menu-item:not(.danger):focus,
.if-ltile-menu .mud-menu-item:not(.danger):focus-visible,
.if-ltile-menu .mud-menu-item:not(.danger):active { background: rgba(var(--primary-rgb), .08) !important; color: var(--primary-color) !important; }
.if-ltile-menu .mud-menu-item.danger:focus,
.if-ltile-menu .mud-menu-item.danger:focus-visible,
.if-ltile-menu .mud-menu-item.danger:active { background: var(--ltm-danger-hover-bg) !important; color: var(--ltm-danger) !important; }
/* Round-7 (review-round2.md item 2, "keep any browser focus ring/outline the mock would show --
   do not remove accessible focus indication"): the mock's real <button> never resets outline, so
   in an unmodified browser it would show the native default focus ring on ":focus-visible" -- but
   this app's OWN styles.css:15104 `* :focus-visible { outline: none !important; }` is a blanket,
   unrelated global reset that strips that ring app-wide. Without a rule here, a keyboard user
   tabbing/arrowing through the tile menu would get NO visible focus indication at all, on top of
   the colour leak fixed just above. Restores one, scoped to the menu item, applying to BOTH items
   alike (a generic focus affordance, not a per-item colour choice) -- reuses the exact
   outline/outline-offset pairing already established elsewhere in this codebase for the same
   purpose (AiChatConversationList.razor.css's `.ai-conv-main:focus-visible`). [Round-8 correction,
   review-round3.md item 1: an earlier draft of this comment claimed specificity alone would win
   here and called "!important" an optional extra -- wrong. In the CSS cascade, importance is
   resolved BEFORE specificity (CSS Cascade Level 4, "Cascade sorting order"), so a normal
   (non-!important) declaration always loses to an important one no matter how specific it is;
   without "!important" the reset's `outline: none !important` would strip this outline again
   regardless of specificity. "!important" is therefore REQUIRED, not belt-and-braces. Specificity
   only decides the now-tied importance: ".if-ltile-menu .mud-menu-item:focus-visible" is (0,3,0),
   already higher than the reset's "* :focus-visible" (0,1,0 -- the universal selector contributes
   nothing), so this rule wins.] */
.if-ltile-menu .mud-menu-item:focus-visible { outline: 2px solid var(--primary-color) !important; outline-offset: -2px; }